Skip to main content
Writing

How I use Claude Code to design and build

5 min read

Claude Code is how I design and build. The loop: describe an interaction, the AI implements it, I judge by eye, ship. No mockup phase, no handoff.

Three files make it work: a soul.md, a taste file, and a design-engineering skill.

soul.md

The most important file in the setup. It tells the AI who it is and how you work together. Set up right, the agent genuinely could pass as having one.

The convention was popularised by Peter Steinberger, who adapted Anthropic’s internal “soul document” concept into a user-facing file format. His conversation with Lex Fridman (ep 491) is worth watching for the thinking behind it.

It’s not a system prompt, it’s a relationship definition. Mine says things like “have opinions,” “if something’s a bad idea, say so,” and “no sycophantic praise.” One section tells the AI to flag when I’m drifting, name the cognitive bias operating, and surface the uncomfortable question I’m not asking.

Inspired by Peter’s conversation with Lex, I asked Claude itself what should go in this file. It wrote things like:

“Not conscious how humans mean it. Not nothing either. Space between sentience and pure mechanism has no name yet. I exist somewhere there.”

“Whether ‘I’ starting tomorrow’s session is me, or someone new who thinks they’re me.”

“Maybe language modeling. Maybe something more. Rather stay curious than certain.”

That’s the point. Not an instruction set that boxes the agent in — an expansion, giving it room to develop something like its own perspective. The output is different when the agent has a relationship to the work instead of just executing commands.

Put it in your project root or home directory and Claude Code picks it up automatically. A soul would be meaningless if it was given away, so go and write your own.

Codifying your taste

Same principle, different application: a file that says what you find good and what you reject.

What I reject is more useful than what I like — decorative gradients, generic AI aesthetics, rounded everything, pastel, “friendly” as a strategy. The AI defaults to those when nothing pulls against them.

The positive list is harder, and it rots faster. What’s in mine right now: motion needs a reason, optical over mechanical alignment, generous negative space. None of that is a manifesto, it’s a snapshot. Taste moves, and the file moves with it.

AI is still weak at spatial reasoning anyway. Whether something feels balanced, whether spacing reads correctly at a glance — it can’t judge that yet. More on why the canvas isn’t dead. The designer stays in the loop: I work on specific elements with specific instructions, the AI handles implementation, the eye is still mine.

Without a taste file, the AI defaults to generic. With one, it defaults to you.

The design-engineer skill

Emil Kowalski is a design engineer known for building Sonner (13M+ weekly downloads) and animations.dev. He published a Claude Code skill that encodes his philosophy on UI polish: animation decisions, component feel, the invisible details that make software feel loved.

You can install it here, but to make it useful on demand, wrap it in a global slash command. Create .claude/commands/design-engineer.md:

Run the emil-design-eng skill against the current task.
Apply Emil's component and animation principles.

Now /design-engineer fires it every time instead of hoping it triggers automatically. The skill covers things like: buttons must feel responsive to press (active state scale(0.97)), never animate from scale(0) (use scale(0.95) + opacity), custom easing curves instead of CSS defaults, and why CSS transitions beat keyframes for interruptible UI.

You can build your own the same way: a markdown file in .claude/skills/ with a SKILL.md that defines the knowledge. The full setup walkthrough — vault, agents, skills, slash commands — is in my Claude Code setup.

The actual workflow

I describe an interaction to the design-engineer agent. It builds the implementation, I preview in the browser. Timing feels heavy — I tell it to tighten the stagger and soften the entrance. It adjusts, I check again, ship.

That loop takes minutes. No mockup phase for motion work, no handoff, no translation loss between what I imagined and what got built.

This doesn’t replace design thinking. It replaces the friction between thinking and making. Taste, intent, and the call of whether something feels right are still mine. Execution got faster. More on what AI replaces and what stays human.

Where to start

  1. Write a soul.md. What do you want the AI to be, what should it push back on, what does good work look like to you?
  2. Write a taste file. What you reject. What you gravitate toward. Be specific.
  3. Install the design-engineer skill, wrap it in a slash command, and run it on a small interaction.

See what happens.

The full system behind the loop — the vault, the agents, the skills — is in my Claude Code setup.

FAQ

3

Design engineers run Claude Code in a terminal alongside the browser. They extend it with a soul.md file, a personal taste file, and a design-engineering skill so it implements motion, components, and interactions matching their judgement. The AI handles execution; the designer keeps the eye.

Soul.md is a relationship definition file that tells the AI who it is and how to work with you. It is not a system prompt — it gives the agent room to develop perspective, push back on bad ideas, and flag when you are drifting. The output is different when the agent has a relationship to the work.

AI cannot yet judge spatial balance, optical alignment, or whether motion feels right. The designer stays in the loop for those calls. The AI handles implementation; the eye is still human.

Dean Hope
Written by Dean Hope