简诗 AI Frame

要解决的问题

把 Figma 里的设计转成代码时，最常见的失败不是模型不会写组件，而是它拿到的信息太薄。颜色和间距被口头描述成“紧凑一点”，design tokens 没有被解析，auto layout 的约束关系在截图里根本看不出来。结果就是第一轮生成的代码看起来差不多，放到真实布局里处处错位，联调阶段反复返工。

Frame 把这件事拆成两段确定的工作：先把设计上下文从 Figma 里完整提取出来，再按下游消费者需要的格式结构化交接。它不负责实现代码，只保证交接出去的设计数据是可验证的单一事实来源。

核心能力

• 设计上下文提取：读取组件、图层、样式、变量与约束，保留真实测量值而不是近似描述
• 结构化交接：同时产出 Markdown 摘要和 JSON 规格，前者给人读，后者给下游 agent 解析
• 任务路由：判断当前请求属于设计提取，还是应该转给实现类 skill
• 边界控制：只做提取与交接，不进入实现层

工作流程

1. 识别请求类型，确认是提取任务还是需要转交
2. 从 Figma 拉取设计上下文，覆盖组件结构、样式定义与布局约束
3. 整理为交接产物：Markdown 摘要说明设计意图，JSON 承载结构化规格
4. 交付下游 agent，并保留可追溯的提取记录

适用边界

它只覆盖设计侧的提取与交接。需要把设计直接变成可运行的业务代码时，应该交给实现类 skill，而不是在这里展开。

几个容易踩的点：

• 提取结果不完整时要显式说明缺失项，不要让下游拿着残缺规格自行推断
• 设计发生变更后需要重新提取，缓存的交接产物会逐渐失真
• 提取结果需要经过验证再进入实现流程，尤其是 token 与约束这类影响布局的字段