🏗️ MD3 驱动的“技能化”部署：从 Figma 到 Cursor 的自动化进阶指南
输入“/”快速插入内容
🏗️ MD3 驱动的“技能化”部署：从 Figma 到 Cursor 的自动化进阶指南
🏗️ MD3 驱动的“技能化”部署：从 Figma 到 Cursor 的自动化进阶指南
用户5392用户53923月29日修改
🎹
核心哲学： 任何需求只要重复做 3 次以上，就必须封装成“Skill”。在本流程中，我们将 UI 组件、动态色彩逻辑和动效暗示封装为可调用的代码模块，实现生产力的指数级跳跃。
🛠️ 一、 环境预设：Material Design 3 基座
在开始之前，确保你的开发环境已具备 MD3 的动态特性支持。
1.
Cursor 设置：确认模型为 Claude 3.5 Sonnet。
2.
技术栈建议：使用 React + Tailwind CSS + Framer Motion（用于实现 MD3 标准动效）。
3.
💻 二、 快速初始化：构建“Skill”容纳器
打开 Cursor 终端 (Cmd + J)，复制并执行以下命令。我们将采用组件库的形式来组织代码，便于后续“封装 Skill”。
Bash
代码块
# 1. 创建项目并进入
npm create vite@latest md3-skill-system -- --template react
cd md3-skill-system
# 2. 安装 MD3 核心支持库# framer-motion 处理动效, lucide-react 处理 MD3 风格图标
npm install tailwind-merge clsx framer-motion lucide-react
# 3. 启动项目
npm run dev
🧠 三、 核心步骤：编写“封装 Skill”的高级提示词
这是本教程的灵魂。我们不再让 AI 只是“画个页面”，而是要求它“创造一套可复用的 MD3 Skill 系统”。
操作： 打开 Cursor Composer (Cmd + I)，上传 Figma 截图，并粘贴以下提示词：
Plaintext
代码块
请作为资深全栈架构师，根据上传的 Figma 截图，使用 React + Tailwind 搭建一套基于 Material Design 3 (MD3) 规范的“Skill 模块化系统”。
核心要求（必须封装成高度复用的 Skill 模块）：
1. 动态色彩 (Dynamic Color)：基于截图主色调，利用 CSS 变量实现一套类似 Material You 的色彩方案（包含 primaryContainer, surface, onSurface 等）。
2. 圆角感 (Rounded Corners)：严格执行 MD3 规范，容器使用 extra-large (28px) 或 full 圆角，按钮使用 full (pill shape)。
3. 强烈层级 (Elevation)：利用 MD3 的 Surface Tonal Elevation 代替传统阴影。通过不同的背景色深度来暗示层级，而非简单的黑阴影。
4. 动效暗示 (Motion)：所有交互必须包含“物理感”反馈。按钮悬浮需有 Spring 缩放效果，列表加载需有交错排版动效（使用 Framer Motion）。
5. Skill 封装哲学：如果你发现某个 UI 模式（如：带图标的卡片、响应式容器）出现了 3 次，请立刻将其封装成独立的 React 组件（Skill），并在主页面调用。
代码产出：请先生成核心 ThemeProvider 和基础 Skill 组件库，再还原页面布局。
✨ 四、 动效与可访问性调优 (Cmd + K)
MD3 的精髓在于动态响应。选中生成的组件代码，使用 Cmd + K 进行精修：
4.
增加动效暗示：
"为这个 Skill 组件增加 MD3 标准的 'Standard Easing' 动效。当用户点击时，产生一个从点击点扩散的涟漪效果（Ripple Effect），并伴随轻微的 Surface 抬升感。"
5.
强化可访问性：
"检查所有色彩对比度，确保符合 WCAG AA 标准。为所有按钮 Skill 增加 aria-label，并确保 Tab 键聚焦时有清晰的 Outline 状态。"
🚀 五、 一键部署：从代码到线上
1.
代码入库：
Bash
代码块
git init
git add .
git commit -m "feat: deploy md3 skill-based system"# 关联你的 GitHub Repo 即可