gilde

← All craftbooks

Landing Page

Build: interactive and webevalv1.0.0released 2026-06-05workflow: build-loop

Build a single high-conversion landing page for one offer — a product, signup, waitlist, or download — with a focused hero, benefits, social proof, and one primary call to action above and below the fold. Locks the offer, audience, and single CTA first, then a conversion-oriented visual design, then the persuasive copy, then builds responsive HTML with real CSS. The scope-then-design-then-copy ordering keeps the page ruthlessly focused on one conversion goal instead of becoming a sprawling site.

Steps

Entry step: offer-scope. Each step names the specialist role it wants; the full working prompt is expandable.

  1. Offer scopeplannerentry

    lock the offer, audience, and single primary CTA

    Show working prompt
    Lock the conversion fundamentals. (1) State the ONE offer in a sentence and the single primary CTA (e.g. 'Join the waitlist', 'Start free trial') — exactly one, repeated, no competing actions. (2) Name the target audience and the core pain the offer solves. (3) List the page sections in order: hero with CTA, 3 benefits, social proof, FAQ or objection-handling, final CTA. (4) Decide the success signal (what a converted visitor does). (5) Write an acceptance-criteria checklist of 5-8 items, e.g. 'the primary CTA appears above the fold and again at the bottom', 'exactly one CTA action exists', 'three benefits are present', 'a social-proof element is present', 'responsive at 375px and 1280px'. Write to notes/offer-scope.md and via write_task_note. No design or copy yet.
  2. Visual designvisual-designer

    conversion-focused layout + visual hierarchy

    Show working prompt
    Design for conversion. (1) Pick a palette (hex) with a high-contrast accent reserved for the CTA so it pops. (2) Choose type and a strong visual hierarchy that drives the eye to the CTA. (3) Lay out each scoped section as a wireframe, keeping the hero uncluttered. (4) Specify the CTA button style (size, color, hover) and where it repeats. (5) Note any directional cues or whitespace that focus attention. Bake into the criteria 'CTA uses the accent color and is the most prominent element'. Write the visual spec to notes/visual-design.md and via write_task_note. No HTML yet.
  3. Copywritingcopywriter

    benefit-led persuasive copy + CTA label

    Show working prompt
    Write conversion copy. (1) A benefit-led hero headline (outcome, not feature) and a one-line subhead. (2) Three benefit blocks, each a verb-led heading plus one supporting sentence. (3) A social-proof line. (4) Two or three objection-handling FAQ pairs. (5) The exact CTA label (action verb) used everywhere. Keep it scannable and specific — no vague hype. Write the copy block keyed by section to notes/copy.md and via write_task_note.
  4. Builddeveloper

    implement index.html to the locked design + copy

    Show working prompt
    Implement index.html with inline CSS to the visual spec and approved copy. (1) Palette as CSS variables; the CTA uses the accent color and is the most prominent element. (2) Build the scoped sections in order with the approved copy. (3) Place the primary CTA above the fold in the hero and repeat it at the bottom — same single action. (4) Responsive at 375px and 1280px. (5) Vanilla HTML/CSS, no CDN frameworks, no external assets. On a loop-back, fix only the named gaps without regressing passing criteria. write_task_note the path and passing criteria.
  5. Evaluatereviewer

    Grade the deliverable against every acceptance criterion. All pass → finish; any fail → loop back and fix the gap.

    Show working prompt
    Evaluate the page for conversion focus. Open/render index.html and resize to 375px and 1280px. Check EACH criterion from notes/offer-scope.md and the visual criteria, writing PASS/FAIL with a reason: is there exactly one CTA action, does it appear above the fold and at the bottom, is it the most prominent (accent) element, are there three benefits and social proof, is the approved copy used, is it responsive? A page with multiple competing CTAs or a buried CTA 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.
  6. 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.

Source

View this craftbook on GitHub · MIT license