Turn Stitch designs into reusable React components for Vite projects, or update existing components to match revised designs. Organize interface elements, logic, and data separately while aligning styles and connecting navigation between pages.
中文简介正在准备中。当前显示英语简介。
- Build React screens from Stitch designs
- Update existing screens after design changes
- Split repeated interface elements into reusable components
google-labs-code/stitch-skills☆ 85462026年8月18日 更新
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.
中文简介正在准备中。当前显示英语简介。
- Create an app introduction from Stitch screens
- Explain a user journey through a sequence of screens
- Highlight interface features with zoom and labels
google-labs-code/stitch-skills☆ 85462026年8月18日 更新
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.
中文简介正在准备中。当前显示英语简介。
- Add UI components to an existing React project
- Customize themes and component variants
- Build forms and dashboard layouts
google-labs-code/stitch-skills☆ 85462026年8月18日 更新
Save a rendered web application view as static HTML with embedded styles and images. Capture a specific page or interface state for sharing or Stitch upload, using Puppeteer or an interactive browser capture workflow.
中文简介正在准备中。当前显示英语简介。
- Share a page as static HTML
- Prepare a screen for Stitch upload
- Capture a view after clicks or form input
google-labs-code/stitch-skills☆ 85462026年8月18日 更新
Create and refine screen designs in Stitch from text descriptions or images. The skill clarifies layout requirements, edits existing screens, explores alternative designs, and saves HTML and screenshots for review.
中文简介正在准备中。当前显示英语简介。
- Create a screen from a written brief
- Turn a mockup image into a screen design
- Refine specific parts of an existing screen
google-labs-code/stitch-skills☆ 85462026年8月18日 更新
Upload local images, HTML pages, and Markdown design documents to a Stitch project. The included Python script sends files directly over HTTP, avoiding the text output limits that can interrupt transfers through MCP tools.
中文简介正在准备中。当前显示英语简介。
- Upload local mockup images to Stitch
- Add extracted HTML pages to a Stitch project
- Upload Markdown design documents
google-labs-code/stitch-skills☆ 85462026年8月18日 更新
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.
中文简介正在准备中。当前显示英语简介。
- Document design rules from an existing screen
- Prepare a design reference for new screen prompts
- Record color codes and their functional roles
google-labs-code/stitch-skills☆ 85462026年8月18日 更新
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.
中文简介正在准备中。当前显示英语简介。
- Organize a site brief before development
- Record site purpose and visual direction
- List completed and planned pages
google-labs-code/stitch-skills☆ 85462026年8月18日 更新
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.
中文简介正在准备中。当前显示英语简介。
- Build a React dashboard from a Stitch screen
- Apply shared design settings from DESIGN.md
- Add data fetching and loading states
google-labs-code/stitch-skills☆ 85462026年8月18日 更新
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.
中文简介正在准备中。当前显示英语简介。
- Move an existing web app into Stitch
- Review React or Vue component designs in Stitch
- Extract design rules alongside screen HTML
google-labs-code/stitch-skills☆ 85462026年8月18日 更新
Read frontend source code to document colors, typography, spacing, components, and layout rules in DESIGN.md. Use it to understand an existing interface or prepare design guidance for Stitch without building or running the app.
中文简介正在准备中。当前显示英语简介。
- Document an existing app's design system
- Review styling when the app cannot run
- Prepare an existing visual identity for Stitch
google-labs-code/stitch-skills☆ 85462026年8月18日 更新
Create and update shared design rules in Stitch, including colors, fonts, and corner shapes, then apply them to existing screens. Keep a DESIGN.md file and project metadata alongside the design system.
中文简介正在准备中。当前显示英语简介。
- Apply shared design rules across existing screens
- Turn a theme description into concrete design values
- Create or update a design system in Stitch
google-labs-code/stitch-skills☆ 85462026年8月18日 更新
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 a rough screen idea into a clear prompt
- Revise a prompt that produced an unsuitable design
- Include existing design rules in a screen request
google-labs-code/stitch-skills☆ 85462026年8月18日 更新
Turn Stitch HTML designs into React Native screens and reusable components, or update existing components to match newer designs. Extract shared style values, implement layouts with StyleSheet, and organize navigation, data, and interaction logic.
中文简介正在准备中。当前显示英语简介。
- Convert Stitch designs into React Native screens
- Update existing components to match newer Stitch designs
- Share colors, fonts, and spacing across screens
google-labs-code/stitch-skills☆ 85462026年8月18日 更新
Build a website one page at a time with Stitch. Each round reads a task file, generates and integrates a page, updates the site plan, and leaves instructions for the next round.
中文简介正在准备中。当前显示英语简介。
- Build a site with several pages in repeated rounds
- Keep new pages aligned with a shared design guide
- Add pages following a site roadmap
google-labs-code/stitch-skills☆ 85462026年8月18日 更新
Create a DESIGN.md guide for generating screens in Google Stitch. Define colors, typography, asymmetric layouts, component states, and motion with precise values and explicit restrictions, giving the agent consistent instructions for a specific visual style.
中文简介正在准备中。当前显示英语简介。
- Set shared design rules for Google Stitch screens
- Define asymmetric page layouts
- Document typography, colors, and interaction behavior
google-labs-code/stitch-skills☆ 85462026年8月18日 更新