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.
Guides29
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
Seven AI app builders compared for 2026 — v0, Lovable, Bolt, Replit Agent, Base44, Emergent, and Rork — with a verdict, a pricing model, and a best-for each.
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.
AI Meeting Notes: Turn Transcripts into Decisions and Action Items
Use AI to turn a meeting transcript into clear minutes, with evidence for decisions, confirmed owners, unresolved questions, and a reviewable action list.
Analyze Customer Feedback with AI: Themes You Can Check
Analyze customer feedback with AI using a source register, a reviewed codebook, distinct customer counts, and examples that preserve context.
ChatGPT Projects vs Claude Projects for Teams
Compare shared AI project context in ChatGPT and Claude, then build a team brief with clear instructions, source ownership, and a review process.
Create an AI Presentation from a Report: A Reviewable Workflow
Turn a business report into an AI-assisted presentation with a claim-to-slide map, source checks, speaker notes, and a finished-deck review.
How to Research Documents with AI and Verify Citations
Turn a set of documents into a defensible AI research brief with a source register, conflict table, citation checks, and clear unanswered questions.
Create an AI Explanatory Diagram from Approved Text
Choose a diagram that preserves the relationships in approved text, then inspect labels, arrows and the exported visual before reuse.
Review AI Alt Text in the Context of Its Page
Draft image text alternatives from actual image evidence and page purpose, then review informative, decorative and functional uses before publishing.
Test AI Asset Search with Known Asset Examples
Evaluate asset discovery with a small set of known examples, expected exclusions and reviewed results before relying on natural-language catalog search.
Build a Source-Grounded AI Mind Map
Turn a bounded document set into a reviewed concept hierarchy with evidence for each branch and visible unresolved relationships.
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.
Plan AI Survey Branching Before Building the Form
Turn approved survey questions and routing rules into an explicit branch table, with stable IDs and unresolved paths before an AI form builder runs.
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.
Plan an AI Storyboard from an Approved Script
Map an approved script into AI-assisted storyboard shots with beat IDs, visual constraints, continuity checks and a human review before production.
Review AI-Generated 3D Meshes Before Asset Handoff
Evaluate an AI-generated mesh against a named target app and supplied asset requirements, using real inspection reports and human view checks.
Review AI Localization with a Glossary and Source-Target Checks
Review AI-translated copy with a source-target register, approved terminology, protected placeholders, contextual checks, and qualified language review.
Draft AI Chart Long Descriptions from Verified Data
Review a chart-description draft against the frozen source table, actual visual observations and its implemented page placement.
Review AI PBR Texture Imports Against the Target Material
Check an AI texture set in its actual target material setup, preserving map roles, UV information and viewer evidence before approving the asset.
Review AI Digital Asset Metadata with a Controlled Vocabulary
Review AI-suggested asset tags against a supplied vocabulary, original asset versions and human visual observations before changing a catalog.
Test AI Survey Logic with Known Response Paths
Create complete response-path cases for an AI-built survey, check a local route model, then preview the actual form before collection.
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.
Tools23
The AI tooling directory
V0
Vercel's generative UI builder that turns prompts into production-ready React, Next.js, and shadcn/ui apps.
Dovetail
Dovetail organizes customer research and feedback with AI transcription, project summaries, searchable evidence, and channels for recurring signals.
Napkin AI
Napkin AI turns imported or pasted text into editable visuals for documents and presentations, with export choices that depend on plan.
Bynder
Bynder centralizes digital assets and offers AI-assisted metadata and discovery, including image search and similarity-based asset finding.
Be My Eyes
Evaluate Be My Eyes for a personal picture question, recording useful clarification, remaining uncertainty and independent evidence for consequential details.
Meshy
Evaluate Meshy with a versioned prop pilot, owner-set requirements, real inspection reports and actual target-application viewer evidence.
Miro
Evaluate Miro as a shared review surface for an approved concept hierarchy and its relationship ledger.
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.
Deepl
DeepL provides AI translation for text and documents, with preferred-term glossaries and paid options for team translation and customization workflows.
Alttext AI
Evaluate AltText.ai drafts against inspected observations, page purpose, correction notes and the actual publishing review process.
Boords
Boords uses AI to turn scripts into storyboard structure and image prompts, with frame notes and timed animatic previews for production planning.
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.
Glossary15
AI terms, defined precisely
Alternative Text
Choose useful wording for an image placement by keeping inspected observations, page purpose and human approval together.
Thematic Analysis
Thematic analysis interprets patterns of meaning in qualitative data, such as interview transcripts, open survey answers, and customer feedback.
Physically Based Rendering
Review an AI material handoff without confusing supplied map files with verified appearance in the target scene.
UV Mapping
Understand why a 3D handoff keeps mesh, surface-layout and texture versions together before approving their actual target appearance.
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.
Animatic
An animatic is a timed preview of storyboard frames, often with audio, used to review pacing before production; AI-generated frames remain drafts.
Digital Asset Management
A catalog-review concept for separating files, descriptive metadata and supplied approval records before reuse.
Machine Translation Post-editing
Machine translation post-editing is human revision of machine-translated text against the source, context, terminology, and agreed quality requirements.
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.
Agents7
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.
Survey Design Reviewer
Use this agent to review a draft customer survey before collection: check leading wording, double-barreled questions, missing response options, inconsistent scales, unsupported recall periods, and whether each question can answer the stated research objective. Return an annotated review and proposed rewrites without changing the survey.
Storyboard Continuity Reviewer
Review storyboard frames or shot descriptions against an approved script and supplied continuity constraints. Flag omitted beats, changed actions, prop/character drift and timing assumptions in a shot-level report; do not rewrite the approved script, generate images or grant production approval.
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'.
Localization Copy Reviewer
Review paired source and translated marketing or help-document text for a specified locale against supplied terminology and style rules: flag lost meaning, negation, conditions, numbers, protected terms and ambiguous segments, with evidence-linked proposals for a human language reviewer.
Image Description Reviewer
Review still-image text alternatives against page purpose, verified visual evidence and source data; flag missing meaning, invented detail and chart-description conflicts without claiming conformance.
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.
Skills13
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.
Feedback Codebook Designer
Design a versioned coding codebook for recurring customer-feedback classification from a supplied pilot sample: define one code per job with inclusion rules, exclusions, verbatim examples, boundary cases, and an unresolved bucket. Use before labeling support tickets or survey comments, or when a feedback taxonomy has overlapping labels; do not synthesize interviews or rank product priorities.
Source Concept Map Builder
Build a concept-node and relationship table from supplied document passages for one focal question, preserving source locations and contested edges before an AI mind map is drawn.
3D Asset Handoff Sheet
Build a 3D asset handoff sheet from supplied export metadata, target-app technical reports and human viewer notes, preserving mesh/UV/material versions and untested checks.
Storyboard Shot Brief
Convert an approved short script into a shot brief with stable beat IDs, action, dialogue, composition, continuity constraints and proposed duration. Use before storyboard image generation; do not write a new script, create final art or approve a production.
Image Description Draft
Draft purpose-specific still-image text alternatives from supplied verified visual observations and page context, separating short alt text from complex-image long-description needs.
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.
Asset Metadata Review Ledger
Map AI-suggested media catalog tags to a supplied controlled vocabulary and asset-version evidence, returning accept/reject/unresolved rows without inferring identities or usage rights.
Localization Glossary Builder
Build a draft bilingual terminology glossary from supplied source-target samples and product references: retain term IDs, approved equivalents, protected strings, context, disallowed variants and unresolved translations. Use before reviewing localized marketing or help copy; do not translate a whole document or invent approved terms.
Commands6
Slash commands for Claude Code
Check Translation Tokens
Compare recognized named placeholders in a source-target translation CSV with Python, preserving token multiplicity and flagging blank targets. Supports exact {name}, {{name}}, and %(name)s/%(name)d forms; does not validate full ICU, HTML, positional placeholders, or translation meaning.
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.
Check Storyboard Coverage
Check storyboard-coverage.json for unique beat/shot IDs, cited beat excerpts, positive shot durations and uncovered script beats, without changing the script or storyboard.
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.