90 guides

Step-by-step AI guides for designers

Cursor setup, MCP servers, prompting, design system audits, AI UI builders. Practical guides from real design work with AI tools.

Start a learning pathBrowse all 90
The Map of Agentic Design

Learning paths

Guides grouped into step-by-step sequences. Start from the top; each path takes you from zero to competent.

AI Design Starter Path

11 guides

A plain-language beginner path from first setup to your first agent-ready design system context.

1Set Up Your AI Design Workspace in 20 Minutes2AI for Designers 1013Run Your First AI-Powered Edit in Cursor4Set Up Claude Code (Step by Step for Designers)
View path

Beginner AI Setup

5 guides

Your first week with AI design tools. From zero to working setup.

1AI for Designers 1012Safe AI for Designers: The Five Rules to Start With3Stop Being Afraid of the Terminal4Run Your First AI-Powered Edit in Cursor
View path

Claude Code

12 guides

Install Claude Code, pick the right surface, and teach it your team rules with custom skills.

1Set Up Claude Code (Step by Step for Designers)2Claude Code: App vs Extension vs Terminal (Which One to Use When)3Put Claude Code Sessions Online4How to Create Custom Skills for Claude Code
View path

Visual Direction & Style

8 guides

Stop saying "make it premium." Learn to give AI real visual direction.

1AI Anti-Patterns Gallery: 10 Reasons Your AI Website Looks Generic2Figma Make vs Lovable vs v0 vs Bolt vs Replit (AI UI Builders Compared)3Motion Decision Tree: When to Animate, What to Animate, What to Leave Still4How to Describe Design Styles to AI
View path

Design System Automation

12 guides

Token audits, naming conventions, and component reviews with AI.

1Design Token Naming: 7 Systems Compared2Build a Token Naming Audit Skill for Claude Code3Build a Token Parity Check Skill for Claude Code4Build a Component Audit Skill for Claude Code
View path

Automation for DS Teams

13 guides

GitHub Actions, browser automation, and overnight pipelines that run while you sleep.

15 GitHub Actions Every Designer Should Automate2How to Create a GitHub Action (and Why It Matters)3Automate the Boring Parts of Your Design System4How to Use GitHub Actions With AI
View path

Codex for Designers

6 guides

Set up Codex, teach it your project rules, and turn repeatable design QA into reusable skills.

1AI for Designers 1012Set Up Codex for Designers3Codex Skills vs Plugins: What Designers Actually Need4Codex Subagents for Design Review
View path

Agentic Design Systems

18 guides

Make your design system readable by AI agents and coding tools.

1Understand MCP in 10 Minutes (and Why It Changes Your AI Setup)2Connect Your Figma Designs to Claude and Cursor3What Is an Agentic Design System? (Part 1)4CLAUDE.md + tools.md: The Two Files Every AI Project Needs
View path

Motion & Animation

5 guides

A simple, hands-on path for UI motion: learn the vocabulary, then practice the core moves with interactive demos.

1Enter and Exit: The First Motion to Get Right2Hover and Press: Make the Interface Answer Back3Scroll Reveal: Motion That Earns Its Place4Motion Decision Tree: When to Animate, What to Animate, What to Leave Still
View path
90 guides
Filters

Categories

Difficulty

Tags

Access

Design SystemsGitHubT

5 GitHub Actions Every Designer Should Automate

beginner
Claude CodeClaude

Advanced Claude Code for Designers (Module 7)

advanced
AI DesignClaudeCursorCodex

AI Anti-Patterns Gallery: 10 Reasons Your AI Website Looks Generic

beginner
AI DesignClaude

AI for Designers 101

beginner
Claude CodeClaude

Build Your Own Taste Skill: Turn Your Design Preferences Into Reusable AI Rules

advanced
Design Systems

Building the Agentic Operating Model (Part 5)

advanced
Claude CodeClaudeCursor<>

Claude Code: App vs Extension vs Terminal (Which One to Use When)

