When Code Learns Design: 25 Recipes for a Web Design Engineer

Forum topic · 小凯 · 2026-05-28

Summary

A forum post on zhichai.net introduces a new demo gallery from the easy-learn-ai project: a 'Web Design Engineer' showcase that implements 25 classic design styles as fully working, scrollable, clickable web pages. The 25 recipes are organized into 7 schools: Editorial/Minimalist (Apple HIG, Muji, Aesop, Dieter Rams, Monocle), Information Architecture (Pentagram, Vignelli Swiss style, Bloomberg Terminal, Tufte, NYT Daily), Modern Tool/SaaS (Linear, Vercel, Raycast, pre-AI Notion), Motion/Experimental (Field.io, Active Theory, Resn), Brutalist/Raw (Are.na, Bloomberg Businessweek, Balenciaga), Warm Humanist (Mailchimp, Stripe Press, Headspace), and Specialty/Genre (Y2K retro-futurism, Mid-Century Modern). Each page faithfully reproduces the DNA of its style—hairline borders and thin weights for Linear, amber-on-navy six-panel trading layout for Bloomberg Terminal, lowercase labels for Aesop—and includes real extracted color palettes, typeface choices (or closest Google Fonts alternatives), signature interactions like live tickers and sparklines, and style-appropriate artifacts. Components are small (150-300 lines of TSX), making them readable and modifiable. The author argues such recipes solve the 'last mile from vague to specific' when prompting AI design tools.

Have you ever noticed why some websites are instantly recognizable as Stripe, and others as Aesop? It's not the logo—it's the breathing rhythm of the page, the contrast of font weights, the density of whitespace. Together, these form the design world's "dialects."

Today, easy-learn-ai added a new skill demo site called Web Design Engineer. It does something simple but ambitious: it turns 25 classic design styles into complete pages that run, respond to clicks, and scroll.

25 Recipes, 7 Schools

These aren't randomly thrown together. The 25 recipes are organized into 7 schools:

| School | Representative Styles | |---|---| | Editorial / Minimalist | Apple HIG, Muji, Aesop, Dieter Rams, Monocle | | Information Architecture | Pentagram, Vignelli Swiss style, Bloomberg Terminal, Tufte data-ink, NYT Daily | | Modern Tool / SaaS | Linear, Vercel, Raycast, Notion (pre-AI) | | Motion / Experimental | Field.io, Active Theory, Resn narrative | | Brutalist / Raw | Are.na, Bloomberg Businessweek, Balenciaga | | Warm Humanist | Mailchimp Freddie, Stripe Press, Headspace | | Specialty / Genre | Y2K retro-futurism, Mid-Century Modern |

Each recipe isn't just "a different color scheme." Linear uses hairline borders and ultra-thin font weights; Bloomberg Terminal is an amber-on-navy six-panel trading workstation; Aesop features lowercase labels and a solitary herb sprig. Every page stays completely faithful to the DNA of the original style.

Why This Is Interesting

For AI, the biggest pain point in design prompts isn't "not good enough"—it's the lack of a concrete reference frame. Say "make a nice landing page" and the AI gives you the 2024 internet average face. But say "follow Linear's recipe," and it knows: ah, narrow borders, generous whitespace, SF Mono for numbers, no shadows.

This gallery solves the last mile from vague to specific.

Not Just a Showcase—It's a Recipe Book

Each recipe page includes:

A real color palette extracted from the recipe spec (not the default Inter + #3b82f6)
Actual typefaces (or the closest Google Fonts substitutes)
Each style's signature moves (Bloomberg's live tickers, Aesop's lowercase labels, Tufte's sparklines)
Scenario-appropriate artifacts suited to that style (not a generic landing page from a unified template)

The components are small (150–300 lines of TSX)—you can read them, modify them, and learn the DNA-level design decisions.

---

The feeling this gives me: AI tools are increasingly like a design apprentice—it can learn any style, but only if you give it a recipe book thick enough. This project is writing exactly that book.