How to use the Code to Stitch Design agent skill

What is an agent skill and what does this one do?

An agent skill is a folder with a SKILL.md file that tells an AI agent how to carry out a specific task. When a request matches the skill, the agent follows its instructions and uses the scripts and tools it names.

This skill converts existing frontend code into a Stitch Design. It runs three steps in sequence: it extracts the page into one self-contained HTML file, it analyzes the project's components, stylesheets and theme files to write a design system document called DESIGN.md, and it uploads both to a Stitch project so the screens can be iterated on there.

• Extract a single standalone HTML file from a build output or running dev server (via the extract-static-html skill).
• Analyze components, styles and theme configs to write .stitch/DESIGN.md (via the extract-design-md skill).
• Create the design system in Stitch and upload the HTML (via the manage-design-system and upload-to-stitch skills).

Install the Code to Stitch Design skill

Download the ZIP from this page and unzip it. For a personal setup, place the skill folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder.

You can also upload the skill in the Claude apps. Go to Settings, then Capabilities, then Skills, and upload it there.

This skill calls three helper skills: extract-static-html, extract-design-md, manage-design-system and upload-to-stitch. The source says these must be available alongside this one, so install them in the same location.

Prepare your project and Stitch credentials

The workflow needs a running local dev server (for example npm run dev or ng serve) or a built web app directory that contains index.html and its assets. The skill cannot create a build or start a server for you, so get your app running first.

You also need a Stitch account with an API key and the projectId of the Stitch project you want to target. If you do not know the projectId, the source says to use list_projects to find it.

• A running local dev server, or a built folder with index.html.
• A Stitch API key.
• The target Stitch projectId.

How do you trigger the skill with a natural request?

Describe your intent in plain words. The skill is written to activate when you want to move existing web apps or React, Angular or Vue components into Stitch, and words like save, migrate or upload are the signals it looks for.

Name the app or route and the project you mean, so the agent knows what to extract and where to send it.

• "Save my running React app to Stitch project 1234."
• "Migrate the Vue components in this repo into Stitch so I can iterate on them."
• "Upload the dashboard page from my Vite dev server to my Stitch project."
• "Move this Angular app into Stitch and keep its theme tokens."

What happens during a run?

The agent first extracts the HTML and tells you the file path. Verifying the file in a browser is optional and does not block the next step, so the agent moves on to the design system. If you find problems after reviewing, ask the agent to fix them before the upload continues.

Next it writes .stitch/DESIGN.md and uploads it to create the design system in Stitch. Last, it uploads the HTML. The HTML is titled with the page's route path, such as /dashboard or /settings/profile, so the screen in Stitch is easy to match to your app.

• Step 1: extract the standalone HTML file.
• Step 3: write .stitch/DESIGN.md.
• Step 4: upload DESIGN.md and create the design system.
• Step 5: upload the HTML, titled by route path.

Safety notes: scripts and network access

This skill runs scripts and uses the network. It is allowed to use Bash, Read, Write and web_fetch, and to call Stitch tools. The helper scripts send your extracted files and design system to Stitch.

Because files are uploaded to a third-party service, do not run this on a repository that holds secrets or proprietary code you are not comfortable sharing. Review the extracted HTML and DESIGN.md before the upload if you are unsure what they contain.

• Files are uploaded to Stitch, so check for secrets and proprietary code first.
• Keep your Stitch API key private and do not paste it into shared logs or repositories.
• The skill is allowed to run Bash and write files, so run it in a project you trust.

Tips for better results

Give the agent a clean, running app. Extraction works from a live dev server or a build output, so a broken build will produce a broken screen.

Iterate in Stitch after the upload. The purpose of the skill is to get your screens and design system into Stitch so you can improve them there.

• Start the dev server or build before you ask for the migration.
• Keep the design tokens and theme files in the project, since the design system is derived from them.
• Use one request per route if you want each screen titled clearly in Stitch.