在10小时内自动化设计系统的设置（50+ 屏幕、代码、文档）

Source: Dev.to

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

核心问题：翻译漂移

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

我们意识到问题在于试图同步两个不同的真相来源。于是我们尝试了 系统优先（System‑First）的方法。

系统优先流水线

我们没有走 设计 → 代码 的传统路径，而是构建了一个流水线（TheSSS AI），流程如下：

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

AI 先生成 规则（令牌、可访问性标准、间距尺度）以 JSON 形式呈现。随后基于这唯一的真相并行生成各类产出：

• 设计令牌（JSON）
• UI 原型（视觉资产）
• 组件库（React/Vue + Storybook）
• 文档（Markdown）

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

结果

我们可以在大约一个工作日内生成一个完整的“可交付基础” MVP——包括认证流程、仪表盘布局、设置页面以及基础的 CRUD 视图。系统会处理团队成员最不愿意做的琐事：

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

权衡

• “SaaS 外观” – 设计干净、可访问，但看起来像标准的 Bootstrap/SaaS 风格。如果你需要独特、获奖的品牌形象，这种方法会显得过于死板。它自动化的是设计的“乏味层”，而非创意层。
• 逻辑缺口 – UI 和状态管理的样板代码生成得很完美，但深层业务逻辑并未被理解。复杂的校验规则必须显式提示，否则比手写更费时。
• “弹出”问题 – 重新生成整个基础非常容易，但一旦有人为开发者修改了代码，再次运行 AI 可能会覆盖这些改动。我们仍在探索一种调和策略。

未解之问

• 还有其他人在尝试这种“同步生成”方法吗？
• 我们是否正走向一种初始代码库可以随需求变化而被重新生成的世界？
• 自动化搭建阶段会让它变得多余，还是仅仅会导致代码膨胀？