skills.rest
khulnasoft-bot
khulnasoft-botCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

stitch::code-to-design

Convert frontend code into Stitch Designs via HTML extraction, design system extraction, and upload.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Moving an existing web app or React project into Stitch normally requires manually rebuilding screens and redefining the design system. This Skill automates that migration by extracting a standalone HTML file, generating a DESIGN.md design system, and uploading both to a Stitch project. ## Core Features & Use Cases - Static HTML Extraction: Delegates to the extract-static-html skill to produce a single self-contained HTML file from your build output. - Design System Generation: 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 using the upload-to-stitch and manage-design-system skills. - Use Case: You have a Vite/React app and want to iterate on it visually in Stitch. Run this Skill to migrate the built app and its design tokens into your Stitch project in one workflow. ## Quick Start Convert my built React app in the dist folder into a Stitch Design in project 12345.

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 migrate a React app into Stitch?▼

Build your React app, then run this Skill to extract a standalone HTML file from the build output, generate a DESIGN.md design system from your source code, and upload both to your Stitch project using your API key and projectId.

How to convert frontend code to a Stitch Design?▼

The Skill orchestrates three steps: extract-static-html produces a self-contained HTML file, extract-design-md analyzes components and stylesheets into DESIGN.md, and upload-to-stitch sends both files to your target Stitch project.

What do I need before uploading my web app to Stitch?▼

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

Does this work with frameworks other than React?▼

The Skill targets frontend code generally, including Vite and React projects. The key requirement is a built output directory with index.html and assets, so other frameworks that produce static builds can follow the same workflow.

Why is my extracted HTML not rendering correctly in Stitch?▼

Extraction issues usually come from assets not being inlined into the standalone HTML file. Verify the extracted file in a browser after Step 1, fix any broken asset links, and re-run the extraction before uploading.

Related Skills

Explore More Design & Creative Skills→
MoshPitCodesMoshPitCodes
1

artifacts-builder

Automate React + Vite artifact creation and bundling into single HTML files.

Community
Advanced
v1nizxv1nizx

stitch::generate-design

Generate and modify UI design screens from text prompts and design tokens.

Community
Advanced
vikingokftvikingokft

stitch::extract-design-md

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

Official
Intermediate
salafidurussalafidurus
1

google-stitch

Convert design images into repository-compliant UI code using Google Stitch.

Official
Advanced