# AI Design Guide

> Practical guides, tool reviews, prompts and templates for product designers and design system teams running AI agents on real design work. Written by Romina Kavčič, a freelance (fractional) design system lead with 18+ years in product design and UX. Every guide comes from her own client and product work.

Access: pages marked "public" are open to everyone. "free account" pages need a free sign-up at https://www.aidesign.guide/signup. "members" pages are part of the paid Pro or Master plans (https://www.aidesign.guide/pricing).

Agent-readable summary of the site, access rules and how to cite it: https://www.aidesign.guide/agents

## About the author

- Romina Kavčič: freelance (fractional) design system lead. She consults companies like Lebara, Bosch, Siemens Energy and TÜV SÜD, among others. [LinkedIn](https://www.linkedin.com/in/rominakavcic/), [X](https://x.com/rominakavcic), [The Design System Guide](https://thedesignsystem.guide/)
- Work with her: [services](https://romina.design/services)

## Original data

- [Design Systems Directory](https://www.aidesign.guide/design-systems) (public): 182 design systems, component libraries and UI toolkits with tech stack, features, component counts, GitHub activity and industry. Refreshed weekly.
- [Agentic UX Patterns](https://www.aidesign.guide/agentic-ux-patterns) (free account): 39 interaction patterns from AI agents in web, mobile and terminal products, each with real screenshots and a note on what it means for a design system. Updated 2026-10-11.
- [Tool comparisons](https://www.aidesign.guide/compare) (public): 40 side-by-side comparisons of AI and design system tools.
- [AI Design Dictionary](https://www.aidesign.guide/dictionary) (public): 34 terms, techniques and styles for describing design to AI.

## Start here

- [What is an agentic design system](https://www.aidesign.guide/guides/what-is-an-agentic-design-system) (public)
- [Agentic design workflows](https://www.aidesign.guide/guides/agentic-design-workflows) (public)
- [Semantic tokens as prompt engineering](https://www.aidesign.guide/guides/semantic-tokens-as-prompt-engineering) (public)
- [What is a contextual interface](https://www.aidesign.guide/guides/what-is-a-contextual-interface) (public)
- [All guides](https://www.aidesign.guide/guides), [All tools](https://www.aidesign.guide/tools), [Pricing](https://www.aidesign.guide/pricing)

## Guides (93)

- [5 GitHub Actions Every Designer Should Automate](https://www.aidesign.guide/guides/5-github-actions-every-designer-should-automate) (members): You do not need to become a DevOps person. Five small workflows that catch broken tokens, build your docs site, lint your code, and turn random scripts into one-click tools.
- [Advanced Claude Code for Designers (Module 7)](https://www.aidesign.guide/guides/advanced-claude-code-for-designers) (members): The Power User module. Ten lessons that take you from basic Claude Code use to a fully orchestrated design-system workflow: CLAUDE.md, workspace organization, skills, parallelization, auto research, browser automation, security, context management, cloud sessions, and diversification.
- [Agentic Design Workflows: What They Are and How to Start](https://www.aidesign.guide/guides/agentic-design-workflows) (public): A practical definition of agentic design workflows: what changes when AI agents run real design work under your system, the three parts every workflow needs, and the first one worth building.
- [AI Anti-Patterns Gallery: 10 Reasons Your AI Website Looks Generic](https://www.aidesign.guide/guides/ai-anti-patterns-gallery) (free account): A visual gallery of the 10 most common AI-generated design clichés, why they happen, and the specific rule you can add to your project rules to prevent each one.
- [AI for Designers 101](https://www.aidesign.guide/guides/ai-for-designers-101) (free account): What AI tools are, how they differ, which ones matter for designers, and a practical first-week plan for getting started without the hype.
- [Audit 500 Components in 10 Minutes](https://www.aidesign.guide/guides/component-audit-workflow) (members): A complete workflow for auditing your entire Figma component library using Tidy and Claude. Identifies naming issues, missing descriptions, and inconsistencies.
- [Audit a Design System in 30 Minutes](https://www.aidesign.guide/guides/design-system-audit-30-minutes) (members): A step-by-step workflow to audit any design system using AI tools. Check token naming, component health, accessibility, and visual consistency in one session.
- [Automate Browser Testing Without Writing Code](https://www.aidesign.guide/guides/playwright-for-designers) (members): Screenshot your whole design system, catch visual bugs before they ship, and audit every page automatically, using Playwright without touching a test file.
- [Automate Component Screenshots with Playwright](https://www.aidesign.guide/guides/playwright-visual-testing) (members): Screenshot every component automatically. Catch visual bugs before they ship, without clicking through pages manually.
- [Automate Design Token Publishing with GitHub Actions](https://www.aidesign.guide/guides/github-actions-token-sync) (members): Auto-publish your design tokens on every push. No more manual exports, no more out-of-sync code.
- [Automate the Boring Parts of Your Design System](https://www.aidesign.guide/guides/github-actions-for-design-systems) (members): Most design system problems are not caused by lack of intention. They are caused by inconsistent execution. GitHub Actions fix that by running the boring parts every single time.
- [Browser Automation for Design QA](https://www.aidesign.guide/guides/browser-automation-for-design-qa) (members): Delegate the mechanical parts of design QA to an AI agent that drives a real browser. Token usage, contrast, dark mode, responsive, and focus state checks that run on every PR without you clicking through every page.
- [Build a Component Audit Skill for Claude Code](https://www.aidesign.guide/guides/component-audit-skill) (members): A Claude Code skill that audits every component in your library. Checks docs, props, accessibility, and token usage in one slash command.
- [Build a Design System Pitch Deck with AI](https://www.aidesign.guide/guides/ds-pitch-deck-with-ai) (members): Use Claude to generate a compelling pitch deck that gets leadership buy-in for your design system investment.
- [Build a Token Naming Audit Skill for Claude Code](https://www.aidesign.guide/guides/token-naming-skill) (members): A reusable Claude Code skill that checks every token in your design system against your naming convention. One slash command, instant audit.
- [Build a Token Parity Check Skill for Claude Code](https://www.aidesign.guide/guides/token-parity-check-skill) (members): A Claude Code skill that compares your tokens between Figma and code. Catches drift before it ships, with one slash command.
- [Build a Token Pipeline with Style Dictionary](https://www.aidesign.guide/guides/style-dictionary-pipeline) (members): Transform design tokens from JSON to CSS, iOS, Android in one command. One source of truth, every platform covered.
- [Build Free Design System Docs with Astro Starlight](https://www.aidesign.guide/guides/astro-starlight-design-system-docs) (members): Mintlify is $120 a month. Supernova is enterprise pricing. Astro Starlight is free, fast, and good enough for most design system teams. Here is the full setup, the styling, the Figma embeds, and the AI-assisted automation.
- [Build Your Design Team's Operating System in a Repo](https://www.aidesign.guide/guides/design-team-operating-system-in-a-repo) (members): Your team's operating knowledge (how you name tokens, review work, and decide what good is) lives in people's heads. Put it in a repo of skills and playbooks and your least AI-fluent teammate works like your best one, while agents execute against the same source. This guide builds it, with the maturity ladder and review model that keep it honest.
- [Build Your Own MCP Server for Your Design System](https://www.aidesign.guide/guides/build-mcp-server-for-your-design-system) (members): Stop pasting token tables into prompts. In about 100 lines of TypeScript, give every AI tool on your team live, queryable access to your tokens and components, and a lint tool that maps raw values back to the system.
- [Build Your Own Taste Skill: Turn Your Design Preferences Into Reusable AI Rules](https://www.aidesign.guide/guides/build-your-own-taste-skill) (members): A hands-on workshop to convert your personal design taste into a /taste-skill command. By the end, Claude will generate UI that looks like yours, not like everyone else's.
- [Building the Agentic Operating Model (Part 5)](https://www.aidesign.guide/guides/building-the-agentic-operating-model) (members): Part 5 and the capstone of the Agentic Design Systems series. Tools and loops are not an operating model. This is how the people, the process, and the governance fit together so a team of humans and a fleet of agents can run a design system sustainably, without the whole thing depending on the one person who understands the agents.
- [Claude Code: App vs Extension vs Terminal (Which One to Use When)](https://www.aidesign.guide/guides/claude-code-app-vs-extension-vs-terminal) (members): Claude Code comes in three flavors: a web/desktop app, a VS Code or Cursor extension, and a terminal CLI. Each one is designed for a different moment in your day. Here is which to pick.
- [Claude Fable 5 for Designers: What Actually Changes](https://www.aidesign.guide/guides/fable-5-for-designers) (free account): Fable 5 reads screenshots better, runs longer, and dispatches parallel agents on its own. Here is what that means for design reviews, audits, and your existing skills, and the three settings to change on day one.
- [Claude Opus 5.5 for Designers: What Changed in My Daily Work](https://www.aidesign.guide/guides/opus-5-5-for-designers) (members): Opus 5.5 is faster, reads design intent better, and builds in Figma through Tidy MCP in about half the time it used to take me. Here is what I noticed, what I switched to it for, and where Fable 5 still wins.
- [Claude Sessions, Offline and Online: Keep Working Even If You Lose Your Laptop](https://www.aidesign.guide/guides/claude-sessions-offline-and-online) (free account): Set up Claude so your work lives in two places at once: locally on your machine and in the cloud. Pick up the same project from your phone, a borrowed laptop, or a fresh install, with nothing lost.
- [Claude Skills vs Cowork: What's the Difference?](https://www.aidesign.guide/guides/claude-skills-vs-cowork) (members): Skills teach Claude how to do design work. Cowork runs Claude on more work at once. Here's when to reach for each, with five copy-paste skills designers actually use.
- [CLAUDE.md + tools.md: The Two Files Every AI Project Needs](https://www.aidesign.guide/guides/claude-md-tools-md-ai-project-files) (members): Why AI coding tools need both a project rules file and a tools file, what belongs in each one, and how to connect them so agents stop guessing your stack.
- [CLAUDE.md: Teaching Claude Your Design System](https://www.aidesign.guide/guides/claude-md-for-design-systems) (members): The single highest-leverage file in your repo. Compress your design system into a CLAUDE.md so Claude Code stops hallucinating tokens, inventing components, and forgetting your conventions every session. Includes a fill-in template and a before/after that you can run yourself.
- [Codex Skills vs Plugins: What Designers Actually Need](https://www.aidesign.guide/guides/codex-skills-vs-plugins) (members): Skills teach Codex how to run your workflow. Plugins connect Codex to tools and package reusable setups. Here is the practical designer version, with examples for design QA, docs, inbox triage, and design-system audits.
- [Codex Subagents for Design Review](https://www.aidesign.guide/guides/codex-subagents-for-design-review) (members): Use Codex subagents to run accessibility, first-time user, copy, edge-state, and design-system reviews in parallel, then merge the findings into one prioritized report.
- [Connect Your Figma Designs to Claude and Cursor](https://www.aidesign.guide/guides/figma-mcp) (free account): Stop copy-pasting screenshots into AI. Set up Figma Dev Mode MCP so Claude and Cursor can read your designs directly, then ship code that actually matches your file.
- [Context Is the Product: The Hidden Skill Behind Every Reliable AI Agent](https://www.aidesign.guide/guides/context-is-the-product) (members): Good prompts produce good output once. Good context produces good output forever. A practical guide to structuring your projects so Claude Code, Codex, Cursor, or another AI assistant reads, understands, and acts consistently.
- [Convert Figma Variables to CSS Custom Properties](https://www.aidesign.guide/guides/figma-variables-to-css) (members): Export Figma variables and transform them into production-ready CSS custom properties your engineers can use immediately.
- [Create a One-Page Design System Strategy](https://www.aidesign.guide/guides/one-page-ds-strategy) (members): Use AI to distill your design system vision, principles, priorities, and success metrics onto a single page that aligns your entire team.
- [Design Token Naming: 7 Systems Compared](https://www.aidesign.guide/guides/design-token-naming-compared) (free account): How Polaris, Carbon, Primer, Material Design, Lightning, Spectrum, and Fluent name their tokens. Side-by-side comparison with patterns, examples, and what to steal for your system.
- [Designers Hit Claude's Usage Limits Faster Than Anyone. Here's How to Fix It.](https://www.aidesign.guide/guides/claude-usage-limits-for-designers) (free account): Why design work burns through Claude usage faster than coding does, and a practical playbook to make a Pro or Max plan last all day without hitting the wall.
- [Enter and Exit: The First Motion to Get Right](https://www.aidesign.guide/guides/enter-and-exit) (free account): The four ways an element can arrive on screen, when to use each, and the one rule that makes them feel native: exits run faster than entrances. Includes an interactive demo you can replay.
- [Extended Thinking as a Design System Debugger](https://www.aidesign.guide/guides/extended-thinking-as-a-design-system-debugger) (members): Anthropic markets it as a reasoning feature. I use it as a debugger. When Claude misnames a token or mislabels a component, the scratchpad tells you exactly why.
- [Few-Shot Examples for Component Naming](https://www.aidesign.guide/guides/few-shot-examples-for-component-naming) (members): How I label 20 component names by hand and get Claude to pattern-match the rest. Practical setup for component naming, token naming, and any classification task.
- [Figma Make vs Lovable vs v0 vs Bolt vs Replit (AI UI Builders Compared)](https://www.aidesign.guide/guides/figma-make-vs-lovable-vs-v0-vs-bolt-vs-replit) (free account): Five AI tools generate UI from a prompt. They are not interchangeable. Here is what each one is actually good at, what it ships, and when to pick which.
- [Figma to Code with MCP](https://www.aidesign.guide/guides/figma-to-code-mcp) (members): End-to-end workflow for converting Figma designs to production code using MCP servers. From design to implementation in minutes, not hours.
- [Five Patterns for Agentic UI](https://www.aidesign.guide/guides/designing-agentic-ui-patterns) (members): An agent inside your product creates states you do not control: variable steps, variable output, and actions with real consequences taken on a user's behalf. Five patterns keep that surface trustworthy: deterministic confirmation gates, reasoning states, canonicals, intent-first navigation, and recovery.
- [From Executor to Orchestrator: The Career Shift Every Designer Needs to Make](https://www.aidesign.guide/guides/from-executor-to-orchestrator) (members): The biggest change in design work is not the tools. It is the role. This essay maps the shift from designer-as-executor to designer-as-orchestrator, with a concrete picture of what each half of your week should look like now.
- [Generate Component Documentation with AI](https://www.aidesign.guide/guides/generate-component-docs) (members): Use Claude Code, Codex, Cursor, or another repo-aware AI tool to scan your component library and generate specs, props tables, and usage guidelines in minutes.
- [Hover and Press: Make the Interface Answer Back](https://www.aidesign.guide/guides/hover-and-press-feedback) (free account): Micro-feedback is the cheapest motion with the highest payoff. Hover lifts, focus rings, and a press that scales down all tell the user the interface heard them. Includes a live demo.
- [How and Why I Use Manus as My Research Assistant](https://www.aidesign.guide/guides/manus-research-assistant) (members): Manus is the only AI agent I trust to run research end-to-end without me babysitting every step. Here is how I use it, what it does well, and where I still verify by hand.
- [How I Wake Up to Fresh YouTube Transcripts in Obsidian](https://www.aidesign.guide/guides/overnight-youtube-transcript-flow) (members): A practical walkthrough of the small automation flow I use to collect new YouTube videos overnight, turn their captions into markdown transcripts, summarize the useful ones, and sync everything into Obsidian before I start work.
- [How to Build a Customer Context Folder for AI](https://www.aidesign.guide/guides/customer-context-folder-for-ai) (members): A lightweight folder structure that organizes your customer research so AI can use it for better copy, positioning, product ideas, and landing pages.
- [How to Create a GitHub Action (and Why It Matters)](https://www.aidesign.guide/guides/how-to-create-a-github-action) (members): If you already use GitHub, Actions give you a way to say 'when this happens, automatically do this'. A step-by-step beginner guide for designers.
- [How to Create Custom Skills for Claude Code](https://www.aidesign.guide/guides/claude-code-custom-skills) (members): Build reusable slash commands that teach Claude Code your workflows, writing voice, and design system rules. No coding required.
- [How to Describe Design Styles to AI](https://www.aidesign.guide/guides/how-to-describe-design-styles-to-ai) (members): Turn vague style words like retro, premium, or playful into precise art direction that AI can actually use.
- [How to Evaluate AI Output Like a Senior Designer](https://www.aidesign.guide/guides/evaluate-ai-output-like-a-senior-designer) (members): A six-lens rubric for catching polished mediocrity, surface-level UI, and the gap between 'looks good' and 'actually works' in AI-generated design.
- [How to Prompt Claude to Audit a Figma Design](https://www.aidesign.guide/guides/prompt-claude-to-audit-figma-design) (members): A 5-version walkthrough showing how a bare prompt becomes a production-ready design audit. Built on the same iterative method Anthropic teaches internally.
- [How to Use AI to Explore Multiple Visual Directions Fast](https://www.aidesign.guide/guides/explore-visual-directions-with-ai) (members): A practical workflow for using AI to generate multiple distinct visual directions before committing to one, so you choose between strong alternatives instead of polishing a single idea too early.
- [How to Use GitHub Actions With AI](https://www.aidesign.guide/guides/github-actions-with-ai-workflows) (members): AI is good at generation. GitHub Actions are good at repeatable execution. Pair them and you get the reliability layer most AI-assisted design workflows are missing.
- [How to Write Better AI Prompts for Landing Pages](https://www.aidesign.guide/guides/better-ai-prompts-for-landing-pages) (members): A formula-based approach to prompting AI for landing pages that convert, not just landing pages that look nice.
- [Motion Decision Tree: When to Animate, What to Animate, What to Leave Still](https://www.aidesign.guide/guides/motion-decision-tree) (free account): A decision framework for choosing the lightest possible motion that still does the job, instead of defaulting to animate everything. Includes paste-ready project rules for each motion level.
- [Observer Mode: Learning Before Acting (Part 3)](https://www.aidesign.guide/guides/observer-mode-learning-before-acting) (members): Part 3 of the Agentic Design Systems series. Observer is the longest, cheapest, most-skipped trust level. Run an agent read-only against your real system for weeks before you give it any authority, and let the audit decide whether it should ever be promoted at all.
- [Parallel Review System: Run Four Reviews at Once, Ship Your Best Work Faster](https://www.aidesign.guide/guides/parallel-review-workflows) (members): Instead of one long review with six lenses, run four short reviews, each with one lens, in parallel. Learn the multi-lens pattern that cuts design review time in half and surfaces issues a single reviewer would miss.
- [Prompting Basics for Designers](https://www.aidesign.guide/guides/prompting-basics) (members): Write better prompts for AI tools. Practical patterns for design work: component generation, token audits, documentation, and more.
- [Pull Component Data from the Figma API](https://www.aidesign.guide/guides/figma-api-component-data) (members): Programmatically access your Figma components, styles, and variables. Build audits, reports, and automations on real data.
- [Put Claude Code Sessions Online](https://www.aidesign.guide/guides/put-claude-code-sessions-online) (members): How to choose between local resume, Remote Control, and Claude Code on the web so your AI work keeps running even when you step away from your computer.
- [Rolling Out AI Across a Design Team](https://www.aidesign.guide/guides/rolling-out-ai-across-a-design-team) (members): Individual adoption is easy; team capability is not. The operating model for taking AI from three enthusiasts to a whole design org: shared context repos, trust levels, usage norms, and the rituals that make it stick.
- [Run a Token Naming Audit with AI](https://www.aidesign.guide/guides/token-naming-audit) (members): Use Claude Code, Codex, Cursor, or another repo-aware AI tool to scan your token files, flag naming inconsistencies, and generate a clean naming convention in minutes.
- [Run Your First AI-Powered Edit in Cursor](https://www.aidesign.guide/guides/install-cursor) (members): Install Cursor, open your first project, and make a real change with AI in under 10 minutes. No coding background required.
- [Safe AI for Designers: The Five Rules to Start With](https://www.aidesign.guide/guides/safe-ai-for-designers) (free account): How to use AI without leaking keys, breaking production, or sharing the wrong things. Plain English. Five rules every designer should set up before their first prompt.
- [Screenshot to UX Critique](https://www.aidesign.guide/guides/screenshot-to-ux-critique) (members): Turn any interface screenshot into actionable UX and UI feedback using a structured critique prompt and a six-lens evaluation framework.
- [Scroll Reveal: Motion That Earns Its Place](https://www.aidesign.guide/guides/scroll-reveal) (free account): Fade-and-rise on scroll is the most overused effect in AI-generated sites. Here is how to do it with restraint: trigger once, animate transform and opacity only, and never block content. Includes a live demo.
- [Set Up a Design System Adoption Tracker](https://www.aidesign.guide/guides/ds-adoption-tracker) (members): Build a simple tracking system to measure component usage across products and prove your design system's impact.
- [Set Up a Token CI/CD Pipeline](https://www.aidesign.guide/guides/token-cicd-pipeline) (members): Build an end-to-end pipeline from Figma to npm: Tokens Studio syncs to GitHub, Style Dictionary transforms, GitHub Actions publishes.
- [Set Up Claude Code (Step by Step for Designers)](https://www.aidesign.guide/guides/claude-code-for-designers) (members): Install Claude Code, open it in a folder, and run your first AI tasks. No coding background, no terminal experience needed. Just follow along.
- [Set Up Codex for Designers](https://www.aidesign.guide/guides/set-up-codex-for-designers) (free account): OpenAI Codex is a coding agent you can use from the app, terminal, IDE, cloud, and mobile. This designer-friendly setup guide shows what to install, what to connect, and the first safe tasks to run.
- [Set Up Visual Regression Testing with Chromatic](https://www.aidesign.guide/guides/chromatic-visual-regression) (members): Catch visual regressions in your Storybook before they reach production. Every component change reviewed, approved, or flagged.
- [Set Up Your AI Design Workspace in 20 Minutes](https://www.aidesign.guide/guides/set-up-your-ai-design-workspace) (free account): The plain-language Day 0 guide: which accounts to create, which tools to install first, and how to run one sanity check before you go deeper.
- [Share Live Prototypes with Vercel Preview Deploys](https://www.aidesign.guide/guides/vercel-preview-deploys) (members): Every pull request gets a live URL. Share prototypes without staging servers, without deployments, without waiting.
- [Stop Being Afraid of the Terminal](https://www.aidesign.guide/guides/what-is-cli) (members): A designer-friendly walkthrough of the black screen, the commands you actually need, and why the most powerful AI tools live here.
- [Sync Tokens Studio to GitHub](https://www.aidesign.guide/guides/tokens-studio-github-sync) (members): Version-control your design decisions. Every token change tracked, every update synced between Figma and code.
- [Taste Skills Are the New Design Tokens](https://www.aidesign.guide/guides/taste-skills-are-the-new-design-tokens) (members): Why the next generation of design systems will be measured in skills, not components. A strategic essay on the shift from visual tokens to promptable taste.
- [Teach AI Who You Are](https://www.aidesign.guide/guides/teach-ai-who-you-are) (members): Create a portable personal profile file so AI understands your role, taste, tools, voice, boundaries, and the kind of design help you actually want.
- [The AI-Assisted Accessibility Review](https://www.aidesign.guide/guides/accessibility-review-with-ai) (members): A repeatable workflow for catching contrast failures, broken focus states, and semantic problems before they ship, with Claude doing the sweep, axe doing the math, and you making the calls AI can't.
- [The Claude UX Copywriter Skill: Stop Shipping Lorem Ipsum and Generic Button Text](https://www.aidesign.guide/guides/claude-ux-copywriter-skill) (members): A ready-to-paste Claude Code skill that reviews and rewrites the interface copy in any generation: buttons, errors, empty states, and labels, all checked against real UX writing rules instead of the model's default marketing voice.
- [The Claude UX Motion Skill: Tame the Five Animations Every AI Site Ships By Default](https://www.aidesign.guide/guides/claude-ux-motion-skill) (free account): The full workshop for the /motion-audit skill: a ready-to-paste Claude Code skill that classifies every animation by the five-level motion system, strips the default scroll-fades and hover-bounces, and enforces a deliberate ceiling with sane durations and reduced-motion support.
- [The Design Style Phrasebook](https://www.aidesign.guide/guides/the-design-style-phrasebook) (members): 20 style directions with exact phrase blocks you can copy into Claude, Nano Banana, Kling, or any AI tool. Stop saying 'make it premium' and start giving real direction.
- [The Self-Healing Flywheel (Part 4)](https://www.aidesign.guide/guides/the-self-healing-flywheel) (members): Part 4 of the Agentic Design Systems series. When an agent has earned the right to fix things, the detect-propose-verify-merge-learn loop lets your design system repair its own drift while you sleep. Here is the loop, the four guardrails that keep it safe, and the moment you should switch it off.
- [The Taste Stack: Project Rules, Local Markdown, and Skills](https://www.aidesign.guide/guides/the-taste-stack) (members): Why AI-generated websites look the same, and how to fix it with a three-layer system that teaches your AI tool your visual standards, motion language, and copy tone.
- [Trust Levels: How Agents Earn Autonomy (Part 2)](https://www.aidesign.guide/guides/trust-levels-how-agents-earn-autonomy) (members): Part 2 of the Agentic Design Systems series. The five trust levels (Observer, Advisor, Junior, Senior, Autonomous), what each one is allowed to do, and the exact criteria to promote an agent from one level to the next.
- [Understand MCP in 10 Minutes (and Why It Changes Your AI Setup)](https://www.aidesign.guide/guides/what-is-mcp) (free account): The one protocol that lets AI read your Figma, GitHub, and docs directly. A plain-English explainer for designers, with examples of what it unlocks in real work.
- [What Is a Contextual Interface? (Part 1)](https://www.aidesign.guide/guides/what-is-a-contextual-interface) (public): Part 1 of The Pattern Engine series. UI assembled at runtime from user intent, and why your component library under-specifies for the agent doing the assembling. Sequel to the Agentic Design Systems series.
- [What Is an Agentic Design System? (Part 1)](https://www.aidesign.guide/guides/what-is-an-agentic-design-system) (public): Part 1 of the Agentic Design Systems series, based on Romina's IDS 2026 talk. A design system built for AI agents, not just humans. Stops hallucination before it ships.
- [What to Do When AI Gives You Junk](https://www.aidesign.guide/guides/what-to-do-when-ai-gives-you-junk) (members): A practical troubleshooting guide for designers: diagnose bad AI output, recover with better context, and know when to restart instead of polishing.
- [Your First UX Review Agent: A 30-Minute Hello World for Designers](https://www.aidesign.guide/guides/your-first-ux-review-agent) (members): Build a working UX review agent in 30 minutes. Point it at any screen, get back a prioritized list of first-time user issues, accessibility problems, and copy fixes. The concrete 'aha' moment of Claude Code for designers.
- [Your Tokens Are a Prompt: Semantic Naming for AI UI Builders](https://www.aidesign.guide/guides/semantic-tokens-as-prompt-engineering) (public): When an AI builds your interface, the token name is the instruction. Why visual names like color.blue.500 make models guess, and how intent-based names make generation predictable.

## Tool reviews (52)

- [Adobe Firefly](https://www.aidesign.guide/tools/adobe-firefly) (free account): Adobe's generative AI app for images, video, and audio. Runs Adobe's commercially safe Firefly models plus partner models from Google, OpenAI, and others, and feeds straight into Photoshop and Illustrator.
- [Bolt.new](https://www.aidesign.guide/tools/bolt-new) (free account): StackBlitz's prompt-to-app generator that spins up a full-stack project in the browser. Fast for throwaway prototypes, dangerous as a stand-in for a design system.
- [Builder.io Visual Copilot](https://www.aidesign.guide/tools/builder-io-visual-copilot) (free account): Builder.io's Figma-to-code tool (now marketed as Builder Design to Code) that maps Figma components to your real code components instead of inventing new ones every time.
- [ChatGPT](https://www.aidesign.guide/tools/chatgpt) (free account): OpenAI's general AI assistant for writing, research, image creation, coding and agent tasks, with a free tier and paid Go, Plus and Pro plans.
- [ChatGPT Images (formerly DALL-E 3)](https://www.aidesign.guide/tools/dall-e-3) (free account): OpenAI's image generation inside ChatGPT. DALL-E 3 has been retired and replaced by the GPT Image models, which handle text in images, multi-turn edits, and reference photos far better.
- [Claude](https://www.aidesign.guide/tools/claude) (free account): AI assistant by Anthropic with deep reasoning, large context windows, and MCP support. The best tool for design system documentation, token audits, and component specs.
- [Claude Code](https://www.aidesign.guide/tools/claude-code) (free account): Anthropic's terminal coding agent, and the single most useful AI tool in my design systems work. Token audits, Figma automation via MCP, docs generation, and full prototypes from one prompt window.
- [Cline](https://www.aidesign.guide/tools/cline) (free account): Open-source autonomous coding agent for VS Code, JetBrains, Cursor, Devin Desktop (formerly Windsurf), Zed, Neovim, the terminal and its own desktop app. .clinerules files make it the most design-system-friendly autonomous agent available.
- [Conductor](https://www.aidesign.guide/tools/conductor) (free account): A Mac app for running several coding agents (Claude Code, Codex, Cursor) in parallel, each in its own isolated workspace. The moment one agent stops being enough, this is the layer you are missing.
- [Consensus](https://www.aidesign.guide/tools/consensus) (free account): AI search engine for peer-reviewed research. Ask a question, get a cited answer drawn from 250M+ papers.
- [Craiyon](https://www.aidesign.guide/tools/craiyon) (free account): A free, browser-based AI image generator (formerly DALL-E Mini) with quick generators for logos, posters, clipart, and simple edits. Ads and watermarks on the free tier.
- [Cursor - AI Code Editor](https://www.aidesign.guide/tools/cursor-ai) (free account): AI-first code editor built on VS Code that helps designers write and understand code. Perfect for vibe coding prototypes and design system implementations.
- [Devin Desktop (formerly Windsurf)](https://www.aidesign.guide/tools/windsurf) (free account): The AI code editor formerly called Windsurf, renamed Devin Desktop by Cognition in 2026. An agentic IDE plus a command center for running local and cloud coding agents side by side.
- [Figma Console MCP](https://www.aidesign.guide/tools/figma-console-mcp) (free account): Open-source MCP server by Southleft for design system work in Figma: two-way token sync, component creation, Figma-to-code parity checks and accessibility audits. Write access, unlike read-focused servers.
- [Figma Make](https://www.aidesign.guide/tools/figma-make) (free account): Figma's native AI design-and-prototype tool that pulls in your library's components and tokens. The closest a generative AI tool has come to respecting an existing design system out of the box.
- [Figma MCP Server](https://www.aidesign.guide/tools/figma-mcp-server) (free account): Model Context Protocol server that connects AI coding tools directly to your Figma designs. Extract components, styles, and tokens without leaving your editor.
- [Figma Weave](https://www.aidesign.guide/tools/figma-weave) (free account): Node-based canvas for AI image and video generation, formerly Weavy, acquired by Figma in October 2025. Chain models from Google, OpenAI, Runway, Black Forest Labs and others with pro editing tools in one workflow.
- [Firecrawl](https://www.aidesign.guide/tools/firecrawl) (free account): Turn any website into clean, LLM-ready data. Scrape, crawl, and search the web to feed your AI assistants with real content for design research.
- [Fliki](https://www.aidesign.guide/tools/fliki) (free account): Turn text, scripts, and blog posts into videos with AI voices in 80+ languages.
- [Framer](https://www.aidesign.guide/tools/framer) (free account): Website builder for designers with an AI agent that creates editable pages, sections, copy and code components inside your project. Publishes real sites with CMS, SEO and localization.
- [GitHub Copilot](https://www.aidesign.guide/tools/github-copilot) (free account): GitHub's AI coding assistant: completions and agent mode in your editor, plus a cloud coding agent you can assign GitHub issues to. Models from OpenAI, Anthropic and Google.
- [Google Antigravity](https://www.aidesign.guide/tools/google-antigravity) (free account): Google's agent-first development platform: a desktop app, IDE and the agy CLI that replaced Gemini CLI for individual users in June 2026. Free for individuals, with built-in browser agents for checking UI.
- [Granola AI](https://www.aidesign.guide/tools/granola-ai) (free account): AI meeting notes that actually work. Granola transcribes, summarizes, and organizes your design reviews, critiques, and stakeholder meetings automatically.
- [invideo AI](https://www.aidesign.guide/tools/invideo-ai) (free account): Agentic video editor: describe edits in plain words and apply them on a real multitrack timeline.
- [Julius AI](https://www.aidesign.guide/tools/julius-ai) (free account): AI workspace for data analysis: upload spreadsheets, ask questions in plain language, get charts, reports and presentations.
- [Krea](https://www.aidesign.guide/tools/krea) (free account): Real-time AI image and video generation on a live canvas, plus one of the best upscalers available. Generation you steer with your hands, not just with prompts.
- [Looka](https://www.aidesign.guide/tools/looka) (free account): AI logo maker and brand kit generator for small businesses: logos, brand guidelines, social assets, and an AI-generated website. Free to explore, pay to download.
- [Lovable](https://www.aidesign.guide/tools/lovable) (free account): Prompt-to-app generator with a built-in backend (Lovable Cloud, built on Supabase). Best-in-class at full-stack generation. Worst-in-class as an excuse to skip having a design system.
- [Magic Patterns](https://www.aidesign.guide/tools/magic-patterns) (free account): Generates real React components from prompts and screenshots, and can work against your own component library. Prototyping that speaks your design system's language.
- [Manus](https://www.aidesign.guide/tools/manus) (free account): Autonomous AI agent that runs research tasks end-to-end. Send a task, walk away, come back to a finished report with screenshots and sources.
- [Midjourney](https://www.aidesign.guide/tools/midjourney) (free account): An AI image generator known for its strong aesthetic and art direction. Now on model V8.2, with a full web app, style references, personalization, and video.
- [Monica](https://www.aidesign.guide/tools/monica) (free account): All-in-one AI assistant for chat, writing, translation, PDFs and images, available as a browser extension, desktop and mobile app.
- [Onlook](https://www.aidesign.guide/tools/onlook) (free account): Open-source visual editor for React and Next.js apps. Edit the running product on a Figma-like canvas with AI chat, and changes write back to your code.
- [OpenAI Codex](https://www.aidesign.guide/tools/openai-codex) (free account): OpenAI's coding agent, included in ChatGPT plans. Runs as a desktop app, CLI, IDE extension and cloud agent, so designers can turn specs and screenshots into working UI in a real codebase.
- [Paper](https://www.aidesign.guide/tools/paper-design) (free account): A design tool where the canvas is real HTML and CSS, with an MCP server so coding agents can read and write the canvas. What you design is what ships.
- [Pen (pen.dev)](https://www.aidesign.guide/tools/pen-dev) (free account): Agentic design canvas, formerly Pencil, that stores designs in an open JSON format next to your code. Design with Claude, Codex or Gemini on the canvas, or drive it from your coding agent through MCP.
- [Perplexity](https://www.aidesign.guide/tools/perplexity) (free account): AI answer engine with cited sources, deep research and the free Comet browser. Free tier plus Pro and Max plans.
- [Pictory](https://www.aidesign.guide/tools/pictory) (free account): Turn text, blogs, slides, and recordings into videos with AI voices, avatars, and captions.
- [Qodo](https://www.aidesign.guide/tools/qodo) (free account): AI code review and governance platform (formerly CodiumAI). Review agents check pull requests against your team's rules, in Git and in the IDE.
- [Recraft](https://www.aidesign.guide/tools/recraft) (free account): An image generator aimed at designers rather than prompt hobbyists: proper vector output, consistent brand styles, and icon sets that belong to the same family.
- [Relume](https://www.aidesign.guide/tools/relume) (free account): AI that generates sitemaps, wireframes, and style guides from a project brief, built from a library of over 1,000 components, with export to Figma, Webflow, and React, or hosting on Relume itself.
- [Scite](https://www.aidesign.guide/tools/scite) (free account): Research assistant with Smart Citations that show whether later papers support or contrast a study.
- [shadcn MCP](https://www.aidesign.guide/tools/shadcn-mcp) (free account): Official MCP server from shadcn/ui. Lets coding agents browse, search and install components from shadcn, third-party and private registries using plain language.
- [Stable Diffusion](https://www.aidesign.guide/tools/stable-diffusion) (free account): Stability AI's open-weight image model family. Download it and run it on your own hardware, fine-tune it, or use it through the API, with free commercial use for small teams.
- [Stitch](https://www.aidesign.guide/tools/stitch) (free account): Google's AI design canvas that turns prompts, sketches, and voice into mobile and web UI, clickable prototypes, and code. Fast for early exploration, and it improves a lot when you feed it a proper design brief.
- [Storybook MCP](https://www.aidesign.guide/tools/storybook-mcp) (free account): Storybook's official MCP server. Gives coding agents your real component docs, story previews and component tests, so generated UI reuses your design system instead of inventing new components.
- [Subframe](https://www.aidesign.guide/tools/subframe) (free account): A design canvas on top of your codebase. Design with real React and Tailwind components, then let Claude Code or Codex implement the change locally, with git branches and pull requests.
- [Supernova](https://www.aidesign.guide/tools/supernova) (free account): Design system platform for tokens, components and documentation that now serves scoped design system context to AI agents through MCP. Free plan for up to 5 editors.
- [Synthesia](https://www.aidesign.guide/tools/synthesia) (free account): AI video and avatar platform: turn docs, slides, or links into presenter-led videos in 140+ languages.
- [Tidy for Figma](https://www.aidesign.guide/tools/tidy-plugin) (members): A premium Figma plugin, local API, and MCP toolkit for giving AI assistants structured design-system context: components, variables, naming rules, audits, and project memory.
- [UX Pilot](https://www.aidesign.guide/tools/ux-pilot) (free account): AI UI generator for wireframes, high-fidelity screens and multi-screen flows, with a Figma plugin, code export and custom design systems. Built for product designers rather than developers.
- [v0 by Vercel](https://www.aidesign.guide/tools/v0) (free account): AI UI generator from Vercel that ships shadcn/ui + Tailwind + Radix React components from a prompt. The closest thing the industry has to a design-system-aware text-to-UI tool.

## Comparisons (40)

- [Adobe Spectrum vs Salesforce Lightning: Which Enterprise Design System Wins?](https://www.aidesign.guide/compare/spectrum-vs-lightning) (public): Detailed comparison of Adobe Spectrum and Salesforce Lightning Design System. Features, ecosystem, and when to choose each.
- [Ant Design vs MUI: React Component Library Face-Off](https://www.aidesign.guide/compare/ant-design-vs-mui) (public): Detailed comparison of Ant Design and MUI (Material UI) for React applications. Features, ecosystem, pricing, and when to choose each.
- [Bootstrap vs Tailwind CSS: Component Framework vs Utility-First CSS](https://www.aidesign.guide/compare/bootstrap-vs-tailwind) (public): Detailed comparison of Bootstrap and Tailwind CSS for building modern web interfaces. Philosophy, DX, and when to choose each.
- [Chakra UI vs Shadcn/ui: Runtime Styling vs Copy-Paste Components](https://www.aidesign.guide/compare/chakra-ui-vs-shadcn) (public): Detailed comparison of Chakra UI and shadcn/ui for React component development. Architecture, DX, and when to choose each.
- [Chromatic vs Percy: Which Visual Regression Testing Tool Is Better?](https://www.aidesign.guide/compare/chromatic-vs-percy) (public): Detailed comparison of Chromatic and Percy for visual regression testing. Features, pricing, and when to choose each.
- [Claude Code vs Cursor for Design System Development](https://www.aidesign.guide/compare/claude-code-vs-cursor) (public): Claude Code CLI vs Cursor IDE for building design systems. Agentic terminal workflows vs visual editing, MCP support, and which approach fits your team.
- [Claude Code vs GitHub Copilot: AI Coding Assistants Compared](https://www.aidesign.guide/compare/claude-code-vs-github-copilot) (public): Detailed comparison of Claude Code and GitHub Copilot for AI-assisted software development. Features, workflow, and when to choose each.
- [Claude vs ChatGPT for Design Systems](https://www.aidesign.guide/compare/claude-vs-chatgpt) (public): Claude vs ChatGPT for design system work. Which AI assistant is better for token architecture, component specs, and design-to-code workflows in 2026.
- [Cursor vs Windsurf for Designers](https://www.aidesign.guide/compare/cursor-vs-windsurf) (public): Detailed comparison of Cursor and Windsurf for design system development. Features, pricing, and which AI code editor is better for designers in 2026.
- [DALL-E 3 vs Midjourney for Design Teams](https://www.aidesign.guide/compare/dall-e-vs-midjourney) (public): DALL-E 3 vs Midjourney for design teams. API access, image quality, ease of use, and which AI image generator works better for professional design workflows.
- [Figma Variables vs Tokens Studio: Which Is Better for Design Tokens?](https://www.aidesign.guide/compare/figma-variables-vs-tokens-studio) (public): Detailed comparison of Figma Variables and Tokens Studio for managing design tokens. Features, pricing, and when to choose each.
- [Figma vs Framer: Design Tool vs Design-to-Production Platform](https://www.aidesign.guide/compare/figma-vs-framer) (public): Detailed comparison of Figma and Framer for UI design and website building. Features, pricing, and when to choose each.
- [Figma vs Penpot for Design Systems](https://www.aidesign.guide/compare/figma-vs-penpot) (public): Figma vs Penpot for building design systems. Variables, components, open source, and which design tool is the right choice for your DS team in 2026.
- [GitHub Primer vs Shopify Polaris: Developer Platform Design Systems Compared](https://www.aidesign.guide/compare/primer-vs-polaris) (public): Detailed comparison of GitHub Primer and Shopify Polaris design systems. Features, token architecture, and when to choose each.
- [Headless UI vs React Aria: Accessible Headless Component Libraries Compared](https://www.aidesign.guide/compare/headless-ui-vs-react-aria) (public): Detailed comparison of Headless UI and React Aria for building accessible, unstyled UI components. Features, API design, and when to choose each.
- [Jasper vs Copy.ai for Design Content](https://www.aidesign.guide/compare/jasper-vs-copyai) (public): Jasper vs Copy.ai for writing design system documentation, component descriptions, and UX copy. Features, pricing, and which AI writing tool fits your workflow.
- [Mantine vs Ant Design: Full-Featured React Component Libraries Compared](https://www.aidesign.guide/compare/mantine-vs-ant-design) (public): Detailed comparison of Mantine and Ant Design for React applications. Features, theming, and when to choose each.
- [Mantine vs Chakra UI: Which Styled React Component Library Is Better?](https://www.aidesign.guide/compare/mantine-vs-chakra-ui) (public): Detailed comparison of Mantine and Chakra UI for styled React component libraries. Features, pricing, and when to choose each.
- [Microsoft Fluent vs Google Material Design: Platform Design Languages Compared](https://www.aidesign.guide/compare/fluent-vs-material) (public): Detailed comparison of Microsoft Fluent Design System and Google Material Design 3. Philosophy, components, and when to choose each.
- [Midjourney vs Leonardo AI for Design Assets](https://www.aidesign.guide/compare/midjourney-vs-leonardo) (public): Midjourney vs Leonardo AI for generating design assets. Image quality, control, pricing, and which AI image tool is better for design teams.
- [Mintlify vs Docusaurus: Documentation Platforms for Dev Teams](https://www.aidesign.guide/compare/mintlify-vs-docusaurus) (public): Detailed comparison of Mintlify and Docusaurus for technical documentation. Features, pricing, hosting, and when to choose each.
- [MUI vs Chakra UI: Which React Component Library Should You Pick?](https://www.aidesign.guide/compare/mui-vs-chakra-ui) (public): Detailed comparison of MUI (Material UI) and Chakra UI for React component libraries. Features, pricing, and when to choose each.
- [Open Props vs Tailwind CSS: CSS Custom Properties vs Utility Classes](https://www.aidesign.guide/compare/open-props-vs-tailwind) (public): Detailed comparison of Open Props and Tailwind CSS for styling modern web applications. Architecture, DX, and when to choose each.
- [Panda CSS vs Tailwind CSS: Which Is Better for Design Tokens?](https://www.aidesign.guide/compare/panda-css-vs-tailwind) (public): Detailed comparison of Panda CSS and Tailwind CSS for design token management and styling. Features, pricing, and when to choose each.
- [Perplexity vs ChatGPT for Design Research](https://www.aidesign.guide/compare/perplexity-vs-chatgpt) (public): Perplexity vs ChatGPT for design system research. Citations, real-time data, code generation, and which AI tool is better for design research workflows.
- [Playwright vs Cypress: E2E Testing Frameworks for Modern Web Apps](https://www.aidesign.guide/compare/playwright-vs-cypress) (public): Detailed comparison of Playwright and Cypress for end-to-end testing. Features, browser support, and when to choose each.
- [Radix UI vs Ariakit: Which Headless Component Library Should You Choose?](https://www.aidesign.guide/compare/radix-vs-ariakit) (public): Detailed comparison of Radix UI and Ariakit for headless, accessible React components. Features, pricing, and when to choose each.
- [Radix UI vs Headless UI: Which Accessible Primitives Library Wins?](https://www.aidesign.guide/compare/radix-vs-headless-ui) (public): Detailed comparison of Radix UI and Headless UI for accessible headless components. Features, pricing, and when to choose each.
- [Radix UI vs Shadcn/ui: Headless Primitives vs Styled Components](https://www.aidesign.guide/compare/radix-vs-shadcn) (public): Detailed comparison of Radix UI primitives and shadcn/ui component library. Architecture, DX, and when to choose each.
- [shadcn/ui vs MUI: Which React Design System Should You Use?](https://www.aidesign.guide/compare/shadcn-vs-mui) (public): Detailed comparison of shadcn/ui and MUI for React design systems. Features, pricing, and when to choose each.
- [Shopify Polaris vs IBM Carbon: Enterprise Design System Showdown](https://www.aidesign.guide/compare/polaris-vs-carbon) (public): Detailed comparison of Shopify Polaris and IBM Carbon Design System. Features, pricing, and when to choose each for enterprise applications.
- [Stitches vs Styled Components: CSS-in-JS Libraries Compared](https://www.aidesign.guide/compare/stitches-vs-styled-components) (public): Detailed comparison of Stitches and Styled Components for CSS-in-JS styling in React. Performance, API, and when to choose each.
- [Storybook vs Chromatic for Component Documentation](https://www.aidesign.guide/compare/storybook-vs-chromatic) (public): Storybook vs Chromatic for documenting and testing design system components. Open source vs hosted, visual testing, and which tool your DS team needs.
- [Storybook vs Histoire: Which Component Documentation Tool Is Better?](https://www.aidesign.guide/compare/storybook-vs-histoire) (public): Detailed comparison of Storybook and Histoire for component documentation and development. Features, pricing, and when to choose each.
- [Storybook vs Ladle: Component Development Environments Compared](https://www.aidesign.guide/compare/storybook-vs-ladle) (public): Detailed comparison of Storybook and Ladle for building and testing UI components. Features, performance, and when to choose each.
- [Style Dictionary vs Tokens Studio for Design Tokens](https://www.aidesign.guide/compare/style-dictionary-vs-tokens-studio) (public): Style Dictionary vs Tokens Studio for managing design tokens. Build tools, Figma integration, DTCG format support, and the right choice for your token pipeline.
- [Tailwind CSS vs styled-components: Which Styling Approach Is Better?](https://www.aidesign.guide/compare/tailwind-vs-styled-components) (public): Detailed comparison of Tailwind CSS and styled-components for styling React applications. Features, pricing, and when to choose each.
- [Vanilla Extract vs Panda CSS: Zero-Runtime CSS-in-TypeScript Compared](https://www.aidesign.guide/compare/vanilla-extract-vs-panda-css) (public): Detailed comparison of Vanilla Extract and Panda CSS for type-safe styling in modern web apps. Features, DX, and when to choose each.
- [Vercel v0 vs Bolt.new: AI Code Generators for Frontend Development](https://www.aidesign.guide/compare/v0-vs-bolt) (public): Detailed comparison of Vercel v0 and Bolt.new for AI-powered frontend code generation. Features, output quality, and when to choose each.
- [Vuetify vs PrimeVue: Vue Component Libraries Head to Head](https://www.aidesign.guide/compare/vuetify-vs-primevue) (public): Detailed comparison of Vuetify and PrimeVue for Vue.js applications. Features, theming, and when to choose each.

## Dictionary (34)

- [Agentic Design System](https://www.aidesign.guide/dictionary/agentic-design-system) (public): A design system built for two audiences: humans and AI agents. Tokens an agent can parse, components with documented intent, and rules coding tools actually respect.
- [AI Agent](https://www.aidesign.guide/dictionary/ai-agent) (public): An AI that does not just answer, it acts: reads files, runs tools, makes changes, and works toward a goal across multiple steps with limited supervision.
- [Animation Vocabulary](https://www.aidesign.guide/dictionary/animation-vocabulary) (public): The working vocabulary of UI motion. Around 80 terms for entrances, easing, springs, transitions, scroll, and performance, so you can name the exact motion you want instead of asking for 'smoother'.
- [Chromatic](https://www.aidesign.guide/dictionary/chromatic) (public): A visual regression testing service built for Storybook. Catches unintended UI changes before they ship.
- [CLAUDE.md](https://www.aidesign.guide/dictionary/claude-md) (public): A markdown file that teaches Claude Code about a project. Turns generic AI output into project-aware AI output.
- [Context Engineering](https://www.aidesign.guide/dictionary/context-engineering) (public): Deciding what an AI agent knows when it works: which files, rules, and examples load into its context window, and when. The discipline behind CLAUDE.md, skills, and MCP.
- [Context Window](https://www.aidesign.guide/dictionary/context-window) (public): Everything the AI can 'see' at once: your prompt, the files, the images, and the conversation so far. When it fills up, older details fall out of view.
- [Design System Observatory](https://www.aidesign.guide/dictionary/design-system-observatory) (public): A monitoring dashboard that tracks the health of your design system. Measures token coverage, component adoption, accessibility, and design-code parity.
- [Design Tokens](https://www.aidesign.guide/dictionary/design-tokens) (public): The smallest units of a design system. Named values that store visual design decisions like colors, spacing, typography, and shadows.
- [Drift (Design System Drift)](https://www.aidesign.guide/dictionary/design-system-drift) (public): The slow gap that opens between your design system as documented and your product as shipped: hardcoded values, rogue variants, one-off components nobody approved.
- [Environment Variables (.env files)](https://www.aidesign.guide/dictionary/environment-variables) (public): A .env file is a small text file that holds secrets like API keys outside your code. Your app reads from it at runtime. Never commit it to Git.
- [GitHub Actions](https://www.aidesign.guide/dictionary/github-actions) (public): GitHub's built-in CI/CD platform. Runs workflows in response to events like a push, a pull request, or a schedule.
- [Guardrails](https://www.aidesign.guide/dictionary/guardrails) (public): Hard limits on what an AI agent can do, enforced by the system rather than the prompt: scoped permissions, protected files, required reviews, and kill switches.
- [Hallucination](https://www.aidesign.guide/dictionary/hallucination) (public): When an AI states something false with full confidence: a made-up API, a token that does not exist, a citation that was never written. Fluent, plausible, and wrong.
- [Human-in-the-Loop](https://www.aidesign.guide/dictionary/human-in-the-loop) (public): A workflow where an AI agent does the work but a human approves it before it counts: the agent proposes, you decide. The standard pattern for mid-trust agents.
- [LLM (Large Language Model)](https://www.aidesign.guide/dictionary/llm) (public): The kind of AI behind Claude, ChatGPT, and Gemini. A model trained to predict text, which makes it good at writing, coding, and reasoning over language.
- [MCP (Model Context Protocol)](https://www.aidesign.guide/dictionary/mcp) (public): A standard that helps AI assistants connect to tools like Figma with rich context. The bridge between your design files and AI coding tools.
- [Observer Mode](https://www.aidesign.guide/dictionary/observer-mode) (public): Running an AI agent read-only against your real design system before giving it any authority. The agent audits and reports; it cannot change anything.
- [Personal Access Token (PAT)](https://www.aidesign.guide/dictionary/personal-access-token) (public): A secret string that authenticates a user with a service like GitHub or Figma in place of a password.
- [Playwright](https://www.aidesign.guide/dictionary/playwright) (public): A browser automation tool for end-to-end tests, visual regression, and automatic component screenshots.
- [Primitive vs Semantic Tokens](https://www.aidesign.guide/dictionary/primitive-vs-semantic-tokens) (public): The difference between raw value tokens and purpose-driven tokens. Understanding this distinction is essential for scalable design systems.
- [Prompt](https://www.aidesign.guide/dictionary/prompt) (public): The instruction you give an AI. The clearer and more specific it is, the better the result. A system prompt sets the standing rules for the whole session.
- [RAG (Retrieval-Augmented Generation)](https://www.aidesign.guide/dictionary/rag) (public): A technique that lets an AI look things up before it answers. It retrieves the relevant documents first, then generates from them, instead of relying on memory.
- [Self-Healing Flywheel](https://www.aidesign.guide/dictionary/self-healing-flywheel) (public): A loop where agents detect design system drift, fix it at the source, and add a rule so the same drift cannot happen again. The system gets stronger with every cycle.
- [Skill (Claude Code)](https://www.aidesign.guide/dictionary/skill) (public): A reusable instruction file that teaches Claude how to do one job your way, invoked with a slash command. Your taste, your review process, your rules, made portable.
- [Storybook](https://www.aidesign.guide/dictionary/storybook) (public): A tool for developing, documenting, and testing UI components in isolation. The default home for design system component docs.
- [Style Dictionary](https://www.aidesign.guide/dictionary/style-dictionary) (public): An open-source build system that transforms design tokens from JSON into any platform format (CSS, iOS, Android, and more).
- [Subagent](https://www.aidesign.guide/dictionary/subagent) (public): A second AI agent spun up to handle one focused task in its own context, then report back. Used to search, review, or work in parallel without cluttering the main session.
- [Supabase](https://www.aidesign.guide/dictionary/supabase) (public): A backend platform with database, auth, and storage features. A pre-built infrastructure kit for web applications.
- [Tokens (the AI kind, not design tokens)](https://www.aidesign.guide/dictionary/tokens-llm) (public): The small chunks of text an AI reads and writes, and what your usage is measured in. Not to be confused with design tokens, which are reusable style values.
- [Tokens Studio](https://www.aidesign.guide/dictionary/tokens-studio) (public): A Figma plugin that manages design tokens inside Figma and syncs them to GitHub, GitLab, or other sources of truth.
- [Trust Levels](https://www.aidesign.guide/dictionary/trust-levels) (public): A five-step scale (Observer, Advisor, Junior, Senior, Autonomous) that defines what an AI agent is allowed to do, and what it has to prove before it gets more authority.
- [Vercel](https://www.aidesign.guide/dictionary/vercel) (public): A deployment and hosting platform for modern web applications. The 'publish to web' button with strong defaults.
- [Vibe Coding](https://www.aidesign.guide/dictionary/vibe-coding) (public): Building software by describing what you want in plain language and letting the AI write the code, steering by feel and result rather than by reading every line.

## Prompts (39)

- [Accessibility Prompts](https://www.aidesign.guide/prompts/accessibility) (free account): Requirements to give an AI before it builds UI, so accessibility is part of the build: WCAG 2.2 standards kept apart from team preferences, and a report of the tests that actually ran.
- [Accessibility Review](https://www.aidesign.guide/prompts/accessibility-review) (free account): Audit existing UI against WCAG 2.2 AA, with each finding marked as confirmed from code or as a check that needs a browser or assistive technology.
- [Adoption Metrics Framework](https://www.aidesign.guide/prompts/adoption-metrics) (free account): Define design system adoption metrics with exact denominators, exclusions, and collection methods, keep import counts apart from real UI adoption, and label targets as your own.
- [Brand-to-Token Mapping](https://www.aidesign.guide/prompts/brand-token-mapping) (free account): Turn brand guidelines into design tokens, keeping what the brand guide states apart from the UI decisions the guide does not cover.
- [Build a Test Set for a Design Prompt](https://www.aidesign.guide/prompts/design-prompt-test-set) (free account): Create a small set of real test cases for a prompt or skill you rely on, with pass and fail checks for each, so you can tell whether a prompt change or a new model made it better or worse.
- [Changelog Entry Writer](https://www.aidesign.guide/prompts/changelog-entry) (free account): Turn the changes in a design system release into a changelog that tells consumers what changed, whether it breaks them, and exactly what to do, using only the changes you supply.
- [Component Deprecation Notice](https://www.aidesign.guide/prompts/component-deprecation) (free account): Write a deprecation notice from verified old and new APIs, real release versions, and the tooling that actually exists, without inventing codemods or promising features the replacement lacks.
- [Component Documentation Generator](https://www.aidesign.guide/prompts/component-documentation) (free account): Generate component documentation from the component's code and tests, where every default, prop, and keyboard behaviour is backed by the implementation and recommendations are labelled.
- [Component Metadata Prompts](https://www.aidesign.guide/prompts/component-metadata) (free account): Extract a structured inventory of your Figma components, with source node IDs, properties, variants, tokens, and the fields that are missing, ready to feed documentation and code.
- [Component Spec Generator](https://www.aidesign.guide/prompts/component-spec-generator) (free account): Write a component spec from real use cases, your existing conventions, and known constraints, with confirmed requirements kept apart from proposed API decisions.
- [Component Variant Finder](https://www.aidesign.guide/prompts/component-variants) (free account): Find the variants and states a component is really missing, ranked by the product use cases that need them, and sort each gap into a variant, a state, or a separate component.
- [Dark Mode Token Mapping](https://www.aidesign.guide/prompts/token-dark-mode) (free account): Map semantic tokens to dark mode by role instead of inverting them, keep your token file's structure, and test real component pairs, overlays, elevation, and states.
- [Design Critique](https://www.aidesign.guide/prompts/design-critique) (free account): A structured critique that starts from the user, the task, and the product goal, scores against defined anchors with evidence, and says "cannot assess" instead of inventing scores from a screenshot.
- [Design System Components Prompts](https://www.aidesign.guide/prompts/design-system-components) (free account): Build a component from Figma with an AI coding agent: inspect the repository and reuse what exists first, flag behaviour the design does not define, and verify visually and by interaction.
- [Design System Health Check](https://www.aidesign.guide/prompts/design-system-health-check) (free account): Score your design system across tokens, components, documentation, adoption, tooling, and governance, with a defined 1-5 scale, evidence for every score, and actions you can assign.
- [Design System Migration Plan](https://www.aidesign.guide/prompts/migration-plan) (free account): Plan a design system migration from the actual release differences and an inventory of affected usages, with clear alias direction, rollout dependencies, and rollback criteria.
- [Design System RFP/Proposal](https://www.aidesign.guide/prompts/design-system-rfp) (free account): Write either an internal investment proposal or a procurement RFP for a design system, with ROI calculated in the open from the costs and assumptions you supply.
- [Design System Work: The System Prompt](https://www.aidesign.guide/prompts/design-system-work-system-prompt) (free account): One reusable context block that holds your design system, with versions and sources, a filled-in example, and how to load it in Claude Projects, Claude Code, or the API.
- [Design Token Audit Prompt](https://www.aidesign.guide/prompts/design-token-audit) (free account): Audit a design token file for broken references, missing types and units, mode gaps, naming drift, and real contrast failures, with evidence for every finding.
- [Design Tokens Prompts](https://www.aidesign.guide/prompts/design-tokens) (free account): Start here for token work: pick the right prompt for creating, auditing, mapping, documenting, or exporting design tokens, in the order most teams need them.
- [Documentation Drift Audit](https://www.aidesign.guide/prompts/documentation) (free account): Compare what the design file, the code, and the docs each say about a component or token, find where they disagree, and propose doc updates backed by evidence.
- [Figma-to-Code Review](https://www.aidesign.guide/prompts/figma-to-code-review) (free account): Compare a rendered implementation with its Figma design at the same viewport, check token usage in the code itself, and get fixes that fit the component's behaviour.
- [Find and Reuse Existing Components Before Building](https://www.aidesign.guide/prompts/reuse-existing-components) (free account): Map a new screen or feature onto the components your design system already has: direct matches, compositions of existing parts, and the few real gaps, each with a reason.
- [Generate and Validate Design Token JSON](https://www.aidesign.guide/prompts/force-design-tokens-as-json) (free account): Get design tokens from Claude as JSON that always parses, using structured outputs, then check references and types with a short script before anything reaches your build.
- [Icon Naming Convention](https://www.aidesign.guide/prompts/icon-naming) (free account): Name icons by what they depict, not by the action they trigger in one screen, and plan renames with collisions, aliases, search synonyms, and migration effects.
- [Prompting Basics](https://www.aidesign.guide/prompts/basics) (free account): One reusable template for design prompts (task, context, inputs, constraints, output, verification) and how to use it on work inside an existing design system.
- [Prompting Claude Fable 5: Patterns & Scaffolding](https://www.aidesign.guide/prompts/fable-5-prompting) (free account): Prompt patterns for long-running AI agents on design work (boundaries, grounded progress, memory, readable summaries), kept apart from dated, sourced notes on what changed in Claude Fable 5 and 5.1.
- [Prototyping Prompts](https://www.aidesign.guide/prompts/prototyping) (free account): Build prototypes around one testable user journey: realistic data, failure states, a test scenario, and success criteria you can check with real users.
- [Research Prompts](https://www.aidesign.guide/prompts/research) (free account): Prompts for survey analysis, competitive analysis, and trend research that require sources, dates, sample sizes, and limitations, and keep findings apart from hypotheses.
- [Responsive Token Generator](https://www.aidesign.guide/prompts/responsive-tokens) (free account): Create responsive typography, spacing, and layout tokens from your product's own breakpoints, with clamp() values checked at every viewport width and fluid versus stepped behaviour labelled.
- [Scope What an Agent May Do on One Task](https://www.aidesign.guide/prompts/agent-task-permissions) (free account): Turn trust levels into concrete settings for one task: which files the agent may touch, which actions it may take alone, what needs your approval, and when it must stop.
- [Semantic Color Mapping](https://www.aidesign.guide/prompts/color-palette-semantic) (free account): Map primitive colours to semantic roles, with the real foreground and background pairs each role is used in, calculated contrast, interaction states, and where not to use each token.
- [Spacing Scale Generator](https://www.aidesign.guide/prompts/spacing-scale-generator) (free account): Build a spacing scale that fits your product's density, platform, and existing layouts, with an exact rule for which steps exist and room for documented exceptions.
- [Storybook Story Generator](https://www.aidesign.guide/prompts/storybook-story) (free account): Generate Storybook stories that match your installed Storybook version and existing story conventions, cover every state the component supports, and include interaction tests that actually run.
- [Token Documentation Generator](https://www.aidesign.guide/prompts/token-documentation) (free account): Write token documentation from your real token export and the code that consumes it, without inventing class names, deprecated aliases, or usage history.
- [Token Naming Audit](https://www.aidesign.guide/prompts/token-naming-audit) (free account): Check design token names against your own naming convention, and use values and references to catch tokens that bypass the semantic layer.
- [Turn a Design Brief into an Agent Task](https://www.aidesign.guide/prompts/brief-to-agent-task) (free account): Turn a loose design request into a bounded task an AI agent can finish and you can check: inputs, constraints, acceptance criteria, then a small plan with affected files, checks, and a way back.
- [Turn a Successful Workflow into Reusable Instructions](https://www.aidesign.guide/prompts/workflow-to-reusable-instructions) (free account): Capture an AI session that worked into instructions you can rerun: the inputs it needs, the steps, the corrections you made along the way, the boundaries, and the checks, ready to save as a skill.
- [Verify an AI-Generated Interface](https://www.aidesign.guide/prompts/verify-ai-interface) (free account): Check an AI-built screen against its acceptance criteria by actually using it, and get a report that separates verified behaviour, failures, and what nobody tested, with evidence for each.

## Templates (26)

- [Agentic Design System Defaults](https://www.aidesign.guide/templates/agentic-design-system-defaults) (members): The 9 templates I install on every agentic design system. One zip, the whole installable baseline. CLAUDE.md, governance, MCP, token schema, component intent map, and four audit skills.
- [Agentic Design System Starter Kit](https://www.aidesign.guide/templates/agentic-design-system-starter-kit) (members): A complete folder structure for making your design system machine-readable. Drop into any project and Claude Code immediately understands your tokens, components, and conventions.
- [AI-Ready Component Description Template](https://www.aidesign.guide/templates/component-description-template) (free account): A template for writing component descriptions that AI tools can parse and act on. The format behind writing 554 descriptions in one session.
- [Anti-Pattern Check Skill (SKILL.md)](https://www.aidesign.guide/templates/anti-pattern-check-skill) (members): Paste-ready Claude Code skill that audits any generation against the 10 most common AI design anti-patterns: luxury clichés, gradient overload, fake depth, random 3D heroes, motion spam, and more.
- [CLAUDE.md for Design Systems](https://www.aidesign.guide/templates/claude-md-design-system) (members): A starter CLAUDE.md file optimized for design system projects. Teaches AI your token conventions, component inventory, and design rules from the first prompt.
- [Codex AGENTS.md Starter](https://www.aidesign.guide/templates/codex-agents-md-starter) (free account): A starter AGENTS.md file for designers who want Codex to understand project scope, design-system rules, safe commands, and review expectations before it edits anything.
- [Codex First-Run Prompt](https://www.aidesign.guide/templates/codex-first-run-prompt) (free account): A safe read-only prompt for your first Codex session in a new repo, designed to make the agent orient itself before it edits files.
- [Codex Subagent Review Panel](https://www.aidesign.guide/templates/codex-subagent-review-panel) (free account): A copy-ready parent prompt for running accessibility, first-user, copy, edge-state, and design-system review lanes in parallel with Codex subagents.
- [Codex UI Quality Review Skill](https://www.aidesign.guide/templates/codex-ui-quality-review-skill) (free account): A reusable Codex skill brief for reviewing generated UI, local pages, or screenshots across hierarchy, layout, typography, interaction states, and design-system fit.
- [Component Intent Map](https://www.aidesign.guide/templates/component-intent-map) (members): A JSON template with when/where/why logic for 20 common design system components. Makes AI pick the right component for the right context.
- [Design System CLAUDE.md + Rules Kit](https://www.aidesign.guide/templates/claude-rules-kit) (members): Complete starter kit: root CLAUDE.md, path-scoped rules for tokens and components, and the .design-system folder structure. Everything Claude Code needs to work with your design system.
- [Design System Health Scorecard](https://www.aidesign.guide/templates/design-system-health-scorecard) (free account): A scoring framework to measure your design system's health across 6 dimensions. Use it for quarterly reviews, stakeholder updates, or before starting an AI integration.
- [Design Token Audit Checklist](https://www.aidesign.guide/templates/token-audit-checklist) (free account): A comprehensive checklist for auditing your design token system. Covers naming, structure, accessibility, and documentation.
- [Design-to-Code Review Checklist](https://www.aidesign.guide/templates/design-to-code-review-checklist) (free account): What to check when AI generates code from your designs. Covers tokens, accessibility, responsiveness, and common AI mistakes.
- [Governance Rules Template](https://www.aidesign.guide/templates/governance-rules-template) (members): Define what AI can auto-fix, what needs human review, and what's off-limits. Trust levels, approval rules, and escalation paths for design system automation.
- [Knowledge Graph Starter Kit](https://www.aidesign.guide/templates/knowledge-graph-starter) (members): Three JSON files that make your design system machine-readable: token schema, knowledge graph, and component intent map. The foundation for AI-powered design work.
- [MCP Setup Config Pack](https://www.aidesign.guide/templates/mcp-setup-config-pack) (members): Pre-configured .mcp.json files for connecting Claude Code to Figma, GitHub, and Playwright. Copy, paste your tokens, and connect.
- [Motion Audit Skill (SKILL.md)](https://www.aidesign.guide/templates/motion-audit-skill) (members): Paste-ready Claude Code skill that audits every animation against the 5-level motion framework. Catches parallax, bounce, scale-on-hover, and other defaults that make AI sites feel generic.
- [Multi-lens Review Pack (4 Skills)](https://www.aidesign.guide/templates/multi-lens-review-pack) (members): Four paste-ready SKILL.md files for parallel design review: accessibility, first-time user, copy, and edge states. Install all four, invoke them in parallel, get a deep multi-lens review of any screen in under 3 minutes.
- [Project Context Checklist (CLAUDE.md Starter)](https://www.aidesign.guide/templates/project-context-checklist) (free account): A fill-in-the-blanks CLAUDE.md starter for design projects. Covers non-negotiables, anti-patterns, vocabulary, and file conventions in under 60 lines. Drop it at the root of any project to give Claude Code the context it needs to work without re-explaining.
- [Sprint Audit Prompt Pack](https://www.aidesign.guide/templates/sprint-audit-prompt-pack) (members): 5 ready-to-use prompts for a complete design system audit: naming, tokens, accessibility, component health, and drift detection. Run them every sprint.
- [Taste Audit Scorecard (Printable)](https://www.aidesign.guide/templates/taste-audit-scorecard) (members): A one-page scorecard for reviewing any AI-generated design. Seven dimensions, 0–10 rating per dimension, and a list of the 10 AI anti-patterns to check against. Use it alongside or instead of an AI audit.
- [Taste Skill Starter (SKILL.md)](https://www.aidesign.guide/templates/taste-skill-starter) (members): Fill-in-the-blanks SKILL.md template for encoding your personal design taste. Pairs with the Build Your Own Taste Skill workshop. Drops into ~/.claude/skills/taste/ and becomes your /taste slash command.
- [Token Naming Convention Reference Card](https://www.aidesign.guide/templates/token-naming-reference-card) (free account): A printable one-page reference comparing 7 design token naming conventions side by side. Pin it next to your monitor.
- [Token Schema JSON](https://www.aidesign.guide/templates/token-schema-json) (members): A JSON schema that tells AI tools what makes a valid design token. Prevents invented names, wrong formats, and duplicate tokens.
- [UX Review Agent Starter (SKILL.md)](https://www.aidesign.guide/templates/ux-review-agent-starter) (free account): The paste-ready SKILL.md for a first UX review agent. Covers 6 heuristic lenses, returns the top 5 ranked fixes, and installs in 30 seconds. Pairs with the Your First UX Review Agent guide.

## Design system fundamentals: The Design System Guide

The author's other site, https://thedesignsystem.guide, covers the design system work underneath the AI layer. Free unless marked paid. Curated list for people: https://www.aidesign.guide/design-system-guide

### Starting a design system

- [Where to start](https://thedesignsystem.guide/where-to-start): The first steps for a new design system.
- [Build a design system](https://thedesignsystem.guide/build-a-design-system): The full path from foundations to documentation, with AI-generated components and AI literacy.
- [The design system playbook](https://thedesignsystem.guide/design-system-questions): Key questions to start and improve a design system.
- [Design system research interview questions](https://thedesignsystem.guide/design-system-research-interview-questions): The questions to ask users and stakeholders in design system discovery.
- [The go-to guide for product design teams](https://thedesignsystem.guide/dsg): Driving growth through strategic design integration.

### Design tokens

- [What are design tokens?](https://thedesignsystem.guide/what-are-design-tokens): Token levels, naming structure and the integration process.
- [Design tokens naming playbook](https://thedesignsystem.guide/design-tokens-naming-playbook): An interactive guide and playground for naming and organizing tokens.
- [Naming design tokens](https://thedesignsystem.guide/knowledge-base/naming-design-tokens): How to choose a naming convention and keep it consistent.
- [Token naming in line with Tailwind](https://thedesignsystem.guide/knowledge-base/how-to-set-up-the-design-tokens-naming-structure-in-line-with-tailwind): A token naming structure that maps cleanly to Tailwind.
- [Export Figma variables to JSON](https://thedesignsystem.guide/knowledge-base/export-figma-variables-or-design-tokens-to-json): Getting variables and tokens out of Figma as JSON.
- [Figma variables for single vs multi-brand themes](https://thedesignsystem.guide/knowledge-base/how-do-you-set-up-figma-variables-for-single-vs-multi-brand-themes): How to set up variable collections and modes for one brand or many.
- [The ultimate design tokens course](https://thedesignsystem.guide/design-tokens-course) (paid): Structure, manage and scale design tokens.

### Metrics and the business case

- [The design system metrics collection](https://thedesignsystem.guide/design-system-metrics): Metrics for adoption, efficiency and quality, in one place.
- [A list of design system metrics](https://thedesignsystem.guide/knowledge-base/i-need-a-list-of-design-system-metrics): A quick reference list of metrics to track.
- [A guide for calculating design system costs](https://thedesignsystem.guide/blog/a-guide-for-calculating-design-system-costs): How to estimate what a design system costs to build and run.

### Audits and inventory

- [Design audit](https://thedesignsystem.guide/design-audit): How to run a design audit across a product.
- [Design audit template for Figma](https://thedesignsystem.guide/blog/design-audit-template-for-figma): A ready Figma file for collecting and sorting audit findings.
- [The ultimate Airtable design system inventory](https://thedesignsystem.guide/airbundle) (paid): An Airtable inventory of components and tokens, with automations.

### Governance and operations

- [Best practices for governance](https://thedesignsystem.guide/knowledge-base/what-are-the-best-practices-for-governance-in-a-design-system): Who decides what, and how changes get approved.
- [Handling contributions and changes](https://thedesignsystem.guide/knowledge-base/how-do-you-handle-contributions-and-changes): A contribution process that teams actually follow.
- [Prioritizing work for a design system](https://thedesignsystem.guide/knowledge-base/prioritizing-work-for-a-design-system): Deciding what the system team builds next.
- [Gathering and managing feedback](https://thedesignsystem.guide/knowledge-base/how-do-you-gather-and-manage-feedback): Collecting feedback from product teams and acting on it.
- [Managing multi-brand design systems](https://thedesignsystem.guide/knowledge-base/managing-multi-brand-design-systems): One system serving several brands.

### Figma practice

- [Organizing Figma files](https://thedesignsystem.guide/knowledge-base/what-is-the-best-way-to-organize-figma-files): A file and page structure for design system libraries.
- [Checklists for new Figma components](https://thedesignsystem.guide/knowledge-base/i-need-checklists-for-creating-new-figma-components): What to check before a component goes into the library.
- [Top Figma plugins for managing a design system](https://thedesignsystem.guide/knowledge-base/top-figma-plugins-for-managing-a-design-system): Plugins for auditing, tokens and documentation.
- [Linting tools for Figma](https://thedesignsystem.guide/knowledge-base/linting-tools-for-figma): Tools that catch detached styles and naming problems.

### Design systems and AI

- [AI user interface guidelines](https://thedesignsystem.guide/knowledge-base/ai-user-interface-guidelines): Guidelines for designing AI features in a product.
- [AI UX patterns for design systems, part 1](https://thedesignsystem.guide/blog/ai-ux-patterns-for-design-systems-(part-1)): Interaction patterns for AI features, from a design system angle.
- [AI UX patterns for design systems, part 2](https://thedesignsystem.guide/blog/ai-ux-patterns-for-design-systems-(part-2)): The second set of AI interaction patterns.
- [How to automate design system documentation](https://learn.thedesignsystem.guide/p/how-to-automate-design-system-documentation): Generating and maintaining documentation with AI.
- [How to build patterns from your design system components with AI](https://learn.thedesignsystem.guide/p/how-to-build-patterns-from-your-design): Assembling larger patterns from existing components.
- [The ultimate AI component generation framework](https://learn.thedesignsystem.guide/p/the-ultimate-ai-component-generation): A framework for generating components that follow the system.
- [Agentic design systems course](https://thedesignsystem.guide/agentic-design-systems-course) (paid): Build validators, automate workflows and ship design system tools with AI. No coding experience required. Waitlist.

### Reference and directories

- [The list of public design systems](https://thedesignsystem.guide/public-design-systems-list): Public design systems and documentation platforms.
- [Design system toolkit](https://thedesignsystem.guide/design-system-toolkit): Templates, resources and useful articles for a design system.
- [Design systems tool stack](https://thedesignsystem.guide/blog/design-systems-tool-stack): The tools teams use across design, code and documentation.
- [Design system glossary](https://thedesignsystem.guide/knowledge-base/design-system-glossary): Design system terms, defined.
- [Design system knowledge base](https://thedesignsystem.guide/knowledge-base): Answers to 45 common design system questions.
- [Design System Masters interviews](https://thedesignsystem.guide/design-system-interviews): 31 interviews with design system practitioners.
- [Bookmarks](https://thedesignsystem.guide/bookmarks): Curated design system links.