skills.rest
tranhoainam298
tranhoainam298COMMUNITY
Explore all skills by this author →
GitHub

stitch::code-to-design

Convert frontend code into Stitch Designs by extracting HTML and design systems.

1|Updated Jun 27, 2026
Search Tags:#react#design system#migration#vite#stitch#html extraction#code to design
One-click install
npx skills add https://github.com/tranhoainam298/qr-parking-booking-system --skill stitch-code-to-design-tranhoainam298
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch::code-to-design
Source: https://github.com/tranhoainam298/qr-parking-booking-system/tree/main/.claude/plugins/stitch-design/skills/code-to-design
Command: npx skills add https://github.com/tranhoainam298/qr-parking-booking-system --skill stitch-code-to-design-tranhoainam298

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Moving an existing web application into Stitch for design iteration normally requires manually rebuilding screens and re-documenting the design system, which is slow and error-prone. ## Core Features & Use Cases - Static HTML Extraction: Delegates to the extract-static-html skill to produce a single self-contained HTML file from a built web app. - Design System Extraction: Delegates to extract-design-md to analyze components, stylesheets, and theme configs into a DESIGN.md file. - Stitch Upload: Uploads the HTML and DESIGN.md to a target Stitch project, creating a design system via manage-design-system and upload-to-stitch skills. - Use Case: You have a React and Vite parking dashboard and want to iterate on its UI in Stitch. Run this skill to extract the standalone HTML, generate the design system, and upload both to your Stitch project in one orchestrated workflow. ## Quick Start Convert my built React app in the dist folder into a Stitch Design and upload it to my Stitch project.

Frequently Asked Questions about stitch::code-to-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a React app into a Stitch Design?▼

Build the React app so you have an output directory with index.html and assets, then run this skill. It extracts a standalone HTML file, generates a DESIGN.md design system from your source code, and uploads both to your Stitch project.

How to upload existing frontend code to Stitch?▼

Use this skill with your built app directory, Stitch API key, and target projectId. It chains the extract-static-html, extract-design-md, manage-design-system, and upload-to-stitch skills to complete the upload.

Does this work with Vite and other frontend frameworks?▼

Yes, it supports Vite, React, and similar frontend stacks as long as the project produces a built directory containing index.html and assets. The extraction step analyzes components, stylesheets, and theme configs regardless of framework.

What do I need before converting code to a Stitch Design?▼

You need a built web application directory containing index.html and its assets, plus a target Stitch projectId. If you do not know the projectId, use the list_projects tool to find it.

Why is my extracted HTML not rendering correctly in the browser?▼

Rendering issues usually come from missing assets or broken relative paths during static extraction. Report the issue after reviewing the output file so the extraction step can be fixed before the upload proceeds.

Related Skills

Explore More Design & Creative Skills→
duylamleduylamle
2

pug-mockup

Generate self-contained Pug SPA mockups that compile to a single HTML file.

Community
Intermediate
google-labs-codegoogle-labs-code
8.2k

stitch::manage-design-system

Create, update, and apply design systems in Stitch projects via MCP tools.

Official
Intermediate
vikingokftvikingokft

stitch::extract-design-md

Extract a Stitch-compatible DESIGN.md from frontend source code.

Official
Intermediate
google-labs-codegoogle-labs-code
8.2k

stitch::generate-design

Generate and edit UI screens from text prompts or images using Stitch MCP.

Official
Advanced