Team-wide orientation · 5 min read

How we ship websites now.

Same craft. Same fusion. But the way we get there is different — Cowork and the punch-website plugin take the synthesis, formatting, and QA off your plate at every phase. Here's the new flow, and where the skills fit.

Rollout in progress · through end of Q2 2026

This process is new to the entire team, not just new hires. Even Punch veterans haven't worked this way before — Cowork, the plugin, the content-first wireframe, the structural QA — all of it lands at the same time. Until July 1, 2026, every team member reads everything in their role's onboarding regardless of tenure. The "skip-paths" near the end of this doc kick in starting Q3, once the system is in steady state and there's real change-from-baseline to track.

First, the basics

What the punch-website plugin actually is.

The punch-website plugin installs about 20 Punch-specific skills into Cowork. Each skill runs at a specific moment in a project — drafting a brief, decoding a reference site, building the wireframe, exporting tokens, running copy QA, generating the retrospective. You don't memorize commands or "invoke" the plugin. You ask Cowork in natural language and the right skill fires.

e.g. "draft the homepage copy from the brief" → Cowork uses punch-web-copywriter.

The skills aren't replacing the craft. They take the repetitive parts off your plate — the synthesis, the formatting, the per-page QA — so your time goes to the parts that need a human: the Big Idea, the argument, the visual moments, the client read.

The flow below walks each phase and shows what changed from how we used to work (Google Docs for copy, Figma pages straight against Webflow templates, manual handoff to dev). Wherever a skill takes over a chunk of what used to be manual, it's called out inline.

The pipeline
The whole flow, one picture
flowchart TB
    subgraph P0[" PHASE 0 · DISCOVERY AND STRATEGY "]
        direction LR
        A1["Creative brief drafted"] --> A2["Three creative themes presented"] --> A3["Sitemap built"]
    end
    subgraph P1[" PHASE 1 · FOUNDATION "]
        direction LR
        B1["Project folder created"] --> B2["Copy briefs written"] --> B3["Two homepage variations designed"] --> B4["Homepage composed"] --> B5["Content wireframe ready"]
    end
    subgraph P2[" PHASE 2 · EXPANSION "]
        direction LR
        C1["Showcase pages built"] --> C2["Standard pages amplified"]
    end
    subgraph P3[" PHASE 3 · SHIP "]
        direction LR
        D1["Pre-launch QA passes"] --> D2["Site goes live"] --> D3["Lessons captured"]
    end
    P0 --> P1 --> P2 --> P3
Process diagram didn't render. The four phases are detailed below — Discovery & Strategy → Foundation → Expansion → Ship.

Each row is a phase. Boxes are the high-level steps; skills run underneath them. Read the phases below for what each step actually involves and which skills fire.

0 Phase

Discovery & Strategy

2–3 weeks

You're still locking the Big Idea and the site shape with the client. The craft of strategy hasn't moved. What's changed is the prep. The Creative Brief, the three theme directions, and the sitemap used to take days of manual synthesis from kickoff transcripts and brand docs. The strategy skills first-pass all three so your time goes to refining the argument, not staring at a blank Google Doc.

Skills that help here punch-content-brief·punch-theme-taglines·punch-sitemap
1 Phase

Foundation

3–4 weeks

This is the phase that changed the most. Copy used to live in Google Docs; full pages used to be designed straight in Figma from a Webflow template, then handed to dev. Now copy lands as per-page briefs, which pour into a content-first wireframe — a clickable site with all the words and structure but no design. The client reads and signs off on the entire site before any page is designed. Then the homepage gets composed in Cowork against tokens and components exported from Figma — so the build matches the design system, not Cowork's guess at it.

Skills that help here punch-project-init·punch-web-copywriter·punch-wireframe·punch-token-export·punch-component-export·punch-page-polish
2 Phase

Expansion

3–4 weeks

Showcase pages — the 20% that earn the brand's budget — still get bespoke Lead Designer attention. What's new is amplification. The standard 80% of pages used to also get full Designer attention (or worse, get rushed). Now they get scaled from the homepage rhythm by the Production Artist using the website-design-amplifier in Claude Code. The Lead Designer audits before they advance. Designer time freed up here goes to custom heroes, motion, and photography — the visual moments only a human can make.

Skills that help here punch-page-polish·website-design-amplifier·punch-production-artist-qa
3 Phase

Ship

1–2 weeks

Migrate to the CMS and launch. The big change here is QA. Copy checks, link checks, asset audits, and accessibility — all of which used to be eyeballed by whoever was free at the end of the project — now run as one orchestrated pre-launch report. And we verify everything on production within 48 hours of launch instead of waiting for the client to spot something.

Skills that help here website-to-static·punch-pre-launch-qa·punch-retrospective
Continuous loop
∞ Underneath all four phases

Continuous learning

A few skills don't sit at a single step — they run across the whole project. Term-drift catches stale terminology in your docs as you write. Copy-lint catches typos, comment leaks, and banned hype words anytime. The retrospective at the end captures what fired and what didn't, then feeds findings back into the rules — so the next project starts a little sharper than the last one.

Skills that help here punch-term-drift·punch-copy-lint·punch-retrospective
Where do I fit?
What to read next

For the rollout period (now through end of Q2 2026), every team member runs the same sequence — regardless of tenure or role. The standard paths return in Q3.

Step 1 · Read this doc

You're already here. Read it end to end — the rollout banner above, the primer, all four phases, the continuous loop, the roles, the promise. It's the shared mental model the team will use to talk about everything else.

Step 2 · Attend the live launch session

A 60–90 minute walkthrough with the whole team. Someone walks through this doc, demos Cowork and the plugin live, opens it up for questions. Recorded so anyone who can't attend in real time can catch up.

Step 3 · Complete your role's onboarding

Two to three hours, hands-on, self-paced. Block the time in the first two weeks. Every team member runs this regardless of tenure — nobody has worked this way before.

Step 4 · Pair on your first real project

Don't run the first client engagement solo. Lead designer pairs with a learning designer; lead strategist with a learning strategist. PMs especially benefit from a co-pilot for the first time through the new Asana template.

After Q2 2026 · Steady-state paths

Once the rollout is done, this section returns to three standard paths — new hires read their role's onboarding, vets check the changelog and the latest Quarterly Refresher, project leads pin the Playbook and the Skill Reference. Surfaced here for reference; the sequence above is the path for everyone right now.

The promise

Shaped together. Read before designed. Verified on production.

Fused, content-led, gate-protected, source-fidelity rendered, post-launch verified. That sequence is how we keep the work from collapsing into the late-stage rework that defines most agency website projects.