设计方法论
不是宣言,是判断“好网页长什么样”的清单。一篇解决一类问题。
字体
选字、配对、识别字体。中文免费商用字体优先。
配色
生成、调和、验证配色。AI 配色优先看对比度。
图像素材
配图、图标、矢量素材。免费商用可查授权。
组件与动效
从具体交互寻找参考,再按项目内容与视觉风格调整。
灵感平台
每日精选、评审、归档。找标杆先来这里。
标杆产品
SaaS / 开发工具的官网本身就是设计课。产品 UI 即营销页。
消费品牌
摄影、留白、场景化陈列。大品牌的视觉表达范式。
AI 产品
AI 产品的界面范式,对话与生成的交互呈现。
字体排印
看字——字母结构、排版韵律、字体组合。设计的第一层是“字”。

排版领域公认的“圣经”。从字母结构、字距、行高、页边距到页面比例,把字体排印讲成一套有历史渊源、有审美判断的技艺。网页排版的每一个视觉决策——衬线还是无衬线、行高多少、留白怎么留——都能追溯到这本书里的排版传统。

在线免费,网页排版实操指南。字体选择、行距、对比度的具体建议,直接对应 CSS 里的 font-size、line-height、color 设置。面向写作和网页场景,给的是一照做就见效的参数,不是理论。

字体选择与组合的系统方法论。从字体的历史、分类(古体/过渡体/现代体/粗衬线/无衬线)到搭配规则,讲清“为什么这两个字体放在一起好看”——靠的是对比与同族的搭配逻辑,不是凭感觉。

从字母结构一路讲到网格系统,适合设计师与前端工程师共读。把“字体怎么选、怎么排、怎么搭网格”讲成一套可操作的方法:字体分类(人文体/过渡体/现代体)、字距、行距、层次、栅格。
界面与布局
排布——界面元素怎么摆、栅格怎么分。设计的第一层之上是“结构”。

从程序员视角讲界面设计,实用至上。间距、配色、层级、组件状态——不教设计理论,直接给“照着改就能好看”的具体手法。作者是 Tailwind CSS 作者,全书思路与原子化 CSS 一脉相承。

网格系统的开山之作,理解 layout 底层逻辑的必读。用数学思维构建视觉秩序:栅格如何切分页面、留白如何参与节奏、多页之间如何保持一致。网页的栅格系统、响应式布局、留白节奏都能追溯到这本书。


























