MCP & Agents
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.
5 min read
Blog
Blog
Practical guides for designers and design engineers working with AI coding agents: Claude Code, MCP, design systems and creative direction.
36 articlesRSS
Latest articles
36 articles · Page 2 of 3
- Claude Code
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.
5 min read
- Claude Code
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.
5 min read
- MCP & Agents
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.
4 min read
- Tutorials
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.
6 min read
- Design Engineering
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.
5 min read
- Design Engineering
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.
5 min read
- Claude Code
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.
5 min read
- Tutorials
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.
5 min read
- Design Engineering
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.
6 min read
- Design Engineering
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.
4 min read
- AI & Design
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.
4 min read
Better design starts with better context.
Give your AI coding agents access to your design taste, references and preferences.