A guidebook for designers

The Designer
Who Codes

You don't need to become a developer. You need to know just enough to build things, speak the language, and work faster than everyone else in the room.

17 chapters

~24 hours total

Doable in a month

Free tools only

Start Chapter 01 →

This course is for you if: You're a UX or product designer who wants to build real things, not just mock them up. You want to use Claude and Figma to go from idea to working website. You want to sit in a meeting with engineers and actually understand what they're saying.

You don't need to memorize syntax. You don't need to become a "developer." You need fluency — the ability to read code, direct AI to write it, translate your designs into reality, and hand off work that developers actually love working with.

What you'll need: MacBook Claude (free) Figma (free) Chrome browser (free) VS Code (free, we'll install it) GitHub account (free)

10 Chapters. One transformation.

Chapters 01–08 are the core. Chapters 09–10 are your secret weapons.

How the Web Actually Works

Before you write a single line of code, understand the stage you're building on.

45 min · No installs

Reading & Writing HTML + CSS

You don't need to memorize everything. You need to know enough to read it and ask better questions.

1.5 hrs · VS Code

Building with Claude

Claude is your pair programmer. Learn how to direct it like a creative director, not a developer.

1 hr · Claude + VS Code

Your designs are the blueprint. Learn how to make them developer-ready.

1.5 hrs · Figma + VS Code

Git is not scary. It's just a very obsessive save system.

1 hr · GitHub account

Design Tokens & Systems Thinking

This is what separates a designer who codes from a designer who dabbles.

1 hr · VS Code

Working with Backend Developers

You don't need to build the backend. You need to speak its language.

1 hr · No installs

Responsive Design & Accessibility

A beautiful website that breaks on mobile isn't beautiful. And one that excludes people isn't either.

1 hr · VS Code + browser

Chapter 09 — Bonus

AI-Assisted Design Workflow

Every other designer is still moving pixels. You're moving fast.

45 min · Claude + Figma

Chapter 10 — Bonus

Component Thinking

The way developers think about code is exactly how you should think about design.

45 min · VS Code