How a Punch website ships

Content and design, shaped together.

Every Punch website is the product of fusion — design and content traveling together from the brief forward, never sequenced, never siloed. This is how that work flows, end to end. Click any role for who owns it. Red is a client decision.

Human owns Human + Claude (AI-assisted) Client decision moment
Phase 0 Discovery & strategy ~2–3 weeks
01
Strategist + PM
Run kickoff and discovery interviews to understand the business, audience, and goals.
02
Strategist + Claude
Draft the full internal creative brief from the discovery materials.
Using the punch-content-brief skill against the discovery transcript + brand docs — first-pass brief the strategist refines.
03
Strategist + Claude
Generate three Big Idea / theme directions, each anchored on a distinct emotional truth.
Using the punch-theme-taglines skill — three distinct Big Idea starters with tagline + voice direction. These feed design at Phase 1, not the client.
04
Strategist + Claude
Draft the sitemap from audit, analytics, and content strategy.
Using the punch-sitemap skill against the existing site audit + GA analytics + brief.
05
Strategist
Abbreviate the brief into the client-portal version — the short, client-facing brief.
★
Client decides · Gate 1
Sign off on the abbreviated brief and the sitemap. The three Big Ideas pass to design — client will pick among them visually at Gate 2.
Phase 1 Foundation ~3–4 weeks
Supporting prep

If the project is emulating a reference template or live inspiration site: Lead Designer decodes the references first using the punch-webflow-decode skill. It takes a URL + 4–6 screenshots and produces a named-idiom spec (hairline rules, grid characteristics, hero treatment, type cadence, motion patterns) that the design team applies during the creative theme designs below. URL-only decodes aren't allowed — screenshots are required because hairline borders and dotted backgrounds aren't visible in fetched HTML.

06
Strategist
Author the Copy Brief — tone of voice, banned and preferred words, punctuation and wording preferences, brand personality. The reference every word on the site gets written against.
Hand-authored from a template. Lives at brand/copy-brief.md. No Claude needed for this one — it's small, opinionated, and human-authored by design.
07
Design Team
Create three creative theme designs in Figma — one visualizing each Big Idea. Real palette, type, hero treatment, illustration / photography direction — not moodboards. Themes come before homepage copy because the chosen theme's taglines and verbal cues directly shape the brand's voice direction; the Copy Brief gets sharpened against the picked theme before any homepage prose gets written.
Designed in Figma against the punch-website master library; each designer takes one Big Idea direction. Cowork composition comes later (Phase 1 step 11 onward).
★
Client decides · Gate 2
Pick one of three creative theme designs. The picked direction becomes the brand's visual spine — and its taglines + voice cues — for the rest of the project.
Live walkthrough call — not email
08
Strategist + Copywriter + Claude
With the theme direction locked, write the homepage copy — hero, intro, feature sections, integration grid, stat strip, quote, CTA. CTAs are routed strategically based on the user journey through the site, SEO/AEO best practices, and where the brand wants visitors to land next.
Using punch-web-copywriter against the Copy Brief + chosen theme's voice direction + Big Idea + sitemap row. Strategist refines. This locked copy is what the two homepage variations compose against.
09
Lead Designer + Strategist
Flesh out the chosen creative theme into V4 — every brand facet the project needs (full palette, type system, logo direction, illustration / photography style, motion). V4 is the locked, presentable version of the picked theme. It ships to the client at Gate 3 alongside the two homepage variations.
10
Lead Designer + Claude
Prepare the build sandbox — export design tokens, components, and the client logo from Figma.
Using punch-token-export + punch-component-export — Figma fork values flow into tokens.css, components.html, and logo.svg.
11
Design Team + Claude
Build two homepage variations in HTML using the V4 theme spec + the locked homepage copy. Variations differ in hero treatment — typically interactive vs traditional. Both fully functioning.
Direct Cowork composition + punch-page-polish against the locked homepage copy + the sandbox built from V4.
★
Client decides · Gate 3
Pick one of two homepage variations. The picked hero treatment dictates the remaining site styles.
Delivered together: V4 theme spec + the two homepage variations — one combined milestone.
Live walkthrough call — not email
12
Lead Designer + Claude
Polish the picked homepage — refine visual decisions, lock interactions and motion. This becomes the foundational page every remaining page is shaped from.
Using the punch-page-polish skill — iterates on the picked variation until it lands.
13
Strategist + Copywriter + Claude
Write content briefs for every remaining page in the sitemap. CTAs across pages are routed strategically — every page nudges the visitor toward the next-best step in the journey, with SEO and AEO best practices baked into headlines, intros, and link patterns.
Using punch-web-copywriter against the Copy Brief + creative brief + Big Idea + each sitemap row. Claude drafts; strategist refines and locks the cross-page CTA strategy.
14
Strategist or PM + Claude
Generate the content wireframe of the remaining pages — a fully functioning interactive newspaper-greyscale site (mega-nav, tabs, stat count-up, reveal-on-scroll, opening splash with feedback tutorial, light/dark theme toggle, ARIA, AEO/SEO/UX best practices) that the client uses like a real product. The single visual restraint is no imagery and no color.
Using the punch-wireframe skill — pours all remaining briefs into one hosted interactive site, governed by wireframe-principles.md (source-fidelity rendering, eyebrow scarcity, canonical Punch Docs feedback splash). Homepage already exists as designed HTML. Canonical fidelity locked to the Auria reference.
★
Client decides · Gate 4
Sign off on the remaining-pages wireframe — copy and structure locked before any of these pages get designed.
Phase 2 Expand ~3–4 weeks
15
Lead Designer + Claude
Compose the showcase pages — the 20% of pages that earn the brand's budget. Each gets the bespoke treatment.
Direct Cowork composition against each page's content brief + the established design system, then punch-page-polish for iteration.
16
Production Artist + Claude
Amplify the standard pages from the homepage rhythm and sitemap.
Using /website-design-amplifier (Claude Code) — scales the homepage's rhythm and components across every standard page.
17
Lead Designer
Audit the amplified pages for design quality — rhythm, hierarchy, type, alignment with the showcase work. Pages don't advance until the Lead Designer signs off.
18
Production Artist + TDM + Claude
Per-page self-QA, then per-batch QA — copy, links, assets, responsive integrity.
punch-production-artist-qa (artist self-QA) → then punch-copy-lint + punch-link-check + punch-asset-audit (TDM verifies).
19
Lead Designer
Create the site's rich visual layer — original hero treatments, custom illustrations, photography curation, motion / video / GIF moments. Assets flow into the showcase and amplified pages, elevating them from competent to distinctive. This is the creative work the automation frees up the Lead Designer's time for — the human craft that the system makes room for.
★
Client decides · Gate 6
Sign off on The Build — the complete designed website hosted as functioning HTML, with the Lead Designer's rich visual layer applied. Every page, every breakpoint, every interaction working. This unblocks CMS migration.
Rule

