Claude Code
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.
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 3 of 3
- Claude Code
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.
4 min read
- Claude Code
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.
4 min read
- Design Engineering
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.
4 min read
- AI & Design
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.
3 min read
- Tutorials
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.
4 min read
- Design Engineering
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.
3 min read
- Tutorials
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.
4 min read
- MCP & Agents
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.
3 min read
- MCP & Agents
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.
4 min read
- AI & Design
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.
4 min read
- AI & Design
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.
3 min read
Better design starts with better context.
Give your AI coding agents access to your design taste, references and preferences.