Offline report artifact

Ready

HTML Artifact Starter

Use this as a copyable baseline for review pages that need design judgment: a focused hero, finite card layouts, scannable decision tables, and diagram-first roadmap sections.

Summary primitives

Visual direction

Editorial report

Use when the page must feel written, curated, and decision-ready.

Density

Medium-density report

Keep prose readable while still surfacing evidence and risks.

Motif

Evidence rail

A right-side rail gives the hero a visual anchor and avoids empty width.

Design note: choose a hero variant intentionally: hero--split, hero--compact, or hero--deck.

Finite-card grid

Primary

Thesis card

Make the most important card visually heavier than supporting cards.

Evidence

Long mixed text stays inside: ccr-ui/src/views/FeatureComparisonPanel.vue

Grid children use min-width: 0 and text uses overflow-wrap:anywhere.

Risk

Known item counts are explicit

Five cards become 3+2 on desktop and one column on small screens.

Support

Secondary analysis

Lower visual weight keeps the scan path clear.

Support

Follow-up

Use for validation, revisit triggers, or open questions.

Decision matrix table

Recommendation first

Put the conclusion in a card before the dense matrix.

Evidence visible

Use evidence columns and key rows to show why.

Revisit trigger

Name the signal that would change the decision.

Weighted comparison matrix. Sticky header, tabular numerals, and data-bar cells make the recommendation scannable.
Criterion Weight Option A · Recommended Option B Evidence Verdict
Reviewer clarity 35% Strong Medium Readers see the conclusion before details. A leads
Implementation risk 25% Low Medium Single-file offline HTML, no runtime dependency. A leads
Maintenance 20% Medium Medium Reusable classes require discipline. Tie
Visual memorability 20% High Low Hero and diagram frames create a stronger page identity. A leads

Diagram frame and roadmap lane

Four-phase roadmap from design decision to verified artifact. Phase one chooses composition, phase two maps content, phase three renders HTML and SVG, phase four validates and reviews. 1 · Decide direction and motif 2 · Compose cards, table, diagram 3 · Render offline HTML/SVG 4 · Validate and review before handoff
Roadmap diagrams should be inline SVG or structured HTML, not raw diagram syntax. Colors come from CSS tokens so theme/mode switches apply automatically.
  1. Decide: choose direction, memory hook, density, and diagram strategy.
  2. Compose: assign hero, card grid, table emphasis, and diagram frame.
  3. Render: write one self-contained file with inline CSS and small local JS only.
  4. Validate: run the HTML artifact validator and perform manual design review.

Gather

Purpose, audience, evidence, and stop condition.

Design

Hero, finite grid, table emphasis, diagram choice.

Build

Single file, offline CSS/JS, semantic sections.

Verify

Validator, viewport checks, manual design checklist.

Architecture audit primitives

Codebase audit call graph with boundary bands. Entrypoint calls dispatch, dispatch selects a trainer, trainer sends work to a worker, and failure returns through retry. Module boundary Trainer boundary Entry Dispatch Trainer Worker Retry
Use short SVG labels for call shape; put exact files, symbols, and recommendations in adjacent text equivalents.
  • Call / dispatch
  • Result / success
  • Failure / retry
Architecture audit tables should make evidence, enum selection, redundancy, and risk reviewable.
Audit surfaceRequired structurePrimitive
Call graphentrypoint, dispatch, trainer, worker, result, failure patharchitecture-map
Enum advicecurrent entrypoint, enum type, member names, naming basis, caller impact, docstable--decision
Redundancylocation A/B, overlap, risk, retain/delete/merge, proof neededrisk-heat

Checklist

  • Hero has a clear focal point and no meaningless dead zone.
  • Known five-card sections use grid-5-balanced for 3+2 desktop composition.
  • Tables surface recommendation, evidence, and verdict before detail scanning.
  • Architecture audit artifacts use architecture-map, boundary-band, evidence-rail, edge-legend, and risk-heat when call mechanisms, enum choices, or redundancy are under review.
  • Tables use tabular-nums, col--num for right-aligned numeric columns, and cell--bar / cell--trend / cell--heat / cell--diff-* for in-cell emphasis.
  • Diagrams include figcaption and a text equivalent list. SVG uses currentColor + var(--*) so theme/mode switches propagate.
  • Long Chinese, English, and code text does not overflow cards.
  • Dark mode (prefers-color-scheme or data-mode="dark") and print mode preserve readability and contrast ≥ 4.5:1 for body text.
  • No remote assets, network APIs, telemetry, or hidden requests.