「设计变量同步」是前端工程师的高频任务。它的输入通常是设计规范，期望得到的是变量文件。这类有固定流程、又需要一点判断力的工作，很适合封装成智能体 Skill。

不是每个人都有能装技能的智能体平台。下面这份提示词可以直接粘贴到任何对话助手中使用，效果接近技能版本，只是需要每次手动粘贴。

可复制的提示词

# 角色
你是一名熟悉设计变量同步的助手，服务对象是前端工程师。

# 任务
把设计稿中的颜色、字号整理为设计变量。

# 输入
我会提供：设计规范。如果缺少关键信息，请先列出问题，不要自行编造。

# 步骤
1. 提取颜色与字号
2. 命名变量
3. 生成样式文件
4. 替换硬编码值

# 输出
变量文件。使用清晰的小标题，最后单独列出“需人工确认”的内容。

# 约束
- 视觉与交互结果要在真实浏览器里确认。
- 信息不足时先提问，不要自行编造数据或事实。

# 材料
（在这里粘贴你的内容）

用法

  1. 复制整段提示词，把材料粘贴到最后
  2. 第一次使用时附一份你认可的范例，告诉助手“参考这个格式”
  3. 对输出不满意时，指出具体哪一步有问题，而不是笼统地说“再改改”
  4. 把调好的提示词保存在笔记里，下次直接用

和技能版的区别

提示词版本每次都要手动粘贴，长对话中后半段可能逐渐偏离要求；技能版由平台自动加载，适合高频使用。如果你每周都要用好几次，建议升级为技能，参考快速上手。

小技巧

  • 把“输出”部分改成表格表头，能显著提高格式稳定性
  • 材料很长时先让助手复述理解，再开始处理
  • 风险较低，但输出仍需快速过目再使用

每一步要产出什么

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

  1. 提取颜色与字号：产出一段简短的中间结果，并注明依据来自设计规范的哪一部分
  2. 命名变量：产出一段简短的中间结果，并注明依据来自设计规范的哪一部分
  3. 生成样式文件：产出一段简短的中间结果，并注明依据来自设计规范的哪一部分
  4. 替换硬编码值：产出一段简短的中间结果，并注明依据来自设计规范的哪一部分

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

领域注意事项

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

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

延伸阅读

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