Once your P4 Figma is finished, use an AI coding agent (opencode, Claude Code, or Codex CLI) wired up to the Figma MCP to cut it into a semantic HTML5 scaffold and submit the result. This is a checkpoint — the full styled landing page is still due via the existing P4 Code submission.

The deal

You designed it in Figma. The code shouldn't feel like a mountain — it should feel like a translation. An AI coding agent wired up to the Figma MCP reads your file directly through the API and writes the semantic HTML5 scaffold for you, with the required P4 IDs and classes baked in. Use whichever agent you have access to: opencode (free, open source), Claude Code (if you pay for Claude), or Codex CLI (if you pay for ChatGPT) — all three speak MCP.

The catch: AI can't read what isn't there. If your Figma layers are named Frame 47 or Rectangle 12, the cut-up will be slop. Finishing your Figma IS doing your code.

Tutorial — The P4 Cut-Up Workflow

A four-step workflow with the exact prompts to paste, the required IDs/classes from the brief, and a "what the AI gets wrong" checklist. ~45 minutes self-paced.

https://code-and-design.org/tutorials/p4-cutup-figma/

Your Figma should have:

• Layer names that mean something (Hero, Feature Card, Nav Link) — not Frame 47.
• Frames grouped by section (hero, video, features, data, contact).
• Motion annotations written as text labels next to elements (e.g., "button lifts on hover").
• Your AI agent installed and the Figma MCP wired up with a personal access token (see the tutorial's Setup section).

What to submit

Submit two things to this assignment:

1. Your index.html — the generated semantic scaffold from the cut-up workflow. CSS is not graded yet (that's the P4 Code submission). Upload the file or paste a link to your repo / Netlify / GitHub Pages.
2. A prompt log (one short markdown or text file, ~150-300 words) containing:
   • The 4-5 prompts you actually ran in your AI agent — including the priming message (copy-paste them).
   • One specific thing the AI got wrong and how you fixed it (2-3 sentences). "It forgot some tags" doesn't count; "it used divs for my three feature cards instead of <article>, I caught it with Cmd-F, and I re-prompted with the exact P4 rule" does.
   • 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 (60%) — The required semantic tags, IDs, and classes from the P4 brief are all present and correctly used:

• <header id="header"> with id="header-img" and <nav id="nav-bar">
• Minimum 3 nav links, each with class="nav-link"
• <main> with five sections: #hero, #video, #features, #data, #contact
• <article> tags for each feature card inside #features
• Data table with id="data-table", using <thead> + <tbody>
• Contact form with paired <label>/<input>, type="email", and id="submit"
• Descriptive alt text on every image

AI literacy reflection (40%) — The prompt log shows you read the AI's output critically. The "what it got wrong" entry is specific (names the element, the failure, the catch, and the fix), not generic.

Tutorial: https://code-and-design.org/tutorials/p4-cutup-figma/· Week 9 page: code-and-design.org/1/weeks/week-9