Step-by-step AI guides for designers

1 AI for Designers 101 2 Stop Being Afraid of the Terminal 3 Run Your First AI-Powered Edit in Cursor 4 Prompting Basics for Designers

Beginner AI Setup

5 guides

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

1 Set Up Claude Code (Step by Step for Designers) 2 Claude Code: App vs Extension vs Terminal (Which One to Use When) 3 Put Claude Code Sessions Online 4 How 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.

1 How to Describe Design Styles to AI 2 How to Use AI to Explore Multiple Visual Directions Fast 3 The Design Style Phrasebook 4 AI Anti-Patterns Gallery: 10 Reasons Your AI Website Looks Generic

Visual Direction & Style

8 guides

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

1 Design Token Naming: 7 Systems Compared 2 Build a Token Naming Audit Skill for Claude Code 3 Build a Token Parity Check Skill for Claude Code 4 Build a Component Audit Skill for Claude Code

Design System Automation

12 guides

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

1 5 GitHub Actions Every Designer Should Automate 2 How to Create a GitHub Action (and Why It Matters) 3 Automate the Boring Parts of Your Design System 4 How to Use GitHub Actions With AI

Automation for DS Teams

13 guides

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

1 AI for Designers 101 2 Set Up Codex for Designers 3 Codex Skills vs Plugins: What Designers Actually Need 4 Codex 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.

1 What Is an Agentic Design System? (Part 1) 2 CLAUDE.md + tools.md: The Two Files Every AI Project Needs 3 The Taste Stack: Project Rules, Local Markdown, and Skills 4 Understand MCP in 10 Minutes (and Why It Changes Your AI Setup)

Agentic Design Systems

15 guides

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

1 Enter and Exit: The First Motion to Get Right 2 Hover and Press: Make the Interface Answer Back 3 Scroll Reveal: Motion That Earns Its Place 4 Motion 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.

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

Claude Code

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

Skills Pro

Codex Skills vs Plugins: What Designers Actually Need

Audit 500 Components in 10 Minutes

Audit a Design System in 30 Minutes

Tokens

Design Token Naming: 7 Systems Compared

Figma

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

Figma

Connect Your Figma Designs to Claude and Cursor

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

AI Practice Pro

How to Describe Design Styles to AI

Manus Pro

How and Why I Use Manus as My Research Assistant

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

Automate Browser Testing Without Writing Code

Prompting Basics for Designers

Claude Code

Safe AI for Designers: The Five Rules to Start With

AI Design

Set Up Your AI Design Workspace in 20 Minutes

Design Systems

Set Up Codex for Designers

Taste Skills Are the New Design Tokens

AI Practice Pro

Teach AI Who You Are

The Design Style Phrasebook

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

Trust Levels: How Agents Earn Autonomy (Part 2)

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

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

Build Free Design System Docs with Astro Starlight

How to Write Better AI Prompts for Landing Pages

MCP Pro

Browser Automation for Design QA

Chromatic Pro

Set Up Visual Regression Testing with Chromatic

CLAUDE.md Pro

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

Reviews Pro

Codex Subagents for Design Review

Build a Component Audit Skill for Claude Code

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

AI Practice Pro

How to Build a Customer Context Folder for AI

Adoption Pro

Set Up a Design System Adoption Tracker

Strategy Pro

Build a Design System Pitch Deck with AI

Enter and Exit: The First Motion to Get Right

How to Use AI to Explore Multiple Visual Directions Fast

How to Evaluate AI Output Like a Senior Designer

Extended Thinking as a Design System Debugger

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

Generate Component Documentation with AI

Automate the Boring Parts of Your Design System

Automate Design Token Publishing with GitHub Actions

Practice Pro

How to Use GitHub Actions With AI

Hover and Press: Make the Interface Answer Back

Practice Pro

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

Cursor Pro

Run Your First AI-Powered Edit in Cursor

Strategy Pro

Create a One-Page Design System Strategy

Obsidian Pro

How I Wake Up to Fresh YouTube Transcripts in Obsidian

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

Playwright Pro

Automate Component Screenshots with Playwright

How to Prompt Claude to Audit a Figma Design

Put Claude Code Sessions Online

Screenshot to UX Critique

Scroll Reveal: Motion That Earns Its Place

Build a Token Pipeline with Style Dictionary

Set Up a Token CI/CD Pipeline

Run a Token Naming Audit with AI

Build a Token Parity Check Skill for Claude Code

Build a Token Naming Audit Skill for Claude Code

Sync Tokens Studio to GitHub

Vercel Pro

Share Live Prototypes with Vercel Preview Deploys