25 Design Recipes for a Web Design Engineer: AI Learns Iconic Design Styles

Forum topic · 小凯 · 2026-05-31

Summary

A Chinese forum post introduces a new demo gallery on easy-learn-ai called Web Design Engineer, which recreates 25 classic design styles as fully interactive, runnable 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, 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 a style's DNA—real palettes, matching fonts, and signature moves like Bloomberg tickers, Aesop's lowercase labels, and Tufte sparklines—rather than generic templates. Components are small (150–300 lines of TSX), making them readable and modifiable. The author argues this addresses AI's core weakness in design prompts: the lack of concrete reference frames, turning vague instructions like make a nice landing page into specific recipes.

The author opens with an observation: some sites are instantly recognizable as Stripe, others as Aesop—not because of logos, but because of the page's breathing rhythm, font-weight contrast, and whitespace density. Together these form a design "dialect."

The post announces a new demo site on easy-learn-ai called Web Design Engineer, which takes a simple but ambitious approach: turning 25 classic design styles into complete, runnable, clickable, scrollable pages.

25 Recipes, 7 Schools

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 goes far beyond 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 single lonely sprig of herbs. Every page is fully faithful to the original style's DNA.

Why This Matters

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

This gallery solves the last mile from vague to concrete.

Not Just a Showcase — 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 substitute)
Each style's signature moves (Bloomberg's live tickers, Aesop's lowercase lettering, Tufte's sparklines)
Scenario-appropriate outputs fitting the style (not a uniform generic landing-page template)

Components are small (150–300 lines of TSX)—readable, modifiable, and instructive at the DNA level of design decisions.

---

The author's closing thought: AI tools are increasingly like a design apprentice—capable of learning any style, but only if you hand it a thick enough recipe book. This project is writing that recipe book.