Prism

Structured documents for AI agents. Beautiful output for humans.

Agents write with purpose-built components — decisions, code references, flows, metrics. Prism renders it all as a single, self-contained HTML file with a coherent visual system. No CSS. No design decisions. Just clear, scannable documents.

→ See Live showcase  ·  This README in Prism  ·  中文展示

← What an agent writes with Prism Hierarchy, evidence, and structure — built into the DSL.

What an agent writes with markdown → Same content. No visual vocabulary.

(This README is also a Prism document — open it rendered with Prism to see what an agent-built page looks like.)

Prism ships 45 production-ready components with a coherent Notion-inspired theme. Decision cards, callouts, flow diagrams, metrics tiles, source-code blocks with line ranges — all visually consistent, all dark-mode aware, all already debugged.

Agents pick from the DSL. They never write a single <style> tag.

Each component encodes a writing convention: a verdict belongs in a decision card, not a sentence. A code reference belongs in a <p-source>, not a quoted snippet. A comparison belongs in <p-compare>, not a "pros and cons" list.

The DSL is the rubric. Agents output documents with real information architecture — readers scan instead of slog.

Prism is opinionated, not exclusive. If you want to write your own <style> in a template — for a one-off page, a specific brand moment, or just because — nothing breaks. Prism components render with semantic class names you can override, and standard HTML inside a template stays standard HTML. Bring as much or as little of Prism as you want. You can see this for more details.

Interactive

npx skills add tommy0103/prism

Claude Code

npx skills add tommy0103/prism -a claude-code -g -y

Codex

npx skills add tommy0103/prism -a codex -g -y

Claude Code plugin marketplace (single-skill entries require Claude Code v2.1.143+)

# Register this repo as a plugin source
/plugin marketplace add tommy0103/prism

# Then install
/plugin install prism@prism

Update

npx skills update -g -y

Marketplace installs use claude plugin update <skill>.

No build step needed — the runtime is pre-built. The agent discovers the skill via SKILL.md and uses it automatically when you ask for structured documents.

1. Agent writes a template

<!-- lang: zh-CN -->
<p-decision status="rejected" verdict="P0">
  <template #title>并发 refresh 导致合法用户 token 家族被撤销</template>
  <p>影响所有多 tab 用户。两个 tab 同时刷新 token 时，第二个请求被误判为 token 盗用，导致整个 token 家族（包括第一个 tab 刚拿到的新 token）被撤销。</p>
</p-decision>

<p-collapse title="复现链路">
  <h4>触发条件</h4>
  <p>用户在两个浏览器 tab 中同时触发 token 刷新。两个请求携带相同的 refresh token <code>T1 = "dGhpcyBpcyBh..."</code>。</p>

  <h4>Tab A 请求先到达</h4>
  <p>进入 <p-ref to="bug-rotate-a" label="rotateRefreshToken"></p-ref>，参数 <code>token = "dGhpcyBpcyBh..."</code>：</p>

  <p-source path="src/lib/refresh.ts:8-18" lang="TypeScript" id="bug-rotate-a">
    <pre><code>...</code></pre>
  </p-source>

  <p>Tab A 正常拿到新 token 对 T2。</p>

  <h4>Tab B 请求随后到达（同一个 T1）</h4>
  <p>再次进入同一函数，参数仍然是 <code>token = "dGhpcyBpcyBh..."</code>：</p>

  <p-source path="src/lib/refresh.ts:8-18（第二次调用）" lang="TypeScript" id="bug-rotate-b">
    <pre><code>...</code></pre>
    <template #note>根本原因：<code>rotateRefreshToken</code> 无法区分合法并发和 token 被盗后重放，对两者执行了相同的撤销逻辑。</template>
  </p-source>

  <h4>结果</h4>
  <p-steps>
    <p-step progress="done" title="Tab A: 拿到新 token T2" desc="正常"></p-step>
    <p-step progress="active" flag="danger" flag-label="BUG" title="Tab B: 触发 revokeFamily(7)" desc="T2 也被撤销，Tab A 的新 token 失效"></p-step>
    <p-step flag="danger" flag-label="IMPACT" title="两个 tab 都被强制登出" desc="用户需要重新登录"></p-step>
  </p-steps>
</p-collapse>

2. Build to a single HTML

node prism/build.js template.html index.html

3. Open the output

open index.html
# No server. No deps. Just HTML.

git clone https://github.com/tommy0103/prism.git
cd prism
npx http-server . -p 3000
# Open http://localhost:3000/examples/showcase-en.html

Every Prism document embeds a SHA-256 hash of the runtime and a Content Security Policy that blocks all network access. To verify a .html file was built with an unmodified Prism runtime:

node prism/build.js --verify file.html
# ✓ Prism runtime integrity verified (sha256-b0f58b7036ebec83)

45 components, 8 families. Each one ships with a .md doc in src/components/ explaining when (and when not) to use it.

• Line numbers — code blocks show line numbers. <p-source path="auth.ts:42-48"> starts at line 42.
• Copy button — hover any code block, click to copy (line numbers stripped).
• Floating TOC — auto-generated from <h2> / <h3> with jump navigation.
• Syntax highlighting — 14 languages: TS, JS, Rust, C/C++, Python, SQL, JSON, YAML, Bash, HTML, CSS, Diff.
• Light & dark, auto — follows prefers-color-scheme. Force with PrismUI.setTheme('dark').

Prism is intentionally small today — 45 components, one Notion-inspired theme, one build path. The plan is to grow the vocabulary, not the surface area.

• More themes — Linear-style, brutalist, editorial, terminal-dark. The protocol stays the same; only the visual layer swaps. Themes will live in themes/ as drop-in CSS files.
• More writing primitives — <p-glossary>, <p-changelog>, <p-spec>, <p-test-result>. Driven by real agent patterns we see in the wild.
• Theme authoring kit — a documented token set + a contrast checker, so community themes ship with the same quality bar as the Notion default.
• Agent feedback loop — capture which components agents reach for most, surface gaps where they fall back to raw HTML.

Have a theme or component you want to see? Open an issue — Prism's direction is shaped by the documents agents are actually writing.

Prism separates protocol (the DSL agents write) from visual (what it looks like). You can rebrand without changing how agents use it — the writing conventions stay, the look changes.

/* backgrounds */
--p-bg, --p-bg-secondary, --p-surface

/* text colors */
--p-text, --p-text-secondary, --p-text-light

/* semantic colors */
--p-accent, --p-success, --p-warning, --p-danger, --p-purple

/* borders */
--p-border, --p-divider

/* typography */
--p-font-display, --p-font-body, --p-font-mono

/* radii */
--p-radius, --p-radius-lg

npm install
npm run build   # Build dist/prism.iife.js
npm run dev     # Watch mode

prism/
├── SKILL.md                  # Agent entry point
├── references/
│   ├── principles.md         # Design principles + examples
│   ├── showcase.html         # Every component demoed
│   └── example-vue.html      # Minimal example
├── src/
│   ├── components/           # 47 Vue SFCs + 31 .md docs
│   ├── styles/
│   │   ├── base.css          # Structural — don't touch
│   │   └── themes/notion.css # Visual — swappable
│   ├── hljs.ts               # 14-language highlighter
│   ├── index.ts              # Registration + mount
│   └── build-html.ts         # Template → single HTML
├── build.js                  # CLI
├── dist/prism.iife.js        # Built runtime ~103KB gzip
└── README.md

MIT © tommy0103

_{◆   PRISM   ◆}