What is stitch::code-to-design?

A workflow that turns an existing frontend application into a Stitch Design, a design workspace for iterating on interfaces. It extracts the app’s HTML and design system, then uploads them to Stitch.

Use it to move Vite, React, Next.js, Angular, or Vue interfaces into Stitch from a running app or built files.

It gives you a design representation of an existing coded interface so you can continue design iteration in Stitch.

stitch::code-to-design — Skill for Claude Code and Codex by google-labs-code: A workflow that turns an existing frontend application into…

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods

npx agentmods add skills/google-labs-code/stitch-skills/code-to-design

Any agent

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

Clone the repo

git clone --depth 1 https://github.com/google-labs-code/stitch-skills

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/google-labs-code/stitch-skills/code-to-design.svg)](https://agentmods.dev/skills/google-labs-code/stitch-skills/code-to-design)

Your own site

<a href="https://agentmods.dev/skills/google-labs-code/stitch-skills/code-to-design"><img src="https://agentmods.dev/badge/skills/google-labs-code/stitch-skills/code-to-design.svg" alt="Measured on agentmods" height="20"></a>

Per session 115 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 876 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. Scan, not verified.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5	$0.00115	$0.00876
Opus 5	$0.00057	$0.00438
Sonnet 5	$0.00023	$0.00175
Haiku 4.5	$0.00012	$0.00088

Measured 4d ago against content hash 1daafb1d89d6, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

stitch::code-to-design scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

plugins/stitch-design/skills/code-to-design/SKILL.md · 78 lines

How it starts

The opening of the file, as written. The whole thing — 78 lines — stays where its author put it; the contents beside it link to each section on 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:

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).
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).
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

Read the full file on GitHub · 78 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

4d ago First seen · 78 lines · 115 tokens per session scan A 1daafb1d89d6

Subscribe to this mod's changes

stitch::code-to-design is a skill published in the GitHub repository google-labs-code/stitch-skills (8,248 stars, last pushed 17d ago), licensed Apache-2.0. It adds 115 tokens to every session and 876 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Design and UX Frontend

hallmark

Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots. Use when the user asks to build a new app or landing page, wants to redesign something, invokes Hallmark by name, or uses audit/redesign/study.

Nutlope/hallmark · 61 tokens

read

Reads URLs and PDFs by fetching source content, defaulting to concise summaries for plain read requests and clean Markdown when asked to convert, save, quote, cite, or feed downstream work. Use when users ask in any language to read, fetch, check, summarize, quote, cite, convert, or save a URL or PDF. Not for local…

tw93/Waza · 78 tokens

accessibility

Consolidated accessibility skill entrypoint for WCAG 2.2, ARIA Authoring Practices, cognitive accessibility, Section 508, EN 301 549, design intent verification, and the Accessibility Planner workflow.

microsoft/hve-core · 47 tokens

desktop-principles

Desktop-specific UX principles - hover states, pointer precision, keyboard shortcuts, multi-window, focus management. Covers macOS, Windows, Linux, web desktop.

Jwuthri/Tracely-ai · 36 tokens

taiyi-ui-design

TaiyiForge 第 4 阶段 — UI/UX 契约，产出 UI-DESIGN.md。四端通用。.

Dong90/oh-my-taiyiforge · 35 tokens

accessibility-analysis

服務可達性分析工具箱（accessibility / service coverage）。當用戶說「30km 路網可達」「最近 X 站」「服務範圍」「沙漠」「孤島」「等時圈」「isochrone」「可達性分析」「路網覆蓋」或要新增任何「離 POI 多遠」類型的分析時觸發。整合 mini-taiwan-pulse + taipei-gis-analytics 兩端 SOP，覆蓋三種視覺模式（路網染色 / Polygon 沿路網 / Hex 格點）、三套既有 reference pipeline 對照、模式選擇決策樹、常見坑（Overpass mirror 不穩 / pyrosm 爆 RAM / multi-bucket /…

ianlkl11234s/mini-taiwan-pulse · 239 tokens