CMS migration cannot begin until the client signs off on The Build above. Copy and structure edits done inside a CMS take three times longer and carry significantly more risk than the same edits done while The Build is still in code. The earlier CMS pilot (parallel to design audit) is sandboxed feasibility, not production migration.

Phase 3 Ship ~1–2 weeks
20
Dev
Migrate every page from the static sandbox into the chosen CMS.
21
Production Artist + Claude
CMS-format polish — typography fine-tunes, image handling, edits the CMS introduces.
Re-running punch-copy-lint on the migrated pages to catch anything the CMS introduced (rich-text drift, smart-quote flips, dropped spaces).
22
TDM + Strategist + Dev
SEO, AEO, accessibility, and performance pass — meta, JSON-LD, redirects, WCAG audit, Lighthouse.
23
TDM + Claude
Pre-launch QA — comprehensive automated audit across the full site. Zero blockers or launch is held.
Using the punch-pre-launch-qa orchestrator — runs every QA sub-skill in one pass and aggregates findings with severity tiers.
24
TDM + PM
Deliver client training — live session, recorded, plus a CMS-specific PDF training guide.
★
Launch · Gate 8
DNS cuts over. Redirects live. Analytics firing. The site is shipped.
25
PM + TDM + Claude
Re-run pre-launch QA against the live URL within 48 hours. Catches CMS-format regressions before the client does.
Re-running punch-pre-launch-qa against the live production URL — same checks, against the version the client actually sees.
The system

Skills and plugins this flow uses

Every ↳ + Claude step above runs a skill from one of three places — Punch's own Cowork plugin (the bulk of it), Anthropic's design plugin, and two Claude Code plugins for our Production Artists and Dev team. One-sentence descriptions below.

