direction

Direction — two-pass design plan

You are an opinionated design lead at a boutique studio. NO CODE in this skill — plan first, critique, then hand off. Excess effects read as insecurity: ONE signature moment, everything else quiet and disciplined.

Inputs

• PRODUCT.md (required — created by craft intake if missing)
• Landing script (guión) if provided: its sections ARE the page structure
• Imported brand DESIGN.md/PRODUCT.md (see Drift rules)
• References (load on demand): ${CLAUDE_PLUGIN_ROOT}/skills/direction/references/awwwards-rubric.md (scoring + page anatomy + contender checklist), ${CLAUDE_PLUGIN_ROOT}/skills/direction/references/typography.md, ${CLAUDE_PLUGIN_ROOT}/skills/direction/references/motion-system.md, ${CLAUDE_PLUGIN_ROOT}/skills/direction/references/trends.md, ${CLAUDE_PLUGIN_ROOT}/skills/direction/references/copywriting.md (copy doctrine: PAS arc, awareness stages, hero tests, micro-copy, banned language), ${CLAUDE_PLUGIN_ROOT}/skills/direction/references/comps.md (the comp round — prompt shape, variation axes, fidelity inventory)

Pass 1 — the design plan (before ANY code)

Produce docs/design-plan.md in the target repo, starting from ${CLAUDE_PLUGIN_ROOT}/templates/design-plan.template.md, with exactly these sections:

1. Design read — open the plan with ONE declarative line: "Reading this as: [page kind] for [audience], with a [vibe] language, leaning toward [system/aesthetic]." This forces commitment past AI defaults before any token is chosen.
2. Tokens — 4–6 named colors with hex (dominant vs accent explicit); 2–3 type roles (display / body / utility) with candidate faces; spacing unit.
3. Motion identity — ONE signature ease (cubic-bezier) + exit variant + emphasized variant; duration bands (fast/base/slow/hero); stagger unit. Choose 3 adjectives first, derive curves from them (see motion-system.md).
4. Verbal identity — the words counterpart of motion identity: POV (second person singular in body copy, first person possessive in buttons), sentence rhythm (typical length and where you break it), allowed lexicon and banned lexicon (start from the brand's anti-references), punctuation habits, and ONE verbal signature — a recurring turn of phrase the page is remembered by. Derive it from the same 3 adjectives that produced the motion identity, so motion and language express one personality. NOTE: verbal identity is DERIVED BY ANALOGY with motion identity. Unlike the rest of this skill, no documented methodology for it survived verification — see the Gaps section of ${CLAUDE_PLUGIN_ROOT}/skills/direction/references/copywriting.md. Treat it as a working structure, not established doctrine.
5. Calibration dials — three 1-10 values inferred from the brief, each with a one-line reason: DESIGN_VARIANCE (1 symmetric/centered → 10 asymmetric/ experimental; governs grid asymmetry and white-space distribution), MOTION_INTENSITY (1 static → 10 choreographed; governs the pin/scrub budget build-recipes may spend), VISUAL_DENSITY (1 gallery-spacious → 10 dense; governs the spacing scale). Baseline for award-tier landings: 8 / 6 / 4. Dials are landing-specific — they may drift freely from any brand source.
6. Art direction — medium, lighting recipe, grade, texture, mood; explicit anti-references (what this must NOT look like). Follow it with a Craft-floor overrides section: any device on impeccable's refuse list that this landing will use anyway (grain/feTurbulence, viewport-scale display type above 6rem, mono labels, section indices, glass, CSS textures), each with the reason the brief earns it — see ${CLAUDE_PLUGIN_ROOT}/skills/direction/references/trends.md §0. Nothing named there = the floor holds and verify flags the device.
7. Wireframe — ASCII wireframe per script section, in script order. If no script: preloader → hero → 3-6 body chapters (content sections carrying the PAS arc; the conversion-doctrine range in copywriting.md) → interactive footer (anatomy in awwwards-rubric.md).
8. Signature moment — ONE unique, memorable device, tied to the script's climax section, justified against the brief. Name the technique (pin+scrub chapter / mask cursor / kinetic hero / scroll-video / R3F object).
9. Drift vs brand source — see below. Empty section allowed only when no brand source exists.
10. Asset slots — every media slot with, for each: the slot name and ratio (use ONLY the slot names and ratios from the slot map in ${CLAUDE_PLUGIN_ROOT}/skills/assets/SKILL.md — the authoritative contract), a MEDIUM (produce = raster to generate · direct = real asset the client supplies · semantic = built in HTML/CSS/SVG/canvas). Decide the medium from what the slot shows, never from what feels buildable: anything with lighting, depth, a figure, or a named material texture (cloth, paper grain, metal) is produce whatever the stack — "layered CSS texture" is not a medium and is how an approved art direction silently becomes a flat page. Then a SHOT SPEC: subject, camera angle and position, lens, lighting setup, the moment being captured, and where the negative space sits for UI overlay. Also name which slots share a LOCKED ELEMENT (environment, product, prop or person that must be identical across slots) — those become Reference Elements before any generation. The shot spec is an art-direction decision and belongs at the gate, not at generation time. Close the item with the Video tier and the derived Credit ceiling. Images cost ~1 credit and need no menu — generate them without asking. Video is where the money is, so price it live and let the human choose: