stitch::code-to-design
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.
Target: Design & content creation. Automatically collected · unverified.
Excerpt from the author’s documentation
Extracted from a fixed version of SKILL.md in its original language. This is the author’s documentation; installation, compatibility and runtime results have not been verified by this site.
Read the original English text
Topics in the source
- Code to Design
- Workflow
- Prerequisites
- Steps
- 1. Extract Self-Contained HTML
- 2. Verify HTML (Optional — User-Driven)
- 3. Extract Design System (File)
- 4. Upload DESIGN.md and Create Design System in Stitch
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: 1. 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). 2. 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). 3. upload-to-stitch: Upload that HTML file and the design system to your Stitch project. Follow these steps to convert your existing code. 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 listprojects 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 de
This is an excerpt. Refer to the complete source and its current requirements.
- Source repository
- google-labs-code/stitch-skills
- Source file
- plugins/stitch-design/skills/code-to-design/SKILL.md
- Fixed revision
- 0337446dadde6f8c94210444e2aa9d546126480f
Sources and evidence
This record was collected automatically. Its documentation, suitability and runtime behavior have not been manually verified.
Author: Google Stitch Skills · original repository metadata. Documentation review: Not reviewed. Last source check: 2026-11-09T14:01:41.122Z.
Categories are inferred from names, descriptions and paths. They do not establish compatibility.
License and attribution
Apache-2.0. Third-party content and copyright remain with their authors. Refer to the original license and terms.
Original license ↗Synchronization, copying and user-reported success do not mark a resource as runtime-tested.
Limitations and notes
- Collecting metadata does not mean this site has installed, adapted, runtime-tested or security-reviewed the resource.