Craft

Templates and a design system that turn markdown into publication-quality HTML. Your system produces investment analyses, theses, and competitive war maps — they should look like professional publications, not ChatGPT exports.

Design system · agents/builder/templates/ · rendered/ (20+ outputs)

The problem

AI output looks like AI output. Markdown dumps, generic formatting, no design identity. The content might be sharp — the presentation signals otherwise.

If your system produces investment analyses, theses, and competitive war maps, they should look like professional publications — not ChatGPT exports. Craft is the layer that closes that gap: a shared design system and a library of templates that every agent renders into.

What gets encoded

A shared design system and reusable templates for the output types Agent Prime actually produces. All share the same CSS custom properties:

Thesis Template

Sticky table of contents, reading time estimates, word counts, breadcrumb navigation. For long-form strategic arguments.

Investment Dashboard

Tabbed interface with sortable tables, stat cards, collapsible sections. For multi-lens financial analysis.

Article Template

Clean editorial layout with author metadata, document versioning, expandable sections. For published pieces.

Showcase Template

Three-tab editorial format (Article / Process / System). For case studies and demonstrations.

Slide Deck

Presenter-mode with keyboard navigation. For conference talks and internal presentations.

Design System

CSS custom properties for the entire palette. Source Serif 4, Inter, JetBrains Mono. Light/dark mode. Responsive grid.

Real example

Every template pulls from the same token file. Change one variable and every rendered output updates:

assets/style.css — Design Tokens

:root {
  /* Backgrounds */
  --bg: #FDFAF6;
  --surface: #FFFFFF;
  --surface-warm: #F7F3ED;

  /* Accent — Terracotta */
  --accent: #B85C38;

  /* Typography */
  --font-heading: 'Source Serif 4', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

[data-theme="dark"] {
  --bg: #1A1714;
  --surface: #242019;
  --accent: #D4845C;
}

Every rendered output inherits these tokens. Light and dark mode are free. Swap the accent color once and every template — thesis, dashboard, article — updates in one edit.

How to set it up

Start with the design system — pick your fonts, colors, and spacing scale. Then build one template for your most common output type. Agent Prime started with the thesis template (the most frequently produced artifact) and expanded from there. Every rendered output shares the same CSS custom properties, so changing one color updates everything.

agents/builder/templates/
  thesis.html          # Long-form strategic argument template
  investment.html      # Multi-lens financial analysis template

assets/
  style.css            # Design system — ~2,000 lines

rendered/
  *.html               # 20+ publication-quality outputs

Once the design system exists, rendering is mechanical. The Builder agent takes a markdown artifact, selects the matching template, and produces a styled HTML output in rendered/. The content stays in markdown; the presentation lives in the template.

What you get

templates/ directory

Reusable templates covering the most common output types. Extensible to new formats.

Thesis · Investment Dashboard · extensible

style.css

The complete design system. Tokens, typography, layout, light/dark mode.

~2,000 lines

rendered/ directory

Every publication-quality HTML output the system has produced.

20+ outputs · grows with every artifact