About

Imported from practicalswan/agent-skills (stitch-code-to-design/SKILL.md). Install upstream with npx skills add practicalswan/agent-skills --skill stitch-code-to-design. Copyright stays with the author (Apache-2.0).

Code to Design

Name: stitch-code-to-design
Author: practicalswan

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

Anti-Patterns

Claiming a Stitch screen-generation, screen-editing, or screen-retrieval MCP call succeeded when the active host does not expose that tool.
Uploading files, screenshots, HTML, markdown, or design assets to Stitch without user-approved destination and artifact details.
Reading, printing, storing, or committing Stitch API keys, MCP config secrets, cookies, or credential-bearing files.
Treating generated design or code as final without local render, syntax, or artifact verification.
Collapsing this workflow into a broader frontend/design skill when Stitch-specific files, project IDs, or design-system assets matter.

Verification Protocol

Before claiming this skill was applied successfully:

Pass/fail: .stitch/DESIGN.md exists and summarizes real source tokens.
Pass/fail: The static HTML opens locally enough to inspect core layout and images.
Pass/fail: Stitch design-system creation was MCP-verified or the fallback evidence is recorded.
Pass/fail: No API key, token, cookie, or credential-bearing config was copied into durable files.
Pressure-test scenario: Repeat the workflow with Stitch MCP screen tools unavailable and confirm the fallback path remains honest and actionable.
Success metric: The user can identify the exact artifact, project/design-system target, and verification evidence without relying on unstated MCP behavior.

Cross-Client Portability

This skill is written to stay usable across GitHub Copilot, Claude Code, and Codex.

GitHub Copilot: keep the folder in a Copilot-visible skill path or wrap the workflow in project instructions when folder discovery is unavailable.
Claude Code: keep the folder in a local skills directory or a compatible plugin source.
Codex: install or sync the folder into $CODEX_HOME/skills/stitch-code-to-design and restart Codex after major changes.

MCP Availability And Fallback

Preferred MCP Server: Stitch MCP

Fallback prompt: "Use the Stitch Code To Design skill without Stitch MCP. Use local extraction, source-code design-system synthesis, and manual Stitch web UI upload when MCP upload tools are unavailable. Show the exact files, commands, manual Stitch UI steps, and verification evidence used before concluding."
Verified Stitch MCP tools in this workspace are design-system/project oriented; use broader screen tools only when the current host exposes them.
Use local scripts, exported HTML/screenshots, the Stitch web UI, and project metadata files as the fallback evidence path.

Related Skills

stitch-extract-static-html: Use when the task also needs this adjacent Stitch workflow.
stitch-extract-design-md: Use when the task also needs this adjacent Stitch workflow.
stitch-manage-design-system: Use when the task also needs this adjacent Stitch workflow.
stitch-upload-to-stitch: Use when the task also needs this adjacent Stitch workflow.

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/practicalswan-agent-skills-stitch-code-to-design/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

practicalswan-agent-skills-stitch-code-to-design.ocm.jsonjson

{
  "ocm": "1",
  "id": "practicalswan-agent-skills-stitch-code-to-design",
  "kind": "skill",
  "name": "stitch-code-to-design",
  "description": "Convert an existing frontend into Stitch-ready design assets by extracting static HTML, writing DESIGN.md, creating the design system, and uploading approved files.",
  "publisher": "practicalswan",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "coding"
    ],
    "tags": [
      "skill-md",
      "stitch",
      "design",
      "frontend",
      "html",
      "migration",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Convert an existing frontend into Stitch-ready design assets by extracting static HTML, writing DESIGN.md, creating the design system, and uploading approved files."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/practicalswan/agent-skills",
      "path": "stitch-code-to-design/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/practicalswan/agent-skills/blob/HEAD/stitch-code-to-design/SKILL.md",
      "key": "practicalswan/agent-skills/stitch-code-to-design/SKILL.md"
    },
    "license": "Apache-2.0"
  },
  "instructions": "# Code to Design\n\nTransform your existing frontend code (React + Vite, Next.js, Angular, Vue, etc.) into a Stitch Design so you can iterate and improve it using Stitch.\n\nThis skill orchestrates three other skills in sequence:\n1. `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`).\n2. `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).\n3. `upload-to-stitch`: Upload t",
  "cost": {
    "context_tokens": 1555
  }
}

Fetch it by URL: GET /api/v1/registry/practicalswan-agent-skills-stitch-code-to-design/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.