Design skills

Generates DESIGN.md files for Google Stitch with strict typography, calibrated colour and asymmetric layouts.

The original v1 of the taste skill, kept for projects that depend on its exact behaviour.

Creates and edits marketing images: blog heroes, social graphics, product mockups, banners and brand assets.

Reviews UI code against Vercel's Web Interface Guidelines, including accessibility and UX.

Connects Figma design components to code components with Code Connect mappings.

Generates custom design system rules for a codebase, for use with Figma design-to-code workflows.

Translates Figma designs into production code with 1:1 visual fidelity.

Uses the Figma MCP server to fetch design context, screenshots, variables and assets, and to turn Figma nodes into code.

Creates and packages Codex-compatible animated pets and spritesheets from character art or visual references.

Generates and edits raster images such as photos, illustrations, sprites and mockups.

Analyses an article, finds where visuals would help and generates illustrations by type, style and palette.

Creates original educational comics with detailed panel layouts in several art styles and tones.

Compresses images to WebP or PNG, choosing the compression tool automatically.

Generates article cover images across type, palette, rendering, text and mood, in cinematic, widescreen or square formats.

Creates dark-themed SVG diagrams: architecture diagrams, flowcharts, sequence diagrams, mind maps and timelines.

Generates images through OpenAI, Google, OpenRouter, Replicate and other image APIs, with reference images and batch generation.

Generates infographics from content, recommending a combination from 21 layout types and 22 visual styles.

Breaks content into a series of up to ten cartoon-style image cards for Xiaohongshu and other social media.

Generates self-contained HTML pages that explain systems, code changes, plans and data with diagrams and tables.

Converts Stitch designs into modular Vite and React components, or syncs existing components with the latest designs.

Converts Stitch HTML designs into React Native components, or syncs existing native components with the latest designs.

Converts frontend code from Vite, React, Angular or Vue into a Stitch design.

Extracts a design system from frontend source code into a DESIGN.md file.

Generates new screens from text prompts or images and edits existing ones with Stitch MCP.