在 10 小时内自动化 design system 设置（50+ 屏幕、代码、文档）

Source: Dev.to

我们一直在尝试自动化 Web 项目“第一个月”的工作——即设置仓库、配置 Tailwind、构建基础组件以及为间距争论的繁琐阶段。通过从共享需求集同时生成设计资产和代码，我们将通常需要 8‑12 周的基础搭建压缩到大约 3‑10 小时。

它并不完美，设计也不会因原创性而获奖，但对于 B2B 仪表盘来说，感觉我们已经可以不再手动编写样板代码了。

核心问题：翻译漂移

通常，设计师会交付一个静态的 Figma 文件，开发者再将其转化为动态代码。两者几乎会立刻产生偏差。大多数 AI 工具只能生成代码片段或单个界面，导致你得到一个“弗兰肯斯坦”式的 UI——标记不统一、间距各异，且缺乏共享的架构。

我们意识到问题在于试图同步两个不同的真相来源。因此我们尝试了一种 系统优先 的方法。

系统优先管线

我们没有采用 Design → Code，而是构建了一个管线（TheSSS AI），其工作方式如下：

1. 需求 →
2. 上下文感知解释 →
3. 治理

AI 首先以 JSON 形式生成 规则（代币、可访问性标准、间距比例）。随后它从这唯一的真相并行生成各类产物：

• 设计代币 (JSON)
• UI 原型 (视觉资产)
• 组件库 (React/Vue + Storybook)
• 文档 (Markdown)

因为 React 按钮组件和 Figma 原型是基于同一父数据同时生成的，所以不存在转换错误——它们天然匹配。

结果

我们可以在大约一个工作日内生成完整的“Foundation‑Ready” MVP——认证流程、仪表板布局、设置页面、基本的 CRUD 视图——系统会处理团队成员不喜欢做的琐碎工作：

• 可访问性注释
• 响应式变体
• 文档文件

权衡取舍

• “SaaS 外观” – 设计简洁且易于访问，但看起来像标准的 Bootstrap/SaaS 风格。如果你需要独特、获奖的品牌形象，这种方式会显得过于僵硬。它自动化了“乏味”的设计层面，而不是创意层面。
• 逻辑鸿沟 – UI 和状态管理的模板代码生成得很完美，但深层业务逻辑并未被理解。复杂的验证规则必须明确提示，所需时间可能比手写代码更长。
• “弹出”问题 – 重新生成整个基础结构很容易，但一旦人工开发者修改了代码，重新运行 AI 可能会覆盖这些更改。我们仍在探索一种调和策略。

未解答的问题

• 其他人是否在尝试这种“同步生成”方法？
• 我们是否正走向一个初始代码库可以被丢弃并在需求变化时重新生成的世界？
• 自动化设置阶段会使其变得过时，还是仅仅会导致代码膨胀？