用 Google Stitch 重构设计系统

大多数 AI 设计工具在你尝试将它们接入真实产品工作流之前都感觉像玩具然后一切都崩塌了。Google Stitch 有趣的地方在于它试图将设计视为可编程的表面而不仅仅是一个漂亮的画布。1、Google Stitch 到底是什么如果忽略营销宣传Stitch 基本上是一个 AI 优先的设计系统编辑器。它介于 Figma 级别的设计和生产 UI 代码之间。你用自然语言或结构化数据描述组件、模式和约束。Stitch 使用 Gemini 来生成、重构并将这些部分连接成看起来像真正产品的东西。它不只是能画屏幕的 AI。它更像是能用你的产品词汇与你一起编辑和组合设计系统的 AI。对于工程师来说有趣的部分是这样的。Stitch 希望成为以机器可理解的方式定义设计 token、组件和流程的地方。这就是它变得有用的地方。2、为什么 Stitch 对工程师很重要设计曾经是单向导出。设计师发送 Figma 链接工程师将它们逆向工程为代码。有了 AI 参与这个模型就崩塌了。你要么给模型提供结构化的设计知识要么得到随机的 Dribbble 克隆。Stitch 试图解决三个真正的问题。第一产品团队希望 AI 生成符合其品牌和 UX 模式的流程。这意味着 AI 需要访问可重用的组件、约束和文案规则。第二工程师厌倦了与真实组件零映射的AI 模型。你不能从任意像素自动生成 React 或 Flutter 并期望它可维护。第三设计系统日益庞大且文档不足。AI 可以帮助导航它们但前提是系统以数据形式表示而不仅仅是帧。Stitch 是 Google 对这个中间层形式化的尝试。把它想象成设计系统即代码附带 AI copilot。3、Stitch 如何融入技术栈如果你习惯正常的产品流水线它大概是这样的。产品规格、UX 流程、Figma 屏幕、设计系统、组件库、实现。Stitch 试图同时存在于三个位置。它想成为用 AI 探索和迭代流程的地方想成为你设计系统的结构化表示想成为从AI 生成的 UI到代码中真实组件的桥梁。从高层看你可以想象 Stitch 内部的三层。理解登录屏幕、“空状态”、错误 toast的语义层。知道主按钮、“卡片”、导航栏的组件层。知道你的间距、排版、颜色和可访问性规则的约束层。Gemini 在此基础上工作。你用产品语言与它对话它从这些层组合而不是从零开始幻觉。这是你应该关注的模式。不是 Stitch 的具体 UI而是 AI 设计必须扎根于结构化系统的理念。4、设计系统作为 AI 燃料如果你没有设计系统AI 设计工具会给你混乱。如果你有好的设计系统AI 就成为力量倍增器。Stitch 假设你有或想要一个看起来像数据的设计系统。可以序列化、查询和转换的 token、组件、变体和规则。在实践中这意味着类似这样的东西。颜色定义为 token而不是散落在 Figma 中的十六进制代码。排版定义为语义角色而不是随机字体大小。组件定义带有 props 和状态而不仅仅是帧。布局规则表达为约束而不是目测间距。如果你想 AI 生成工程师能实现的屏幕你无论如何都需要这些。Stitch 只是在推动你将其形式化。这里有一个简单的思维模型。你的设计系统变成 APIGemini 是客户端你的产品流程是响应。一旦你这样看你就能想象一些有趣的工作流。5、用结构化方式提示 UI大多数用 AI 设计工具今天接受模糊的提示如给我一个 SaaS 工具的仪表板。Stitch 试图转向引用真实原语的结构化提示。不是自由形式的文本你最终得到更接近这样的东西。{ goal: Create a billing settings screen for an existing SaaS admin app, brand_tone: minimal, enterprise, low color saturation, components: [PageLayout, FormSection, PrimaryButton, SecondaryButton, AlertBanner], constraints: { max_columns: 2, primary_action_position: bottom-right, requires_breadcrumbs: true }, states: [default, loading, error, success] }这不是官方的 Stitch 语法但它抓住了要点。你不是在要求像素你是在要求在约束下组合已知的片段。然后 Gemini 可以这样响应。使用带面包屑的 PageLayout为付款方式和发票放置 FormSection将 PrimaryButton 附加到更新付款方式等。输出仍然是可视化的但它映射到你的词汇表。这就是让它可实现的原因。作为工程师你应该思考如何以这种结构化的方式将你的设计系统暴露给 AI。Stitch 是一种实现但模式是可移植的。6、从 Stitch 到代码有趣的工程问题始终是这如何变成不是噩梦般难以维护的代码Google 通过各种内部工具和实验一直在推动设计转代码。Stitch 看起来是 AI 被用来弥合差距的下一个迭代。正确的模型不是一键导出到生产 React。正确的模型是AI 建议易于转换到你现有组件库的组件组合。你希望 AI 以你的 Button、Card、LayoutGrid 等来思考。而不是带有内联样式的通用 HTML。一个现实的流程可能是这样的。你在 Stitch 能理解的 schema 中定义你的生产组件。你将设计组件映射到代码组件包括 props 和变体。Stitch 生成使用这些映射组件的屏幕。你导出一个轻量级的表示你的 codegen 或工程师可以连接。这个表示可能是 JSON、YAML 或自定义的东西。关键是映射是显式的并且有版本控制。以下是 React 应用的映射层可能的样子的微小示例。// design-system-map.ts export const componentMap { PrimaryButton: { react: Button, props: { variant: primary } }, SecondaryButton: { react: Button, props: { variant: secondary } }, AlertBanner: { react: Alert, props: { variant: warning } } }现在当 Stitch 或 Gemini 谈论PrimaryButton时你确切知道它在代码中意味着什么。你可以在此基础上构建自己的从 AI 世界到 UI 库的桥梁。这就是工程杠杆。你没有被锁定在魔法导出中你控制映射。7、AI 用于重构设计系统Stitch 不仅仅是生成新屏幕。AI 也非常擅长清理混乱的设计系统。如果你有一个包含 40 个略有不同按钮的 Figma 文件你知道这种痛苦。你也知道没有人愿意手动规范化它们。Gemini 可以扫描你的组件并建议合并、抽象和 token 化。它可以说这 12 个按钮仅在 padding 上不同考虑使用 size prop或这 5 个卡片共享 90% 的样式。这与代码重构工具的工作方式类似。你得到建议而不是强制更改。对于从未有时间清理设计系统的团队来说这是一件大事。你可以引导一个更结构化的系统然后 AI 可以使用它进行生成。这也意味着你的设计系统可以持续演进。新模型在 mock 中出现AI 建议如何将它们折叠回系统。这个反馈循环才是它变得强大的地方。8、AI 作为设计 Linter一旦你的设计系统结构化了你可以将 AI 视为设计的 linter。不仅是这个颜色对比度不达标而是这个布局违反了你自己的模式。想象一个 PR 工作流其中设计差异由了解你系统的 AI 检查。它可以标记不一致的间距、次要操作的误用或偏离品牌的文案。Stitch 定位为那个上下文持有者。它知道你的组件、token 和流程因此可以对照它们评判新工作。这不是关于取代设计师。而是关于自动捕获低级不一致就像 ESLint 捕获愚蠢的代码错误一样。工程师直接受益。更少的意外重新设计因为有人使用了流氓按钮样式。9、多模态上下文是真正的优势Google 的 AI 栈是重度多模态的。Gemini 可以在一个上下文中查看截图、代码、文本和结构化设计数据。Stitch 可以利用这一点。它能推理屏幕外观、实现方式以及如何融入流程。这与只能看到矢量帧或只能看到代码的工具不同。你可以问为什么这个流程感觉比入职流程慢并得到基于布局和文案的答案。或者显示所有请求信用卡信息的屏幕并使它们一致。AI 可以在语义上遍历设计空间而不仅仅是逐文件。作为工程师这意味着你可以在更高层次查询产品。不仅仅是在仓库中搜索 Button而是显示所有破坏性操作以及它们的样式。Stitch 加 Gemini 是暴露这种能力的一种方式。模式再次重要将设计、代码和产品语义统一到一个可查询的空间中。10、这里棘手的地方这里存在真正的挑战你应该意识到它们。AI 设计不是已解决的问题。设计系统的版本控制仍然不成熟。一旦 AI 在编辑你的系统你需要可审计性和回滚能力。将设计组件映射到代码组件是脆弱的。如果你的前端栈发生变化你的映射层必须跟上。AI 可以创建看似合理但错误的流程。你仍然需要人工审查 UX、伦理和边界情况。还有一个文化问题。如果工程师和设计师不信任 AI它就会变成摆设。缓解的方法是将 AI 视为合作者而不是神谕。你让人类参与其中记录变更审查差异。Stitch 有趣之处在于它似乎在设计时考虑到了这一点。它不是试图绕过设计师而是试图给他们一个可编程的表面。11、如何为 Stitch 这样的工具做准备你可能不会直接使用 Stitch但这类工具正在进入每个技术栈。你现在就可以准备。首先投资一个真正的设计系统。Token、组件、文档和到代码的显式映射。其次将你的设计系统表示为数据。即使是组件和 token 的简单 JSON schema 也是一大步。第三定义你的产品词汇表。AI 可以重用的流程、状态、角色和用例的名称。第四从小处开始 AI 辅助设计。用它来生成变体、空状态或错误流程而不是你的整个应用。最后让你的映射层在版本控制下。像对待代码一样对待它附带审查和测试。如果你这样做像 Stitch 这样的工具会感觉很自然。如果你不做你会得到美丽但不可用的 mock。12、最后的思考Google Stitch 之所以有趣不是因为它用 AI 画屏幕而是因为它将设计视为结构化、可编程的数据。这是整个行业正在移动的方向。对于工程师来说要点很简单。设计系统正在变成 API而 AI 是主要的客户端。如果你以模型能理解的方式暴露你的组件、token 和流程你会获得杠杆。更快的迭代、更好的一致性以及更少的手动在设计和代码之间的翻译。如果你把一切都锁定在不透明的 Figma 文件和部落知识中AI 将主要生成噪音。Stitch 是推动你清理这些的助推器。将你的设计系统视为架构的一部分。然后让 AI 帮助你探索、重构和扩展它。原文链接用 Google Stitch 重构设计系统 - 汇智网