Blog
Practical guides for designers and design engineers working with AI coding agents: Claude Code, MCP, design systems and creative direction.
How to use Figma MCP with Claude Code
Connect Figma’s MCP server to Claude Code, pull design context from frames, components and variables, and turn it into code that fits your codebase.
Claude Code skills for better frontend design
What frontend design skills do in Claude Code, which ones exist today, how to install and invoke them, when they help and how to write a design skill of your own.
CLAUDE.md for UI design: rules, examples and best practices
How to write CLAUDE.md for frontend work: what to include, how to structure design rules, path-scoped rules, and a copyable example for a React and Tailwind app.
MCP vs Agent Skills: what’s the difference for designers?
MCP connects an AI agent to live tools and data; Agent Skills teach it how to do a task. A plain-language comparison for designers, with examples and when to use each.
How to build a SaaS landing page with Claude Code
Turn a product brief into a distinctive SaaS landing page with Claude Code: plan the page, set a visual direction, use references well, build responsively and review it.
How to make AI-generated UI responsive
Why AI-generated interfaces break on phones, and how to fix tables, sidebars, navigation, cards, touch targets and type with specific prompts and real-width testing.
How to make AI-generated interfaces accessible
A practical checklist for AI-generated UI: semantics, keyboard, focus, contrast, forms, target size and ARIA, plus what automated tools catch and what they miss.
Visual testing for Claude Code: screenshots, browsers and Playwright
Compiling isn’t design QA. How to let Claude Code see its UI: browser inspection, screenshots at several widths, Playwright visual comparisons and a repeatable loop.
How to write a better design brief for AI coding agents
Turn a vague idea into a brief an AI coding agent can build from: users, tasks, hierarchy, direction, references, constraints and acceptance criteria. Three templates.
Design tokens for AI coding agents: CSS variables and Tailwind
Set up semantic design tokens with CSS variables and Tailwind v4 so AI coding agents can only use your colours, type and radii, with a tested check for drift.
How to keep AI coding agents consistent across a product
When several people and agents build one product, the UI drifts. Shared instructions, principles, components, tokens, references and review keep it coherent.
How to explore multiple UI design directions with Claude Code
Generate three deliberately different UI directions with Claude Code, keep requirements fixed, compare them fairly and combine the strongest decisions.
How to make Claude Code build better UI
A practical workflow for better interfaces from Claude Code: write a real brief, give it references and constraints, make it check its work in a browser, then review.
Claude Code for designers: a practical getting started guide
What Claude Code is, how to set it up on a real project, how to preview and refine interfaces with it, and the limits designers should know before relying on it.
How to give Claude Code visual design references
Screenshots, mockups and URLs make Claude Code far more precise, if you say what to take from each one. How to share references, annotate them and manage context.
How to make Claude Code follow your design system
Stop visual drift in AI-written UI. Point Claude Code at your components and tokens, write rules it can verify, enforce the critical ones, and review the result.
Why AI-generated interfaces look generic (and how to fix them)
AI coding agents default to the most common patterns: purple gradients, Inter, centred heroes and card grids. Why it happens and the specific fixes that work.
How to improve AI-generated UI without rebuilding everything
Fix AI-generated interfaces with targeted passes on hierarchy, spacing, type, density and states. Includes refinement prompts and a visual QA checklist.
The design engineering workflow: from reference to working product
A five-stage design engineering workflow with AI coding agents: collect references, define direction, build in code, review in the browser and refine.
How to build better SaaS dashboards with AI
AI agents produce dashboards fast, but often as stat cards over a chart over a table. How to brief hierarchy, tables, filters, charts, density and states properly.
What is MCP for designers? A practical explanation
The Model Context Protocol explained for product designers: hosts, clients and servers, what tools and resources are, design examples, and the security points to check.
How to use MCP with Claude Code for better design
Connect design context to Claude Code over MCP: add and scope servers, retrieve references and principles during a task, and keep tool output and context under control.
How to give AI coding agents better design taste
AI coding agents default to the average. Creative direction, made of references, preferences and constraints, is how you give Claude Code, Codex and Cursor your taste.
Design references vs design systems: what AI agents need
References show intent; a design system sets the rules. Why AI coding agents need both, when to use each, how they work together and what happens when they conflict.