Branding Website
Build a small brand/marketing website where the visual identity leads. Locks a visual language and mockups FIRST, then writes the copy, then builds the HTML to the locked design — the ordering that makes brand sites feel designed rather than templated.
Steps
Entry step: brand-design. Each step names the specialist role it wants; the full working prompt is expandable.
- Brand & visual designvisual-designerentry
visual language + mock, BEFORE any HTML
Show working prompt
Lock the visual language before a line of HTML exists. Decide: palette (with exact hex values), type pairing using system-safe fonts, spacing/scale, hero treatment, and responsive section order. Produce an ASCII/markdown wireframe of each section (hero, value props, proof or fit, CTA, footer). Write an **acceptance-criteria checklist** that includes the brand rules ("headings use <font>", "palette is exactly <hex list>", "hero matches the mock"). Save the full system, wireframe, and checklist to artifact `design/brand-system.md` with `write_artifact`; note the path in task notes. No HTML yet. - Copywritingcopywriter
headlines + section copy to the brand voice
Show working prompt
Read artifact `design/brand-system.md` with `read_artifact`. Write the approved words: headline, subhead, three value-prop blurbs, proof or fit copy, CTA label, and footer. Match the named brand voice and keep it tight — marketing copy, not paragraphs. Save the complete section-keyed copy to artifact `copy/site-copy.md` with `write_artifact`; note the path in task notes so the build phase can drop it straight in.
- Builddeveloper
implement index.html to the locked design + copy
Show working prompt
Read artifacts `design/brand-system.md` and `copy/site-copy.md` with `read_artifact`. Implement workspace `index.html` with `write_file` (inline CSS) to the locked visual language and approved copy — do not redesign in code. Honor the exact palette, type, and section order from the mock; include viewport metadata, semantic sections, a working primary CTA, and a footer. Make it responsive and self-contained with no external assets. On a loop-back, fix only the named gaps. `write_task_note` the workspace path and which criteria now pass.
- Evaluatereviewer
Grade the deliverable against every acceptance criterion. All pass → finish; any fail → loop back and fix the gap.
Show working prompt
Read workspace `index.html` with `read_file` and compare it with artifacts `design/brand-system.md` and `copy/site-copy.md` via `read_artifact`. Check the brand acceptance criteria specifically: does the palette match the locked hex list, the type match, the responsive section order match the mock, and the copy match what was approved? Render desktop and narrow layouts if you can. A site that works but ignores the locked visual language FAILS — loop back to build. Then route — this is the whole point of the loop: - **Every criterion PASSES →** call `advance_task_step({ ref, stepId: "evaluate", next: "finish" })`. - **Any criterion FAILS →** write the specific gaps to notes, then call `advance_task_step({ ref, stepId: "evaluate", next: "build" })` to loop back. The builder fixes exactly those gaps. Never route to `finish` while any criterion is unmet. The build phase's completion gate already blocked a grossly-incomplete deliverable; your job is the judgment an automated check cannot make (does it actually work, read well, look right). After ~3 unproductive loops, stop and report DONE_WITH_CONCERNS so the user can step in. - Finishdeveloper
All acceptance criteria met. Stamp a short summary and report DONE.
Show working prompt
Every acceptance criterion passed. Write a one-paragraph DONE summary to task notes via `write_task_note`: what was built, the deliverable path(s), and a one-line confirmation that each criterion is met. Then report DONE.
Triggers
Phrases that suggest this craftbook to a crew.
- branding website
- landing page
- marketing site
- brand site
Source
View this craftbook on GitHub · MIT license