Pick your year
Home by Dark
×

Working isn't the same as good: design and polish

⏱ 30 min7 steps

Claude will build you a page that works in minutes. It will often look like every other page an made this year, with the same fonts and the same purple. Making it look good takes more work, and you have to ask for it.

Do steps 1 to 3 now, before Claude builds anything. Come back for the rest once a build track has made your first page. That first review usually turns up a dozen small things. Everyone's does.

AI Short for artificial intelligence. Here it means a program like Claude that reads what you write and writes back in plain words. All words

Before this, you'll want:

×

Steps

Step 1 of 70 done · about 30 min left

Steps for
  1. Step 1 of 7, not done yet
  2. Step 2 of 7, not done yet
  3. Step 3 of 7, not done yet
  4. Step 4 of 7, not done yet
  5. Step 5 of 7, not done yet
  6. Step 6 of 7, not done yet
  7. Step 7 of 7, not done yet

  1. Pick a look on purpose

    There are three stages, and it helps to know which one you're at:

    • Working: it runs. You can click through it and nothing breaks.
    • Designed: it's clear, and it's right for the people it's for. They know what it is and what to do next without thinking about it.
    • Polished: every detail is on purpose. The spacing lines up, the words fit, it looks right on a phone and in .

    People decide whether to trust a site from how it looks, before they read a word. A page that looks thrown together reads as "this might not be real", even when everything on it is true.

    This site is the example. Its look was chosen on purpose and written down: the paper color, the type, body text never smaller than 18 pixels, what pages do in dark mode and on a phone. Before a page goes live, it's checked at , in dark mode, and in all four styles under "Pick your year" at the top.

    1. Find two or three real sites you admire. They don't have to be in your line of work.
    2. For each one, write down what you like: the type, the colors, how much space there is, how it feels.
    3. Keep the list next to you for step 3.

    If you'll pay a designer or illustrator. If your site is how people meet your business, it can be worth paying a person for the parts that make it recognizable. Ask for things you can hand to Claude afterward:

    • A logo, in a version for light backgrounds and one for dark.
    • A type and color set: the fonts, the exact colors, and how they're used. Ask for it as a one-page guide.
    • A few illustrations in one style, if your site needs pictures that aren't photos.

    Put what they give you into your my-idea , and tell Claude about it in step 3, so it goes into your .

    dark mode A setting on phones and computers that swaps light backgrounds for dark ones. Many people leave it on all the time. All wordsphone width How a page looks on a narrow phone screen, about 390 pixels wide. Many visitors see your site this way first. All wordsfolder A place on your computer that holds files and other folders, like a drawer in a filing cabinet. All wordsdesign rules A short written description of how your site should look, kept in CLAUDE.md so Claude follows it on every page. All words
    That's not what I see
    I don't know what I like.
    Open five sites you use every week and write one line about each: what you'd keep, what bothers you. The sites you keep coming back to are your answer.
    The sites I like are big companies with whole design teams.
    That's fine. Write down what you can use from them: how much space there is, how big the words are, how many colors they use.

  2. Start Claude Code in your my-idea folder

    1. Open (Cmd+SpaceWindows key, type Terminal, press Enter).

    2. Go to your my-idea folder. Type this and press Enter:

      cd ~/Backyard/my-idea

      cd ~\Backyard\my-idea

    3. Check the says my-idea.

    4. Start . Type this and press Enter:

      claude
    Terminal An app on your Mac where you type instructions instead of clicking on things. Claude Code works inside it. All wordsprompt line The line in Terminal that ends with a % sign. The word right before the % is the folder you're in. All wordsClaude Code Claude, working inside Terminal. It can make files and run things on your Mac, with a safety checker watching what it does. All words

    You should see:

    Claude Code's name and version at the top, a line starting with ❯ where you type, and ⏵⏵ on in the bar at the bottom.

    auto mode Claude works without asking, and a separate safety checker blocks anything risky. All words
    That's not what I see
    It says "cd: no such file or directoryCannot find path … because it does not exist".
    The my-idea folder isn't there. It comes from Check the idea first and The three files, so do those first, then come back.
    It says "zsh: command not found: claudeThe term 'claude' is not recognized".
    This Terminal window doesn't know about Claude Code. Close the window with Cmd+WCtrl+Shift+W, open a new one and try again. If it still says that, go back to Claude Code and .install Put a new program on your computer so you can use it. All wordssign in Tell Claude Code which Claude account is yours, so it knows you've paid for it. All words

  3. Have Claude write your design rules into CLAUDE.md

    This asks Claude to interview you about the look, one question at a time, and write your answers into , along with a few rules every page must keep.

    1. Copy the prompt below.
    Set my project's design rules. Add a section to CLAUDE.md called "Design rules", and interview me to fill it in, one question at a time. Ask me about: who visits this site and what they should feel in the first few seconds; two or three real sites I admire, and what I like about each; the type (one or two fonts at most, and how big the body text is); the colors (a background, a text color, one accent, and what each becomes in dark mode); spacing (generous or tight); and anything I never want, like stock photos, emoji as icons or purple gradients. Then add these rules whatever I say: every page must work at phone width with nothing scrolling sideways; every page must work in dark mode; body text is never smaller than 18 pixels; and keep to these rules on every page, or ask me before you break one. Show me the section before you save it.
    1. Paste it into Claude Code with Cmd+VCtrl+V and press Enter.
    2. Answer each question. Use your list from step 1.
    3. Read the section Claude shows you, and tell it what to fix before it saves.

    Claude Code reads CLAUDE.md at the start of every in this folder, so from now on every page it makes starts from your rules instead of its habits.

    Now pick a build track. When Claude has made your first page, come back here for step 4.

    prompt What you type to Claude. A good one says what you want, how to work and what never to do. All wordsCLAUDE.md A note to Claude about how to work in this project. Claude Code reads it at the start of every session in that folder. All wordssession One conversation with Claude Code, from when you start it until you leave. All words

    You should see:

    Claude asks you one question, about who visits your site, and waits for your answer. At the end, it shows you the Design rules section before it saves it.

    That's not what I see
    Claude picked fonts and colors without asking me.
    Tell it: Please slow down and ask me one question at a time. It's your site, so the choices are yours, even if you end up taking its suggestion.
    I don't know any font names.
    Say so. Ask Claude to suggest three, each with a real site that uses it, and pick the one that feels most like the sites you chose in step 1.

  4. After your first page, start Claude Code again

    If Claude Code is still open from your build track, skip to step 5.

    1. Open Terminal (Cmd+SpaceWindows key, type Terminal, press Enter).

    2. Go to your my-idea folder. Type this and press Enter:

      cd ~/Backyard/my-idea

      cd ~\Backyard\my-idea

    3. Check the prompt line says my-idea.

    4. Pick up where you left off. Type this and press Enter:

      claude -c

    You should see:

    Claude Code opens, with your last conversation in this folder above the line where you type.

    That's not what I see
    It says "cd: no such file or directoryCannot find path … because it does not exist".
    The name was spelled differently. Type ~/Backyard/my-idea~\Backyard\my-idea exactly as it's written here and press Enter.cd The command that moves Terminal into a folder. Type cd, a space and the folder's name. It's short for change directory, an old word for folder. All words
    It says "zsh: command not found: claudeThe term 'claude' is not recognized".
    This Terminal window doesn't know about Claude Code. Close the window with Cmd+WCtrl+Shift+W, open a new one and try again. If it still says that, go back to Install Claude Code and sign in.

  5. Have Claude review a page against your design rules

    This prompt asks Claude to check one page against your rules, at phone and laptop width, in light and dark mode, then fix what it finds. The page goes at the end.

    1. Copy the prompt below.
    Review the page I name at the end against our design rules in CLAUDE.md. Check it at phone width (390 pixels wide) and at laptop width, in light mode and in dark mode. If you can open it in a browser and take screenshots, do that and look at them. If you can't, say so and review the code instead. List every place the page doesn't match our rules, or looks cramped, crooked, cut off or hard to read. Then fix them, and tell me what you changed and what you didn't check. The page:
    1. Paste it into Claude Code with Cmd+VCtrl+V.
    2. Type a space, then the page you care about most, like the home page.
    3. Press Enter.

    Run this again any time Claude builds a new page.

    You should see:

    Claude lists the places the page doesn't match your rules, fixes them, then tells you what it changed and what it didn't check.

    That's not what I see
    Claude says everything already matches.
    Ask it: Look again at phone width in dark mode, and list at least five things a careful designer would change, however small.
    Claude says it can't take screenshots.
    Then the review is only as good as reading the code. That's why the next step has you look with your own eyes.

  6. Look at it yourself, on your phone and in dark mode

    Claude's review can miss things, so look for yourself.

    1. Copy the message below, paste it into Claude Code and press Enter.
    Open this page in my browser.
    1. Make the window as narrow as it goes, so it's about phone width, and look at the page. If the window fills the screen, click the middle button at its top right first, then drag its side edge in.
    2. Switch your Macyour PC to dark mode in System SettingsSettings, under AppearancePersonalization > Colors, and look again. Then switch back.
    3. If something looks off to you, it is off. Tell Claude what you see in plain words, like The button at the bottom is touching the edge on a phone. Fix it and check the other pages for the same thing.
    browser The app you use to visit websites, like Safari or Chrome. All words

    You should see:

    Your browser opens on the page. If Claude has to start something first to show it, it says so, and may give you a link to open instead.

    That's not what I see
    The page didn't open.
    Ask Claude: Give me the link to the page, and tell me if you need to start anything first. Then hold CmdCtrl and click the link.
    I can't open the page on my phone.
    On your MacOn your PC, make the browser window as narrow as it goes. It's close to a phone. Once the site is on the internet, check it on your real phone too.
    My MacMy PC is already in dark mode, so I've never seen it in light.
    Check both. Switch in System Settings, under AppearanceSettings, under Personalization > Colors, look at the page, then switch back.

  7. Go down the polish checklist

    1. Go through this list on the page you picked:

      • On a phone, nothing scrolls sideways and nothing is cut off.
      • In dark mode, every word is readable and no image has a white box around it.
      • The body text is big enough to read without zooming.
      • Things line up: the edges of text, buttons and pictures sit on the same lines.
      • Spacing is even. Gaps between sections are the same everywhere.
      • There are no more than two fonts and one accent color.
      • Every button and link says what it does.
      • You can tab through the page with the keyboard and always see where you are. (In Safari, hold Option as you press Tab.)
      • Pictures are sharp, not stretched or blurry.
      • The page has a real title, and the words in the browser tab make sense.
      • Nothing on the page is placeholder text, a made-up number or a fake review.

    2. Tell Claude each one that fails, in plain words.

    Then go back to your build track and carry on where you left off.

    That's not what I see
    The list found more than I can fix today.
    Fix the ones a visitor sees first: the top of the home page, then the page people land on most. Write the rest at the bottom of under Not doing yet.PRD.md One page on the problem, who it's for, and what "done" looks like. PRD stands for product requirements document. All words
×

Your challenge

Today, get your design rules into CLAUDE.md. After you build your first page from a track, run the review prompt on it, then go down the polish checklist yourself. Fix three things, however small.

Last checked 2026-10-20

Start