google-labs-code/stitch-skills

What it solves

该项目提供了一套专门的技能与插件，供 AI 编码代理人集成到 Google Stitch 中。它通过允许代理人生成设计、将现有代码转换为设计，并将其设计转换为生产就绪的前端组件（例如 React 或 React Native），从而填补了设计与代码之间的鸿沟。

How it works

它实现了 Agent Skills 开放标准，提供了一套结构化的指令、脚本与资源，供 AI 代理人（如 Codex, Codex, Claude Code, Cursor, 和 OpenCode）可以加载。这些技能与 Stitch MCP (Model Context Protocol) 服务器进行交互，执行如从 Web App 中提取 HTML、通过 DESIGN.md 文件管理设计系统、以及自动化创建 UI 组件的任务。

Who it's for

使用 AI 编码代理人并希望自动化 Google Stitch 中的 UI 设计与前端实现之间的工作流的开发者与设计师。

Highlights

• Design Automation: 从文本/图像生成新屏幕，或将前端代码转换回 Stitch 设计。
• Code Generation: 将 Stitch 设计转换为 React, React Native, 或 React + Vite 仪表板。
• Design System Management: 通过 DESIGN.md 文件提取并应用设计令牌 (Design Tokens) 與 Häthems
• Multi-Agent Compatibility: 与多种编码代理人兼容，包括 Codex, Claude Code, Cursor, 和 OpenCode。
• Visual Walkthroughs: 包含一个使用 Remotion 生成项目演示视频的技能。