← Vault Index
Source: frameworks/kit-aos-interactive-narrative/01-aos-article-context.md

Thought Leadership Article — Context

Phase 1: The Intake

The intake happens before any HTML is written. Claude reads the source material, then walks through a structured series of decisions — proposing options with rationale, not asking open-ended questions. The goal is to lock every strategic decision before building starts.

How the Intake Works

Claude proposes. You react. This is not a form to fill out. Claude should have enough context from the source material to generate informed options for each decision. The person providing the source material should never have to invent answers from scratch — they should be choosing between options or pushing back on proposals.

Bad intake question: "What's the conversion goal for this piece?" Good intake question: "The source material teaches a complete system the reader could use themselves. Two conversion options: (A) $27 toolkit purchase — they've seen the system, now they buy the deployed version. CTA is product purchase. (B) Diagnostic booking — the article builds urgency around a problem, CTA routes to a call. Based on the source material, A feels right because [reason]. Which direction?"

Intake Sequence

Run these in order. Lock each answer before moving to the next.

1. Brand Which brand is this for? Advisory OS (high-ticket, deployed capability) or Creating Your Plan (self-serve, toolkit)? This determines design system, voice, CTA architecture, and URL.

2. Conversion Goal What should the reader do after finishing? Options vary by article type:

The conversion goal changes the entire article architecture. A purchase-oriented article teaches completely and sells the shortcut. A diagnostic-oriented article builds pressure and leaves the solution incomplete. These are different persuasion strategies.

3. Core Concept What is Claude seeing in the source material? Claude should propose:

This is the hardest intake question. Claude needs to do actual thinking here — not summarize the source material, but find the insight inside it that makes this piece say something no one else is saying.

How to Find the Named Mechanism

The mechanism is never a description of a problem everyone already knows. It's a name for a pattern the reader has felt but never articulated.

Bad mechanism: "The Qualification Problem" — everyone knows qualification is hard. This names a topic, not a pattern. Good mechanism: "The Politeness Premium" — names the specific invisible cost of evaluating prospects by social skill instead of scoring criteria. The reader thinks "oh — THAT'S what I've been doing."

The synthesis technique: Look for an operational principle in the source material (a rule, a system, a discipline). Then ask: what's the cost pattern that exists BECAUSE people don't follow this principle? The mechanism names the cost, not the principle.

The HQP Playbook's operational principle is "score behaviors, not words." The cost pattern that exists because people DON'T do this: they evaluate prospects by charm (words) and end up with nightmare clients (behavioral reality). The name for that cost pattern: The Politeness Premium.

Another example: The Proof Gap source material's operational principle is "document client outcomes systematically." The cost pattern: advisory work is invisible, so trust decays and competitors with visible proof win. The name: The Proof Gap.

The naming test: Can the reader say the mechanism name to a colleague and have them immediately recognize the pattern? "You know The Politeness Premium? Where you say yes to the charming prospect and they turn into a nightmare?" If that sentence works in conversation, the name is right.

4. Interactive Elements Claude proposes 3–5 interactive candidates based on the source material, each with:

Then negotiate down to 2–3. The interactives should do fundamentally different jobs — not three different UIs that all say the same thing. Good test: describe what each interactive teaches the reader. If two of them teach the same lesson, one needs to go.

The Politeness Premium used three interactives that each did different cognitive work:

Each one built on the previous. That's the standard.

Interactive Emotional Design

Different cognitive work is necessary but not sufficient. Each interactive should also create a specific emotional response that advances the argument.

InteractiveCognitive WorkEmotional ResponseWhy It Advances the Argument
Retrospective ScorerMirror — see your own dataDiscomfort — "my pattern is real"Reader can't dismiss the concept as theoretical
DecoderRetraining — read signals differentlySurprise — "that phrase I hear all the time scored a 2?"Reader's confidence in their own judgment shakes
SimulatorPractice — use the system on a caseTension — "I'm not sure about this score"Reader feels why a system is needed (gut feel is unreliable)

When proposing interactives, include the emotional response column. If an interactive doesn't create a specific feeling that moves the reader forward, it's decoration.

Ambiguity is a design principle. The Simulator works because the fictional prospect (David) is genuinely ambiguous — not an obvious Fit or Not Fit. The Retrospective Scorer works because the reader's own clients cluster uncomfortably. The Decoder works because the "positive-sounding" phrases score low. Design interactives so the answer isn't obvious. Comfort is the enemy of persuasion.

5. Title Direction Claude proposes 2–3 title options with rationale for each. Criteria:

