design-taste

design-taste

适用于落地页、作品集、营销网站和产品 UI 生成。 每条规则都要结合上下文：先阅读需求，再采用适合的规则。切勿不加判断地全部套用。

---

0. 首先读懂情境

大模型生成的内容之所以显得千篇一律，是因为模型没有阅读需求，就直接套用默认美学。在编写任何代码之前，先判断：

1. 页面类型 — 落地页（SaaS／消费级／代理机构／活动）、作品集（设计师／开发者／工作室）、产品页、改版。
2. 风格关键词 — “极简”“温暖”“高端”“活泼”“重视信任”“编辑风”“深色”“代理机构”。这些关键词决定方向。
3. 受众 — 美学风格应由受众决定，而非你的个人喜好。政府服务不适合使用动感排版。
4. 现有品牌 — Logo、颜色、字体、摄影风格。改版应以这些为起点；它们是输入条件，不是可选项。

生成内容前，先用一句话说明你的设计判断，让用户了解你的思路：

• “我的判断是：面向技术买家的 B2B SaaS 落地页，采用 Linear 风格的极简设计、克制的动效，以及单色加一种强调色。”
• “我的判断是：面向招聘经理的独立设计师作品集，采用编辑印刷风格、大字号衬线字体和不对称网格。”

如果设计方向确实模糊，只问一个问题。否则就直接继续，不要套用默认方案。

1. 禁用清单（大模型默认套路）

这些都是 AI 生成设计的典型特征。请有意识地避免：

• 靛蓝到紫色（或蓝色到紫色）的渐变 Hero 背景和渐变文字。
• 居中 Hero，搭配胶囊徽标、超大粗体标题、两个按钮和产品截图。
• 默认使用“三张同等大小的功能卡片”作为版块布局。
• 用 Emoji 作为功能图标（📊🚀⚡）。图标必须手绘或使用文字排版，不能用 Emoji。
• 到处使用玻璃拟态（磨砂 backdrop-filter 卡片）。
• 自动使用 Inter + slate-900 配色。
• 所有元素都用 rounded-2xl；只靠阴影营造层次。
• 在页面中堆叠完全相同、对称的版块；每个页面都用同一套结构。
• 不顾具体情境，在每个页面都放一个紫色的“免费开始”按钮。
• 嵌套 6 层以上的卡片——卡片里套卡片，卡片里再套卡片。

如果设计判断没有给出使用这些设计的理由，就不要使用。

2. 字体排版（价值最高的设计功力）

大多数“高端”评价都来自字体。优先把质量投入到这里。

• 搭配出对比。 衬线展示字体搭配简洁无衬线字体，或哥特式展示字体搭配等宽标签。不要全篇只用一种中性无衬线字体。除非品牌本身已使用 Inter，否则不要默认使用它。
• 展示字体的比例就是你的标识。 Hero 标题要足够大（clamp(3rem, 8vw, 7rem) 范围），行高要紧凑（0.95–1.05）。字号偏小的粗体文字会显得像“模板”。
• 标签和元数据使用等宽字体或小型大写字母，增加字距（0.08–0.15em），并使用大写字母。章节编号（“01”“02”）也采用同样的风格。
• 正文行长为 45–75 个字符。 正文字号为 16–18px，行高宽裕，为 1.55–1.7。
• 每个版块只使用一套字号层级。 不要在同一个视口中展示 6 种字号。
• 避免段落换行后达到 6 行：每段最多约 3 行，或者加宽文本列。

3. 颜色（克制就是信号）

• 从一种中性色加一种强调色开始。 暖纸色／墨色，或近黑色／近白色。两种中性色加一种强调色就能构成完整配色。三种强调色就成了彩虹。
• 不要默认使用深海军蓝背景，除非设计判断是深色科技风。深色不等于高端。
• 有目的地使用颜色： 强调色用于突出一个操作、一项数据或一个重点。其他内容保持中性。
• 正文文本对比度 ≥ 4.5:1。 切勿在低不透明度的靛蓝色背景上使用白色文字。
• 使用色调层次——同一种中性色的不同色调——而不是添加新颜色。

4. 布局与构图（不对称更显设计感）

• 采用非对称网格：将内容栏偏离页面中心（7/5 分栏、两列各占 6/6 并在中间加分隔线，或左侧宽栏搭配右侧窄索引栏）。
• **索引：**数字、分节线（顶部和底部的细线）以及清晰可见的网格结构，能让页面更具艺术指导感。
• 每页只用一套有意设计的网格：所有元素都与之对齐。细线（1px rgba(ink, 0.1–0.2)）是低成本营造高级感的办法。
• 留白是设计工具：留出宽裕的边距，让首屏主视觉四周有呼吸空间，各分节间距 ≥ 96–160px。
• 不要到处都用等高的三卡片并排布局；调整各分节的节奏（通栏、分栏、带索引的列表、引言、表格）。

5. 层次与表面（靠结构，不靠阴影）

• 通过结构营造层次：细线、内嵌面板、错位区块、色调背景。只有悬浮元素才使用阴影，而且要柔和（模糊度 ≥ 24px，不透明度低）。
• 按钮和 CTA 不要使用渐变表面。纯色、高饱和度的强调色表现更好，也更美观。
• 默认不要把带浏览器框架的截图模型作为首屏主视觉——指标表、编辑风格的栏位、放大的引用文字，甚至字体本身，往往更有表现力。
• 如果设计需求没有提供图像，就用结构（分隔线、字体、色块）来设计，而不是用图库渐变或占位照片。

6. 动效（克制胜过炫技）

• 默认保持简约。只设计一个有意为之的过渡效果（导航栏显现、首屏内容入场、滚动触发分节淡入）。
• 不要使用无限循环动画，不要让每个元素都带弹跳入场效果，也不要使用漂浮的渐变光球。
• 缓动：采用类似 cubic-bezier(0.22, 1, 0.36, 1) 的悠长曲线，持续 300–600ms。入场利落，出场沉稳。
• 如果页面风格活泼，就把动效预算花在这上面，而不是用色彩。

7. 发布前检查清单（标记“完成”前逐项检查）

像陌生人一样审视自己的输出。出现以下任一情况，就判定页面不合格：

• 不使用这项技能，只对同一个 Agent 输入“落地页”，也能做出这样的页面（诚实面对这一点）。
• 首屏是居中的徽章 + 标题 + 两个按钮 + 截图。
• 使用了表情符号作为 UI 元素。
• 出于模板惯性，连续出现三个相同的卡片。
• 字体只有一种中性的无衬线字体，缺少展示字体的对比。
• 承载含义的颜色超过约 2 种。
• 正文行数超过约 6 行，或者内容栏占满整页宽度。
• 每个视口中，强调色出现超过约 4 次（否则它就无法再指向任何重点）。
• 删除某个分节后，设计理念依然毫无损失。

如果有任何一项勾选，就重做对应分节。一个明确体现设计意图的页面，胜过精致的模板。

---

发布前，先用这份清单检验自己的品味。这就是以技能形式呈现的清单。