Step-by-step AI guides for designers

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

Beginner AI Setup

5 guides

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

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

Claude Code

12 guides

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

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

Visual Direction & Style

8 guides

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

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

Design System Automation

12 guides

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

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

Automation for DS Teams

13 guides

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

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

Codex for Designers

6 guides

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

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

Agentic Design Systems

18 guides

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

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

Motion & Animation

5 guides

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

92 guides

Filters

Difficulty

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

Claude Code Claude

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

Skills

Codex Skills vs Plugins: What Designers Actually Need

Audit 500 Components in 10 Minutes

Design Systems Claude

Audit a Design System in 30 Minutes

Design Token Naming: 7 Systems Compared

Claude Code Claude

Claude Fable 5 for Designers: What Actually Changes

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

Connect Your Figma Designs to Claude and Cursor

Claude Code Claude

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

AI Practice Claude

How to Describe Design Styles to AI

ManusM

How and Why I Use Manus as My Research Assistant

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

Observer Mode: Learning Before Acting (Part 3)

Automate Browser Testing Without Writing Code

Claude Code Claude

Prompting Basics for Designers

Claude Code Claude

Safe AI for Designers: The Five Rules to Start With

Set Up Codex for Designers

Set Up Your AI Design Workspace in 20 Minutes

Design Systems Claude

Taste Skills Are the New Design Tokens

AI Practice Claude

Teach AI Who You Are

The Design Style Phrasebook

The Self-Healing Flywheel (Part 4)

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

Trust Levels: How Agents Earn Autonomy (Part 2)

Design SystemsM

What Is an Agentic Design System? (Part 1)

MCP

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

What to Do When AI Gives You Junk

Claude Code Claude

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

Accessibility Claude

The AI-Assisted Accessibility Review

Claude Code Claude

Build Free Design System Docs with Astro Starlight

How to Write Better AI Prompts for Landing Pages

MCP

Browser Automation for Design QA

MCP

Build Your Own MCP Server for Your Design System

ChromaticCS

Set Up Visual Regression Testing with Chromatic

CLAUDE.md

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

Reviews

Codex Subagents for Design Review

Claude Code Claude

Build a Component Audit Skill for Claude Code

Claude Code Claude

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

AI Practice Claude

How to Build a Customer Context Folder for AI

Design Systems Claude

Build Your Design Team's Operating System in a Repo

Five Patterns for Agentic UI

Adoption

Set Up a Design System Adoption Tracker

Strategy

Build a Design System Pitch Deck with AI

Enter and Exit: The First Motion to Get Right

How to Evaluate AI Output Like a Senior Designer

How to Use AI to Explore Multiple Visual Directions Fast

Design Systems Claude

Extended Thinking as a Design System Debugger

Design Systems Claude

Few-Shot Examples for Component Naming

Pull Component Data from the Figma API

Figma to Code with MCP

Convert Figma Variables to CSS Custom Properties

Claude Code Claude

Generate Component Documentation with AI

Design Systems GitHub

Automate the Boring Parts of Your Design System

Automate Design Token Publishing with GitHub Actions

Practice

How to Use GitHub Actions With AI

Hover and Press: Make the Interface Answer Back

Practice

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

Cursor

Run Your First AI-Powered Edit in Cursor

Strategy

Create a One-Page Design System Strategy

Obsidian

OMD

How I Wake Up to Fresh YouTube Transcripts in Obsidian

Claude Code Claude

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

Playwright

Automate Component Screenshots with Playwright

Design Systems Claude

How to Prompt Claude to Audit a Figma Design

Claude Code Claude

Put Claude Code Sessions Online

Claude Code Claude

Rolling Out AI Across a Design Team

Screenshot to UX Critique

Scroll Reveal: Motion That Earns Its Place

TokensT

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

TokensTSD

Build a Token Pipeline with Style Dictionary

TSD

Set Up a Token CI/CD Pipeline

Run a Token Naming Audit with AI

Claude Code Claude

Build a Token Naming Audit Skill for Claude Code

Claude Code Claude

Build a Token Parity Check Skill for Claude Code

Sync Tokens Studio to GitHub

Vercel

Share Live Prototypes with Vercel Preview Deploys