The Agent's everyday HTML expression layer. When information density is high and readers have to strain to scan it, usea single self-contained HTML instead of Markdown.
Inspiration: Anthropic's "Using Claude Code: The unreasonable effectiveness of HTML"—HTML is the best expression medium for Agents.
Why HTML and not Markdown
- Information density: HTML can do structure, comparison, and interaction; Markdown can only pile up text
- Readability: tables, metrics, and timelines are a disaster in Markdown and a pleasure in HTML
- Self-contained: one file, opens on double-click, zero runtime environment, shareable
- Decision criteria: if the reader has to "strain to scan it", upgrade to HTML; if one sentence can make it clear, keep Markdown
Routing: whether to use html-express
| Signal | Where to go |
|---|---|
| Want PDF / resume / PPT / landing page / white paper | → kami |
| Want video / animation / subtitles / transitions | → hyperframes |
| Want to organize a large block of information into a readable single-page webpage | → This skill |
| A conclusion that can be stated in one sentence | → Just reply in Markdown |
Component list (10)
| Component | What kind of information it suits |
|---|---|
metric-card |
Key metrics, data highlights (2-4 side by side) |
comparison-table |
Side-by-side comparison of multiple options |
data-table |
Listing of structured data (not comparison) |
timeline |
Timelines, milestones, roadmaps |
checklist |
Steps, SOPs, checklists |
quote-card |
Judgments, quotes, key lines |
code-block |
Code, commands, configuration |
details |
Collapsible long content (zero JS) |
badge |
Status labels (success/warning/neutral) |
columns |
Side-by-side multiple perspectives, comparison of pros and cons |
Source code is in assets/components/. The skeleton is in assets/skeleton.html, tokens are in assets/tokens.css. See the full effects of the 10 components in assets/demo-all.html(open by double-clicking).
Assembly process
- Identify the information form → comparison? checklist? metrics? timeline? quote? decision?
- Choose components → pick the 2-5 best matches from the list, no need to use them all
- Apply the skeleton → copy
assets/skeleton.html, paste the complete content oftokens.cssinto the top<style>(replace@import） - Fill in content → data > adjectives; leave no placeholders; mark missing data as
[数据待补：说明] - Deliverable → a single
.html, opens on double-click
Information form → component routing table
| Information form | Recommended component |
|---|---|
| Side-by-side comparison of multiple options | comparison-table + badge |
| Key metrics / data highlights | metric-card (2-4 side by side) |
| Timeline / milestones / roadmap | timeline |
| Steps / SOP / Checklist | checklist |
| Long-form judgment / original quotes / key lines | quote-card |
| Code / commands / configuration | code-block |
| Collapse long content | details |
| Structured data listing | data-table |
| Multiple perspectives side by side | columns |
Visual contract (bound to 智见AI DESIGN.md)
tokens are already in assets/tokens.css extracted, components must always reference variables,do not hardcode color/font-size literal values。
- Background is always warm paper
#F5F4ED, not pure white - Primary action color warm clay
#B85235, structural color ink blue#1B365D - Body links use
--accent-text（#A04A2E, contrast-safe) --human（#C96442) only for decoration or ≥22px large text, not for small body text(contrast only 3.7:1)- Fonts rely on fallback, do not embed font files
Prohibited (what Agents most easily do wrong)
- ❌ Placeholder residue (
[填这里]、Lorem、TBD） - ❌ Fabricated data or statistics; mark missing data as
[数据待补：说明] - ❌ Weak tables—using a comparison matrix but piling it into a list
- ❌ Gradients, glassmorphism, neon, heavy shadows (explicitly prohibited by DESIGN.md)
- ❌ Making it a marketing landing page (that is kami's job)
Reference
- Brand source of truth:
04_系统/品牌系统/DESIGN.md - Component quick view:
assets/demo-all.html(double-click to open and see the full set of effects)