AI + Design + Design Systems
Questions designers
Questions designers
actually ask.
Practical answers about using AI for design systems, tokens, prompts, and tools. No hype, just what works.
Getting Started with AI + Design
What does AI for designers actually mean in practice?
It means using AI tools to speed up repetitive design work: auditing components, generating documentation, validating naming conventions, converting designs to code, and managing design tokens. You make the design decisions. AI handles the tedious execution.
Do I need to know how to code to use AI tools?
No. Many AI design tools work inside Figma or through natural language prompts. That said, basic familiarity with concepts like JSON, tokens, and file structures will help you get more out of tools like MCP servers and Cursor.
What is the best AI tool for a designer to start with?
Start with Cursor (an AI code editor built on VS Code) for vibe coding prototypes, and use Claude or ChatGPT for design system prompts like auditing tokens, writing documentation, or generating component specs. Both have free tiers.
How is AI different from traditional design automation like Figma plugins?
Traditional plugins follow fixed rules. AI tools understand context and can reason about your design system: they can read a component, understand its intent, suggest naming improvements, and generate documentation that matches your conventions.
Will AI replace designers?
No. AI removes the repetitive, tedious parts of design system work so you can focus on the creative, strategic decisions. The designers who learn to work with AI will simply be faster and more effective than those who don't.
Design Systems + AI
Can AI help me build a design system from scratch?
Yes. AI can help you define your token structure, generate initial component specs, create naming conventions, and write documentation. It won't make the design decisions for you, but it dramatically speeds up the scaffolding and implementation work.
How do I use AI to audit my existing design system?
Use a Figma plugin like Tidy to scan your component library for naming issues, missing descriptions, and inconsistencies. Then use AI prompts to analyze your design token JSON for structural problems, accessibility gaps, and missing semantic layers.
What are design tokens and why does AI help manage them?
Design tokens are the smallest design decisions (colors, spacing, typography) stored as platform-agnostic data. AI helps by auditing token structures, detecting naming inconsistencies, validating accessibility contrast ratios, and automating token migration between formats.
What is an MCP server and why should designers care?
MCP (Model Context Protocol) is a standard that lets AI tools connect directly to your design files. With a Figma MCP server, your AI code editor can read your designs and generate pixel-accurate code without copy-pasting between tools.
Can AI detect if my design tokens are accessible?
Yes. AI can analyze your token pairs and check if foreground/background combinations meet WCAG contrast requirements. It can also flag tokens that rely solely on color to convey meaning, and suggest accessible alternatives.
Prompts and Guides
What makes a good design prompt for AI?
Be specific about the task, provide context about your design system (naming conventions, token structure, component patterns), include example output, and specify the format you want. Generic prompts give generic results.
What is the difference between a prompt and a guide?
A prompt is a single instruction you give to AI. A guide is a structured lesson that combines context, tools, prompts, and decisions into a repeatable way of solving a problem.
Can I use the same prompts with Claude, ChatGPT, and Gemini?
Most prompts work across models with minor adjustments. Claude tends to be stronger at following complex instructions and maintaining consistency. GPT-4 is good at code generation. We note compatibility for each prompt in the library.
How do I turn a one-off prompt into something reusable?
Document the context, inputs, outputs, and quality checks. Create a template with placeholders for project-specific details such as file paths, token names, and conventions. Test it on multiple projects and refine.
Tools and Plugins
What is the Tidy Figma plugin?
Tidy is a Figma plugin that audits your design system components, validates naming conventions (kebab-case), generates AI-powered component descriptions, and checks variable naming. It can scan 500+ components in under 10 minutes.
What AI tools work directly inside Figma?
Tidy for component auditing, Token Intent Validator for semantic token checking, and various MCP integrations that let external AI tools read your Figma files. The library reviews and rates each tool for specific design system tasks.
Do I need Claude, GPT, or Gemini for design system work?
Any of them work. Claude is recommended for complex design system reasoning and multi-step tasks. GPT-4 is great for code generation. Gemini excels at visual analysis. Many designers use multiple models for different tasks.
What is Cursor and why do designers use it?
Cursor is an AI-first code editor (a VS Code fork) that lets you describe what you want in natural language and generates code. Designers use it for vibe coding prototypes, building design system documentation sites, and implementing components from Figma designs.
What is vibe coding?
Vibe coding means describing what you want to build in natural language and letting AI generate the code. You guide the direction and make design decisions while the AI handles implementation details. It lets designers build functional prototypes without writing code from scratch.
Design Token Specifics
What naming convention should I use for design tokens?
Use kebab-case with a consistent hierarchy: category.property.variant (e.g., color.background.primary). Pick one separator and stick to it. Avoid abbreviations. The library includes a token naming checklist you can use for audits.
What is the difference between primitive, semantic, and component tokens?
Primitive tokens are raw values (blue-500, 16px). Semantic tokens reference primitives with meaning (color.background.primary). Component tokens are scoped to specific components (button.background.hover). Each layer adds context and makes your system more maintainable.
How do I migrate tokens between tools like Tokens Studio and Style Dictionary?
Export from your source tool in JSON format, map the structure to the target format, and use AI to automate the transformation. The library includes migration guides and prompts for common token format conversions.
Should I use the W3C DTCG token format?
If you're starting fresh, yes. The W3C Design Token Community Group (DTCG) format is becoming the standard. It uses $value, $type, and $description fields. Most modern tools are adopting it, so building on DTCG now saves migration work later.
About AI Design Guide
Is the AI Design Guide free?
There is a free tier with starter guides, basic tool reviews, and selected public resources. Pro unlocks the full library including guides, prompts, templates, plugins, and premium resources. Master adds the Tidy Figma plugin, trends tracking, compare pages, early access, and one live session each month.
How often is new content added?
New content is added weekly. This includes new tool reviews, updated guides as tools evolve, fresh prompts for emerging use cases, and new resources based on community feedback.
Who is behind AI Design Guide?
The library is created by Romina Kavcic, a product designer with 18+ years of experience in design systems, UX, and now AI-powered design practice. She also runs The Design System Guide and consults on design system strategy.