frontend-design-pro

name	frontend-design-pro
description	Shared UI/visual-design rule library for building polished, distinctive, multimedia-rich self-contained HTML stories. The Data2Story Designer and Programmer read it to choose a visual language (theme, type pairing, layout, components, motion) and implement it so every blog looks intentional and editorial, never templated. Use when designing or reshaping a story's look, picking fonts/colors/themes, building a hero/chart/card/map/audio component, adding motion or an interactive, or fixing a visual defect (invisible chart, overflow, broken media, AI-slop look). Not a pipeline stage — a design source consulted by other roles.
allowed-tools	Read

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 → .