# Stitch Code To Design (agent skill)

> Stitch Code To Design is an agent skill (a SKILL.md file) from google-labs-code/stitch-skills. Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file… It works with Claude Code, Codex, Cursor, Gemini CLI and OpenCode and has 8,432 GitHub stars across a repository of 5 listed skills.

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 ensure the design system is extracted and assets are properly linked.

## Key facts

| Fact | Value |
|---|---|
| Repository | https://github.com/google-labs-code/stitch-skills |
| Skill path | plugins/stitch-design/skills/code-to-design/SKILL.md |
| Skill name | stitch-code-to-design |
| GitHub stars | 8,432 |
| Installs on skills.sh | not listed |
| License | Apache-2.0 |
| Skills in repo | 5 |
| Plugin marketplace | no |
| Official | yes |
| Works with | Claude Code, Codex, Cursor, Gemini CLI, OpenCode |
| Category | Design & frontend |
| Last commit | Aug 17, 2026 |

## When it triggers

- use this skill when the user's intent is to move existing web apps or React/Angular/Vue components into Stitch (e.
- use this skill even for simple "save" operations, as it is the only way to ensure the design system is extracted and assets are properly linked.
- "save"
- "migrate"
- "upload"

## Add this skill

### Claude Code

```sh
git clone --depth 1 https://github.com/google-labs-code/stitch-skills.git
cp -r stitch-skills/plugins/stitch-design/skills/code-to-design ~/.claude/skills/stitch-code-to-design   # personal, or .claude/skills in a project
```

In the Claude apps, zip the skill folder and upload it under Customize > Skills > + > Upload a skill (code execution must be on).

### ChatGPT / Codex

```sh
git clone --depth 1 https://github.com/google-labs-code/stitch-skills.git
cp -r stitch-skills/plugins/stitch-design/skills/code-to-design .agents/skills/stitch-code-to-design   # repo; ~/.agents/skills for all projects
```

### Cursor

```sh
git clone --depth 1 https://github.com/google-labs-code/stitch-skills.git
cp -r stitch-skills/plugins/stitch-design/skills/code-to-design .cursor/skills/stitch-code-to-design   # project; ~/.cursor/skills for all projects
```

Sources (checked 2026-10-07): https://code.claude.com/docs/en/skills, https://support.claude.com/en/articles/12512180-using-skills-in-claude, https://learn.chatgpt.com/docs/build-skills, https://cursor.com/docs/context/skills

---

Canonical page: https://appsgit.com/skills/google-labs-code-stitch-code-to-design
Source: appsgit (https://appsgit.com), the app store for github. Data from the GitHub API, refreshed nightly.
Machine access: JSON API https://appsgit.com/api/v1/apps (OpenAPI: https://appsgit.com/openapi.json), MCP server https://mcp.appsgit.com/mcp, full index https://appsgit.com/llms-full.txt.