Skill UI

Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files

Guides how to craft detailed prompts for Google Stitch so it generates high-quality web and mobile UI designs, covering specificity, visual style, multi-screen structure, platform targeting, and iterative refinement.

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.

Generates agent-friendly DESIGN.md for Google Stitch, encoding strict typography, color, layout, component, and motion rules to produce premium non-generic UI screens.

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 expert acts as a Design Systems Lead and Prompt Engineer for creating high-fidelity, consistent UI designs. It transforms vague ideas into structured specifications by enhancing prompts with professional UI/UX terminology, synthesizing design system source files, and managing multi-step generation and editing workflows using the Stitch MCP.

This skill acts as an expert Design Systems Lead, analyzing complex technical assets (HTML, CSS, screenshots) from existing projects. It synthesizes a comprehensive 'Semantic Design System' into a structured DESIGN.md file. This output serves as the authoritative 'source of truth' for AI prompting, ensuring that any new UI generated by tools like Stitch adheres perfectly to the established visual language, color palette, and component standards.

This skill automates the creation of professional, animated walkthrough videos from static app designs. It retrieves screen assets from Stitch projects and utilizes Remotion's advanced video composition capabilities to generate polished product demonstrations. Features include smooth transitions, contextual zooming, and animated text overlays, making it ideal for UX reviews, product marketing, and design portfolios.

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.

Generates structured DESIGN.md files that serve as a single source of truth for AI-powered screen generation (Google Stitch). This skill translates complex, anti-generic design directives into precise semantic rules, covering typography, color calibration, motion physics, and layout principles to enforce a premium, high-agency UI/UX standard. It ensures outputs are sophisticated and avoid common AI design clichés.