Design-to-Code

来源： wiki/sources/tools-2026-06-obsidian-images、wiki/sources/agent-2026-06-solo-dev-vs-client-dev
相关概念： wiki/concepts/text-to-ui、wiki/concepts/ai-coding-agent、wiki/concepts/vibe-coding

Design-to-Code 是将视觉设计稿（Figma、Sketch、图片）自动转化为生产级前端代码的工程化流程，强调设计语义保留与代码可维护性。

要点

• 两阶段管线：视觉理解（Vision Model 提取布局与样式）+ 代码生成（代码专用模型输出源码）
• 关键难点在于响应式适配、组件复用以及设计 token（颜色/字体/间距）的一一映射
• 正在从"一次性转换"演进为"双向同步"：设计变，代码自动跟新

与 OpenClaw 的关系

OpenClaw 的 Skill 体系可以将 Design-to-Code 封装为 "/figma2skill" 指令，让非设计师用户也能基于视觉输入生成可执行的 Agent 前端。