ui

Describe the component in natural language, such as a pricing page with three tiers. The Skill sends the prompt to Google Stitch text-to-UI, then adapts the exported code to your project's framework and styling conventions.

Yes, upload a screenshot, wireframe, or napkin sketch and Stitch's image-to-UI capability converts it into a polished digital design. The resulting code is then adapted to your project with TypeScript types and accessibility attributes.

Yes, the Skill scans package.json and config files to detect React, Vue, Svelte, or other frameworks plus Tailwind, CSS Modules, or styled-components. Generated components match the detected conventions exactly, including naming and directory structure.

DESIGN.md is a design system file containing colors, typography, spacing, and component patterns extracted by Stitch. It is created when a project lacks design tokens and is read on every subsequent invocation to keep components consistent.

The Skill detects which MCP tools are available before starting and proceeds with whatever exists. Stitch is the primary design engine, while Magic MCP and Figma serve as complementary sources for patterns and design extraction.

Stitch's free tier allows 350 Standard mode generations and 50 Experimental mode generations per month. Use Standard mode for iteration and reserve Experimental mode (Gemini Pro) for complex layouts and final production designs.