"Your Worst Clients All Scored the Same" works because it implies a hidden pattern. "The Proof Gap" works because it names an invisible problem. Both create itch.

6. Narrative Arc Based on the concept, conversion goal, and interactives, Claude proposes the section flow. This is NOT always seven movements. The Politeness Premium used: Pattern → Mirror → Trap → Decoder → System → Simulator → Constraint → Assessment → CTA. The Proof Gap used the classic seven. The arc should be driven by the argument, not by a template.

Claude proposes the arc with section names, eyebrow labels, and one-sentence descriptions of what each section does. You adjust.

7. Reframe Level How much does the source material need to be reframed for this brand/audience?

After the Intake

Once all seven decisions are locked, Claude summarizes them as a Concept Lock — a single block that captures every decision. This is the build spec for the first pass.

Example Concept Lock:

CONCEPT LOCK: The Politeness Premium
Brand: Advisory OS
Conversion: System-teaching (serves both product purchase and diagnostic booking)
Core insight: Advisors evaluate prospects by charm instead of criteria. Costs 20-40+ hours per wrong-fit client.
Named mechanism: The Politeness Premium — the invisible cost of evaluating prospects by social skill instead of scoring criteria.
Assumption challenged: That a good conversation means a good client.
Title: Your Worst Clients All Scored the Same
Interactives (3):
  1. Retrospective Scorer (Mirror) — score last 3 clients, see clustering pattern → emotional response: discomfort
  2. Politeness Trap Decoder (Retraining) — tap phrases, see what they actually scored → emotional response: surprise
  3. Live HQP Simulator (Practice) — score a fictional prospect, get verdict → emotional response: tension
Arc: Pattern → Bridge Quote → Mirror → Trap + Definition → Decoder → System → Simulator → Constraint → Assessment → CTA
Reframe: Medium — teach the system, land on "get the deployed version"
CTA: Book a Systems Diagnostic (launch) → Get the Toolkit · $27 (product version) → Both (evergreen)
Anchor phrase: "The pattern always tells the truth."

Phase 2: The First Pass

Claude builds the full HTML article from the Concept Lock. The first pass should be complete and functional — not a draft with placeholders. But Claude should flag known weaknesses rather than pretending the first pass is finished.

Things Claude should flag after the first pass:

This sets up productive revision cycles where both parties know what needs work.


Phase 3: Revision Cycles

You review the first pass and give specific editorial feedback. Claude rebuilds what needs fixing. This is where the quality happens.

What good feedback looks like:

What low-value feedback looks like:

Expect 1–2 cycles. The Politeness Premium shipped after three (v1 → v2 → v2.1), but that was before these skill files captured the thinking patterns. With the mechanism discovery technique, interactive emotional design, and time compression guidance baked in, the first pass should land closer to v2 quality — leaving only prose-level tuning for the revision cycle.


Narrative Architecture

Not a Fixed Template

The seven-movement structure (Hero → Pattern → Cost 1 → Cost 2 → Constraint → Shift → CTA) is one valid architecture. It works well for articles that name an invisible problem and route to a diagnostic booking. The Proof Gap uses it.

But it's not the only architecture. The Politeness Premium uses: Pattern → Mirror → Trap → Decoder → System → Simulator → Constraint → Assessment → CTA. That's nine sections, not seven. It works because the article is teaching a complete system, not just naming a problem.

What Every Architecture Needs

Regardless of section count or order, every article needs these functions served:

FunctionWhat It DoesRequired?
HookTitle + hero that creates a gap the reader must closeYes — always
RecognitionReader sees themselves in a story or patternYes — always
Named mechanismA definition box that gives language to something the reader has felt but never articulatedYes — always
Cost/stakesAt least one section making the invisible cost visibleYes — at least one
ConstraintWhy the reader can't solve this themselves / why knowing isn't enoughYes — always
Interactive evidence2–3 embedded interactives that do cognitive work, not decorationYes — always
BreathingBig quotes or anchor phrases between dense sectionsYes — 1–2 minimum
CTAClear next step matched to the conversion goalYes — always

Optional functions that appear in some architectures:

Architecture Follows Goal

If the conversion goal is...The architecture tends toward...
Diagnostic bookingClassic seven movements. Build pressure, leave solution incomplete, route to call.
Product purchaseTeach the system completely, let them practice it, sell the deployed/automated version.
Subscribe/list growthEstablish authority, deliver complete value, CTA is "get the next one."

