Tag · 29 guides
Design Systems
Every guide tagged design-systems, sorted by most recent.
COCodex Skills vs Plugins: What Designers Actually Need
Skills teach Codex how to run your workflow. Plugins connect Codex to tools and package reusable setups. Here is the practical designer version, with examples for design QA, docs, inbox triage, and design-system audits.
SESet Up Codex for Designers
OpenAI Codex is a coding agent you can use from the app, terminal, IDE, cloud, and mobile. This designer-friendly setup guide shows what to install, what to connect, and the first safe tasks to run.
Building the Agentic Operating Model (Part 5)
Part 5 and the capstone of the Agentic Design Systems series. Tools and loops are not an operating model. This is how the people, the process, and the governance fit together so a team of humans and a fleet of agents can run a design system sustainably, without the whole thing depending on the one person who understands the agents.
The Self-Healing Flywheel (Part 4)
Part 4 of the Agentic Design Systems series. When an agent has earned the right to fix things, the detect-propose-verify-merge-learn loop lets your design system repair its own drift while you sleep. Here is the loop, the four guardrails that keep it safe, and the moment you should switch it off.
Observer Mode: Learning Before Acting (Part 3)
Part 3 of the Agentic Design Systems series. Observer is the longest, cheapest, most-skipped trust level. Run an agent read-only against your real system for weeks before you give it any authority, and let the audit decide whether it should ever be promoted at all.
5 GitHub Actions Every Designer Should Automate
You do not need to become a DevOps person. Five small workflows that catch broken tokens, build your docs site, lint your code, and turn random scripts into one-click tools.
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.
Trust Levels: How Agents Earn Autonomy (Part 2)
Part 2 of the Agentic Design Systems series. The five trust levels (Observer, Advisor, Junior, Senior, Autonomous), what each one is allowed to do, and the exact criteria to promote an agent from one level to the next.
THThe 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.
WHWhat Is an Agentic Design System? (Part 1)
Part 1 of the Agentic Design Systems series, based on Romina's IDS 2026 talk. A design system built for AI agents, not just humans. Stops hallucination before it ships.
AUAudit 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.
CLClaude 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.
DEDesign Token Naming: 7 Systems Compared
How Polaris, Carbon, Primer, Material Design, Lightning, Spectrum, and Fluent name their tokens. Side-by-side comparison with patterns, examples, and what to steal for your system.
AUAutomate Browser Testing Without Writing Code
Screenshot your whole design system, catch visual bugs before they ship, and audit every page automatically, using Playwright without touching a test file.
Audit 500 Components in 10 Minutes
A complete workflow for auditing your entire Figma component library using Tidy and Claude. Identifies naming issues, missing descriptions, and inconsistencies.
Build Your Design Team's Operating System in a Repo
Your team's operating knowledge (how you name tokens, review work, and decide what good is) lives in people's heads. Put it in a repo of skills and playbooks and your least AI-fluent teammate works like your best one, while agents execute against the same source. This guide builds it, with the maturity ladder and review model that keep it honest.
Five Patterns for Agentic UI
An agent inside your product creates states you do not control: variable steps, variable output, and actions with real consequences taken on a user's behalf. Five patterns keep that surface trustworthy: deterministic confirmation gates, reasoning states, canonicals, intent-first navigation, and recovery.
Your Tokens Are a Prompt: Semantic Naming for AI UI Builders
When an AI builds your interface, the token name is the instruction. Why visual names like color.blue.500 make models guess, and how intent-based names make generation predictable.
COCodex Subagents for Design Review
Use Codex subagents to run accessibility, first-time user, copy, edge-state, and design-system reviews in parallel, then merge the findings into one prioritized report.
Browser Automation for Design QA
Delegate the mechanical parts of design QA to an AI agent that drives a real browser. Token usage, contrast, dark mode, responsive, and focus state checks that run on every PR without you clicking through every page.
Extended Thinking as a Design System Debugger
Anthropic markets it as a reasoning feature. I use it as a debugger. When Claude misnames a token or mislabels a component, the scratchpad tells you exactly why.
Few-Shot Examples for Component Naming
How I label 20 component names by hand and get Claude to pattern-match the rest. Practical setup for component naming, token naming, and any classification task.
How to Prompt Claude to Audit a Figma Design
A 5-version walkthrough showing how a bare prompt becomes a production-ready design audit. Built on the same iterative method Anthropic teaches internally.
Automate the Boring Parts of Your Design System
Most design system problems are not caused by lack of intention. They are caused by inconsistent execution. GitHub Actions fix that by running the boring parts every single time.
How to Use GitHub Actions With AI
AI is good at generation. GitHub Actions are good at repeatable execution. Pair them and you get the reliability layer most AI-assisted design workflows are missing.
BUBuild 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.
BUBuild 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.
BUBuild 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.