Section 01
The 3-Layer Architecture
Every template in this system — regardless of type — contains exactly three layers. No template ships without all three. This is the non-negotiable structural pattern.
⚡ LLM INSTRUCTIONS blocks (visible in the rendered page for documentation templates) or hidden inline comments (invisible in production templates). Contains: exact CSS values, component anatomy, behavioral specs, do/don't rules, and the [REPLACE:] token convention for customizable content.
LLM Build Rule
Layer 1 (Metadata) always starts at line 1 of the file inside <!-- ... --> comment blocks. Use YAML-style key-value formatting. Required fields: pattern_id, pattern_name, version, category, subcategory, dependencies, and cognitive_flow (for conversion templates) or section_flow (for content templates).
Layer 2 (Instruction) uses two modes:
- Documentation mode — Visible amber blocks rendered in the page. Used for design systems, references, and meta-templates (like this document). Class:
.llm-blockor.ds-instructions. - Production mode — Hidden HTML comments above each section/component. Used for sales pages, content, assessments. Format:
<!-- LLM: [instructions] -->.
Layer 3 (Render) must be a single self-contained HTML file. No external CSS files. No external JS files. Google Fonts and cdnjs.cloudflare.com CDN imports are the only permitted external resources.
The [REPLACE:] Token Convention
Any content that must be customized when using a template is wrapped in [REPLACE: description of what goes here]. This convention works across all template types and gives an LLM explicit instructions for what to swap.
<!-- Layer 3: Render — with [REPLACE:] tokens -->
<h1>[REPLACE: Your headline — state the core transformation]</h1>
<p>[REPLACE: One sentence explaining why this matters now]</p>
<a href="[REPLACE: your-payment-url]">
[REPLACE: CTA text — use action verb + outcome]
</a>Convention Rules
Always include context inside the brackets. Not [REPLACE] — use [REPLACE: Company name] or [REPLACE: Price — format as $X,XXX]. The description tells the LLM or human what belongs there, which eliminates ambiguity and reduces errors.
Section 02
Template Taxonomy
Ten template types. Each has a distinct purpose, cognitive flow, and structural pattern. All share the 3-layer architecture.
Brand Strategy
Design systems, style guides, brand books. The source of truth for visual and verbal identity.
Workflow
Multi-step process documentation with prompts. Turns messy inputs into polished outputs.
Playbook
Comprehensive operational guides with SOPs. Complete enough to hand off and have someone run it.
Content Delivery
Blog posts, social threads, newsletters, articles. Thought leadership as interactive HTML pages.
Sales / Conversion
Landing pages, offer pages, enrollment flows. Cognitive flow engineered for conversion.
Assessment / Diagnostic
Scoring tools, quizzes, classification engines. Capture input, calculate, display personalized results.
Expert Extraction
Transcript processing, knowledge base building. Turns raw expert material into structured insights.
Email / Sequence
Drip campaigns, onboarding flows, course delivery. Multi-part content with timing and viral loops.
Dashboard / Report
Meeting trackers, sprint dashboards, intelligence summaries. Data tables with status and scoring.
Documentation / Reference
API docs, system docs, skill references. Collapsible, searchable, copy-ready code blocks.
Section 04
LLM Build Protocol
When an LLM receives this meta-template plus a request to build a specific template, it follows this exact sequence. No skipping steps.
1. Classify
Identify which of the 10 types
2. Metadata
Write hidden YAML comments
3. Structure
Build section flow from taxonomy
4. Instruct
Add LLM blocks per component
5. Render
Build HTML/CSS/JS output
6. Validate
Check 3 layers present
LLM Build Rule — Full Protocol
Step 1 — Classify: Read the request. Match to one of the 10 taxonomy types. If ambiguous, default to the closest type and note the overlap. If none fit, flag it as a candidate for taxonomy expansion.
Step 2 — Metadata: Write the hidden comment block at line 1. Include: pattern_id, pattern_name, version, category, subcategory, dependencies. For sales/conversion types, include cognitive_flow and persuasion_sequence. For content types, include section_flow. For assessments, include scoring_rubric.
Step 3 — Structure: Build the section outline based on the taxonomy type. Reference the "Required Sections" for each type in the Scaffolds section below. Every section gets an id attribute for navigation.
Step 4 — Instruct: Add instruction blocks to every section. In documentation mode, use visible .llm-block elements. In production mode, use hidden comments. Every component must have: CSS specs, anatomy description, behavioral notes.
Step 5 — Render: Build the complete HTML/CSS/JS. Single file. CSS variables for theming. Responsive. Interactive elements functional. [REPLACE:] tokens in all customizable content.
Step 6 — Validate: Confirm all 3 layers are present. Confirm [REPLACE:] tokens have descriptions. Confirm responsive at 375px. Confirm no external dependencies beyond fonts/CDN.
Brand Skin Application
Templates are brand-agnostic by default. To apply a brand skin:
- Load the design system file (e.g.,
design-system-mastery-lab.html) and read its CSS variables and LLM instruction blocks. - Replace the template's
:rootvariables with the brand's tokens — colors, fonts, spacing, radius, animation timing. - Apply component patterns from the design system to matching template components — buttons, cards, badges, section headers.
- Verify visual coherence — hover states, transitions, and responsive behavior should match the design system's specs.
/* Brand skin swap — replace these variables */
:root {
/* FROM: Meta-template defaults */
--noir: #0a0a0a;
--ivory: #f5f4f0;
--font-serif: 'Instrument Serif', serif;
/* TO: Mastery Lab brand (dark theme) */
--noir: var(--ml-black); /* #0a0a0a */
--ivory: var(--ml-surface); /* #171717 */
--font-serif: var(--font-display); /* Space Grotesk */
}Section 05
Template Scaffolds
Structural blueprints for the four priority template types. Each scaffold defines the required sections, cognitive flow, and specific instruction patterns for that type.
05 — Sales / Conversion Page
Purpose: Convert visitors into buyers, applicants, or enrollees. Every section exists to move the reader closer to the CTA. Nothing decorative — everything earns its place.
Cognitive Flow (Required Sequence)
Urgency
Countdown / scarcity
Identity
Hero + transformation
Stakes
Pain / comparison
Proof
Credibility + evidence
Value
Curriculum / features
Price
Anchor + reveal + CTA
LLM Build Rule — Sales Pages
Metadata must include: cognitive_flow (the 6-step sequence above), persuasion_sequence (the psychological principle behind each section), adaptation_notes (how to customize for different offers).
Section rules:
- Urgency bar: Fixed position top. Countdown timer or scarcity indicator. Loss aversion trigger. Never fake — use real deadlines or real seat limits.
- Hero: Identity transformation headline ("Become X" not "Learn X"). Pre-empt the top objection in the subtitle. Single CTA button.
- Comparison / Stakes: Three-path framing (resistor / user / champion). Show the cost of inaction. Use contrasting card layouts.
- Proof: Specific numbers, named frameworks, operator credentials. No vague claims. Minimum 3 hard proof points.
- Value demonstration: Accordion curriculum, feature list, or module breakdown. Progressive disclosure — don't overwhelm, let them explore.
- Pricing: Value stack first (total value $X). Then reveal actual price with anchor strikethrough. Full-width CTA. Trust elements below (guarantee, refund policy).
[REPLACE:] tokens required: Headline, subtitle, comparison paths, proof points, curriculum items, value stack items, prices, CTA text, payment URL, countdown deadline.
<!-- METADATA for Sales/Conversion template -->
<!--
COGNITIVE_FLOW:
1. Urgency (Countdown) → Loss aversion, time pressure
2. Identity (Hero) → Self-concept appeal, transformation
3. Stakes (Comparison) → Fear of wrong path, social proof
4. Proof (Credibility) → Authority, specificity
5. Value (Curriculum) → Progressive disclosure, chunking
6. Price (Reveal) → Anchoring, contrast effect
REQUIRED_SECTIONS:
- countdown-bar (fixed, always visible)
- hero-section (identity + CTA)
- comparison-section (3-path or before/after)
- proof-section (stats, credentials, frameworks)
- curriculum-section (accordion or module grid)
- pricing-section (value stack + price card + CTA)
- footer
-->06 — Assessment / Diagnostic Tool
Purpose: Capture user input, run scoring logic, display personalized results. The diagnostic is a lead magnet AND a qualification tool — it tells the user where they stand and routes them to the right next step.
Required Architecture
Hook
Promise + context
Questions
Input capture UI
Calculate
Scoring engine
Results
Score + archetype
Route
Conditional CTA
LLM Build Rule — Assessments
Metadata must include: scoring_rubric (how inputs map to scores), archetype_definitions (result categories with thresholds), routing_logic (which CTA appears for which result).
JavaScript requirements:
- State management: Track all answers in a single state object. No DOM-dependent state.
- Scoring engine: Pure function — takes answers, returns score + archetype. Must be testable independently.
- Conditional display: Results section hidden until submission. Result content varies by archetype.
- Progress indicator: Visual progress bar or step counter. Updates as user answers.
- Validation: All questions required before submission. Inline error states.
Question UI patterns: Radio groups for single-select. Checkbox groups for multi-select. Sliders for scale (1-5, 1-10). All inputs must be keyboard-accessible.
[REPLACE:] tokens required: Assessment title, question text, answer options, scoring weights, archetype names/descriptions, result copy, CTA text per archetype.
/* Assessment scoring engine pattern */
function calculateScore(answers) {
const weights = {
'question_1': { a: 3, b: 2, c: 1 },
'question_2': { a: 1, b: 2, c: 3 },
// [REPLACE: Add scoring weights per question]
};
let total = 0;
for (const [q, answer] of Object.entries(answers)) {
total += weights[q]?.[answer] || 0;
}
// [REPLACE: Define archetype thresholds]
if (total >= 24) return { archetype: 'expert-first', score: total };
if (total >= 16) return { archetype: 'product-first', score: total };
return { archetype: 'audience-first', score: total };
}07 — Expert Extraction Template
Purpose: Process raw expert material (transcripts, calls, content) into structured knowledge bases. The extraction template defines categories, provides extraction prompts, and shows example outputs so an LLM can replicate the process on any source material.
LLM Build Rule — Extraction Templates
Metadata must include: category_count, source_type (transcript / article / video / call), output_format (structured HTML / JSON / markdown), extraction_confidence target.
Each category card must contain:
- Category number + badge: Sequential number. Badge indicates priority: Required / High Value / Shareable / Interactive / Conversion.
- Title + description: What this category captures and why it matters.
- Extraction prompt: The specific questions an LLM asks of the source material to extract this category. These must be concrete — not "find interesting quotes" but "what phrases are memorable enough to share standalone on LinkedIn?"
- Example output: A real or realistic example of what extracted content looks like for this category. This calibrates the LLM's output quality.
Category count: 8-12 categories is optimal. Below 8 misses nuance. Above 12 creates redundancy.
[REPLACE:] tokens required: Category names, descriptions, extraction prompts, example outputs, source file path, output filename convention.
08 — Email / Sequence Template
Purpose: Multi-part email sequences with timing, progression, and viral distribution hooks. Each email in the sequence has a specific job. The template documents the sequence strategy and provides the content framework for each email.
LLM Build Rule — Email Sequences
Metadata must include: sequence_length, send_cadence (daily / every-other-day / weekly), goal_per_email (what each email accomplishes), viral_hook (the required sharing/engagement step).
Viral Loop Rule (CRITICAL): Every teaching sequence requires a step where users must engage others. Homework = distribution. The sharing step is not optional — it is a required assignment in at least one email per sequence. Format: "Your homework: [action that requires sharing with someone else]."
Per-email structure:
- Subject line: Two variants (A/B). Under 50 characters. Curiosity or value-driven. Never clickbait.
- Preview text: Completes the subject line thought. Under 90 characters.
- Body structure: Hook (first 2 lines) → Value delivery → Single CTA → P.S. line (optional, for urgency or social proof).
- CTA: One per email. Clear action verb. Links to specific destination.
Sequence flow visualization: Render as a horizontal timeline showing: email number, send day, subject line, goal, and whether it contains the viral loop step.
[REPLACE:] tokens required: Subject lines, preview text, body content, CTA text, CTA URLs, viral loop homework, send timing.
Section 06
Working Example
A Sales / Conversion template scaffold built from the meta-template rules. This is what the rendered output looks like when all three layers are applied. The [REPLACE:] tokens show where content gets customized.
[REPLACE: Eyebrow — e.g., "Limited Beta · 5 Spots"]
[REPLACE: Transformation Headline]
[REPLACE: One sentence — what they get + why now. Pre-empt the #1 objection.]
[REPLACE: CTA — Action Verb + Outcome]The Stakes
[REPLACE: Three paths — which one are you on?]
[REPLACE: Path 1 — The Risk]
[REPLACE: What happens if they do nothing]
[REPLACE: Path 2 — The Plateau]
[REPLACE: What happens if they stay where they are]
[REPLACE: Path 3 — The Outcome]
[REPLACE: What happens if they take action]
The Proof
[REPLACE: Why this works — evidence section title]
[REPLACE: Stat]
[REPLACE: Context for the number]
[REPLACE: Stat]
[REPLACE: Context for the number]
[REPLACE: Stat]
[REPLACE: Context for the number]
How This Example Was Built
This preview follows the Sales/Conversion scaffold from Section 05. It implements all 6 cognitive flow steps (urgency → identity → stakes → proof → value → price). Every text element uses a [REPLACE:] token with a description. An LLM reading this meta-template could generate the full HTML file with real content by filling in the tokens.
Section 07
Quick Start Prompt
Copy this prompt to generate any template type. Paste it into any LLM with this meta-template file attached.
# Template Generation Prompt
Read the meta-template at:
./meta-template.html
I need a [TEMPLATE TYPE] template for:
[Describe the specific use case]
Brand skin:
[Link to design system file, or "default" for the meta-template's light editorial theme]
Requirements:
- [Specific sections or features needed]
- [Target audience]
- [Any constraints]
Follow the 6-step LLM Build Protocol from the meta-template.
Include all 3 layers (metadata, instruction, render).
Use [REPLACE:] tokens for all customizable content.
Output a single self-contained HTML file.Template Type Quick Reference
01 Brand Strategy → Design systems, style guides
02 Workflow → Multi-step processes with prompts
03 Playbook → Operational guides with SOPs
04 Content Delivery → Blog, social, newsletter, articles
05 Sales / Conversion → Landing pages, offer pages, enrollment
06 Assessment → Scoring tools, quizzes, diagnostics
07 Expert Extraction → Transcript → structured knowledge base
08 Email / Sequence → Drip campaigns, course delivery
09 Dashboard / Report → Trackers, intelligence summaries
10 Documentation → API docs, system docs, referencesViral Loop Reminder
For types 04 (Content), 05 (Sales), and 08 (Email): every teaching sequence needs a required step where users must engage others. Homework = distribution. Build this into the template's instruction layer as a non-optional element.