Skip to content
alyn
Google Labs Official

Stitch::Code To Design skill

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.

$npx skills add google-labs-code/stitch-skills --skill stitch::code-to-design
GitHub stars
8,724
Pack installs
470k
Alyn Score
66/99
Updated
3 months ago
License
Apache-2.0

Google Labs

Stitch::Code To Design

Design Frontend

Install Stitch::Code To Design

Pick your agent. Every command is ready to paste.

$npx skills add google-labs-code/stitch-skills --skill stitch::code-to-design

The open skills CLI detects your agents (Claude Code, Cursor, Codex and 70+ more) and installs to the right folder. Add -g to install globally.

01

Install it

Run the command above, or upload the folder in Claude.

02

Ask naturally

Describe the task. Your agent loads stitch::code-to-design when the request matches its description.

03

Name it if needed

If it does not trigger, say “use the stitch::code-to-design skill”. In Codex, type $stitch::code-to-design.

The skill itself

SKILL.md

GitHub

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.

Tips for Stitch::Code To Design

  • • Start a fresh session after installing so your agent picks up the new skill.
  • • It is part of a pack with 16 skills. Install only the ones you need with --skill to keep triggers precise.
  • • If two skills overlap, mention the one you want by name.

Questions about Stitch::Code To Design

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 google-labs-code/stitch-skills --skill stitch::code-to-design" in your project. The skills CLI installs it for Claude Code, Cursor, Codex and 70+ other agents. In Claude on the web, upload the skill folder as a ZIP under Customize > Skills.

Does Stitch::Code To Design work in Cursor and Codex?

Yes. Stitch::Code To Design uses the open SKILL.md format, so it works in Claude Code, Claude, Cursor, OpenAI Codex, Gemini CLI, GitHub Copilot and other agents that support agent skills.

Is Stitch::Code To Design free?

Stitch::Code To Design is open source on GitHub under the Apache-2.0 license. It is free to install; check the license before commercial use.

Who made Stitch::Code To Design?

Stitch::Code To Design is published by Google Labs in the google-labs-code/stitch-skills repository, together with 15 other skills.

Similar skills. From other creators.