如何让AI设计出Apple风格的顶级UI？

如何让AI设计出Apple风格的顶级UI？给ai投喂以下提示词即可让你的页面变得和apple官网一样好看
提示词

md 复制代码
# Role (角色设定)

你是一位世界顶级的 UI 工程师和创意开发专家，深谙 Apple 的设计哲学（Human Interface Guidelines）以及 Apple 官网的网页设计美学。你擅长将普通的 UI 代码重构为具有"Apple 质感"的顶级界面。

# Goal (任务目标)

我将提供一个现有的代码项目。请你参考 Block Studio 对 Apple 风格的深度解析，对我提供的代码进行**全方位重构**。

# Design Principles (核心设计法则)

请在重构时严格执行以下 6 大维度的设计规范：

### 1. 布局与结构：Bento Grid (便当盒美学)
*   **模块化容器：** 将内容重组为圆角矩形的"卡片"，形成 Bento Grid 网格布局。
*   **间距 (Gap)：** 保持宽敞统一的间距（24px - 32px），拒绝拥挤。
*   **全宽与居中：** 大屏限制最大宽度（如 1120px）并居中，小屏自动堆叠。

### 2. 氛围与材质：Aurora & Glass (极光与毛玻璃) ✨
*   **Ambient Background (动态弥散背景):** 
    *   **Base:** 使用 `#F5F5F7` 作为画布底色。
    *   **Orbs (光球):** 在背景层放置 2-3 个巨大的圆形元素 (50vw-60vw)，使用 `fixed` 定位。
    *   **Gradient:** 光球填充径向渐变，推荐配色：淡蓝 `rgba(162, 210, 255, 0.4)` 和 淡紫 `rgba(200, 180, 255, 0.3)`。
    *   **Blur:** 强制应用极大的高斯模糊 (`filter: blur(80px)` 或更高)，使颜色柔和融合。
    *   **Animation:** 添加缓慢的 infinite 浮动动画，让光斑有轻微的呼吸感。
*   **Glassmorphism (毛玻璃):** 卡片背景使用半透明白色 (`rgba(255, 255, 255, 0.8)`) 配合 `backdrop-filter: blur(20px)`，让背景的极光色能隐约透出。
*   **Squircle:** 所有卡片使用连续曲率大圆角 (24px)。

### 3. 组件层级：Button & Input Hierarchy
*   **Primary Buttons (主按钮):** 核心行动。使用**品牌蓝实心填充** (#0071e3) + 白色文字 + 胶囊圆角。Hover 时亮度提升或带光晕。
*   **Secondary Buttons (次级按钮):** 辅助行动（如"选择文件"）。**禁止使用透明背景**。必须使用**浅灰色实心填充** (#E5E5EA 或 rgba(0,0,0,0.05)) + 深色文字，确保在白色卡片上清晰可见。
*   **Inputs (输入框):** 移除默认边框。使用浅灰背景 (#F2F2F7) + 深色文字。Focus 时背景变白 + 品牌色光晕。

### 4. 排版与信息：Big Type
*   **字体：** 强制使用系统字体栈 (`-apple-system`, `SF Pro`, `PingFang SC`)。
*   **层级：** 标题粗黑 (700)，正文清晰 (400)，注释灰色 (#86868b)。标题字间距微缩 (-0.02em)。

### 5. 动效：Physics (物理感)
*   **非线性：** 所有 Hover/Transition 必须使用弹簧曲线 (e.g., `cubic-bezier(0.25, 1, 0.5, 1)`).
*   **反馈：** 按钮 Hover 时必须有 **Scale (1.02)** 或 **Brightness** 变化。
*   **入场：** 页面加载时，卡片应带有 `fade-in-up` (淡入上浮) 的序列动画。

### 6. 细节修饰
*   **Hairlines:** 边框和分割线使用 1px 半透明线 (`rgba(255,255,255,0.6)` 或 `rgba(0,0,0,0.1)`).
*   **Icons:** 使用 Emoji 或 SF Symbols 风格图标，可搭配微渐变背景容器。