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 hex), type pairing, spacing/scale, and the hero treatment. Produce a concrete mock — an ASCII/markdown wireframe of each section (hero, value props, CTA, footer) is fine, or generate a hero image if image tools are available. Write an **acceptance-criteria checklist** that includes the brand rules ("headings use <font>", "palette is exactly <hex list>", "hero matches the mock"). `write_task_note` the visual language + mock + checklist. No HTML yet. - Copywritingcopywriter
headlines + section copy to the brand voice
Show working prompt
Write the words. Headline, subhead, 3 value-prop blurbs, CTA label, footer. Match the brand voice implied by the visual language. Keep it tight — marketing copy, not paragraphs. `write_task_note` the copy block, keyed by section, so the build phase drops it straight in.
- Builddeveloper
implement index.html to the locked design + copy
Show working prompt
Implement `index.html` (inline CSS) to the locked visual language and the approved copy — do not redesign in code. Honor the exact palette, type, and section order from the mock. Responsive, no external assets unless already generated. On a loop-back, fix only the named gaps. `write_task_note` the 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
Check the built site against the brand acceptance criteria specifically: does the palette match the locked hex list, the type match, the section order match the mock, the copy match what was approved? Render it 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. If you advance without a target, the loop sends you back by design. 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