Design & Creative skills

Instead of generic AI design help, Design Studio loads specialized design knowledge for each task — the right expertise activates based on what you're building. Quick Start · Commands · The Team · How It Works · Changelog Running /design Build a pricing page with monthly/annual toggle automatically loads UI Designer, Content Designer, Motion Designer, and Design System Lead references — each contr

Use when starting any conversation - establishes how to find and use skills, requiring Skill tool invocation before ANY response including clarifying questions

Create interface designs, wireframes, and design systems. Masters

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.

Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.

Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency.

Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.

Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

When the user wants help with paid advertising campaigns on Google Ads, Meta (Facebook/Instagram), LinkedIn, Twitter/X, or other ad platforms. Also use when the user mentions 'PPC,' 'paid media,' 'ad copy,' 'ad creative,' 'ROAS,' 'CPA,' 'ad campaign,' 'retargeting,' or 'audience targeting.' This skill covers campaign strategy, ad creation, audience targeting, and optimization.

A fast, lightweight Model Context Protocol (MCP) server that empowers LLMs with browser automation via Puppeteer’s structured accessibility data, featuring optional vision mode for complex visual understanding and flexible, cross-platform configuration. - ⚡ Fast & lightweight. Utilizes Puppeteer's label index, not pixel-based input and accessibility DOM tree. - 👁️ Vision Mode Support. Optional vi

Game art principles. Visual style selection, asset pipeline, animation workflow.

Use when the user asks to generate or edit images via the OpenAI Image API (for example: generate image, edit/inpaint/mask, background removal or replacement, transparent background, product shots, concept art, covers, or batch variants); run the bundled CLI (`scripts/image_gen.py`) and require `OPENAI_API_KEY` for live calls.

Simplification and readability techniques. Use when writing for broad audiences or simplifying complex content. Covers active voice, short sentences, jargon elimination, and accessibility principles from the Plain Language Movement.

Design Skill OS is not just a document; it's a professional-grade reasoning layer that transforms standard AI outputs into elite-level design masterworks. We have exhaustively synthesized principles from the "Design Bibles" to prime your AI agent with the strategic intent of a world-class Creative Director. The intelligence core is distilled from the collective wisdom of masters: - Milton Glaser (

Master TypeScript with advanced types, generics, and strict type

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

Automate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas.

Use when implementing any feature or bugfix, before writing implementation code

This MCP server provides a tool to download entire websites using wget. It preserves the website structure and converts links to work locally. The server requires wget to be installed on your system. Using Homebrew: 1. Using Chocolatey: 2. Or download the binary from: https://eternallybored.org/misc/wget/ - Download the latest wget.exe - Place it in a directory that's in your PATH (e.g., C:\Window

Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.

Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.