关于 build-design
build-design 是一项在现有项目中按设计实现界面并核对结果的技能，强调从设计源读取数值、沿用项目已有令牌和组件，并限制改动范围。
主要功能
- 01从 Figma 或图片读取设计数值
- 02映射到现有令牌和组件
- 03仅实现指定画框与状态
- 04对照设计检查渲染结果
- 05报告偏差和未解决事项
适用场景
- 01在现有代码库实现 Figma 画框
- 02按注明估算值还原截图设计
- 03检查指定断点下的渲染布局
MCP 相关
对于 Figma 设计，该技能要求 Agent 搜索并使用 Figma MCP 工具。若工具不可用，应请求连接，而不是凭猜测实现。
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/build-design确认已加载。
附带文件agents/openai.yamlfigma.md
详细介绍
构建设计
此技能会将设计转化为与之匹配的代码。它会从源头读取设计，使用项目现有的内容进行构建，然后将结果与设计进行比对，确认无误后才算完成。
以设计为准。数值来自设计文件，绝不依据你的个人喜好或你在其他地方喜欢的模式。设计中没有展示的改动就是偏差，而是否接受偏差由用户决定。
此技能不负责领域规则。如果设计与某条规则冲突，就按设计构建，并向其负责人报告冲突。对比度是 better-accessibility 的要求，也是 better-colors 的衡量指标。焦点和语义属于 better-accessibility，字体属于 better-typography，间距和结构属于 better-layout。调色板属于 better-colors，文案属于 better-writing，表面、图标和动效属于 better-ui。审查已完成的工作使用 interface-review，探索其他方案使用 variant，对组件进行压力测试使用 break。
1. 从源头读取设计
Figma 链接意味着使用 Figma MCP。在说无法使用之前，先搜索可用和延迟加载的工具，查找 figma，因为服务通常会以出乎意料的名称出现。如果某个服务只列出了一个身份验证工具，说明它已连接，但尚未登录，请用户进行身份验证。如果完全没有 Figma 工具，请用户连接一个；在此期间，不要凭记忆或猜测进行构建。figma.md 说明了要调用哪些工具，以及每个工具会返回什么。
截图或导出的图像没有可直接读取的数值。尺寸是相对于截图的比例，因此要说明你假设的缩放比例，并将每项测量都视为估算值。如果有 Figma 链接，请向用户索取，因为它能完全取代所有估算。
将本次任务的范围限定为指定的画板。展示同一内容、但宽度不同的画板，是一个内容在多个断点下的呈现，而不是多个独立内容。
当你掌握了范围内每个画板的截图，以及其中的间距、尺寸、圆角、颜色、字体和所用组件的数值时，此步骤即告完成。对于 Figma 文件，这些数值是精确的；对于图像，这些数值是根据你说明的缩放比例进行的估算。
2. 将设计映射到项目
编写任何内容之前，先阅读项目的设计令牌和组件库。然后，将每个设计值映射到现有内容：
| 设计中的内容 | 代码中的对应项 |
|---|---|
| 已绑定的变量或样式 | 同名或数值相同的令牌 |
| 与某个令牌相同的原始值 | 该令牌 |
| 没有对应令牌的原始值 | 最接近的现有令牌，并在报告中标注为已取整 |
| 组件实例 | 项目中同名的组件，并采用设计所示的变体 |
| 项目中没有对应项的组件实例 | 在原位置使用普通标记，并将其列为偏差，同时询问是否应该创建组件 |
| 一次性图层组 | 在原位置使用普通标记，不要创建新组件 |
绝不要为了匹配数值而添加令牌、组件变体或任意数值。如果取整会明显改变设计，就先停下来询问该如何处理。这指间距或尺寸相差超过 2px，或颜色落在了不同的色阶。
检查设计所需的数据，并将其连接到现有数据。如果某部分所需的后端尚不存在，就将该部分构建为由属性提供数据的 UI，并在报告中注明尚未接线。
3. 只构建设计展示的内容
实现画板、画板定义的断点，以及文件中绘制的状态，例如悬停、空状态或错误状态。文件未绘制的状态不由你来设计。保留现有组件的默认行为，并将缺失的状态列出。
保持周边内容原样。不要修改相邻文案，不要替换图标，也不要顺手清理其他内容。差异范围超出设计，是最常见的出错原因。
4. 对照设计稿
在每个画框宽度下渲染构建结果，并与设计稿截图并排比较，逐个检查元素。对照收集的从源头读取设计稿中的属性。“间距是 12px，设计稿是 16px”是具体发现。“感觉有点挤”不是。
如果有浏览器，就在每个宽度下截图并进行比较。如果没有浏览器，就提供本地 URL 和待检查的宽度，并说明尚未验证。不要报告自己没看过的匹配结果。
修复你造成的每一处不匹配，然后再次比较。当剩下的差异都只是取整问题或疑问时，这一步才算完成。
5. 报告并停止
| 元素 | 设计稿 | 构建结果 | 状态 |
|---|---|---|---|
| 卡片内边距 | 20px | p-5 | 匹配 |
| 标题字号 | 15px | text-sm，14px | 取整到设计令牌 |
| 徽标 | 实心胶囊 | 文本标签 | 有差异，已询问：不存在徽标组件 |
然后逐项列出，每项一行；没有内容的列表就省略：
- 未接入。 后端尚未就绪时，哪些内容由 props 渲染。
- 缺失状态。 设计稿未绘制的状态。
- 领域冲突。 设计稿违反规则之处，以及负责该规则的技能。
最后说明构建正在何处运行，以及你在哪些宽度下进行了比较。
完成前检查
| 发现 | 修复 |
|---|---|
| 尚未搜索任何工具就写了“Figma 未连接” | 先搜索工具中的 figma |
| 代码中的值只出现在截图里，没有出现在任何 Figma 响应中 | 从设计上下文中读取这些值 |
差异中出现 w-[343px] 之类的任意工具类或原始十六进制颜色值 | 映射到设计令牌，或在取整问题明显时询问 |
| 为非组件画框在 components 目录下新增了文件 | 改为内联普通标记 |
| 设计稿未绘制的加载或错误分支 | 移除，保留默认状态，并列为缺失状态 |
| 差异中包含没有任何画框涉及的文件 | 还原这些文件 |
| 更改了设计稿未展示的对比度或焦点状态 | 恢复设计稿状态，并向其负责人报告冲突 |
| 声称完成比较，却没有构建结果截图 | 渲染每个画框宽度，或说明尚未验证 |
| 报告中未提及硬编码的示例数据 | 列入未接入 |