Frontend Design

Frontend Design

A shared design system for building beautiful, distinctive, multimedia-rich HTML stories. This is not a pipeline stage; it is a library the Designer reads to choose a visual language and the Programmer reads to implement it, so output looks like an editorial product, not a default template.

When to use

• Designer: before writing page_rhythm and per-section visuals, pick a theme and component vocabulary from here. Borrow tokens, layout, and component recipes; record the chosen theme in designer.json page_rhythm.
• Programmer: implement the chosen theme's tokens as CSS :root variables and build each visual with the matching component recipe and motion/accessibility rules here.

Core principles

1. Editorial, not generic. Avoid the default-AI look (bootstrap blue, purple gradient hero, everything centered, one system font, evenly-spaced soulless cards). Commit to one bold idea per story. See [references/themes.json](references/themes.json) → anti_patterns.
2. Rich media by default. A story should use multiple channels well — charts, images, video, audio, interactives/maps — each presented with craft, not dumped in. See [references/media_presentation.json](references/media_presentation.json).
3. One system, themed per story. All color/type/space/shadow flow from CSS :root tokens so the whole page is coherent and re-themeable. See [references/design_tokens.json](references/design_tokens.json).
4. Structure carries the reading. A clear content column, deliberate full-bleed moments, and consistent section rhythm. See [references/layout.json](references/layout.json).
5. Motion and access are part of the design. Subtle scroll reveals and transitions, always respecting prefers-reduced-motion, AA contrast, focus states, and "never autoplay sound." See [references/interaction.json](references/interaction.json).
6. Self-contained. Single HTML file; allowed CDNs only (Vega-Embed, Leaflet, optionally D3/PDF.js); inline data; works on file://.

References

• [references/design_tokens.json](references/design_tokens.json) — color roles, data-color scales, fluid type scale, spacing/radius/shadow, themed via :root.
• [references/layout.json](references/layout.json) — content column, full-bleed breakout, section rhythm, responsive grid, sticky patterns.
• [references/components.json](references/components.json) — recipes: hero/teaser, stat callouts, card deck, pull quote, chart/map frames, audio players, scrollytelling, before/after, guess-reveal, data table, references footer.
• [references/media_presentation.json](references/media_presentation.json) — how to present each channel (image, video, audio, chart, map, instance) richly, and the "all five channels by default" doctrine.
• [references/themes.json](references/themes.json) — ready-made distinctive themes (token presets) and the anti-patterns to avoid.
• [references/interaction.json](references/interaction.json) — motion, scroll reveal, transitions, accessibility, reduced-motion, performance.

A story is well-designed when it commits to one clear visual identity, uses several media channels with craft, reads cleanly on mobile and desktop, and could not be mistaken for a default template.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: QinghongLin
• Source: QinghongLin/data2story-skill
• License: MIT
• Homepage: https://data2story.github.io/

Install and usage instructions live in the source repository linked above.