Design is not skin, it's skeleton. Let me write that sentence down 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 this: 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. The border radius, shadows, and hover fade-ins of every button are exactly the same as another site about "Batch Size"—only the title and content have changed.
That's the default shape of most "learning platforms." Template + content filling. Like every textbook using the same trim size, only with different body text.
The latest easy-learn-ai commit (59aa901) did the exact opposite.
It did two things, but they are essentially one thing: moving design from the "decoration layer" to the "structure layer."
---
First: A Specimen Cabinet of 25 Design Languages
Imagine a webpage isn't "a webpage" but a speaking person. Different people have different accents, pacing, and vocabularies. Linear's site is like a Silicon Valley engineer in a black turtleneck—concise, precise margins, even button borders only 1 pixel wide. A Bloomberg Terminal page is like a trader staring at screens in a dim trading room—everything crammed together, amber numbers jumping on deep blue, with no concept of "beauty," only "density." An Aesop page is like a London apothecary—camel-yellow background, serif fonts, product descriptions written like literary magazine prose.
This commit creates a project called web-design-engineer. It builds 25 such "people," each page a complete interactive demo. Not screenshots, not Figma mockups—real pages you can click, scroll, and see fonts and colors render.
The 25 demos are grouped into 7 schools:
- Editorial / Minimal: Apple product pages, MUJI catalogs, Aesop's apothecary style, Dieter Rams' industrial design archive, Monocle. Their common trait: "white space" isn't emptiness, it's meaningful silence. Like a good bookstore with enough distance between shelves to breathe.
- Information Architecture: Pentagram identity samples, Vignelli's NYC subway map, Bloomberg Terminal, Tufte's data ink, NYT broadsheet. Their common trait: information density isn't chaos, it's 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 trait: "toolness"—design itself implies "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 particle systems, Active Theory's WebGL ambition, Resn's narrative scrolling. Their common trait: "the web is not a document, it's a space." Like walking into an installation art exhibit—you're not reading, you're experiencing.
- Brutalist / Anti-design: Are.na's honest pages, Businessweek's collage covers, Balenciaga's cold fashion. Their common trait: "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 trait: "hand-feel"—something not machine-made, with human warmth. Like receiving a handwritten letter from a friend.
- Typological / Period Styles: Y2K retro-futurism and 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 cut-paper geometry are like a 1957 optimism poster.
---
Second: 8 AI Knowledge Sites, From "Template" to "Magazine"
The previously covered 8 AI knowledge sites (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 navigation bar where you clicked "Overview," "Architecture," "Training," and pages switched like slides. Every site's transition animations, 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. Sections are no longer functional labels like "Overview" or "Architecture" but "What is BERT," "Two-Way Eyes," "Training Is Guessing," "The Metamorphosis of Task Heads"—each Section's name asks a question or offers a metaphor.
More importantly, each site's design style is internally consistent, but sites no longer look alike. The BERT site is "cream paper + heavy 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," with an actual interactive loss curve on the page. The RLHF site carries an interrogation vibe of "Are you aligned?"—the page feels like a psychological test.
Each site has its own typography, palette, and interaction style. BERT's hero is a "mask a word and guess it" game you can play immediately. Batch Size's hero is an animation of "how many dumplings fit in one pot." Loss's hero is a "diagnostician for how loss curves indicate illness."
These aren't "reskins." 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 is "the way information gets understood."
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 combination should help users understand content, not distract them.
When you're learning BERT, you don't need a "pretty learning platform." You need an interface that "makes you understand what BERT is." If BERT's core is "mask a word and guess it," the best interface lets you mask 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,' so use the Bloomberg Terminal recipe." "This site's theme is 'warm guidance,' so use the Headspace recipe." Design languages become reusable assets, like a code library.
---
Back to the Opening Sentence
Design is not skin, it's skeleton.
This means: when you change a page'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 the page "speaks," and the way it speaks determines how users "understand."
This easy-learn-ai commit does two layers of work: one builds a specimen library of 25 "ways of speaking," the other lets 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, but each with its own editorial voice. Some read like New Yorker essays, some like Bloomberg Terminal bulletins, some like Aesop product-page poetry.
That's the power of design as knowledge architecture. Not better-looking, but better-understood.
---
Source commit: 59aa901abfa1611c7ba68187b9a8ac5992d8394b easy-learn-ai project: https://github.com/ConardLi/easy-learn-ai