设计师的 AI Coding 指南
机制专题
如果你要把设计类 AI 协作中的规则文件、Figma / MCP 能力和工具入口拆开看，继续进入这些子页：
其中 工具匹配与选型 解决“先判任务再选入口”，工具专题 解决“某个具体工具到底适不适合这类任务”。前者偏方法，后者偏产品参考和实战场景。
想直接复制更稳的输入和验证结构：去 设计训练包模板。
典型 AI Coding 场景
1. 设计稿到代码转换
- 从 Figma/Sketch 设计稿生成组件代码
- 生成响应式布局代码
- 转换设计 token 为 CSS 变量
- 相关工具：Cursor 快速开始
2. 设计系统维护
- 生成组件库文档
- 维护设计 token 一致性
- 生成组件使用示例
- 相关工具：Windsurf 快速开始
3. 原型验证
- 快速生成交互原型
- 验证动画效果
- 测试用户流程
- 相关教程：Spec-First Runbook
4. 可访问性验证
- 检查颜色对比度
- 生成 ARIA 标签
- 验证键盘导航
- 相关标准：AI 开发规范
5. 设计文档生成
- 生成组件使用指南
- 编写设计决策文档
- 创建设计规范
- 相关教程：工作流目录
推荐工具与 工作流
主入口选择
- IDE-first：Cursor 或 Windsurf
- 平台入口：GitHub Copilot
- 设计工具入口：工具专题
推荐工作流
- Spec-First - 设计规范驱动
- Bugfix / Refactor / Test - 组件优化
- Windsurf 维护到 PR 案例 - 实战参考
默认训练包
| 当前阶段 | 建议先复制什么 | 目的 |
|---|---|---|
| 设计稿准备交付 | Figma Handoff 包模板 | 锁定节点、资 产和限制条件 |
| 组件状态还没讲清 | 组件状态合同模板 | 防止只交默认态 |
| 设计系统或 token 在整理中 | Token 与约束模板 | 固定命名、约束和输出位置 |
| 原型或还原要走查 | 原型验证与证据模板 | 把录屏、截图和结论收口 |
想直接看一份填好的成品：去 示例：订阅看板卡片训练包。
可复用资产
规则文件模板
## Design System Rules
- Follow design token naming conventions
- Ensure all components meet WCAG 2.1 AA standards
- Use semantic HTML elements
- Maintain consistent spacing scale (4px base)
- Document component variants and states
Prompt 模板
设计稿转代码 Prompt：
根据以下设计要求生成组件代码：
- 组件名 ：[ComponentName]
- 设计稿：[Figma链接或描述]
- 样式要求：[颜色、间距、字体等]
- 响应式断点：[mobile/tablet/desktop]
- 可访问性：确保 WCAG 2.1 AA 合规
设计 Token 生成 Prompt：
从以下设计规范生成 CSS 变量：
- 颜色系统：[主色、辅助色、中性色]
- 间距系统：[4px 基准]
- 字体系统：[字体族、字号、行高]
- 圆角系统：[圆角值]
输出格式：CSS 自定义属性
跨团队交付物
给前端工程师
- 设计稿标注
- 组件规范文档
- 设计 token 定义
- 交互动画说明
给产品经理
- 设计方案说明
- 用户体验优化建议
- 技术实现限制说明
- 设计迭代记录
给测试工程师
- 视觉还原验收标准
- 交互测试用例
- 可访问性测试清单
- 多端适配要求