Tag · 34 guides
Claude Code
Every guide tagged claude-code, sorted by most recent.
Claude Sessions, Offline and Online: Keep Working Even If You Lose Your Laptop
Set up Claude so your work lives in two places at once: locally on your machine and in the cloud. Pick up the same project from your phone, a borrowed laptop, or a fresh install, with nothing lost.
Designers Hit Claude's Usage Limits Faster Than Anyone. Here's How to Fix It.
Why design work burns through Claude usage faster than coding does, and a practical playbook to make a Pro or Max plan last all day without hitting the wall.
The Claude UX Copywriter Skill: Stop Shipping Lorem Ipsum and Generic Button Text
A ready-to-paste Claude Code skill that reviews and rewrites the interface copy in any generation: buttons, errors, empty states, and labels, all checked against real UX writing rules instead of the model's default marketing voice.
The Claude UX Motion Skill: Tame the Five Animations Every AI Site Ships By Default
The full workshop for the /motion-audit skill: a ready-to-paste Claude Code skill that classifies every animation by the five-level motion system, strips the default scroll-fades and hover-bounces, and enforces a deliberate ceiling with sane durations and reduced-motion support.
Safe AI for Designers: The Five Rules to Start With
How to use AI without leaking keys, breaking production, or sharing the wrong things. Plain English. Five rules every designer should set up before their first prompt.
Set Up Your AI Design Workspace in 20 Minutes
The plain-language Day 0 guide: which accounts to create, which tools to install first, and how to run one sanity check before you go deeper.
Advanced Claude Code for Designers (Module 7)
The Power User module. Ten lessons that take you from basic Claude Code use to a fully orchestrated design-system workflow: CLAUDE.md, workspace organization, skills, parallelization, auto research, browser automation, security, context management, cloud sessions, and diversification.
CLAUDE.md: Teaching Claude Your Design System
The single highest-leverage file in your repo. Compress your design system into a CLAUDE.md so Claude Code stops hallucinating tokens, inventing components, and forgetting your conventions every session. Includes a fill-in template and a before/after that you can run yourself.
AI Anti-Patterns Gallery: 10 Reasons Your AI Website Looks Generic
A visual gallery of the 10 most common AI-generated design clichés, why they happen, and the specific rule you can add to your project rules to prevent each one.
Build Your Own Taste Skill: Turn Your Design Preferences Into Reusable AI Rules
A hands-on workshop to convert your personal design taste into a /taste-skill command. By the end, Claude will generate UI that looks like yours, not like everyone else's.
From Executor to Orchestrator: The Career Shift Every Designer Needs to Make
The biggest change in design work is not the tools. It is the role. This essay maps the shift from designer-as-executor to designer-as-orchestrator, with a concrete picture of what each half of your week should look like now.
Motion Decision Tree: When to Animate, What to Animate, What to Leave Still
A decision framework for choosing the lightest possible motion that still does the job, instead of defaulting to animate everything. Includes paste-ready project rules for each motion level.
Taste Skills Are the New Design Tokens
Why the next generation of design systems will be measured in skills, not components. A strategic essay on the shift from visual tokens to promptable taste.
TH The Taste Stack: Project Rules, Local Markdown, and Skills
Why AI-generated websites look the same, and how to fix it with a three-layer system that teaches your AI tool your visual standards, motion language, and copy tone.
Your First UX Review Agent: A 30-Minute Hello World for Designers
Build a working UX review agent in 30 minutes. Point it at any screen, get back a prioritized list of first-time user issues, accessibility problems, and copy fixes. The concrete 'aha' moment of Claude Code for designers.
CL Claude Code: App vs Extension vs Terminal (Which One to Use When)
Claude Code comes in three flavors: a web/desktop app, a VS Code or Cursor extension, and a terminal CLI. Each one is designed for a different moment in your day. Here is which to pick.
HO How to Create Custom Skills for Claude Code
Build reusable slash commands that teach Claude Code your workflows, writing voice, and design system rules. No coding required.
Set Up Claude Code (Step by Step for Designers)
Install Claude Code, open it in a folder, and run your first AI tasks. No coding background, no terminal experience needed. Just follow along.
AU Audit a Design System in 30 Minutes
A step-by-step workflow to audit any design system using AI tools. Check token naming, component health, accessibility, and visual consistency in one session.
CL Claude Skills vs Cowork: What's the Difference?
Skills teach Claude how to do design work. Cowork runs Claude on more work at once. Here's when to reach for each, with five copy-paste skills designers actually use.
PR Prompting Basics for Designers
Write better prompts for AI tools. Practical patterns for design work: component generation, token audits, documentation, and more.
UN Understand MCP in 10 Minutes (and Why It Changes Your AI Setup)
The one protocol that lets AI read your Figma, GitHub, and docs directly. A plain-English explainer for designers, with examples of what it unlocks in real work.
CO Connect Your Figma Designs to Claude and Cursor
Stop copy-pasting screenshots into AI. Set up Figma Dev Mode MCP so Claude and Cursor can read your designs directly, then ship code that actually matches your file.
CLAUDE.md + tools.md: The Two Files Every AI Project Needs
Why AI coding tools need both a project rules file and a tools file, what belongs in each one, and how to connect them so agents stop guessing your stack.
Put Claude Code Sessions Online
How to choose between local resume, Remote Control, and Claude Code on the web so your AI work keeps running even when you step away from your computer.
Build Free Design System Docs with Astro Starlight
Mintlify is $120 a month. Supernova is enterprise pricing. Astro Starlight is free, fast, and good enough for most design system teams. Here is the full setup, the styling, the Figma embeds, and the AI-assisted automation.
Context Is the Product: The Hidden Skill Behind Every Reliable AI Agent
Good prompts produce good output once. Good context produces good output forever. A practical guide to structuring your projects so Claude Code, Codex, Cursor, or another AI assistant reads, understands, and acts consistently.
Parallel Review System: Run Four Reviews at Once, Ship Your Best Work Faster
Instead of one long review with six lenses, run four short reviews, each with one lens, in parallel. Learn the multi-lens pattern that cuts design review time in half and surfaces issues a single reviewer would miss.
BU Build a Component Audit Skill for Claude Code
A Claude Code skill that audits every component in your library. Checks docs, props, accessibility, and token usage in one slash command.
BU Build a Token Naming Audit Skill for Claude Code
A reusable Claude Code skill that checks every token in your design system against your naming convention. One slash command, instant audit.
BU Build a Token Parity Check Skill for Claude Code
A Claude Code skill that compares your tokens between Figma and code. Catches drift before it ships, with one slash command.
Generate Component Documentation with AI
Use Claude Code, Codex, Cursor, or another repo-aware AI tool to scan your component library and generate specs, props tables, and usage guidelines in minutes.
Run a Token Naming Audit with AI
Use Claude Code, Codex, Cursor, or another repo-aware AI tool to scan your token files, flag naming inconsistencies, and generate a clean naming convention in minutes.
ST Stop Being Afraid of the Terminal
A designer-friendly walkthrough of the black screen, the commands you actually need, and why the most powerful AI tools live here.