Important nuance: A system-teaching article (product purchase architecture) can serve BOTH goals by swapping the CTA section. The Politeness Premium teaches the HQP system completely and works with either a $27 toolkit CTA or a diagnostic booking CTA. The article body doesn't change — only the final section does.

This means the intake should lock the PRIMARY conversion goal (which determines architecture), but acknowledge that the CTA may version over time:

Capture this in the Concept Lock as "CTA: [Primary] (versioned: [future plans])"


Prose Standards

Voice

Direct, specific, warm without being casual. Speaks to practice owners as peers. Names things precisely. Never hedges when the pattern is clear.

Signature characteristics:

What the Voice Is Not

Prose Density

Each paragraph should do one thing. When a paragraph tries to make three points, break it into three paragraphs. The Politeness Premium's Trap section works because "Politeness is a social skill, not a buying signal" stands alone. The next paragraph explains why — warmth is practiced. The next explains the flip side — agreement avoids vulnerability. Each beat lands before the next arrives.

Time Compression

The strongest prose technique in these articles is time compression — walking the reader through their own future in accelerating time. It creates urgency by making the reader feel their own knowledge decaying in real time.

The technique: Start at "right now" or "tomorrow morning," then compress time in 3–4 beats until the reader is back where they started. Each beat should be shorter than the previous one.

Published examples:

The Proof Gap: "$120K in outcomes fading right now. By next quarter it's a rough number. By next year the details are gone."

The Politeness Premium Constraint: "Tomorrow morning you'll remember the framework. By the fifth call, you'll forget to score Style. By the tenth call, you're back to gut feel. By the twentieth, you won't remember there were six criteria."

Where to use it: The Constraint section — always. This is where the reader needs to feel why knowing the system isn't enough. Don't explain why knowing isn't enough. Make them feel their own knowledge decaying.

Where NOT to use it: The Pattern section or Cost section. Time compression is a closing technique. Using it too early robs the Constraint of its power.

Bridge Quotes as Narrative Devices

Bridge quotes are not layout elements — they're the reader's emotional exhale between cognitive work. They serve a narrative function: marking the moment where one phase of the argument ends and the next begins.

The Politeness Premium's bridge quote after the Pattern section: "They showed you who they were in the first twenty minutes. Every single one. You just didn't have numbers for it."

This isn't a dark-to-dark connector. It's the moment where recognition ("I've had these clients") turns into curiosity ("what numbers?"). The reader crosses from "I have a problem" to "there might be a system."

When to place bridge quotes:

How to write them: The quote should name what the reader is feeling right now — not teach something new. "They showed you who they were" mirrors the recognition the Pattern section just created. The bridge quote validates the feeling, then the next section channels it.


Interactive Standards

Article-Embedded vs. Standalone

Article-embedded interactives are visualizations and exercises that serve the narrative. They show things, reveal things, or let the reader practice things. They live inside the prose-interactive-prose sandwich.

Standalone micro-tools (calculators, diagnostics, revelations) are separate products at their own URLs. They have their own input flows, scoring, and CTAs. They are NOT article-embedded interactives, even though they may relate to the same topic.

Do not embed a calculator inside an article. Calculators ask for user input and return personalized financial data. That's a standalone tool function. Article interactives visualize, decode, simulate, or mirror — they serve the argument.

The Prose-Interactive-Prose Sandwich

Every embedded interactive needs:

  1. Setup prose — 1–2 paragraphs telling the reader what to look for and why it matters
  2. Interactive — The visualization or interaction
  3. Interpretation prose — 1–2 paragraphs explaining what the reader just experienced and connecting it back to the argument

Without setup, the interactive has no context. Without interpretation, the interactive has no meaning. Both failures turn evidence into decoration.

Each Interactive Must Do Different Cognitive Work

The test: describe what each interactive teaches the reader in one sentence. If two of them teach the same lesson, one needs to change.

Bad: Three interactives that all show "wrong-fit clients are expensive" in different UIs. Good: One that makes you see your own pattern (mirror), one that retrains how you read signals (decoder), one that lets you use the system (simulator).


Design Rules

Theme Alternation

Sections alternate between dark (charcoal) and light (cream/off-white). Never two consecutive sections with the same background. The piece should breathe between dark and light.

Exception: Two dark sections can be continuous if they're connected content (e.g., a bridge quote followed by an interactive section). Use padding-bottom: 0 on the first and padding-top: 48px on the second to maintain visual continuity.

Typography and Brand

CTA Architecture

The CTA section must match the conversion goal locked in intake.

For product purchase ($27 toolkit, etc.):

For diagnostic booking:

For subscribe:

One CTA. One action. No split focus.