stitch::code-to-design作者 Google Labs

Stitch Code to Design Skill.

Claude Code 和 Codex 的 UI 设计 skill：通过静态 HTML 和设计系统提取将前端代码转换为 Stitch 设计。

Web & UI
设计文件

google-labs-code/stitch-skills · plugins/stitch-design/skills/code-to-design/SKILL.mdSKILL.md

--- name: stitch::code-to-design description: - Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill when the user's intent is to move existing web apps or React/Angular/Vue components into Stitch (e.g., requests to "save", "migrate", or "upload"). You must use this skill even for simple "save" operations, as it is the only way to … --- ## Workflow

前言和章节标题读取自 2026-09-14 的上游文件 · 完整 3,645 字符

01 功能说明

stitch::code-to-design Skill 在 Claude Code 和 Codex 中的功能

摘要、工作流与产物，均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

通过串联三个 skill——extract-static-html、extract-design-md 和 upload-to-stitch——将现有前端代码库（React + Vite、Next.js、Angular、Vue）转换为 Stitch Design。它面向需要将运行中的应用或已构建的 Web 目录迁移到 Stitch 中继续迭代的设计师和开发者。

该工作流会提取一个自包含的 HTML 文件，将设计系统写入 .stitch/DESIGN.md，在 Stitch 中创建设计系统，然后以该页面路由路径命名的屏幕上传该 HTML。这是保存、迁移或上传请求所必须走的路径，HTML 验证是可选的，且从不会阻塞运行。

它产出什么

一个自包含的 HTML 文件，例如 /path/to/extracted/standalone.html。
以 DESIGN.md 形式写成的设计系统描述。
上传到 Stitch 的屏幕，其名称和标题标明了它在应用中所对应的路由。

查看示例提示词 ↗

工作方式

01
提取一个自包含的 HTML 文件
交由 extract-static-html skill 处理，该 skill 基于构建输出或运行中的开发服务器（如 Vite 或 Angular CLI 的 ng serve）工作，并生成一个独立的 HTML 文件。
02
提供验证方式而不中断流程
提取完成后，你会告知用户文件所在位置，以便他们自行在浏览器中检查，而运行会继续进行到下一步，不受影响。
03
将源代码分析为设计系统
extract-design-md skill 会读取项目的组件、样式表和主题配置，其结果会写出为一个设计系统文件。
04
在 Stitch 中创建设计系统
manage-design-system skill 会上传 DESIGN.md，并使用所需的 schema 调用 create_design_system_from_design_md。
05
将 HTML 作为 Screen 上传
同一个上传脚本会使用 Stitch API key 和 projectId 发送独立的 HTML，并将 title 参数设置为该页面路由，以便在 Stitch 中能够识别该 screen。

02 找到适合场景

何时使用 stitch::code-to-design Skill

当任务属于此类 UI 设计时，在 Claude Code 或 Codex 中使用 stitch::code-to-design skill。下方的适用范围和限制来自该 skill 自身的文件。

适合场景

一个已有的应用，使用 React + Vite、Next.js、Angular 或 Vue 编写，用户希望将其迁移到 Stitch 中并在那里继续改进。
一个措辞比较宽泛的请求，比如“保存”“迁移”或“上传”，而不是明确的转换任务。
一个已经在 Vite 开发服务器上运行，或通过 Angular CLI ng serve 提供服务的项目。
一个以 angular.json、外部 .html 模板、主题文件和组件组织起来的 Angular 工作区，这些都会为设计系统提取提供输入。

了解边界

没有任何可运行的目标：该工作流需要一个正在运行的本地开发服务器，或一个包含 index.html 和资源文件的已构建 Web 应用目录。

需要提供的信息

目标 Stitch projectId上传需要一个目标项目；如果未知，先使用 list_projects 查询。
提取出的 HTML 的路径第 1 步生成的独立文件需要与 API key 和 projectId 一起交给上传步骤。
项目源文件组件、样式表和主题配置是设计系统分析用来推导 DESIGN.md 的内容。

03 Skill 内部

stitch::code-to-design Skill 赋予 Claude Code 和 Codex 的规则

SKILL.md 为 Agent 设定的 6 条具体指令、默认值与边界——文件中真正改变结果的那部分。

