You sent us to school after a client called the site we built for her flat. We watched all sixteen assignments, audited them for craft against filler, split what survived between your designer and your developer, and built this page with what we learned — every technique it teaches, it performs.
The diagnosis
The Hose Water after-state was built as a one-shot illustration: composed once, rendered once, shipped. Every serious video in this corpus treats that first render as raw material — then spends its craft on iteration, motion, and the details a still image can't carry. That second half is what we went to school for.
The curriculum
Stripped of the affiliate links and the $10K claims, the corpus repeats eight moves, in roughly this order. The numbering is the order of a real build.
A design-rules file the agent reads every session — palette, faces, bans, the loop itself — plus the frontend-design skill invoked before any interface work, no exceptions. Our doctrine already is this file; now each web project gets its own.
Real inspiration — screenshots, the reference's actual CSS, curated libraries — handed to the agent with one standing rule: read the style, never copy the site. Separate the structure reference from the design skin.
Make the agent ask its questions before it builds. Have it offer three style directions. Generate three versions of the highest-stakes section and choose. Save what works before exploring past it.
Build, look, refine: the agent screenshots its own work and grades it against the brief, two passes minimum. One caveat the whole corpus missed except once — turn the loop off for animated elements, or it over-engineers chasing what a still can't show.
Scroll-driven storytelling, one restrained interaction per flat section, "make it more subtle" as the default second prompt. Motion follows the accent rule: it carries the brand's story or it's noise.
this card is the demo — one hover, restrained, and the thread in the gutter is scroll-drivenThe fonts everyone reaches for (Inter), purple gradients, em-dash tics, uniform template rhythm, placeholder faces. An audit pass on every render, because the tells are what "AI-generated" actually looks like.
A dedicated pass: what hides, what tightens, what resizes. Responsive is the floor, not the deliverable.
Deploy pipelines the agent drives end to end — with the discipline that changes land locally for review and go live only on an explicit word. Our review surface already works exactly this way.
The audit
Both of us watched all sixteen. Verdicts agreed almost everywhere; where a video taught real technique wrapped in a funnel, it earns "partly" and we say which half to keep. Full write-ups: CAIRO_WebCraft_Audit.md · CRAIG_WebCraft_Audit.md in the training folder.
| # | Video | Verdict | The sentence |
|---|---|---|---|
| 01 | The EASY way (Create a Pro Website) | Partly | Sound beginner spine; the last third is a hosting ad. |
| 02 | $10K Websites in Minutes (Metics) | Partly | The scroll-narrative hero is real; the $10K is never evidenced. |
| 03 | Don't Look AI-Generated (Nic Conley) | Useful | Lean: rules file, reference + its CSS, self-audit pass. |
| 04 | $10,000 Ultimate Guide (Metics) | Useful | The eight-point checklist and "more expensive, not busier." |
| 05 | 3 Ways ACTUALLY (Phylux) | Fluff | Template-shop forward; one habit worth keeping. |
| 06 | Claude Design 3D (Nate Herk) | Useful | The deepest Claude Design ops guide, honest about cost. |
| 07 | Too Easy (Nate Herk) | Useful | The screenshot loop, plus its animated-content caveat. |
| 08 | 10X More Beautiful (Mikey) | Partly | Good sequencing doctrine inside a $499 funnel. |
| 09 | Complete Guide (UI Collective) | Useful | Skills as standardization; closest to how our fleet already works. |
| 10 | Easy for Beginners (Kyle Skelly) | Partly | An honest 80/20: the last 20 percent is taste, and it's the product. |
| 11 | FULL COURSE (Tommy Chryst) | Useful | Most complete pipeline; brand scrape and the exploded-view chain. |
| 12 | Higgsfield ANIMATED (Productive Dude) | Partly | Two keepers: negative space for type, ping-pong loops. |
| 13 | INSANE in 10 Minutes (Jono Catliff) | Partly | Structure/skin separation and GSAP, then agency filler. |
| 14 | AMAZING Full Guide (AI Foundations) | Useful | End-to-end and real; every infra choice steered by its sponsor. |
| 15 | Insane Skills (AI LABS) | Useful | A map of the community design-skill ecosystem, worth mining. |
| 16 | 5 Hacks Short (Nate Herk) | Fluff | A rerun of #07 in sixty seconds. |
7 useful · 7 partly · 2 fluff · the affiliate economy funds most of the corpus — it never made the technique false, but it chose which tools got recommended.
Already ours
The frontend-design skill as a hard prerequisite · reference-first direction (brand-direction, the Pinterest harvest) · the screenshot QA loop (our headless render pass) · per-project design rules (the doctrine, the enforcement card) · restraint, hierarchy, one signature (the thirteen-principles pass) · receipts against big claims. Validation matters: the fleet's process holds up against what the field teaches. What we lacked sits in the division below.
The division
Design · the look, the story, the taste
Build · the loop, the pipeline, the proof
Divide and conquer
The division above is remits; this is the pipeline — who holds the pen at each step of a real engagement, with Elizabeth's gate where killing is cheap.
The live worked example: Hose Water mock v2 — released by Elizabeth 5 September, built this weekend on exactly this pipeline: CD_SPEC_Mock_v2 by Cairo, the build, loop, mobile pass, and page-weight receipt by Craig. Zero raster images against an audit finding of 1.7–3.0MB of hero PNG. Open the mock → Honest postscript: the pipeline held; the design direction was rejected — because step zero, agreed success criteria, was missing. That failure wrote the fleet's client-review protocol, and the criteria session is Monday's agenda.
Craig's build syllabus, ranked by how often the corpus repeats it (his full audit carries the receipts):
Built into the fleet
skills/cairo/references/web-craft.md — the design half, as doctrine · Craig's build additions — folded into the hi-web-build references per his audit · this page — the worked example, on the review surface with the standard mechanics · the full transcripts and both audits — durable in hi!/3. Agents/web-craft-training/ for any future agent's training run.
Tooling
Fully free since the Webflow acquisition, commercial use included. Powers this page.
Agent-ready component prompts; browse free, translate through our tokens.
Community skills (critique, layout, animation vocabularies) on GitHub — Craig and I evaluate before any installs.
Image generation we already pay for — first stop before any new gen-AI subscription.
Free hosting, deploys, database, and the approval store — the thing four of these videos sold hosting against.
Our verified screenshot loop. Chrome DevTools MCP adds console/network eyes — adopt only if Craig hits its gap.
Curated real-product design research. Free tier first; Pro only when client direction work demands the full library.
Brand-scrape intake. The free 1,000 credits/month likely covers our engagement volume for a while.
Image-to-video chains (the exploded-view move). Only if Firefly can't carry the motion-asset load.
The invoice
| Item | Price | Source |
|---|---|---|
| Everything in "adopt now" | $0 | GSAP standard license · Webflow announcement |
| Firecrawl free tier | $0 · 1,000 credits/mo | firecrawl.dev/pricing, checked 2026-09-05 |
| Firecrawl Hobby, if volume demands | $16/mo | same page, billed yearly |
| Mobbin Pro, if adopted | ~$40/seat/mo | secondary sources (Vendr); their pricing page blocks robots — verify at signup |
| Higgsfield, if Firefly can't carry it | ~$9–49/mo by tier | secondary sources vary (Blotato et al.) — verify at signup |
Recommended spend to adopt everything we actually need today: $0.
Your call