DESN 368 · P4 week-9 / cut-up tutorial

The P4 Cut-Up

Hand your finished Figma to an AI and turn it into a P4-compliant semantic HTML5 scaffold. The easy way needs zero setup: export your design as an image and paste it into a chat you already have. (Want the AI to read your live Figma file instead? That's the optional MCP track at the end.)

Spring 2026 · Web Design Fundamentals Tutorial · ~45 min self-paced Checkpoint due before Tuesday class

What's in this tutorial

  1. Why this exists (and the deal we're making)
  2. Setup — the easy path (~2 min)
  3. Step 1 — Prime the AI with the brief + your design
  4. Step 2 — The Constraint Cut
  5. Step 3 — The Logic Implementation (table + form)
  6. Step 4 — The Motion Audit
  7. What the AI gets wrong (and how you catch it)
  8. Advanced — wire Figma into opencode (MCP)
  9. Submit the checkpoint
The Deal

Why this tutorial exists

You have two jobs in P4: design it in Figma, then build it in code. Most of the class is stuck between those two jobs — the Figma isn't quite done, and the code feels like a mountain.

This tutorial shows you the shortcut: when your Figma file is actually finished — sections laid out, real text in place, motion notes written — you can hand it to an AI (a screenshot is enough) and it will write a P4-compliant semantic HTML5 scaffold in about 15 minutes.

The AI builds what your design shows. A clean, finished design produces clean code with little back-and-forth; a half-done one produces slop. For exact text and layer names you can later wire Figma directly into the agent — see the advanced MCP track — but a good screenshot gets you most of the way with none of the setup.

The catch AI can't build what your design doesn't show. If your screenshot is a jumble of unlabeled boxes and "Lorem ipsum," the cut-up will be slop — that's all the AI has to go on. The clearer the design, the cleaner the code. Finishing the design IS doing the code.

Today in class you'll watch one finished Figma get cut up live. Once your own Figma is ready, run the four steps below yourself and submit the result as the P4 Cut-Up Checkpoint before Tuesday.

Setup — the easy path, ~2 min

You need a finished design and an AI chat

The whole setup is this: have your finished Figma open so you can export a picture of it, and open an AI chat you already have. No token, no install, no terminal, no config files. You hand the AI a screenshot of your design and it writes the HTML.

1. Pick your AI

Use whichever you already have — both read a design screenshot extremely well:

The web version is all you need — nothing to download. (If you'd rather the AI write the index.html file for you instead of copy-pasting, the Claude or ChatGPT/Codex desktop apps do that — but that's optional.)

2. Export your design as an image

  1. In Figma, click the top frame of your design in the layers panel (the whole page).
  2. Right-click → Copy/Paste as → Copy as PNG (you can paste it straight into the chat), or File → Export → PNG at 2x.
  3. If your landing page is tall, export it in sections (hero / video / features / data / contact) so each part stays readable — you can drag several images into one message.
Design readiness check The AI builds what your picture shows. Before you export, your design should have:
  • The five sections clearly laid out top to bottom (hero / video / features / data / contact).
  • Real text — actual headlines, button labels, nav links, table data — not "Lorem ipsum."
  • Any motion intentions written as visible text labels next to the element (e.g., "button lifts on hover").
Vague picture in = vague HTML out. Finishing the design IS doing the code.
Want the AI to read your live Figma file instead of a screenshot? That's the MCP path — the agent queries Figma directly for exact text and layer names, and writes the files for you. It's more powerful but it is real setup. We've moved it to the end as an advanced track, because the screenshot path above gets you a clean scaffold with zero setup.
01 Prime the AI with the brief + your design

One setup message — loads the rules and your design

Start a fresh chat. In one message you'll do two things: paste the P4 rules below, and attach the screenshot(s) of your design you exported in setup — drag them right into the message box. That gives the AI both the constraints and the picture it's building from.

Paste this as your first message, with your design image(s) attached:

You are helping me cut a Figma design into a P4 landing page for DESN 368. Hold the following P4 rules in context for every reply that follows. == P4 REQUIRED STRUCTURE == Outer: <header id="header"> <img id="header-img" alt="..."> <nav id="nav-bar"> <a class="nav-link">...</a> (minimum 3 nav-link anchors) </nav> </header> <main> ... </main> <footer> ... </footer> Inside <main>, exactly five sections in this order: <section id="hero"> -- value proposition + primary CTA <section id="video"> -- embedded video <section id="features"> -- repeating <article> cards <section id="data"> -- contains <table id="data-table"> <section id="contact"> -- contact form == TAG RULES == - Use <article> for repeating self-contained items (feature cards). - Use <section> for thematic groupings with a heading. - Every <img> needs descriptive alt text (5-10 words). Never alt="". - Every form <input> has a paired <label for=id>. No placeholder-as-label. - Email input: type="email" required. - Submit button: id="submit". - Data table: id="data-table" with <thead> and <tbody>. - The data table must scroll horizontally on mobile (wrap in a div with overflow-x: auto). == MOTION == Wrap @keyframes animations in @media (prefers-reduced-motion: no-preference). == MY DESIGN == I've attached screenshot(s) of my finished design. Read the layout, the sections, and the real text directly from the image(s). Do not invent content that isn't shown in the design. == CONFIRMATION == Do not write any HTML yet. First, reply with: 1. The 5 section IDs you'll put inside <main>, in order, mapped to the sections you can see in my design, top to bottom. 2. The required IDs/classes you'll bake into the scaffold (list them). 3. Which parts of my design you'll map to <article> tags (the repeating feature cards). 4. Anything in my design that does NOT fit the P4 required structure (so I know what to cut or rework on the design side). 5. Any motion notes or text labels in the design that describe animation or hover behavior.
The AI reads the picture, not your mind. It's working only from the screenshot(s) you attached — so the more your design shows (real text, clear sections, labels), the better the read. If the reply describes sections that aren't in your design, your image was probably cut off or low-res — re-export and try again.
Read the AI's reply line by line. Verify it matches what's actually in your design — all five section IDs in the right order, every required ID/class above, and an article mapping that matches your real feature cards. If anything is missing or wrong, say so before moving on — for example: "You missed id='header-img'. Add it." or "I don't actually have a video section. Tell me what I'm missing instead."
Why this priming step matters: Without it, every later prompt has to re-state the P4 rules and re-attach your design — tedious and easy to forget one. With it, you can write short prompts like "scaffold the HTML" or "build the form," and the AI already knows the rules and has your design in the conversation. You only prime once per chat.
02 The Constraint Cut

Generate the scaffold

Now that the AI has the P4 rules in context and your design in the conversation, asking for the scaffold is one short prompt. Here's the checklist you'll verify the output against — you don't need to paste it into the prompt:

WhereRequired selectorNotes
Outer header<header id="header">Fixed position
Logo imageid="header-img"Inside the header
Nav element<nav id="nav-bar">Inside the header
Each nav linkclass="nav-link"Minimum 3 links
Each feature card<article>…</article>Inside #features
Data table<table id="data-table">With <thead> + <tbody>
Form submit buttonid="submit"Inside the contact form

Now ask opencode to scaffold:

Using the rules and the map you confirmed, write the full HTML for index.html. Start with DOCTYPE, lang="en", viewport meta, <title>, and a link to css/styles.css. Pull real text from my design (the screenshots) for headlines, button labels, and nav link labels — don't invent placeholder text if the real content is shown. Write descriptive alt text on every image based on what each image actually shows in the design. HTML only. No CSS yet. Give me the complete file.
Save the output as index.html. In a chat (Claude/ChatGPT web), the AI returns the full HTML in a code block — click copy, paste it into a new plain-text file, and save it as index.html (a folder called p4-landing-page on your Desktop is a fine home for it). If you're using a desktop coding agent with file tools, it can write the file for you — just approve the change. Then open index.html in your browser and verify the seven items in the table above. Cmd/Ctrl + F for each ID.
What the AI gets wrong here:
  • Wraps everything in <div>s instead of <section> / <article>.
  • Forgets alt attributes, or writes lazy alt like alt="image".
  • Uses class="header" instead of id="header".
  • Skips the <footer> entirely.
Fix these now. Don't move to Step 3 until the scaffold is clean. One follow-up prompt — "You used divs instead of section tags inside main. Rewrite using the required semantic structure." — usually does it.
03 The Logic Implementation

Build the table and the form

The data table and the contact form are the two pieces graders look at hardest, because they have the strictest structural requirements. Do them in their own prompt so the agent doesn't shortcut.

The Data Table

Inside <section id="data">, replace any placeholder with a real <table> using the columns and rows shown in my design's data section (read them from the screenshot). Use <th scope="col"> for the header row. Wrap the table in <div class="table-scroll" style="overflow-x: auto;"> so it scrolls on mobile. (Apply the rest of the P4 table rules you already have.) Give me the updated index.html. Don't change anything else.
Why horizontal scroll? Your table has 4-6 columns of product specs. On a phone, stacking each row into a card is a real design choice — but it requires custom CSS per column. Horizontal scroll is the responsible default: it preserves the tabular reading and it works the moment you ship. The modal version stays optional. If you want it, do it after the checkpoint.

The Contact Form

Inside <section id="contact">, build the contact form using the P4 form rules you already have (paired label/input, type="email" required, id="submit", no placeholder-as-label). Match the fields shown in my design's contact section — use the actual field labels from the screenshot. Use action="#" for now (no backend). Give me the updated index.html.
What the AI gets wrong here:
  • Uses placeholder="Email" as a label substitute. Placeholders are not labels — screen readers don't read them as labels and they disappear when the user types.
  • Forgets the for/id pairing between <label> and <input>.
  • Misses type="email" — you lose the free browser validation.
04 The Motion Audit

Translate Figma motion notes into CSS

If you wrote motion notes on your design during the design phase ("button lifts on hover," "hero text fades in"), they're in the screenshots you gave the AI. The brief asks for one @keyframes animation and one transform property. Pick the two most important.

Look at the motion notes/labels in my design (in the screenshots I gave you). Implement two of them: 1. ONE @keyframes animation matching one note, applied to the relevant element by class. 2. ONE transform on :hover (or :focus) matching another note, applied to the relevant element by class. Create css/styles.css and link it from index.html if the link isn't there already. Use class names that already exist in my HTML — don't invent new ones. Respect prefers-reduced-motion (per the rule you already have). Give me both files.
No motion notes in your Figma? The agent will tell you. Add one or two simple ones to your Figma (a sticky-note next to the button saying "hover: lift 4px" is enough) and re-run the prompt. Or, just describe the two animations in the prompt itself: "animate the hero heading with a 600ms fade-in on load, and lift the primary CTA 2px on hover."
Read your output

What the AI gets wrong (the short list)

Opencode is fast, but it's also confident when it's wrong. The whole point of being a designer-coder is that you read the output. Here's the short list of failures that show up most often. Spot them, fix them, and submit only after.

FailureHow to spot itFix
Divs instead of semantic tags Cmd-F for <section — should hit 5+ times Re-prompt with the exact required tags
Missing or lazy alt text Cmd-F for alt="" or alt="image" Rewrite alt to describe what's in the image, in 5-10 words
Placeholder used as label No <label for="..."> in form HTML Add a real label per input, pair with for/id
Wrong ID on submit button Cmd-F for id="submit" One re-prompt: "Submit must have id='submit'"
Class used where ID was required Cmd-F for id="header", id="nav-bar" Re-prompt with required ID list
Section order doesn't match your Figma Compare scaffold to the top-to-bottom flow of your design "Reorder the sections in main to match the Figma top-to-bottom."
Invented content not in your design Headlines, labels, or sections that aren't in your screenshot "Only use text and sections visible in the design I gave you. Redo the mapping from the image."
The submission asks you to name ONE thing the AI got wrong. Pick the one that mattered most for your project and write 2-3 sentences in your prompt log about what it was, how you noticed, and what you changed. Generic answers ("it forgot some tags") don't count; specific ones ("it skipped id='header-img' on the logo image, I caught it by Cmd-F'ing for header-img, and I re-prompted with the exact requirement") do.
Advanced — optional, expect to tinker

Wire Figma directly into opencode (MCP)

The screenshot path above is the easy 90% and it's all you need for the checkpoint. The Model Context Protocol (MCP) is the power-user upgrade: instead of pasting a picture, you connect the agent to Figma so it reads your live file — exact text, real layer names, table data — and writes the files for you.

Be honest with yourself: this is the advanced track, and it will probably not be straightforward. MCP tooling changes fast, every machine is a little different, and the error messages are cryptic. Budget time to troubleshoot. The good news: the AI is your debugging partner here — paste the exact error back into ChatGPT/Claude, or ask opencode itself ("opencode won't connect to my Figma MCP, here's my opencode.json and the error — what's wrong?"). Expect a few rounds of back-and-forth before it connects. If you just need the checkpoint done, use the screenshot path and skip this.
Reality check before you start. Figma's official remote MCP (mcp.figma.com) uses OAuth and does not accept a figd_ personal-access token — and it currently refuses opencode (you'll get a 403, because Figma only allows a short list of clients while it's in beta). So for opencode specifically, use one of the two working options below. If you'd rather use Figma's smooth official OAuth server, it works today in Claude Code, Cursor, or VS Code — e.g. claude mcp add --transport http figma https://mcp.figma.com/mcp, then /mcp → Authenticate.

First: there's no "paste your key" button in opencode

opencode doesn't have a Settings panel where you paste a Figma key. MCP servers live in a config file called opencode.json in your project folder. Both options below are "create that one file, then restart opencode." If you don't have a project folder yet, make one (a p4-landing-page folder on your Desktop is fine).

Option A — Figma desktop app, no token (the cleaner one)

  1. Install the Figma desktop app and open your file.
  2. Turn on the local server: Figma menu → Preferences → Enable Dev Mode MCP Server. Figma shows you a local URL (usually http://127.0.0.1:3845/mcp).
  3. In your project folder, create a file named opencode.json containing: 
    {
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "figma": {
      "type": "remote",
      "url": "http://127.0.0.1:3845/mcp",
      "enabled": true
    }
  }
}
  4. Restart opencode. In the terminal, opencode mcp list should show figma connected.
  5. Select the frame you want in the Figma desktop app, then prompt opencode — it reads the selected frame. No token, no URL.
Trade-offs: needs the Figma desktop app running, reads the frame you currently have selected (not a whole file by URL), and Dev Mode may require a Dev/Full seat on some plans (student Education plans usually qualify).

Option B — community server + your figd_ token (reads by URL)

This is the path the priming prompt's get_figma_data tool is written for. It reads any file by URL, but it needs Node.js installed (the server runs via npx) plus a Figma token.

  1. Get a token: figma.com/settings → Security → Personal access tokens → generate one (it starts with figd_ and needs File content read). Copy it — treat it like a password.
  2. In your project folder, create opencode.json containing: 
    {
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "figma": {
      "type": "local",
      "command": ["npx", "-y", "figma-developer-mcp", "--stdio"],
      "enabled": true,
      "environment": {
        "FIGMA_API_KEY": "figd_PASTE_YOUR_TOKEN_HERE"
      }
    }
  }
}
  3. Restart opencode and run opencode mcp list to confirm it connected. The get_figma_data tool is now available.
  4. In your prompt, give it your file URL (figma.com/design/<FILE_KEY>/...) and ask it to read the design via get_figma_data, then do the mapping.
Don't commit your token. Your figd_ token sits in opencode.json in plain text. If you ever put this folder in a public Git repo, the token leaks — regenerate it immediately if that happens. Keep the folder private, or use Option A (no token) instead.

Once MCP is connected either way, the Step 1–4 prompts work the same — the agent just pulls from your live Figma instead of a screenshot, and (in opencode) writes index.html and css/styles.css directly with its file tools. And again: when it doesn't connect on the first try, that's expected — feed the error to an LLM and iterate.

Submit the P4 Cut-Up Checkpoint

Upload to the Canvas assignment "P4 Cut-Up — First-Pass HTML + Prompt Log" before Tuesday's class.

  1. Your index.html — the generated scaffold. CSS is not graded yet. Submit the file or a link to your repo.
  2. A prompt log (one short markdown or text file, ~150-300 words) containing:
    • The 4-5 prompts you actually ran — including your priming message (copy-paste them in).
    • One specific thing the AI got wrong and how you fixed it (2-3 sentences).
    • One sentence on what step in your Figma was missing or weak that made the cut-up harder than it should have been — or "my Figma was tight, the cut-up was clean," if that's true.

What I'm grading: structural correctness (the required IDs, classes, semantic tags all present) and evidence that you read the AI's output critically. This is a checkpoint — the full styled landing page is still due via the existing P4 Code submission.