Tag · 23 guides
Design Systems
Every guide tagged design-systems, sorted by most recent.
CO Codex 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.
SE Set 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.
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.
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.
WH What 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.
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.
DE Design 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.
AU Automate 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.
CO Codex 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.
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 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.
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.