AI for Designers
Claude Design, Figma-to-code with Claude Code, design-system upkeep, and the AI design and image tools that fit a working designer's stack.
Start here
Read these in order — each one assumes the last.
- 01GuideClaude Design: The Complete Guide (2026)Claude Design explained: what it makes, plans and status, design-system import, the /design-sync handoff to Claude Code, exports, limits, and how it compares.
- 02GuideClaude Code for Designers: Prototype in Code Without Becoming an EngineerA designer's setup for Claude Code: permissions in plain language, the Figma MCP server, a CLAUDE.md for a design-system repo, and three workflows with prompts.
- 03GuideFigma to Code with Claude Code and the Figma MCP ServerWire Figma's MCP server into Claude Code, then turn one selected frame into on-system code: get_design_context, get_variable_defs, tokens, and a review pass.
- 04GuideThe Best AI Tools for Designers in 202616 AI tools for designers in 2026: prototyping, websites, image generation, decks, design-to-code, and design systems, with a pricing model and verdict each.
- 05GuideWhich Claude Plan Should a Designer Pay For?Pro, Max, Team, or Enterprise for a designer: what Claude Design needs, how the shared usage pool works, and which tier fits solo, team, and agency work.
Guides12
Tutorials and deep-dives
What Are Claude Skills? The Complete Guide
Claude Skills explained: what a SKILL.md is, how progressive disclosure keeps skills cheap, where they run, and how to install or write your own.
Best AI App Builders in 2026: v0 vs Lovable vs Bolt vs Replit
The prompt-to-app builders compared — v0 for production UI, Lovable for full apps, Bolt for in-browser velocity, Replit for build-and-host in one place.
What Is Claude Code?
A grounded explanation of Claude Code: an agentic command-line coding tool that reads files, runs commands, and works in a loop toward a goal.
Anthropic's Design Plugin for Claude: Every Skill Explained
Every skill in Anthropic's open-source design plugin for Claude Cowork and Claude Code, the connectors it expects, the install commands, and what it leaves out.
Claude Design vs Figma Make: Which Prompt-to-Prototype Tool?
Claude Design vs Figma Make compared on what each makes, plan and seat requirements, design-system input, refinement, export, and handoff to code.
Claude Skills for Designers: 5 to Upload Today
Five Claude skills for designers: brief, critique, token extraction, component spec, and UX copy review. What each returns, a prompt for each, and upload steps.
Maintaining a Design System with Claude Code
Tokens, components, docs, and the Figma file drift apart within weeks. A repo layout, CLAUDE.md rules, and three Claude Code jobs that catch it every week.
The Best AI Image Generators in 2026 (for Design Work)
AI image generators compared for design work in 2026: text rendering, vector output, style control, commercial licensing, API access, and pricing model.
Screenshot-to-Code: Building UIs from Images with AI
Turn a screenshot, mockup, or Figma frame into working frontend code with AI vision models — the realistic workflow, the right tools, and the honest pitfalls.
Vision-Language Models Compared (2026)
Which vision-language model to reach for, by job: Claude, GPT, Gemini, and open models like Qwen3-VL compared on OCR, charts, grounding, video, and cost.
25 Claude Code Tips, Shortcuts, and Power Features
The 25 highest-leverage Claude Code tips — keyboard shortcuts, bash and memory prefixes, session commands, model tricks, and power features most people miss.
v0 vs Lovable: AI App Builders Compared (2026)
v0 vs Lovable — Vercel's generative UI tool vs the full-app builder. Component quality vs end-to-end apps, code ownership, and who each serves best.
Tools14
The AI tooling directory
V0
Vercel's generative UI builder that turns prompts into production-ready React, Next.js, and shadcn/ui apps.
Canva
A design platform whose Magic Studio and Canva AI features generate designs, copy, and edits on top of your brand kit, across web, desktop, and mobile.
Figma Make
Figma's prompt-to-app tool: describe an idea or paste a design and get a working, code-backed prototype you can keep editing inside Figma.
Framer AI
A website design tool with AI agents that generate editable pages, wireframes, CMS content, and code components, then publish to hosting Framer runs.
Ideogram
An image generator built around reliable text rendering, with prompt tooling, background control, on-brand custom models, an API, and an MCP server.
Midjourney
An image and video generator with a web app and a Discord bot, known for strong aesthetic defaults, style references, an inpainting editor, and paid-only plans.
Recraft
An AI image platform built for designers, with editable vector output, reusable custom styles, mockups, and an API for image and vector generation.
Relume
An AI site builder that turns a brief into a sitemap, wireframes, and a designed marketing site, then exports to Figma, Webflow, or React.
Stitch
Google's AI design canvas that turns prompts, voice, images, or an existing codebase into high-fidelity mobile and web UI, with frontend code and a Figma paste.
fal
fal is a generative-media inference cloud for running image, video, and audio diffusion models fast — 1,000+ models, a simple API, and pay-per-use pricing.
Replicate
Run and deploy any open ML model — LLMs, image, video, audio — through one API with pay-per-second billing, and package your own with open-source Cog.
Chrome DevTools MCP
Google's official MCP server that gives coding agents a live Chrome — Puppeteer automation plus DevTools network, console, and performance insights.
Figma MCP
Figma's official MCP server — structured design context, variables, screenshots, and Code Connect mappings for agents, plus write-back to the canvas.
Lovable
An AI app builder that turns natural-language prompts into shippable full-stack web apps.
Glossary8
AI terms, defined precisely
Design Tokens
Design tokens are named values for a design system's decisions — color, spacing, type, radius — stored once and referenced everywhere instead of hardcoded.
Design-to-Code
Design-to-code is turning a design — a Figma file, a screenshot, or a generated mockup — into working front-end code, increasingly by an AI agent.
Diffusion Model
A diffusion model generates an image by starting from random noise and removing it step by step, guided by a prompt, until a coherent picture remains.
Generative UI
Generative UI is an interface produced by a model from a prompt — a whole screen, flow, or prototype generated rather than assembled by hand.
Text-to-Image
Text-to-image is generating a picture from a written prompt, using a model trained to turn a description into pixels — or, in some tools, vectors.
Computer Use
Computer use is an AI agent operating software through its real interface — reading the screen, moving the cursor, clicking, and typing like a person would.
Multimodal AI
Multimodal AI processes more than one kind of input or output — text, images, audio, video — in a single model, like an LLM that reads screenshots or speaks.
VLM (Vision-Language Model)
A VLM jointly understands images and text — reading documents, screenshots, charts, and photos and reasoning about them in language.
Agents3
Specialized subagents for focused work
Frontend Developer
Use this agent to build UI — responsive layouts, components, accessibility, and design-system work. Examples — implementing a Figma design, fixing a11y issues, building a reusable component.
Design Systems Librarian
Use this agent to keep a design system's tokens, components, and documentation consistent with each other — finding hardcoded colors, spacing, and radii that should be tokens, components with no docs and docs describing variants that no longer exist, naming drift between token names, component names, and design-tool variables, and stale documentation — then reporting the drift with severity and a prioritized fix list. Examples — 'audit our design system for hardcoded values', 'which components are undocumented or documented wrong?', 'our token names and the Figma variables have diverged, show me where'.
Accessibility Auditor
Use this agent to audit web UI against WCAG 2.2 AA — semantics, keyboard, ARIA, contrast, forms, and motion. Examples — auditing a new component for keyboard traps, checking a form for accessible errors, running a pre-ship a11y pass on a page.
Skills6
Reusable capabilities Claude loads on demand
Accessibility Regression Auditor
Audit a UI change for accessibility regressions by combining automated checks with keyboard, focus, semantic, name-role-value, contrast, zoom, and screen-reader-oriented inspection. Use when reviewing a component or pull request, adding a dialog or form, changing navigation, or investigating an accessibility failure that a linter alone cannot explain.
Component Spec Writer
Turn a component screenshot or written description into a developer handoff spec covering anatomy, variants, states, a props table with types and defaults, behavior, responsive rules, edge cases, accessibility notes for an auditor to verify, and open questions, keeping what the artifact shows separate from what was inferred and turning every gap into a question instead of a plausible default. Use when a component is going to engineering and the design file is the only documentation that exists.
Design Brief Writer
Turn a messy design request you paste in (a Slack thread, an email chain, meeting notes, a ticket) into a one-page design brief: goal, audience, constraints, success criteria, scope and non-goals, references needed, open questions, and timeline placeholders, with every item the source did not state marked as an inference and no constraint or deadline invented. Use when a request has arrived in fragments and the brief has to exist before design work starts.
Design Critique Checklist
Critique an attached screenshot or a described screen against a fixed seven-part checklist (visual hierarchy, spacing and alignment, typography, color and contrast as observed, empty, loading, and error states, consistency, and copy) and return findings in one set report format, each with a location, a severity, and a suggested fix, deferring every WCAG measurement to an accessibility audit. Use when you want a repeatable design review of a screen that reads the same from one round to the next.
Design Token Extractor
Read a screenshot, a pasted stylesheet, or a written component description and produce a design token set as W3C DTCG-style JSON, with colors, a type scale, spacing, radii, and shadows grouped and named, followed by a notes list saying which values were read exactly, snapped to a scale, or estimated by eye. Use when a design exists only as pixels or ad-hoc CSS and you need a named token set to start from.
UX Copy Reviewer
Review a set of interface strings you paste in (buttons, labels, empty states, errors, confirmations, tooltips) as one set rather than one at a time, checking clarity, term consistency across screens, error and empty-state quality, whether each action label matches what happens, and length against any limits you supply, and returning a verdict and a rewrite per string without inventing a product fact the strings do not contain. Use when microcopy has accumulated across a product and nobody has read it end to end.
Commands4
Slash commands for Claude Code
Critique Screen
Read a UI screenshot from a path or URL, run the fixed design critique checklist over it, and write the report to design/critiques/ without touching the design or the code.
Design Tokens
Extract design tokens from a stylesheet, a Tailwind or theme config, or a screenshot, then create or update design/tokens.json and report every added, changed, and removed token.
Audit Accessibility
Audit a component or page for accessibility against WCAG — semantics, names, keyboard, ARIA, contrast, forms, motion.
New Component
Scaffold a new UI component matching the project conventions.