「设计稿转代码」是前端工程师的高频任务。它的输入通常是设计稿，期望得到的是页面代码。这类有固定流程、又需要一点判断力的工作，很适合封装成智能体 Skill。

把下面的清单保存下来，每次使用或修改「设计稿转代码」技能时过一遍。

编写时

  • description 写清做什么、什么时候用
  • 输入写明需要设计稿，并要求缺信息先提问
  • 步骤为编号列表：识别布局层级、映射到组件、处理响应式、标出需确认的间距与颜色
  • 输出写明页面代码的结构
  • 约束包含领域底线与不可逆操作的处理方式
  • 长资料拆到参考文件

上线前

  • 6 类测试输入全部通过
  • 权限按最小范围配置
  • 技能文件中没有密钥和真实个人信息
  • 有负责人和变更记录

每次使用时

  • 输入材料已脱敏或确认可以交给所用平台
  • 观察智能体是否加载了技能
  • 查看“需人工确认”清单
  • 对照原始材料抽查关键信息
  • 风险较低，但输出仍需快速过目再使用

使用后

  • 记录明显的问题样例
  • 输出被大幅修改时，分析原因并考虑改技能
  • 定期检查平台更新是否影响技能

每一步的快速核对

  • 识别布局层级
  • 映射到组件
  • 处理响应式
  • 标出需确认的间距与颜色

清单只是底线，深入内容见常见坑与安全审查。

准备一份好范例

在技能的参考资料里放一份你认可的页面代码范例，往往比多写十条规则更有效。好范例应当：

  • 来自真实工作，但已去除个人信息和敏感数据
  • 体现团队习惯的结构、措辞和详略程度
  • 包含一处“需人工确认”的标注示范，让智能体学会如何表达不确定
  • 篇幅适中，不要比平时的产出长太多

范例不必多，一到两份即可；太多范例反而会让智能体机械模仿某一份的细节。

每一步要产出什么

把每一步的中间产出写清楚，智能体就不容易跳步，人也方便定位问题：

  1. 识别布局层级：产出一段简短的中间结果，并注明依据来自设计稿的哪一部分
  2. 映射到组件：产出一段简短的中间结果，并注明依据来自设计稿的哪一部分
  3. 处理响应式：产出一段简短的中间结果，并注明依据来自设计稿的哪一部分
  4. 标出需确认的间距与颜色：产出一段简短的中间结果，并注明依据来自设计稿的哪一部分

最后一步之后，再把这些中间结果汇总成页面代码。中间结果可以折叠或省略展示，但在技能指令中要求智能体“先完成再汇总”，能明显减少遗漏。

领域注意事项

「设计稿转代码」属于前端与界面领域，使用者多是前端工程师，工作环境通常是浏览器、组件库与设计稿。这个领域最重要的一条底线是：视觉与交互结果要在真实浏览器里确认。

建议把这条底线原样写进技能的约束部分，而不是指望智能体自己意识到。同时，在团队内部明确：智能体给出的页面代码只是初稿或建议，最终由谁签字确认、出了问题由谁负责。

延伸阅读

说明：文中的配置、代码与目录结构均为示意，用于说明思路；各平台的入口、字段名与能力会更新，落地前请以对应官方文档为准。示例中的数据与场景为虚构，不代表真实案例。