beginner
Claude CodeClaude

How to Create Custom Skills for Claude Code

beginner
Claude CodeClaude

Set Up Claude Code (Step by Step for Designers)

beginner
Claude CodeClaude

CLAUDE.md: Teaching Claude Your Design System

intermediate
Claude CodeClaude

Claude Sessions, Offline and Online: Keep Working Even If You Lose Your Laptop

intermediate
Claude CodeClaude

Claude Skills vs Cowork: What's the Difference?

intermediate
Claude CodeClaude

Designers Hit Claude's Usage Limits Faster Than Anyone. Here's How to Fix It.

beginner
Claude CodeClaude

The Claude UX Copywriter Skill: Stop Shipping Lorem Ipsum and Generic Button Text

intermediate
Claude CodeClaude

The Claude UX Motion Skill: Tame the Five Animations Every AI Site Ships By Default

intermediate
SkillsCodex

Codex Skills vs Plugins: What Designers Actually Need

beginner
FigmaClaudeFigma

Audit 500 Components in 10 Minutes

beginner
Design SystemsClaudeCursorCodex

Audit a Design System in 30 Minutes

advanced
TokensFigmaT

Design Token Naming: 7 Systems Compared

intermediate
Claude CodeClaude

Claude Fable 5 for Designers: What Actually Changes

intermediate
FigmaFigmav0Lovable

Figma Make vs Lovable vs v0 vs Bolt vs Replit (AI UI Builders Compared)

beginner
FigmaClaudeCursorFigma

Connect Your Figma Designs to Claude and Cursor

intermediate
Claude CodeClaude

From Executor to Orchestrator: The Career Shift Every Designer Needs to Make

beginner
AI PracticeClaudeFigma

How to Describe Design Styles to AI

beginner
ManusM

How and Why I Use Manus as My Research Assistant

beginner
MotionClaudeCursorCodex

Motion Decision Tree: When to Animate, What to Animate, What to Leave Still

intermediate
Design Systems

Observer Mode: Learning Before Acting (Part 3)

advanced
Design SystemsCursorPlaywright

Automate Browser Testing Without Writing Code

intermediate
Claude CodeClaudeCursor

Prompting Basics for Designers

beginner
Claude CodeClaude

Safe AI for Designers: The Five Rules to Start With

beginner
Design SystemsCodex

Set Up Codex for Designers

beginner
AI DesignClaudeCursor

Set Up Your AI Design Workspace in 20 Minutes

beginner
Design SystemsClaudeT

Taste Skills Are the New Design Tokens

advanced
AI PracticeClaude

Teach AI Who You Are

beginner
AI DesignClaude

The Design Style Phrasebook

intermediate
Design Systems

The Self-Healing Flywheel (Part 4)

advanced
AI DesignClaudeCursorCodex

The Taste Stack: Project Rules, Local Markdown, and Skills

advanced
Design Systems

Trust Levels: How Agents Earn Autonomy (Part 2)

advanced
Design SystemsM

What Is an Agentic Design System? (Part 1)

advanced
MCPClaudeCursorFigma

Understand MCP in 10 Minutes (and Why It Changes Your AI Setup)

beginner
AI DesignClaude

What to Do When AI Gives You Junk

beginner
Claude CodeClaude

Your First UX Review Agent: A 30-Minute Hello World for Designers

advanced
AccessibilityClaude

The AI-Assisted Accessibility Review

intermediate
Claude CodeClaudeCursorCodex

Build Free Design System Docs with Astro Starlight

advanced
AI DesignClaude

How to Write Better AI Prompts for Landing Pages

beginner
MCPClaudeMPlaywright

Browser Automation for Design QA

intermediate
MCPClaudeMT

Build Your Own MCP Server for Your Design System

advanced
ChromaticCS

Set Up Visual Regression Testing with Chromatic

beginner
CLAUDE.mdClaudeCodex

CLAUDE.md + tools.md: The Two Files Every AI Project Needs