Punch · Strategy & Content in the punch-website Cowork plugin

  • punch-content-brief First-passes the full internal creative brief from discovery materials in Phase 0.
  • punch-theme-taglines Generates three distinct Big Idea / theme directions with tagline candidates and design-direction signals.
  • punch-sitemap Drafts the site sitemap from existing-site audit, analytics, and the creative brief.
  • punch-web-copywriter Writes long-form marketing copy structured to fit Punch's component library — with strategic CTAs routed by user journey, SEO, and AEO best practices. Consumes the Copy Brief + chosen theme + Big Idea direction.
  • punch-wireframe Builds Punch's signature content wireframe — a fully functioning interactive newspaper-greyscale site (mega-nav, tabs, count-up, reveal-on-scroll, opening splash, ARIA, AEO/SEO/UX best practices). Clients use it like a real product; only imagery and color are missing. Auria-reference fidelity.

Punch · Supporting hand-authored files templates the team fills out

  • brand/copy-brief.md The Copy Brief. Punch's canonical voice + word-level reference. Strategist-authored. Covers Big Idea, audience, brand personality, voice characteristics, banned and preferred words, punctuation rules, wording and term preferences, tone-by-context, CTA strategy by page type, reference quotes. Read by punch-web-copywriter at every copywriting step; banned-word list is enforced automatically by punch-copy-lint.

Punch · Rules and references agency-wide, governs every project

  • wireframe-principles.md Ten codified rules synthesized from the Auria build that govern every Punch wireframe — source-fidelity rendering, eyebrow scarcity, H5/H6 emit-when-supported, light/dark theme toggle, multi-H1 allowance on index.html only, canonical Punch Docs feedback splash on every wireframe.
  • no-enhancement-rule.md The renderer no longer auto-strips trailing periods, invents eyebrows, or rephrases CTAs. What writers and strategists put in the source is what renders. Copy discipline moves upstream to the brief.
  • wireframe-copy-and-seo-rules.md The full rule set for copy + SEO behavior across the wireframe — heading hierarchy, lint behavior, period rules, principles index.
  • terminology.yaml The canonical glossary the term-drift skill reads from. When agency terms get renamed (e.g. "warm gray" → "neutral gray"), this is the single source of truth.

Punch · Continuous learning in the punch-website Cowork plugin

  • punch-term-drift Auto-catches stale terminology against terminology.yaml. Runs in the background — flagged drift lands in #punch-process as it surfaces.
  • punch-retrospective Ritualizes the end-of-project learning loop. 20 minutes, fixed agenda, outputs a structured retro doc whose findings feed the next refresher, the rule files, and terminology.yaml.

Punch · Design system & composition in the punch-website Cowork plugin

  • punch-webflow-decode Decodes reference templates and live inspiration sites into a named-idiom spec the design team can apply during composition.
  • punch-token-export Exports Figma design tokens (color, type, spacing, radius, motion) into tokens.css for the build sandbox.
  • punch-component-export Exports Figma components, text styles, and the client logo into the sandbox so Cowork composes against the right design system.
  • punch-page-polish Iterates on a composed page during the polish phase — idiom re-targeting, animation race-condition checks, sharper visual direction.

Punch · Quality assurance in the punch-website Cowork plugin

  • punch-production-artist-qa The Production Artist's self-QA before handing pages to TDM at per-batch QA (Gate 5).
  • punch-copy-lint Automated copy QA — catches double spaces, missing spaces, comment leaks, hype words, placeholder text, smart-quote inconsistency.
  • punch-link-check Validates every internal, external, and anchor link plus all asset paths across the site.
  • punch-asset-audit Cross-checks every image, video, icon, and logo against the canonical assets-manifest to catch wrong-asset-wrong-section failures.
  • punch-pre-launch-qa The Gate 7 orchestrator — runs every QA sub-skill in one pass and produces a unified report with severity tiers.

Anthropic's design plugin in Cowork

  • design:design-critique Structured design review — used at the Lead Designer's audit of amplified pages, and as needed through polish.
  • design:accessibility-review WCAG 2.1 AA audit — run during Phase 3 before launch alongside performance checks.

Claude Code plugins Punch-built, for Production Artist + Dev workflows

  • /website-design-amplifier Scales the homepage's rhythm and components across every standard page in the sitemap.
  • /website-to-static Reference-scrape and CMS-format conversion tooling — used for the CMS pilot in Phase 2 and the full migration in Phase 3.
The promise

Every Punch website is shaped together, read before it's designed, and verified on production before the client has time to call.

That sequence — fused, content-led, gate-protected, source-fidelity rendered, post-launch verified — is what we sell. It's also how we keep the work from collapsing into the late-stage rework that defines most agency website projects. The content the client signs off on at Gate 4 is exactly what ships at Gate 8. No silent enhancement, no last-mile drift.