Invest 30 minutes now.
Ship mockups in 10-word prompts forever.
8
Design System · Claude · 2025
A practical guide

8 Steps to Design
Anything with Claude

A repeatable workflow for solo founders, designers, and builders who want production-quality UI without a team. No Figma license required.

✳
1
Step One
Open The Right Claude
  • Go to claude.ai
  • You need a Pro plan (~$20/mo)
  • Pick Opus 4.7
  • Turn on Artifacts
Wrong model = flat mockups.
2
Step Two
Drop A Screening

Found a UI you love? Screenshot it. Drag it straight into Claude:


"Build this, but for [my project]."
Faster than 100 words of spec.
3
Step Three
Build Your Brand Folder
Create one folder: Claude-Design. Inside three:
  • brand.md — colors, fonts, voice
  • good/ — 5 screenshots you love
  • bad/ — 5 designs you've rejected
Wait, I missed something.
4
Step Four
Fill In brand.md
Inside brand.md, write:
  • Hex codes (primary + secondary)
  • Type scale (H1 → body)
  • 3 tone rules ("never corporate")
  • 3 brands you steal from

One great file beats 20 Figma links.
Aha! I found it.
5
Step Five
Write One Opening Prompt

Paste this for every design task:


Read every file in this folder first. Build [TASK] with your brand. Ask questions before generating.
One prompt. Infinite reuse.
6
Step Six
Brief, Don't Spec
✕ Bad
"Use 12-col grid, auto-layout, 8px spacing."
✓ Good
"Landing page for my consulting biz. Big headline, 4 cards, booking button, footer."
Describe what the user sees. Never the tool.
7
Step Seven
One Screen Per Prompt

Don't dump 12 screens into one chat. Hero first. Get it right. Then pricing. Then the footer.

When something's off, screenshot it. Paste it back. Each chat is a sprint. One deliverable per prompt.

This is why $285B in software stocks disappeared.
8
Step Eight
Save A CLAUDE.md Memory

Create CLAUDE.md. Save fonts, colors, components, screens, preferences.

Read it first next session.


Claude stops starting from zero.
Starts remembering.
You don't need to clear. Claude links you to be.
30
Minutes to set up
Ship mockups.
Skip the agency.
claude.ai · Pro plan · Artifacts on
∞
Prompts that follow