Google Labs开源15个UI设计技能：AI做界面前，先让它读DESIGN.md

Google Labs在GitHub上放了一个仓库，叫 stitch-skills。里面是15个面向AI Agent的UI设计技能，按Agent Skills开放标准组织，兼容Codex、Claude Code、Cursor、Gemini CLI、OpenCode等编码Agent。素材来自 Yarad 的Telegram频道，仓库和文档对得上。

先说它解决什么问题。

多数AI生成UI的问题出在约束缺失。每次对话都像重新开盲盒。你让它加个登录页，它给你一套新风格。颜色偏了，字体换了，按钮圆角一会儿大一会儿小。第一版经常能用，麻烦从第二版开始。

stitch-skills 的核心是把设计流程拆成可调用的技能，再用一个 DESIGN.md 文件把颜色、字体、组件规则固定下来。Agent每次生成或修改页面，都先读这份文件。多页项目才可能看起来像同一个产品。

15个技能分三组。

设计组：

generate-design：用文字或参考图生成界面，也能改现有屏幕、生成变体。
manage-design-system 和 extract-design-md：管理 DESIGN.md，或从现有前端代码里抽出设计系统。
code-to-design、extract-static-html、upload-to-stitch：把前端代码、静态HTML、本地素材搬进Stitch项目。

构建组：

react-components：把Stitch屏幕转成React组件，带校验和设计token一致性检查。
react-native：转React Native组件。
react-vite-dashboard：转React加Vite的后台面板，接TanStack Query和DESIGN.md token。
shadcn-ui：接shadcn/ui组件。
remotion：用Remotion生成项目走查视频。

工具组：

design-md：分析Stitch项目，生成DESIGN.md。
enhance-prompt：把模糊的UI想法改成Stitch能用的prompt。
stitch-loop：一个prompt生成多页网站，并做自动校验。
taste-design：生成偏非通用的DESIGN.md，强调排版和颜色校准。

适用项目很明确：产品官网、后台面板、App UI、原型、从想法到可开发界面。前置条件是先配置 Google Stitch MCP。没有这个，Agent连不上Stitch的设计能力。

安装方式分Agent。Codex走插件市场，Claude Code和Cursor可以用：

npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

OpenCode要手动复制skills，并在opencode.json里配Stitch MCP。仓库的Prerequisites写得很清楚，照着做就行。

仓库还明确写了：这不是Google官方支持产品，也不在Google开源软件漏洞奖励计划里。先当工具链试验，别直接当正式生产依赖。

我的判断：这套东西的看点不在“一键生成漂亮UI”。生成能力不缺。真正稀缺的是可重复的约束和流程。DESIGN.md像给Agent的记性，让它下次改按钮时记得上次为什么用这个蓝色。对开发背景的人，最值得先试的是 extract-design-md 和 react-components，一个把现有代码里的设计系统抽出来，一个把生成结果拉回组件代码。对非技术读者，理解成把设计规范写成Agent能读的文件，再让它按流程干活，就够了。

仓库：
https://github.com/google-labs-code/stitch-skills

素材来源：
https://t.me/yarad_ai