143 skills · sorted by relevance
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.
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.
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.
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.
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.
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.
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.
Generate a DESIGN.md file for Google Stitch that defines a shared visual direction. It pairs plain-language descriptions with exact colors, typography, component states, responsive rules, and motion guidance to keep generated screens consistent.
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.
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.
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.
Generate a DESIGN.md file for Google Stitch that defines colors, typography, layouts, component states, and motion. Clear descriptions and exact values give the screen-generation agent a shared reference, including explicit rules against generic design patterns.
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.
Build interface components with shadcn/ui, focusing on clear structure and accessibility so more people can use them. Pair the implementation work with the Stitch design loop to move from design iteration to working components.
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.
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.
Generates Stitch screens from authored prompt files using MCP tools. Reads prompt sections, sends each to Stitch for generation, and fetches resulting images and code. Use when user mentions "generate in stitch", "create stitch screens", "run prompts in stitch", "send prompts to stitch", "generate screens from prompts", "fetch stitch images", or has prompt-v*.md files ready for generation. Requires Stitch MCP server.
The English summary is being prepared. Showing the original description.
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 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.
Plan and build frontend interfaces through guided questions, visual references, and agreed design choices. Define colors, typography, and layout before coding, then implement small sections for review, with optional Google Stitch prototyping.
Converts natural-language descriptions or UI spec files into optimized Google Stitch prompts. Use when creating, refining, or validating design directives for Google Stitch. Use when user says "create a Stitch prompt", "optimize this for Stitch", "convert this spec to a Stitch prompt", "write a UI prompt", or mentions Google Stitch prompt authoring. Follows Stitch best practices with short, directive prompts focused on screens, structure, and visual hierarchy.
The English summary is being prepared. Showing the original description.
Create a landing page from an interview about the product, audience, and brand preferences. Use Stitch to generate and refine designs, then package approved HTML with design documentation and a deployment checklist.
Generates walkthrough videos from Stitch projects using Remotion. Downloads screenshots from Stitch screens, builds a Remotion composition with transitions and text overlays, and renders to MP4. Use with stitch-mcp-list-screens and stitch-mcp-get-screen for screen discovery.
The English summary is being prepared. Showing the original description.
Iteratively build multi-page websites using Stitch. Reads next-prompt.md (the baton), generates the next page with Stitch MCP, integrates it into the site, then updates next-prompt.md to continue the loop. Works with stitch-design-md and stitch-ui-prompt-architect for consistent multi-page output.
The English summary is being prepared. Showing the original description.