What is the stitch-code-to-design skill?
The stitch-code-to-design skill is the reverse of most Stitch skills. It starts from working frontend code, such as Vite, React, Angular or Vue, and orchestrates three other skills in order: extract a standalone HTML file, write a DESIGN.md from the source, then upload both to a Stitch project.
Most Stitch skills go from a design to code. This one runs the other way. It lives in the stitch-design plugin of Google's stitch-skills repository, and its stated aim is turning existing frontend code into a Stitch Design you can keep iterating on.
Its description tells the agent to use it whenever a user wants to save, migrate or upload a web app into Stitch, even for a simple save, because it is the way the design system gets extracted and assets get linked.
The five steps it follows
- Extract one self-contained HTML file from a build folder or a running dev server such as Vite or ng serve, using the extract-static-html skill.
- Tell the user where the file landed so they can check it in a browser. The skill says not to block on this step.
- Analyze components, stylesheets and theme configs with extract-design-md and write .stitch/DESIGN.md.
- Upload that DESIGN.md and create the design system in Stitch through the manage-design-system skill.
- Upload the HTML file with upload-to-stitch, using the page's route path as the screen title.
What you need before you start
- A running local dev server, for example npm run dev or ng serve, or a built web app folder holding index.html and its assets.
- A target Stitch project ID. If you do not know it, the agent calls list_projects.
- A Stitch API key, the same one for the design system upload and the HTML upload.
Who the stitch-code-to-design skill is for
Best for
- Teams with a working app who want to redesign it inside Stitch instead of starting from a blank screen.
- Angular projects, where the skill reads angular.json, external .html templates and theme files.
- Anyone who wants each Stitch screen titled by its app route, such as /dashboard or /settings/profile.
Not for
- Starting a design from text. The generate-design skill covers that. Related: image-to-code.
- Pulling only a design file. Related: extract-design-system.
- Apps with no way to run or build, because step one needs a dev server or build output.
Use it with UiChemy
This skill ends in Stitch, not WordPress. Once a redesign is settled, UiChemy can bring it into WordPress through Figma, Composer or AI to WordPress. Click Get Started on uichemy.com. The DESIGN.md it writes follows the format in design-md.
How to install Stitch Code to Design Skill: Move a Running Frontend into Stitch
npx plugins add google-labs-code/stitch-skills --scope project --target claude-codeConnect the Stitch MCP server
Follow the setup guide at https://stitch.withgoogle.com/docs/mcp/setup/ and register the server in your agent. The skill's allowed tools use the stitch prefix.
Add the plugin
In Claude Code, run
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code. In Cursor, run the same command with--scope workspace --target cursor. The skill is in the stitch-design plugin.Codex route
Register the repo as a marketplace with
codex plugin marketplace add google-labs-code/stitch-skills --ref mainand install stitch-design.Get a Stitch API key
The upload steps need a Stitch API key, so have one ready before you start.
Start your dev server
Run npm run dev, ng serve or an equivalent, then ask the agent to save your app into a Stitch project.
Check that it loaded
Ask the agent to move your running app into Stitch. It should extract a standalone HTML file, write .stitch/DESIGN.md and then upload both to the project you named.
Key features
- Three skills in sequenceThe skill delegates to extract-static-html, extract-design-md and upload-to-stitch, with manage-design-system handling the DESIGN.md upload.
- Framework coverageThe description names Vite, React, Angular and Vue, and the steps mention Next.js and Angular CLI as sources for the extracted HTML.
- Standalone HTML outputStep one produces a single file such as standalone.html, built from a dev server or from a build folder with index.html and assets.
- Source-based design systemThe extract-design-md step reads components, stylesheets and theme configs, and for Angular also angular.json and external templates, to write a design system.
- DESIGN.md written to .stitchThe result is saved at .stitch/DESIGN.md and uploaded to create the design system in Stitch.
- Route path as screen titleThe HTML upload sets the title argument to the page's route path, so a screen named /inbox maps back to its route.
- Generated-by taggingThe skill passes a generated-by value of stitch::code-to-design when uploading the DESIGN.md and stitch::extract-static-html for the HTML.
- Non-blocking verificationThe agent reports the output path so you can check the HTML in a browser, and moves straight on to the next step. Reported issues are fixed before continuing.
Frequently asked questions
What does the stitch-code-to-design skill do?
It converts existing frontend code into a Stitch Design. The agent extracts a self-contained HTML file from a build or dev server, writes a DESIGN.md from the project's components and theme files, then uploads the design system and the HTML to a Stitch project of your choice.
Which frameworks does it support?
The description lists Vite, React, Angular and Vue, and the steps also name Next.js. Angular gets extra handling, since the design system step reads angular.json, external templates and theme files. Anything that serves or builds to an index.html with assets can be extracted.
How do I install the stitch-code-to-design skill?
Register the Stitch MCP server, then run the repository's plugin install, for example npx plugins add google-labs-code/stitch-skills with a project scope and your agent as the target. Codex users add the repo as a plugin marketplace. The skill ships in the stitch-design plugin.
Does it need a Stitch API key?
Yes. The upload steps list a Stitch API key as a requirement, and the same key is used for the DESIGN.md upload and the HTML upload. The skill also needs a target project ID, which the agent can look up with list_projects when you do not supply one.
Why does it extract a design system as well as the HTML?
The description says the skill is the only way to make sure the design system is extracted and assets are properly linked. That is why it tells the agent to use it even for a simple save, rather than uploading the HTML alone.
How are screens named in Stitch?
The HTML upload passes the page's route path as the title, for example /dashboard, /settings/profile or /inbox. The screen name in Stitch then identifies which route of your application it came from, which helps when an app has many pages.
Which AI coding agents can run it?
The repository README says its skills are compatible with agents such as Codex, Antigravity, Gemini CLI, Claude Code and Cursor, with OpenCode through a manual install. Whichever agent you choose needs access to the Stitch MCP server, Bash and file reading and writing.