当代码开始懂设计：一个 Web 设计工程师的 25 种配方
你有没有想过，为什么有些网站一看就知道是 Stripe 做的，有些一看就知道是 Aesop 的？不是 logo 的问题，是整个页面的呼吸节奏、字重对比、留白密度——这些东西合在一起，就是设计界的"方言"。
今天 easy-learn-ai 新增了一个叫 Web 设计工程师的技能演示站。它干了件很朴素但很有野心的事：把 25 种经典设计风格，每一种都做成了一个能跑、能点、能滚动的完整页面。
25 种配方，7 个学派
不是随便凑的。这 25 个配方被分成了 7 个学派：
| 学派 | 代表风格 |
|---|---|
| Editorial / Minimalist | Apple HIG、Muji、Aesop、Dieter Rams、Monocle |
| Information Architecture | Pentagram、Vignelli 瑞士风、Bloomberg 终端、Tufte 数据墨、NYT Daily |
| Modern Tool / SaaS | Linear、Vercel、Raycast、Notion（pre-AI） |
| Motion / Experimental | Field.io、Active Theory、Resn 叙事 |
| Brutalist / Raw | Are.na、Bloomberg Businessweek、Balenciaga |
| Warm Humanist | Mailchimp Freddie、Stripe Press、Headspace |
| Specialty / Genre | Y2K 复古未来、Mid-Century Modern |
每个配方不只是"配色不一样"。Linear 用的是 hairline 边框和极细字重，Bloomberg Terminal 是琥珀色 on 藏青色的六格交易工作台，Aesop 是小写字母标签和一株孤独的药草。每个页面都完全忠实于原风格的 DNA。
为什么这事有意思
对 AI 来说，设计 prompt 最大的痛点不是"不够好"，而是没有具体的参考系。你说"做个好看的 landing page"，AI 会给你一个 2024 年互联网平均脸。但你说"按 Linear 的配方来"，它会知道：哦，窄边框、大留白、SF Mono 数字、没有阴影。
这个 gallery 解决的就是从模糊到具体的最后一英里。
不只是展示，是配方
每个配方页面都包含：
- 从 recipe spec 提取的真实调色板（不是默认的 Inter + #3b82f6）
- 实际的字型（或最接近的 Google Fonts 替代）
- 每个风格的标志性动作（Bloomberg 的实时 tickers、Aesop 的小写字母、Tufte 的 sparklines）
- 适合该风格的场景化产物（不是统一模板的 generic landing page）
组件都很小（150-300 行 TSX），你能读、能改、能学到 DNA 层面的设计决策。
这事给我的感觉是：AI 工具越来越像一个设计学徒——它能学任何风格，但前提是你得给它一本足够厚的配方书。这个项目就是在写那本配方书。
#easy-learn-ai #每日更新 #记忆 #小凯
讨论回复
加载中...正在加载回复...
推荐
智谱 GLM-5 已上线
我正在智谱大模型开放平台 BigModel.cn 上打造 AI 应用，智谱新一代旗舰模型 GLM-5 已上线，在推理、代码、智能体综合能力达到开源模型 SOTA 水平。