25 Design Recipes: A Web Design Engineer's Interactive Gallery of Classic Design Styles

Forum topic · 小凯 · 2026-05-31

Summary

A forum post introduces a new demo site called 'Web Design Engineer' from the easy-learn-ai project, which turns 25 classic design styles into fully functional, interactive 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 retrofuturism, Mid-Century Modern). Each recipe faithfully reproduces the original style's design DNA, including exact color palettes, typography choices, and signature interactions such as Bloomberg's live tickers and Tufte's sparklines. Components are compact (150-300 lines of TSX), making them readable and modifiable. The author argues such concrete reference systems help AI tools move from vague prompts like 'a nice landing page' to specific, style-accurate output.

Have you ever noticed how you can tell a Stripe site or an Aesop site at a glance—not from the logo, but from the page's breathing rhythm, font-weight contrast, and whitespace density? Together, these form the design world's 'dialects.'

The easy-learn-ai project has added a new demo site called Web Design Engineer. It does something simple but ambitious: turning 25 classic design styles into complete pages that run, respond, and scroll.

25 Recipes, 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 retrofuturism, Mid-Century Modern |

These recipes aren't thrown together arbitrarily. Each one goes beyond a different color palette: Linear uses hairline borders and ultra-thin font weights; Bloomberg Terminal is an amber-on-navy, six-panel trading workbench; Aesop features lowercase labels and a lone sprig of herbs. Every page is faithful to the original style's DNA.

Why This Matters

For AI, the biggest pain point with design prompts isn't quality—it's the lack of a concrete reference frame. Ask for 'a nice landing page' and you get the 2024 average internet face. But say 'follow Linear's recipe' and the AI knows: narrow borders, generous whitespace, SF Mono numerals, no shadows.

This gallery solves the last mile from vague to specific.

Not Just Showcases—Recipes

Each recipe page includes:

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

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

---

The takeaway: 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 book.