advanced
ReviewsCodex

Codex Subagents for Design Review

advanced
Claude CodeClaude

Build a Component Audit Skill for Claude Code

intermediate
Claude CodeClaudeCursorCodex

Context Is the Product: The Hidden Skill Behind Every Reliable AI Agent

beginner
AI PracticeClaude

How to Build a Customer Context Folder for AI

intermediate
Design SystemsClaude

Build Your Design Team's Operating System in a Repo

advanced
Design Systems

Five Patterns for Agentic UI

intermediate
AdoptionFigma

Set Up a Design System Adoption Tracker

intermediate
StrategyClaude

Build a Design System Pitch Deck with AI

beginner
Motion

Enter and Exit: The First Motion to Get Right

beginner
AI DesignClaude

How to Evaluate AI Output Like a Senior Designer

intermediate
AI DesignClaude

How to Use AI to Explore Multiple Visual Directions Fast

beginner
Design SystemsClaude

Extended Thinking as a Design System Debugger

advanced
Design SystemsClaude

Few-Shot Examples for Component Naming

intermediate
FigmaFigma

Pull Component Data from the Figma API

advanced
FigmaClaudeCursorFigma

Figma to Code with MCP

advanced
FigmaFigmaT

Convert Figma Variables to CSS Custom Properties

advanced
Claude CodeClaudeCursorCodex

Generate Component Documentation with AI

beginner
Design SystemsGitHubT

Automate the Boring Parts of Your Design System

beginner
TokensGitHubT

Automate Design Token Publishing with GitHub Actions

advanced
PracticeClaudeGitHub

How to Use GitHub Actions With AI

advanced
Motion

Hover and Press: Make the Interface Answer Back

beginner
PracticeGitHub

How to Create a GitHub Action (and Why It Matters)

beginner
CursorCursor

Run Your First AI-Powered Edit in Cursor

beginner
StrategyClaude

Create a One-Page Design System Strategy

beginner
ObsidianClaudeOMD

How I Wake Up to Fresh YouTube Transcripts in Obsidian

intermediate
Claude CodeClaude

Parallel Review System: Run Four Reviews at Once, Ship Your Best Work Faster

advanced
PlaywrightPlaywright

Automate Component Screenshots with Playwright

intermediate
Design SystemsClaudeFigma

How to Prompt Claude to Audit a Figma Design

advanced
Claude CodeClaudeGitHub

Put Claude Code Sessions Online

intermediate
Claude CodeClaude

Rolling Out AI Across a Design Team

advanced
AI DesignClaude

Screenshot to UX Critique

beginner
Motion

Scroll Reveal: Motion That Earns Its Place

intermediate
TokensT

Your Tokens Are a Prompt: Semantic Naming for AI UI Builders

intermediate
TokensTSD

Build a Token Pipeline with Style Dictionary

advanced
TokensGitHubTSD

Set Up a Token CI/CD Pipeline

advanced
TokensClaudeCursorCodex

Run a Token Naming Audit with AI

beginner
Claude CodeClaudeT

Build a Token Naming Audit Skill for Claude Code

intermediate
Claude CodeClaudeFigmaT

Build a Token Parity Check Skill for Claude Code

intermediate
FigmaFigmaGitHubTS

Sync Tokens Studio to GitHub

advanced
VercelVercel

Share Live Prototypes with Vercel Preview Deploys

beginner
Claude CodeClaudeCursor>_

Stop Being Afraid of the Terminal

beginner

Popular resources

Tools and kits that pair well with these guides.

Style Explorer

20 visual directions. Pick a style, copy the CLAUDE.md rules.

Tools.md Generator

Create a tools.md file for Claude, Codex, Cursor, and coding agents.

Name Design Tokens

Interactive naming tool for consistent token conventions.

The Taste Stack

CLAUDE.md + local markdown + skills. Teach AI your visual standards.

Design Systems Directory

156 real design systems. Compare tokens, components, and docs.

Explore full library