Convert an existing frontend into a Stitch design by extracting a standalone HTML file and shared design rules, then uploading both to a project so you can revise the interface in Stitch.
Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill when the user's intent is to move existing web apps or React/Angular/Vue components into Stitch (e.g., requests to "save", "migrate", or "upload"). You must use this skill even for simple "save" operations, as it is the only way to ensure the design system is extracted and assets are properly linked.
Review the instructions the agent will receive before you install.
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.Follow these steps to convert your existing code.
npm run dev, ng serve) OR a built web application directory containing index.html and assets.projectId (use list_projects if unknown).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.
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.
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.
Delegate to the manage-design-system skill to upload the DESIGN.md and
create the design system in Stitch. Read
skills/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.
Use the same upload-to-stitch skill's script to upload the extracted HTML file.
Read skills/upload-to-stitch/SKILL.md for detailed instructions and script usage.
You will need:
projectId.--generated-by argument set to 'stitch::extract-static-html'.--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.No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Analyze existing Stitch screens and document their colors, typography, components, and layout in DESIGN.md. The resulting design reference combines plain visual descriptions with precise color values to guide requests for new screens.
Turn a rough interface idea into a structured prompt for Stitch, with clear page sections, colors, and component details. When available, existing design rules are included to guide consistent screens or focused edits.
Turn Stitch designs into React and Vite dashboards with reusable components and asynchronous data fetching. It applies shared design settings from DESIGN.md, includes accessibility checks, and supports optional blockchain data reads.
Create walkthrough videos from Stitch app screens using Remotion. Arrange screenshots in sequence, add fades, slides, zoom effects, and explanatory text, then preview the timing and render a video such as an MP4.
Find, install, and customize shadcn/ui components for React applications. The skill guides project setup, theme changes, forms, dialogs, and dashboard layouts, with checks for keyboard access, screen reader support, and responsive behavior.
Turn site requirements or existing content into a SITE.md project guide for the Stitch Build Loop. It records the site's purpose, visual direction, navigation, file structure, and prioritized tasks to guide successive development rounds.