Design preview

Generative guide art

All 90 published guides, each illustrated by a slug-seeded recipe. Same slug, same image, every build. No image files.

lattice 23cones 17arcs 11loop 9circles 7nodes 7threads 6waves 5lissajous 4spiral 1
loopGitHubT

5 GitHub Actions Every Designer Should Automate

conesClaude

Advanced Claude Code for Designers (Module 7)

arcsClaudeCursorCodex

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

lissajousClaude

AI for Designers 101

latticeClaudeFigma

Audit 500 Components in 10 Minutes

latticeClaudeCursorCodex

Audit a Design System in 30 Minutes

arcsCursorPlaywright

Automate Browser Testing Without Writing Code

conesClaude

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

circles

Building the Agentic Operating Model (Part 5)

threadsClaudeCursor<>

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

conesClaude

Claude Fable 5 for Designers: What Actually Changes

conesClaude

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

conesClaude

Claude Skills vs Cowork: What's the Difference?

latticeClaude

CLAUDE.md: Teaching Claude Your Design System

conesCodex

Codex Skills vs Plugins: What Designers Actually Need

threadsClaudeCursorFigma

Connect Your Figma Designs to Claude and Cursor

latticeFigmaT

Design Token Naming: 7 Systems Compared

conesClaude

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

lissajousFigmav0Lovable

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

circlesClaude

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

circlesM

How and Why I Use Manus as My Research Assistant

conesClaude

How to Create Custom Skills for Claude Code

loopClaudeFigma

How to Describe Design Styles to AI

wavesClaudeCursorCodex

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

circles

Observer Mode: Learning Before Acting (Part 3)

conesClaudeCursor

Prompting Basics for Designers

conesClaude

Safe AI for Designers: The Five Rules to Start With

nodesClaude

Set Up Claude Code (Step by Step for Designers)

nodesCodex

Set Up Codex for Designers

nodesClaudeCursor

Set Up Your AI Design Workspace in 20 Minutes

latticeClaudeT

Taste Skills Are the New Design Tokens

loopClaude

Teach AI Who You Are

conesClaude

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

wavesClaude

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

conesClaude

The Design Style Phrasebook

spiral

The Self-Healing Flywheel (Part 4)

conesClaudeCursorCodex

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

circles

Trust Levels: How Agents Earn Autonomy (Part 2)

threadsClaudeCursorFigma

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

latticeM

What Is an Agentic Design System? (Part 1)

arcsClaude

What to Do When AI Gives You Junk

arcsClaude

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

latticePlaywright

Automate Component Screenshots with Playwright

latticeGitHubT

Automate Design Token Publishing with GitHub Actions

latticeGitHubT

Automate the Boring Parts of Your Design System

loopClaudeMPlaywright

Browser Automation for Design QA

latticeClaude

Build a Component Audit Skill for Claude Code

lissajousClaude

Build a Design System Pitch Deck with AI

latticeClaudeT

Build a Token Naming Audit Skill for Claude Code

latticeClaudeFigmaT

Build a Token Parity Check Skill for Claude Code

latticeTSD

Build a Token Pipeline with Style Dictionary

latticeClaudeCursorCodex

Build Free Design System Docs with Astro Starlight

latticeClaude

Build Your Design Team's Operating System in a Repo

threadsClaudeMT

Build Your Own MCP Server for Your Design System

conesClaudeCodex

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

arcsCodex

Codex Subagents for Design Review

circlesClaudeCursorCodex

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

latticeFigmaT

Convert Figma Variables to CSS Custom Properties

lissajousClaude

Create a One-Page Design System Strategy

waves

Enter and Exit: The First Motion to Get Right

latticeClaude

Extended Thinking as a Design System Debugger

latticeClaude

Few-Shot Examples for Component Naming

threadsClaudeCursorFigma

Figma to Code with MCP

circles

Five Patterns for Agentic UI

latticeClaudeCursorCodex

Generate Component Documentation with AI

waves

Hover and Press: Make the Interface Answer Back

loopClaudeOMD

How I Wake Up to Fresh YouTube Transcripts in Obsidian

loopClaude

How to Build a Customer Context Folder for AI

loopGitHub

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

arcsClaude

How to Evaluate AI Output Like a Senior Designer

arcsClaudeFigma

How to Prompt Claude to Audit a Figma Design

loopClaude

How to Use AI to Explore Multiple Visual Directions Fast

loopClaudeGitHub

How to Use GitHub Actions With AI

conesClaude

How to Write Better AI Prompts for Landing Pages

arcsClaude

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

latticeFigma

Pull Component Data from the Figma API

conesClaudeGitHub

Put Claude Code Sessions Online

conesClaude

Rolling Out AI Across a Design Team

latticeClaudeCursorCodex

Run a Token Naming Audit with AI

nodesCursor

Run Your First AI-Powered Edit in Cursor

arcsClaude

Screenshot to UX Critique

waves

Scroll Reveal: Motion That Earns Its Place

nodesFigma

Set Up a Design System Adoption Tracker

nodesGitHubTSD

Set Up a Token CI/CD Pipeline

nodesCS

Set Up Visual Regression Testing with Chromatic

arcsVercel

Share Live Prototypes with Vercel Preview Deploys

threadsClaudeCursor>_

Stop Being Afraid of the Terminal

latticeFigmaGitHubTS

Sync Tokens Studio to GitHub

arcsClaude

The AI-Assisted Accessibility Review

latticeT

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