Skill UI

Transforms vague UI ideas into structured, Stitch-optimized prompts by adding platform context, UI/UX keywords, design system cues, and detailed page structure guidance so generated interfaces stay consistent and polished.

Automate creation of polished walkthrough videos by feeding Stitch project screens into Remotion compositions, adding smooth transitions, zooms, and contextual overlays to showcase apps for demos or product updates.

Autonomous frontend builders follow a Stitch-driven baton loop to read prompts, generate and integrate pages, refresh documentation, and hand off the next task for continuous site evolution.

This skill generates highly structured DESIGN.md files, acting as a semantic design system for Google Stitch. It translates complex, anti-generic frontend principles—including typography, color calibration, component behavior, and motion physics—into actionable, natural-language rules. Use it as the single source of truth to guide AI in generating premium, non-clichéd, professional user interfaces.

This specialized skill automates the process of converting visual designs (from Stitch) into high-quality, modular React and Vite components. It adheres to modern frontend best practices, enforcing logic isolation via custom hooks, data decoupling using mock data files, and ensuring type safety with TypeScript interfaces. The workflow includes automated asset fetching, style mapping (Tailwind), and rigorous validation cycles to produce production-ready, maintainable code.

This skill establishes an autonomous, iterative build loop for continuous website development. It functions as an agent that reads tasks from a 'baton' file, utilizes the Stitch MCP tools to generate structured web pages, integrates the generated HTML assets into the main site structure, and finally updates the baton file with the next required task. It supports end-to-end, programmatic site building and includes optional visual verification using Chrome DevTools.

This skill automates the migration of existing frontend code (including React, Vue, Angular, and Next.js components) into a structured Stitch Design. It orchestrates the extraction of a self-contained HTML file, analyzes the source code to build a comprehensive design system document, and finally uploads both assets into your Stitch project for iteration and improvement.

Analyzes any frontend codebase (React, Vue, Svelte, Angular, plain CSS, Tailwind) to document the complete design system. It extracts crucial visual elements—including color palettes, typography, spacing scales, and component patterns—directly from source files, without needing to build, render, or run the application. Ideal for design audits, visual language documentation, or migrating a project's identity into a design tool.

This skill captures a fully self-contained static HTML snapshot from any running web application (e.g., React, Vue, Next.js). Using Puppeteer, it renders the live DOM, automatically inlining all CSS styles and converting images, assets, and backgrounds to base64 data URIs. This ensures the generated HTML file is completely self-sufficient and requires no external network connection, making it perfect for sharing UI states, creating documentation, or preparing assets for offline viewing.

A comprehensive skill for generating new design screens from text prompts or images, and iteratively editing existing designs. It incorporates advanced prompt enhancement, design tokens, and professional UI/UX terminology to ensure professional, structured, and context-aware design output for web and mobile platforms.

This skill acts as a mobile engineering bridge, converting web designs provided by Stitch into high-quality, production-ready React Native components. It handles complex tasks including translating HTML/CSS layouts into React Native primitives, extracting design tokens (colors, spacing) into a central theme file, and ensuring adherence to native component architectural rules. Ideal for developers integrating web-based prototypes into mobile applications.

This skill enables the upload of various local assets, including images (PNG, JPG, WEBP), extracted HTML, and design markdown files, directly to a designated Stitch project. Crucially, it bypasses the token limits associated with standard MCP tool calls by using a dedicated HTTP upload script. Use this when visual assets or large design documentation need to be integrated into your Stitch design system.