对于“保存”“迁移”或“上传”意图，始终使用该 skill
将现有 Web 应用或 React/Angular/Vue 组件迁移到 Stitch 的任何操作，都必须经过这个 skill——即便只是简单的保存，因为它是唯一能同时提取设计系统并关联资源的路径。
将设计系统写入 .stitch/DESIGN.md
设计系统文件位于 .stitch/DESIGN.md，且必须遵循 extract-design-md skill 所定义的结构。
绝不因验证而阻塞
对提取出的 HTML 的验证由用户主导且是可选的；Agent 必须直接进入设计系统步骤，而不是等待验证。
为设计系统上传打标签
上传 DESIGN.md 时传入参数 --generated-by 'stitch::code-to-design'，以记录生成产物的来源。
以不同方式为 HTML 上传打标签
HTML 上传使用的是另一个标记 --generated-by 'stitch::extract-static-html'，而不是 code-to-design 的标记。
两次上传复用同一个 API 密钥
第 4 步提供的 Stitch API 密钥与 HTML 上传所需的密钥相同，无需第二个凭证。

04 投入使用

在 Claude Code 或 Codex 中安装 stitch::code-to-design

一条 npx skills add 命令，然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 stitch::code-to-design 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行；安装程序会询问要把它添加到哪个 Agent。

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::code-to-design

针对 plugins/stitch-design/skills/code-to-design/SKILL.md 的通用 skills CLI 形式；该仓库可能会记录其自己的路径。

给 Skill 一个首次 UI 设计任务

按 skill 自身的术语撰写；把括号中的部分换成你的内容。

Starter prompt

Take the frontend in [path to repo] and move it into my Stitch project [projectId]. The Vite dev server is already running at [http://localhost:5173]. Extract the standalone HTML, write the design system to .stitch/DESIGN.md, upload both, and title the screen '/[route]'.

来源：依据 SKILL.md，按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果：

在浏览器中打开提取出的文件，确认页面按预期渲染。
如果用户查看提取结果后反馈问题，先修复这些问题，再继续工作流。

在 OpenDesign 中通过 SKILL.md 链接导入 stitch::code-to-design：Plugins → Add → Skill → Import from link，然后在顶部栏中选择它。

下载 OpenDesign 阅读快速入门

05 开源、可追溯

来源、许可与验证

本页面事实的来源，以及最后检查时间。

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills 分支 main
Skill 文件: plugins/stitch-design/skills/code-to-design/SKILL.md 内容校验和在验证时记录；commit 0337446
License: Apache-2.0 来自 LICENSE。
仓库星标数: 8,304 GitHub 快照于 2026-09-14 为整个 google-labs-code/stitch-skills 仓库拍摄，其中包含本目录中的 12 个 skills。不是 stitch::code-to-design 的评分或使用计数。
已由 OpenDesign 验证: 2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序（检查日期 2026-08-28）；本页面未记录实际运行。

SKILL.md 内部

工作流指示 Agent 按列出的步骤转换现有代码。
先决条件需要一个正在运行的开发服务器或已构建的应用目录，以及一个 Stitch projectId。
步骤五个有序步骤，每一步都委托给另一个 skill 或脚本。

Skill 自身的描述

"- 将前端代码（Vite、React、Angular、Vue 等）转换为 Stitch 设计，通过串联静态 HTML 提取、设计系统提取和文件上传实现。**始终**在用户意图是将现有 web 应用或 React/Angular/Vue 组件迁移到 Stitch 时使用此 skill（例如要求「保存」、「迁移」或「上传」）。即使是简单的「保存」操作，你也必须使用此 skill，因为它是确保设计系统被提取且资源正确链接的唯一方式。"

来自 SKILL.md 的前置描述。完整文件约 3,645 个字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 stitch::code-to-design Skill 的常见问题

以下回答来自 2026-09-14 读取到的 SKILL.md，而非某次实际运行的记录。

它只上传单个屏幕，还是也会构建设计系统？

两者都会。DESIGN.md 文件会被上传，并通过 manage-design-system 工作流在 Stitch 中创建设计系统，该工作流使用上传脚本以及带有所需 schema 的 create_design_system_from_design_md 调用。

哪个 skill 实际负责从我的应用中提取 HTML？

extract-static-html 负责提取工作，从构建输出或正在运行的开发服务器（例如 Vite 的开发服务器）生成一个独立的自包含 HTML 文件。

Stitch Code to Design

在真实 UI 设计任务上运行 stitch::code-to-design。

下载 OpenDesign，从其 SKILL.md 链接导入 stitch::code-to-design，粘贴上方的提示，并在查看结果前先阅读计划。

下载 OpenDesign 浏览所有 skills

终端

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::code-to-design