Design is not a skin—it's a skeleton. Let me put this sentence here first, because it takes time to understand.
---
A Change You Can Actually Feel
Suppose you open a website to learn "what is BERT." What do you expect to see?
Most likely: a blue gradient background, a top navigation bar reading "Overview," "Architecture," "Training Process." You click a button and the page switches like a PowerPoint slide. Every button's border radius, shadow, and hover fade looks exactly like another site about "Batch Size"—only the titles and content differ.
This is the default form of most "learning platforms." Template + content filling. Like every textbook using the same trim size, only with different text.
The latest commit (59aa901) of easy-learn-ai did something completely opposite.
It did two things, but they are essentially one: moving design from the "decoration layer" to the "structure layer."
---
First: A "Specimen Cabinet" of 25 Design Languages
Imagine a webpage isn't just "a webpage," but a person who speaks. Different people have different accents, paces, and vocabularies. Linear's website is like a Silicon Valley engineer in a black turtleneck: terse, precise margins, button borders exactly 1 pixel. A Bloomberg Terminal webpage is like a trader staring at screens in a dim trading room: everything crammed together, amber numbers jumping on deep blue—no concept of "beauty," only "density." An Aesop webpage is like a London pharmacist: camel-yellow background, serif fonts, product descriptions written like literary magazine prose.
This commit created a project called web-design-engineer. It built 25 such "people," each page a complete interactive demo. Not screenshots, not Figma files—pages you can click, scroll, and see real fonts and colors.
The 25 demos are grouped into 7 schools:
- Editorial / Minimalism: Apple's product pages, MUJI's object catalog, Aesop's pharmacist style, Dieter Rams' industrial design archive, Monocle magazine. Their common ground: "whitespace" isn't emptiness but meaningful silence. Like walking into a good bookstore, where shelves have enough distance for you to pause and breathe.
- Information Architecture: Pentagram's identity samples, Vignelli's NYC subway map, Bloomberg Terminal, Tufte's data ink, The New York Times' broadsheet. Their common ground: "information density" isn't chaos but order. Like a map—you don't need beauty, you need to find the transfer station in 0.3 seconds.
- Modern Tools / SaaS: Linear, Vercel, Raycast, Notion. Their common ground: "toolness"—the design itself hints "this is for getting work done." Hairline borders, keyboard shortcuts, purple accents. Not for looks, but to make you feel "this place is efficient."
- Dynamic / Experimental: Field.io's particle systems, Active Theory's WebGL ambition, Resn's narrative scrolling. Their common ground: "a webpage isn't a document, it's a space." Like entering an installation art exhibit—you're not reading, you're experiencing.
- Brutalist / Anti-design: Are.na's honest web, Businessweek's collage covers, Balenciaga's cold fashion. Their common ground: "no pretending." System default fonts, blue underlined links, no animations. This design says: "I won't flatter you. Take it or leave it."
- Warm Humanist: Mailchimp's yellow doodles, Stripe Press's cream-paper books, Headspace's orange meditation. Their common ground: "hand-touch"—something not machine-made, carrying human warmth. Like receiving a handwritten letter from a friend.
- Type / Genre: Y2K retro-futurism, mid-century modern. They are time capsules. Y2K's chrome bevels and MSN blue are like opening a 2001 computer; mid-century modern's mustard yellow and paper-cut geometry are like a 1957 poster of optimism.
---
Second: 8 AI Knowledge Sites, From "Template" to "Magazine"
The 8 AI knowledge sites covered before (BERT, Batch Size, DeepSpeed, DeepSeek-R1, Loss, MCP, NLP, RLHF) were all refactored in this same commit.
What was refactored? Structure.
The old structure: each site had a nav bar; you clicked "Overview," "Architecture," "Training" and the page switched like slides. Each site's transitions, colors, and button styles came from the same UI framework (NextUI + framer-motion).
The new structure: each site becomes a long page composed of multiple Sections. Section names are no longer functional labels like "Overview" or "Architecture," but questions or metaphors: "What is BERT," "Two-Way Eyes," "Training Is Guessing," "Metamorphoses of Task Heads."
More importantly: each site's design style is internally consistent, but sites no longer look alike. The BERT site is "cream paper + dense ink," like an open manual. The DeepSeek-R1 site is "dark + purple accents," like a late-night lab. The Loss site is "a curve doctor's clinic"—the page actually contains an interactive loss curve. The RLHF site has an interrogation feel—"Have you been aligned?"—like a psychological test.
Each site has its own typography, color scheme, and interaction style. BERT's hero is a "cover the word, guess the answer" game you can play immediately. Batch Size's hero is an animation about "how many dumplings fit in one pot." Loss's hero is a diagnostic tool: "how does a loss curve read symptoms."
These are not "re-skinned." A skin is pasted on the outside and doesn't affect the skeleton. But these changes are skeleton-level: each site's information structure, narrative rhythm, and interaction style became that site's own "design language."
---
Why Does This Matter?
Many people understand "design" as "making things look good." But design here means "the way information is made understandable."
Tufte's data-ink principle says every drop of ink in a chart should carry information. Extended to web design: every pixel of layout, every font choice, every color pairing should help users understand content, not distract them.
When learning BERT, you don't need a "good-looking learning platform." You need an interface that "makes you understand what BERT is." If BERT's core is "cover words and guess answers," the best interface lets you cover words and guess directly. If Loss's core is "how curves diagnose," the best interface is an interactive curve.
And the specimen cabinet of 25 design languages means future knowledge sites don't need to invent design from scratch. You can say: "This site's theme is 'information density first'—use the Bloomberg Terminal recipe." "This site's theme is 'warm guidance'—use the Headspace recipe." Design languages become reusable assets, like a code library.
---
Back to the Opening Sentence
Design is not a skin—it's a skeleton.
What this means: when you change a webpage's fonts and colors, you're applying makeup. But when you change its information structure, narrative rhythm, and interaction style, you're changing its skeleton. The skeleton determines how a webpage "speaks," and how it speaks determines how users "understand."
This easy-learn-ai commit did two things: one, established a specimen library of 25 "ways of speaking"; two, let 8 knowledge sites each find their own way of speaking. The former is "a taxonomy of design languages"; the latter is "the engineering practice of that taxonomy."
If you open these sites, you'll find they aren't "learning platforms." They're more like 8 magazines in different styles, each covering one facet of AI, each with its own editorial voice. Some read like New Yorker essays, some like Bloomberg Terminal flashes, some like the poetic descriptions on an Aesop product page.
That's the power of design as knowledge architecture. Not prettier—but more understandable.
---
Source commit: 59aa901abfa1611c7ba68187b9a8ac5992d8394b easy-learn-ai project: https://github.com/ConardLi/easy-learn-ai