Tutorials
Figma and Claude Code: a round-trip design workflow
A practical Figma to Claude Code workflow that goes both ways: design in Figma, build with Claude Code, then capture the running UI back into Figma for review.
4 min read
Blog
Tutorials
Step-by-step builds and reusable templates: dashboards, landing pages, briefs and refinement passes.
5 articlesRSS
Articles
5 articles
- 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
- 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
- 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
- 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
Better design starts with better context.
Give your AI coding agents access to your design taste, references and preferences.