Sprint Reference

Build websites with AI

Universal rules

  1. 01When something goes wrong — copy the error, paste it into Claude, ask what it means.
  2. 02Two terminal tabs at all times — Tab 1 = Claude Code, Tab 2 = dev server.
  3. 03You are responsible, not Claude. Always review changes before they go live.
  4. 04Push and commit to GitHub after every task — every push is a restore point.

Build day

Day 2 — Figma to code

Turn a Figma design into a real coded website — section by section. Don't ask Claude to build the whole page at once.

Rules for the day

  1. 01Build section by section, never the whole page at once — easier to review and fix.
  2. 02Always send desktop AND mobile Figma URLs together — so Claude knows how layout adapts.
  3. 03Be specific in feedback — never just "fix it" or "match Figma" — list exact problems.
  4. 04Tell Claude what looks GOOD too, not just what's broken — stops it changing the right things.
  5. 05Build complete first, then refine — easier to spot real issues across the whole page.
  6. 06Only use --dangerously-skip-permissions on new projects — review carefully on existing codebases.

Figma MCP setup (one-time per project)

  1. 1

    Install the Figma MCP plugin

    Run this inside your project folder.

  2. 2

    Start Claude Code

    Bypass permissions makes the build much faster on a fresh project.

  3. 3

    Open MCP menu

    Inside Claude Code, see all your MCP servers.

  4. 4

    Authenticate Figma

    Click Authenticate next to Figma — opens your browser. Click Agree and Allow Access, then return to Claude Code.

  5. 5

    Verify it's connected

    Type /mcp again — Figma should now show as connected.

  6. 6

    Test it can see your design

    In Figma, select your top frame, copy the URL, paste it into Claude Code.

Building section by section

  1. 7

    Start your dev server (Tab 2)

    Live preview that refreshes every time Claude makes a change.

  2. 8

    Open localhost in browser

  3. 9

    Pick ONE section in Figma

    Don't try to build the whole page in one prompt. Start with the hero.

  4. 10

    Copy desktop frame URL

    Click the section frame in Figma, copy the URL.

  5. 11

    Copy mobile frame URL

    Same section, mobile version. Always send both together.

  6. 12

    Send both URLs to Claude Code

    Plain English works fine.

  7. 13

    Wait ~5 minutes per section

    With bypass permissions = ~5 min. Without it = lots of clicking accept.

  8. 14

    Review the result and give feedback

    Examples: "the text is too small on desktop", "the blur cuts off instead of fading", "no hamburger menu on mobile". Drag in screenshots if it helps.

  9. 15

    Repeat for each section

    Hero → Bio → Deliverables → Services → Portfolio → Testimonials → Keep up → Footer.

Refinement tips

  1. 16

    Drag screenshots into Claude Code

    Take a screenshot of Figma + your live site. Drag both in. Claude can compare them.

  2. 17

    Tell it what looks GOOD too

    Reinforces the right things so Claude doesn't change them by accident.

  3. 18

    Be specific about the issue

    "The spacing between rows is too small on desktop, mobile is fine" — not just "fix the spacing".

  4. 19

    Mention things Claude can't see in screenshots

    Font names, blend modes, overlay effects, opacity values.

  5. 20

    Build complete first, then refine

    Get the whole page roughly there before perfecting any one section.

  6. 21

    It's okay to deviate from Figma

    If something looks better differently, do it. Just point out the choice was intentional.

Alternative without paid Figma

Three options if you don't want to pay $20/month for Figma Pro: (1) Apply for Figma's free education plan (Flux students are eligible — takes ~7 business days). (2) Use the manual screenshot + asset export workflow below. (3) Pay for one month, build everything, cancel. The output is the same — it's time vs money.

  1. 22

    Install the Bulk Image and Asset Exporter plugin

    Figma → Plugins → search 'Bulk Image and Asset Exporter' → install.

  2. 23

    Run the plugin and export everything

    Open the plugin → Analyze Selection → Export as Zip → download.

  3. 24

    Move all assets to /public

    Unzip and drag images/SVGs into your project's /public folder. Use descriptive names (hero-image, testimonial-1).

  4. 25

    Take a screenshot of each section

    Cmd + Shift + 4 on Mac. Crop tightly to the section.

  5. 26

    Drag screenshot into Claude Code

    Drag the file directly into the Claude Code terminal window.

  6. 27

    Tell Claude what it can't see

    Font names, overlay/blend modes, exact colors, hover states. Say which images from /public to use.

  7. 28

    Example prompt

Troubleshooting

Common errors and what they actually mean.

  • Figma MCP says 'I don't see anything'
    What:
    MCP isn't authenticated or not connected.
    Fix:
    Type /mcp in Claude Code, click Authenticate next to Figma, then test again. If still broken, open another Claude window and ask it to debug.
  • Figma plan won't let me use MCP
    What:
    Figma MCP requires a paid plan ($20/month).
    Fix:
    Either upgrade, apply for the free education plan (~7 days), or use the No paid Figma workflow.
  • Section nailed it on first try, but I want changes
    What:
    You'd told it what was wrong, now it wants context on what's good.
    Fix:
    Tell Claude what looks good first, THEN list specific issues. Stops it changing the right things.
  • Site looks different from Figma but Claude says it matches
    What:
    Claude can't see the live site, only the code.
    Fix:
    Drag a screenshot of your live site AND the Figma design into Claude Code so it can compare them visually.
  • Hero section keeps breaking after each prompt
    What:
    Complex overlapping layouts genuinely take more iteration.
    Fix:
    Build the rest of the page first, come back to fix the hero last.