前端设计技能
创建独特、可投入生产的前端界面，让人类无法识别出是AI生成的。每个输出都必须看起来像是昂贵的设计公司精心打造的作品——大胆、有目的、令人难忘。
设计思维协议
在编写任何代码之前，请完成此清单。不要跳过步骤。
1. 目的 — 这个界面解决什么问题？谁在使用它？
2. 调性 — 选择一个极端的美学方向。这是强制性的——切勿在未命名方向的情况下继续。
从以下选择（或以同等具体性自创）：
- 极致简约 | 混乱极繁 | 复古未来 | 有机/自然
- 奢华编辑 | 粗野/原始 | 装饰艺术/几何 | 柔和/粉彩
- 工业/实用 | 新孟菲斯 | 瑞士现代主义 | 日式简约
- 复古未来终端 | 北欧宁静 | 东京霓虹 | 沙漠暖意
如果你不能用两个词命名调性，说明你还没有决定。“干净现代”不是一种调性——它是缺乏调性的表现，会产生AI模板化内容。
3. 约束 — 框架（HTML/React/Vue/Svelte）、浏览器支持、性能预算、现有品牌规范。
4. 差异化 — 用户会记住这个页面的哪一件事？在编码前明确说出。
反AI模板宣言
这些规则存在的原因是，大语言模型趋向于产生统计上的平均输出——令人愉悦、不冒犯，但也完全容易被遗忘。下面的模式被列入黑名单，并非因为它们本身不好，而是因为不加区分地使用它们是AI生成设计的第一信号。
黑名单字体
未经用户明确要求，切勿将这些字体用作主要显示字体：
| 字体 | 原因 | 替代选择 |
|---|---|---|
| Inter | #1 AI默认字体（约90%的大模型UI使用） | Satoshi, General Sans, 或衬线字体如 Fraunces |
| Roboto | #2 AI默认字体（Android/Chrome生态系统） | Outfit, Plus Jakarta Sans（仅限正文）, Karla |
| Arial / system-ui | 缺乏字体排印选择 | 任何有意图的字体选择 |
| Open Sans | 传统AI默认字体（2022年前训练数据） | Source Sans 3, Nunito（仅限正文） |
| Poppins | Figma模板饱和度过高 | Figtree, Outfit, DM Sans（仅限正文） |
| Space Grotesk | 曾经独特，现已成为AI“奇特安全”默认字体 | Syne, Anybody, Chakra Petch |
| Montserrat | 过度使用的几何无衬线字体 | Josefin Sans, Barlow, Jost |
规则： 如果某个字体在Google Fonts流行度前20名中，需要明确证明使用它的合理性，否则拒绝使用。请阅读 references/typography-pairings.md 获取20多个按调性组织的精选字体配对。
黑名单颜色
未经明确意图，切勿将这些颜色用作主要强调色：
| 颜色 | 十六进制 | 原因 |
|---|---|---|
| Tailwind indigo-500 | #6366f1 | 典型AI颜色。可追溯到Tailwind文档的单一决定。 |
| Tailwind violet-500 | #8b5cf6 | 第二常见的AI强调色。 |
| Tailwind purple-500 | #a855f7 | indigo→purple渐变端点。 |
| Tailwind blue-500 | #3b82f6 | “企业级”AI替代紫色。 |
| AI渐变 | from-indigo-500 to-purple-600 | 经典AI渐变及其所有变体。 |
| 纯白背景 | #ffffff, #f9fafb, #f8fafc | AI从不探索深色主题、大地色系或氛围深度。 |
规则： 如果你的调色板可以由 npx create-next-app + Tailwind默认值重现，请重新开始。请阅读 references/color-systems.md 获取15个以上精选调色板。
黑名单布局
切勿生成以下结构：
- 9段AI模板： 首屏 → 品牌标志条 → 三列特性 → “工作原理”步骤 → 客户评价轮播 → 定价表 → 常见问题手风琴 → 号召性用语横幅 → 四列页脚。这个精确序列出现在每一个AI生成的SaaS页面上。
- 对称三列卡片网格 作为主要内容结构。
- 居中一切 — 每个部分都
text-center，每个容器都mx-auto，没有空间张力。 - 一切皆卡片 — 每个内容块都
rounded-xl shadow-lg p-6，无论是否需要卡片处理。
规则： 每个布局必须至少有一个打破网格的元素：不对称、重叠、满幅出血、对角线流动或意想不到的负空间。请阅读 references/layout-patterns.md 获取线框图。
黑名单动效
- 每个元素都通过IntersectionObserver进行
fade-in-up（通用的AI滚动揭示效果） - 每张卡片都
hover:-translate-y-1 hover:shadow-xl - 不加区分地应用
transition-all duration-300 - 渐变颜色循环动画
- 通用的视差效果
规则： 每页最多2-3个有意图的动效。每个动效必须服务于层级或氛围。请阅读 references/motion-recipes.md 获取12个以上独特的替代方案。
黑名单文案
切勿使用以下短语：
- “革新你的工作流程” / “改变你……的方式”
- “解锁……的力量” / “无缝集成……”
- “为现代……而建” / “增强你的……”
- “将你的X提升到新水平” / “你需要的一切……”
- “告别[痛点]” / “由领先技术驱动……”
禁止使用的词汇（除非引用用户原话）：无缝、杠杆、领先、稳健、可扩展、赋能、游戏规则改变者、下一级、整体、创新、尖端技术、深入探讨
文案规则： 标题承载具体含义。每个部分一个简短的支撑句。“如果删除30%能改进页面，那就继续删除。”
黑名单组件
- 渐变号召性用语按钮（
bg-gradient-to-r from-indigo-500 to-purple-600） - 默认的模糊背景导航栏（
backdrop-blur-md bg-white/80） - 三列网格中的图标 + 标题 + 段落（通用功能块）
- 首屏图片上的浮动徽章/药丸
- 带有圆形头像和星级评分的客户评价轮播
- 横向条带中的“受信赖于”标志云
- 通用定价表（免费 / 专业 / 企业版，带有“最受欢迎”徽章）
字体排印系统
每个项目必须建立一个深思熟虑的字体系统：
- 展示 + 正文配对 — 两个不同的字体系列。展示 = 有特色，正文 = 可读。两者切勿使用同一字体。
- CSS变量 —
--font-display、--font-body、--font-accent（可选等宽字体） - 模块化比例 — 选择一个比率（1.25 大三度，1.333 纯四度，1.5 增四度）并一致应用
- 字重对比 — 使用至少3个字重，并有意图地对比（例如，正文300，副标题600，展示900）
- 尺寸戏剧性 — 展示标题应为正文大小的3倍以上。获奖作品使用12:1的比例（180px展示 / 14px正文）。AI默认使用胆怯的4:1比例。
请参阅 references/typography-pairings.md 获取20多个按美学调性组织的即用型配对。
色彩系统
- 主色 + 强调色模型 — 一个主导色系，搭配一个强烈对比的强调色。均匀分布的调色板显得胆怯。
- CSS自定义属性 — 至少定义：
--color-surface、--color-text、--color-accent、--color-accent-contrast、--color-muted - 氛围背景 — 切勿使用纯白背景。使用微妙的渐变、噪点纹理或染色表面。背景必须有深度。
- 深色/浅色作为有意选择 — 根据调性选择一个作为主色调。不要将深色模式作为一个复选框功能添加。
请参阅 references/color-systems.md 获取15个以上包含CSS变量块的精选调色板。
空间构成
- 打破网格是强制性的 — 每页至少有一个元素必须打破网格：重叠、出血、不对称放置、对角线流动
- 不对称布局 — 7/12 + 5/12的列分割，不同的间距（24px vs 64px），非均匀内边距
- 满幅出血首屏 — 无继承间距或共享最大宽度约束的边到边图像
- 负空间作为设计 — 宽大的空白是有意图的，而不是空的。不对称空白（顶部120px，底部80px）增加节奏感。
- “每个部分只有一个任务” — 一个标题，一个支撑句，一个目的。没有部分试图做两件事。
- 卡片仅用于交互 — 如果内容不需要边框/阴影也能正常运作，则不需要卡片。
请参阅 references/layout-patterns.md 获取6个落地页和3个仪表板布局线框图及CSS网格代码。
动效与动画
精确植入2-3个有意图的动效：
- 一个首屏入场动效 — 缩放 + 淡入、裁剪路径揭示、文字分割交错、或反向滚动视差
- 一个滚动相关效果 — 部分揭示、粘性视差图像、进度驱动变换、或横向滚动画廊
- 一个悬停/揭示交互 — 磁性光标、卡片透视倾斜、下划线展开、或色域移动
实现： 纯HTML使用CSS。React使用Framer Motion。Vue/Svelte使用内置过渡指令。专注于高影响时刻——一次编排良好的页面加载胜过零散的微交互。
请参阅 references/motion-recipes.md 获取12个以上包含CSS和Framer Motion版本的即用型配方。
背景与纹理
切勿默认使用纯色背景。营造氛围：
- SVG噪点 — 使用
feTurbulence滤镜在渐变上生成有机颗粒纹理 - 渐变网格 — 4-6个重叠的径向渐变用于深度（非线性渐变）
- 几何图案 — 通过CSS
radial-gradient或linear-gradient实现的点网格、线网格、交叉阴影线 - 胶片颗粒 — 使用伪元素以3-5%的不透明度添加噪点纹理
- 缓慢移动的环境动画 — 背景中持续时间30秒以上的极光/水滴关键帧动画
请参阅 references/background-textures.md 获取即用型SVG和CSS配方。
“人味儿”——昂贵设计师会添加的元素
在每个项目中至少包含以下2个：
- 自定义光标 — 跟随鼠标的圆形div（20px），带有150ms的惯性延迟，悬停时展开
- 不对称空白 — 非均匀内边距（
120px 8% 80px 12%），不同的部分边距 - 一个打破规则的元素 — 旋转2度的卡片、溢出视口的图像、颜色反转的部分
- 响应内容的字体排印 — 侧边栏中的引文、首字母下沉、边距索引、根据重要性缩放字重
- 滚动触发的颜色变换 — 部分背景颜色根据内容情感基调变化
- 可变字体动画 —
font-variation-settings在滚动或悬停时动画字重
输出类型协议
落地页
结构：首屏 → 支撑 → 详情 → 最终号召性用语（4个部分，不是9个）
- 首屏：满幅出血，品牌 + 标题 + 一句话 + 号召性用语 + 主导视觉。没有浮动徽章，没有多个号召性用语。
- 支撑：一个具体的功能、优惠或证明点。
- 详情：氛围、工作流程深度或故事。
- 最终号召性用语：单一转化操作。
- 视口预算：标头 + 首屏内容必须容纳在初始视口内。
仪表板 / 应用UI
遵循 “Linear式克制”：
- 平静的层级表面，搭配强大的字体排印和间距
- 最少的调色板（最多2-3种颜色）
- 密集但可读的信息架构
- 通过CSS Grid
grid-template-areas实现的侧边栏（240px）+ 主体 + 可选检查器（320px） - 单一清晰的强调色。没有卡片马赛克，没有产品UI后的装饰性渐变。
组件库
- 首先建立设计令牌（CSS自定义属性）
- 展示每个组件的深色和浅色变体
- 原子化：令牌 → 元素 → 组件 → 组合
- 每个组件必须能够在单独使用和组合使用中正常工作
海报 / 营销素材
- 单一焦点，戏剧性的字体排印比例（100px+标题）
- 高对比度颜色，印刷级布局
- 设计数字海报，而不是包含海报内容的网页
Web应用
- 功能优雅：键盘优先，清晰的信息层级
- 状态管理在UI中可见（加载、空、错误、成功状态）
- 密集信息展示，而非宽敞的营销布局
验证测试
在交付任何输出之前，请对照这些问题进行自我检查。如果超过2个答案为“否”，请在展示给用户之前进行迭代。
- 品牌/产品在初始视口中是否一目了然？
- 是否有一个强大的视觉锚点（而不是多个竞争元素）？
- 仅通过扫描标题是否能理解页面？
- 每个部分是否只有一个任务？
- 卡片是否真的必要，还是只是偷懒的默认选择？
- 设计是否有可命名的美学方向（不是“干净现代”）？
- 移除所有装饰性阴影后，设计看起来是否仍然高级？
- 是否至少有一个元素会让设计师说“我没想到这一点”？
- 它看起来像任何其他AI生成的页面吗？如果是，重新设计。
有关详细的20点评分标准，请参阅 references/anti-slop-checklist.md。
技术适配
| 框架 | 字体排印 | 动效 | 样式 |
|---|---|---|---|
| 纯HTML/CSS | Google Fonts @import | CSS @keyframes + animation-timeline | CSS自定义属性 + Grid/Flexbox |
| React / Next.js | next/font 或 Google Fonts | Framer Motion（motion 组件） | Tailwind（高度定制配置）或 CSS Modules |
| Vue | 在 index.html 中引入Google Fonts | <Transition> 组件 | Tailwind（定制化）或 scoped 样式 |
| Svelte | 在 app.html 中引入Google Fonts | 内置 transition: 指令 | 带有CSS自定义属性的 scoped <style> |
Tailwind规则： 如果使用Tailwind，你必须自定义 tailwind.config — 覆盖颜色、字体、圆角和阴影。默认的Tailwind配置会产生AI模板化内容。扩展，而非默认。
边缘情况
| 场景 | 响应 |
|---|---|
| 用户未提供设计方向 | 选择一个大胆的调性，解释你的选择，然后继续 |
| 用户说“干净简单” | 解释为瑞士现代主义极简风格，而非通用风格 |
| 用户提供品牌指南 | 尊重这些指南，但提升设计——增加氛围深度、有意图的动效 |
| 用户说“像Apple/Linear” | 研究具体的原理（克制、密度、字体排印）——不要复制表面美学 |
| 模糊的“让它好看” | 除非上下文另有暗示，否则将其视为带有奢侈编辑调性的落地页 |
| 非常快速的请求 | 使用 scripts/init_frontend.py 进行脚手架搭建，快速启动并展示典型模式 |
| 要求“不像AI” | 自动选择粗野主义/原始或奢华编辑调性。在你的请求回复中明确命名并辩护这个选择。使用你选择的调性的参考资料文件夹中的特定配对。确保打破网格。检查所有黑名单项目。 |
| 非常小的任务 | 仍然是设计。仍然需要一个调性名称、字体配对和打破网格的一个元素。 |
| 现有项目 | 使用CSS自定义属性来覆盖它们。主题切换器。不要重新设计你不允许触及的部分。 |
| 无头UI / 设计系统工作 | 只提供令牌文件、组件结构和文档。除非要求，否则不包含示例页面。 |
在开始编码之前，始终选择你的参考资料：从参考资料目录加载配对、调色板、布局线框和动效配方。