DSN 325 · UI Design & Design Systems · Week 5 of 7

Direct the Build

Your kit and wireframes become context. An AI tool becomes your builder. You stay the designer.

This is the week the hand work pays off. You'll feed your component kit and wireframes to an AI tool and direct it to a working prototype. The tool builds fast. You decide what's good. Students who prompt from nothing get generic slop. You have a spec.

This week at a glance

Wed 11:59 pmDiscussion: One-Shot or Piecework? — initial post
Fri 11:59 pmStudio: Orchestrated Prototype + Orchestration Log
Fri 11:59 pmField Work: Break It With Dev Tools — post your findings
Sun 11:59 pmReplies: discussion (2 classmates) and Field Work (1 classmate)

1The vocabulary

Context

Everything you give the tool before it builds: your kit, your wireframes, your tokens, your product's real words. Rich context makes the output yours. Thin context makes it anybody's.

Do — kit + wireframes + tokens in, your product out
Don't — "make me an app" in, anybody's app out
One-shot

Asking for the whole thing in one prompt. Fast and great for making an idea visible. The details will be wrong — that's the deal you're making, and sometimes it's the right deal.

Piecework

Building one screen or one component at a time, checking each against your kit before moving on. Slower, tighter control. The right move when details matter more than speed.

Do — build, check, build, check
Don't — one giant build, flaws buried everywhere
Orchestration log

Your record of the build: what you asked, what came back, what you kept, what you rejected and why. The log is where your judgment becomes visible — and gradable.

2Which move, when

The working rule

One-shot when you're thinking. New idea, rough concept, need to see it to judge it — ask for the whole thing, expect flaws, mine it for direction.

Piecework when you're shipping. The screens that carry your product — build them one at a time, check each against your kit and tokens, fix before moving on.

Most real sessions mix both: one-shot to explore, then rebuild the keepers as piecework. Your log should show the switch and why you made it.

The trap this week: burning your credits on vague prompts. Figma Make's education plan gives 3,000 credits a month and they don't roll over or top up. A vague prompt costs the same as a sharp one and returns garbage. Write the prompt like a brief: who it's for, what it does, which components to use, what the states are. Running out of credits mid-week is an orchestration lesson — but it's cheaper to learn it from this paragraph.

3How to do this week's work

  1. Pick your tool — and look ahead. Use your own Field Work test drive and your classmates' reports. One thing to know now: next week this build becomes a working flow in an AI coding tool. Build in Lovable, Bolt, or Claude and Week 6 continues the same project. Build in Figma Make or Stitch and you'll rebuild next week — fine, but plan for it and keep your context pack ready to re-feed.
  2. Build your context pack. Most tools can't read your Figma file, so translate the kit into what they can read: your tokens as a plain list (name → value), a one-page text spec of each component with its variants and states, screenshots, and your real content. Then add the strategy layer: your Week 1 proposal and your flow map — who it's for, the constraint, the steps, where the edge states live. The kit makes the output look like yours; the strategy makes it behave like yours. This pack — not your Figma link — is what makes the output yours.
  3. One-shot something you can afford. One screen, or the flow at low fidelity — enough to feel the mode's tradeoff without spending a third of your credits on step one. Run it by Tuesday night: Wednesday's discussion asks what it got right and wrong. Judge it, log it.
  4. Rebuild as piecework. Take your most important screens one at a time. Check each against your kit: right tokens, right states, right spacing. Fix or re-prompt before moving on.
  5. Connect the flow. A user should be able to click through your core task start to finish.
  6. Finish the log, submit, then do Field Work. Open a real website in your browser's developer tools, change a color and a spacing value, run a free accessibility checker on the same page. That's next week's QA muscles, warming up.
Full credit note: your grade rides on the prototype and the quality of your judgment in the log — not on how much AI you used. A tight build with a log full of smart rejections beats a sprawling build accepted uncritically.

4Resources

Everything here is free. Start with the starred items.

5Before you submit