MCPInstall

stitch::code-to-design

by google-labs-codeFrontend & Design

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.

Installs
10.2K
Last 24h
+61
Trending rank
#2894
Security
Pass

Install

Works with every agent the skills CLI supports.

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

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads stitch::code-to-design automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

Security audits

Independent scans of the skill's instructions and bundled files.

Gen Agent Trust Hub PassSAFE ·This skill automates the migration of frontend codebases into the Stitch design platform. It processes local source files and fetches content from local servers to generate and upload design assets. The primary security consideration is the risk of indirect prompt injection, as the skill performs analysis on untrusted source code using tools with file system and shell access.
Socket PassNo alerts
Snyk PassLOW ·Risk: LOW · No issues

SKILL.md

The instructions your agent reads when the skill is triggered.

Code to Design

Transform your existing frontend code (React + Vite, Next.js, Angular, Vue, etc.) into a Stitch Design so you can iterate and improve it using Stitch.

This skill orchestrates three other skills in sequence:

  1. extract-static-html: Extract a single self-contained HTML file from your build output or running dev server (e.g., Vite dev server or Angular CLI ng serve).
  2. extract-design-md: Analyze the source code (including Angular angular.json, external .html templates, theme files, and components) to create a design system (DESIGN.md).
  3. upload-to-stitch: Upload that HTML file and the design system to your Stitch project.

Workflow

Follow these steps to convert your existing code.

Prerequisites

  • A running local dev server (e.g. npm run dev, ng serve) OR a built web application directory containing index.html and assets.
  • Target Stitch projectId (use list_projects if unknown).

Steps

1. Extract Self-Contained HTML

Delegate to the extract-static-html skill to generate a standalone HTML file. Read skills/extract-static-html/SKILL.md for detailed instructions and script usage.

Expected output: A single file like /path/to/extracted/standalone.html.

2. Verify HTML (Optional — User-Driven)

After extraction, inform the user of the output file path so they can manually verify in a browser if desired. Do not block on verification — proceed directly to Step 3.

If the user reports issues after reviewing, fix them before continuing.

3. Extract Design System (File)

Delegate to the extract-design-md skill to analyze the project's source files (components, stylesheets, theme configs) and produce a design system. Read skills/extract-design-md/SKILL.md for the full analysis workflow.

Write .stitch/DESIGN.md following the extract-design-md skill's output structure.

4. Upload DESIGN.md and Create Design System in Stitch

Delegate to the manage-design-system skill to upload the DESIGN.md and create the design system in Stitch. Read skills/manage-design-system/SKILL.md for the full workflow (upload script usage, create_design_system_from_design_md call, and required schemas). Pass --generated-by 'stitch::code-to-design' when uploading.

5. Upload HTML to Stitch

Use the same upload-to-stitch skill's script to upload the extracted HTML file. Read skills/upload-to-stitch/SKILL.md for detailed instructions and script usage.

You will need:

  • The path to the standalone HTML file generated in Step 1.
  • Your Stitch API Key (same key used in Step 4).
  • The target projectId.
  • The --generated-by argument set to 'stitch::extract-static-html'.
  • The --title argument set to the route path of the page (e.g., '/dashboard', '/settings/profile', '/inbox') so that the screen name/title in Stitch clearly identifies its route in the application.

FAQ

What does the stitch::code-to-design skill do?

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.

How do I install stitch::code-to-design?

Run npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::code-to-design in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/stitch::code-to-design/ (personal) or .claude/skills/stitch::code-to-design/ (project).

Which AI agents can use stitch::code-to-design?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is stitch::code-to-design safe to install?

Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk passed. As with any skill, read the SKILL.md and bundled scripts before installing.

Who maintains stitch::code-to-design?

It is published by google-labs-code in google-labs-code/stitch-skills. It has 10,206 recorded installs.

More from google-labs-code/stitch-skills

View all →

design-md

google-labs-code/stitch-skills

Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files

OfficialFrontend & Design64.9K installs

enhance-prompt

google-labs-code/stitch-skills

Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.

OfficialAI & Agents58.4K installs

stitch-loop

google-labs-code/stitch-skills

Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern

Official56.5K installs

shadcn-ui

google-labs-code/stitch-skills

Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.

OfficialFrontend & Design53.5K installs

react:components

google-labs-code/stitch-skills

Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.

Frontend & Design50.4K installs

remotion

google-labs-code/stitch-skills

Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays

OfficialMedia & Creative41.4K installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs