✱ A design playbook

Craft landing pages
worth
shipping.

A simple three-step loop for turning a rough idea into a polished, reviewed landing page, with Claude doing the heavy lifting at every stage.

The three-step loop

Define your site or product first.

Great pages start with a clear brief, not a blank canvas. Ask Claude to draft a plan file for your idea and then interview you in detail, technical implementation, UI and UX, audience, concerns, and tradeoffs, using structured questions so nothing important is guessed.

Prompt
Create me a plan file for [your product idea] and interview me in detail using the AskUserQuestion tool about literally anything relevant: technical implementation, UI and UX, the audience, concerns, and tradeoffs. Capture my answers in PLAN.md as the single source of truth for the build.
?

It asks before it assumes. Structured, multiple-choice questions surface the decisions you actually care about.

One source of truth. Every answer lands in PLAN.md, so steps two and three stay anchored to your intent.

Tradeoffs in the open. Scope, tone, tech, and timeline get named up front instead of discovered late.

Generate the page from your plan.

Now hand Claude the plan and a visual reference. Pick a template you love from a motion gallery, then ask Claude to build your page in that language, copying the reference's prompt style for layout, motion, and tone.

Prompt
Using PLAN.md, build a landing page. Use a template from motionsites.ai or sceneai.art as the visual reference, and copy its prompt style for layout, motion, and typography. Match the plan's tone and audience, and keep it responsive and accessible.

Borrow a proven look. Motion-template galleries give you a strong starting aesthetic and a prompt style to echo.

Motion with meaning. Reveal-on-scroll, easing, and rhythm come from the reference, not from scratch.

Plan-driven, not generic. The copy, sections, and CTA all trace back to the brief you defined in step one.

Run a ten-dimension design review.

A first draft is never the final draft. Run the crit design-review skill to critique your page across ten dimensions of craft, with findings ranked from blocking to polish and a concrete fix attached to each.

Prompt
Run a design review on this landing page using the crit.officialjp.com skill. Check all ten dimensions, rank every finding from blocking to polish, and give a specific fix for each. Then apply the clear, safe fixes.
01Visual hierarchy & layout
02Typography
03Spacing & rhythm
04Color & contrast
05Motion
06Component states
07Accessibility
08Responsiveness
09Content & copy
10Consistency & brand

Three steps. One beautiful page.

Define it, generate it, review it. Open Claude, paste step one, and let the loop carry you to a page worth shipping.

Start with step one →