When Design History Becomes React Components: 25 Style Recipes and a Knowledge-Site Refactor

Source

Commit: 59aa901 — feat: initialize the Web Design Engineer project structure and documentation

What does it mean to codify design styles?

The post opens with a metaphor: imagine walking into a decoration shop with 25 wallpaper samples, each from a different era, country, and designer. Some are clean to the point of coldness (Apple Store), some rough and bold like 1960s New York subway posters, some so sparse you'd think the printer forgot the text (Japanese magazine). Except this isn't a shop—it's a code repository where, in a single day, someone packed 25 design styles into code.

The author's point: these are not imitations but translations—like translating a poem from French to Chinese, preserving not just meaning but rhythm, breath, and feeling.

The 25 styles, grouped into seven schools

• Editorial/Minimalist — Apple HIG, Muji (Naoto Fukasawa/Kenya Hara), Aesop, Dieter Rams' Braun, Monocle. The common thread: the courage to leave blank space as an attitude, not an omission.
• Information Architecture — Pentagram, Vignelli's Swiss grid, Bloomberg Terminal, Tufte's data-ink, NYT's The Daily. Believers that information itself can be beautiful without decoration.
• Modern Tools/SaaS — Linear, Vercel, Raycast, pre-AI Notion. Hairline dividers, warm-toned dark backgrounds, one accent color throughout.
• Motion/Experimental — Field.io, Active Theory, Resn. They treat the web page as a stage, not a page.
• Brutalist/Anti-design — Are.na, Bloomberg Businessweek (Turley era), post-2017 Balenciaga. Deliberately raw, like unretouched photos.
• Warm Humanist — Mailchimp's Freddie, Stripe Press, Headspace. Handwriting, rounded corners, evoking a human voice rather than a machine.
• Type/Genre — Y2K retro-futurism, mid-century modernism. Time-coded styles you can date at a glance.

Each style carries distinctive details: Linear's hairline borders, Aesop's small-caps labels and sage accents, Bloomberg Terminal's six-pane windows with amber-on-navy, Tufte's inline sparklines and small multiples. You don't need to know the jargon—open the page and you recognize it.

Not a showcase: it's a recipe book

The README makes clear this is not a unified template or a 16:9 stage. Every recipe is a complete page: Linear is a product landing page, Aesop is a pharmacy product page, Bloomberg Terminal is a six-pane trading workstation, Are.na is a research channel.

Each recipe includes:

• A palette (not default Inter + blue-purple)
• Actual fonts (or the closest Google Fonts substitute)
• Signature moves (Bloomberg's amber-on-navy, Aesop's small-caps, Linear's hairlines)
• A scene-appropriate artifact, not a generic landing page

Components are small enough to read—150–300 lines of TSX each, like a short story rather than a novel.

The other thing happening the same day: rebuilding the knowledge sites

The same commit migrated seven knowledge sites—batch-size, bert, deepseek-r1, deepspeed, loss, mcp, nlp, rlhf—from postcss to rsbuild, breaking components into more modular Section components.

This means the old "one-page-to-the-bottom" narratives became "chapterized": each major concept gets its own component that can be read, maintained, and reused independently—like splitting a thick book into chapters you can pull out separately.

• batch-size went from an animated demo to five clearly named Sections: WhatIs, OneUpdate, SharpFlat, Effective, TrainVsServe.
• bert became SectionWhat, SectionTrain, SectionHeads, SectionBothEyes, SectionFamily, SectionLiveIn2026—each answering a specific question rather than generically "introducing BERT."
• deepseek-r1 was split into Hero, AhaCases, GRPO, Distill, Emergence, AfterR1—telling a complete storyline: why DeepSeek R1 matters, what the Aha Moments were, how the GRPO algorithm works, what distillation means, what emergence is, and what comes after.

An interesting observation

The two parts of this commit—the style recipe library and the knowledge-site refactor—are two facets of the same mindset:

• Horizontal: collecting all classic styles from design history and encoding them as reusable components—like a chef preparing every fundamental sauce from world cuisines and keeping them in jars, ready to use.
• Vertical: splitting each AI concept explanation into independent chapter components that can be understood alone and combined into a full narrative—like breaking a novel into chapters you can open anywhere or read end to end.

Horizontal is breadth; vertical is depth. In the same repository, someone is doing both at once.

Why this is worth remembering

People often talk about "learning AI" or "learning design," but rarely put both in the same framework. This repository expresses knowledge and aesthetics as code simultaneously.

When you open the Bloomberg Terminal demo, you're not just looking at a color scheme—you're experiencing a philosophy of information density. When you open the Tufte demo, you're not just seeing font sizes—you're feeling a conviction that "data should speak for itself."

Twenty-five styles, twenty-five worldviews. Code becomes the vessel that carries worldviews. That idea itself is more worth spreading than any single technical point.

*Original post: ~2300 Chinese characters. Tags from source: easy-learn-ai, daily update, memory, xiaokai.*