Design skills

Analyses Stitch projects and writes their design system into DESIGN.md files.

Turns a vague UI idea into a detailed prompt optimised for Stitch, with design system context.

Teaches an agent to build a website iteratively with Stitch, using an autonomous baton-passing loop.

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

Builds layouts with Tailwind CSS utilities: responsive grids, flex and grid page structures and component styling.

Builds a design system inside an Expo app: design tokens for colour, spacing and type, plus component variant conventions.

Builds Expo screens that feel native: Apple HIG styling, semantic colours, native controls, SF Symbols and visual effects.

Creates and evolves a design system: tokens, component architecture, accessibility guidelines and documentation templates.

Creates, edits and reviews draw.io diagrams, including XML editing, PNG conversion and AWS icons.

Works with Excalidraw files and diagrams, delegating the operations to subagents to protect the context window.

Generates memes from more than 100 templates through the memegen.link API.

Guides the creation of software diagrams in Mermaid: class, sequence, flow, ER and C4 diagrams.

Creates and maintains Figma Code Connect files that map Figma components to code snippets.

Turns a Figma design into code through the Figma MCP server.

Translates an application page or multi-section layout from code into a Figma design.

Generates diagrams in Figma through the MCP server's generate_diagram tool.

Builds or updates a design system in Figma from a codebase: variables, tokens and component libraries with variants.

Translates motion and animation from a Figma design into production application code.

Helps an agent use Figma's use_figma MCP tool in FigJam files.

Helps an agent use Figma's use_figma MCP tool in Figma Slides files.

Teaches an agent how to call Figma's use_figma MCP tool correctly and avoid common failures.

Builds a Webflow page, section or full site from a Figma design through the Figma and Webflow MCP servers.

Creates an on-brand Canva presentation from an outline or brief.

Translates all the text in a Canva design into another language and saves it as a translated copy.