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.
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
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.아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
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.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.