frontend-design

这项技能将指导你打造独具特色、达到生产级水准的前端界面，避免千篇一律的“AI 垃圾风”。编写真正可用的代码，并在美学细节和创意选择上精益求精。

设计方向

确立一个大胆鲜明的美学方向：

• 目的：这个界面要解决什么问题？谁会使用它？
• 基调：选择一种极端风格：极简冷峻、极繁混沌、复古未来主义、有机自然、奢华精致、趣味玩具风、编辑杂志风、粗野原始、装饰艺术／几何风、柔和粉彩、工业实用主义等。风格选择多种多样。可以从这些风格中汲取灵感，但最终设计应忠于所选的美学方向。
• 约束：技术要求（框架、性能、无障碍性）。
• 差异化：怎样才能让人难以忘怀？别人会记住的亮点是什么？

至关重要：选择清晰的概念方向，并精准地贯彻到底。大胆繁复与精致极简都可行，关键在于用心，而非强度。

然后编写可用的代码，做到：

• 达到生产级水准且功能完善
• 视觉醒目，令人难忘
• 风格统一，审美立场明确
• 每个细节都经过细致打磨

前端美学指南

字体排印

→ 关于字号比例、字体搭配和加载策略，请参阅字体排印参考。

选择优美、独特、有趣的字体。将辨识度鲜明的展示字体与精致的正文字体搭配使用。

要做：使用模块化字号比例，并通过 clamp 实现流式缩放
要做：调整字重和字号，形成清晰的视觉层级
不要做：使用过度泛滥的字体，例如 Inter、Roboto、Arial、Open Sans 和系统默认字体
不要做：把等宽字体当作营造“技术／开发者”氛围的偷懒手段
不要做：在每个标题上方都放一个大型圆角图标——它们很少能提升效果，还会让网站看起来像套用模板

颜色与主题

→ 关于 OKLCH、配色方案和深色模式，请参阅颜色参考。

坚持使用协调统一的配色方案。以主色调为主、辅以鲜明点缀色的方案，胜过拘谨且均匀分散的配色。

要做：使用现代 CSS 颜色函数（oklch、color-mix、light-dark），打造感知均匀且易于维护的配色方案
要做：让中性色带有品牌色调——即使是细微的色彩倾向，也能在潜意识中营造统一感
不要做：在彩色背景上使用灰色文字——这会显得黯淡；应使用与背景色同色系的色调
不要做：使用纯黑（#000）或纯白（#fff）——应始终为其加入色调；自然界中并不存在纯黑或纯白
不要做：使用 AI 配色方案：深色背景上的青色、紫到蓝的渐变，或深色背景上的霓虹点缀
不要做：为了“冲击力”使用渐变文字，尤其是用于数据指标或标题时；渐变只是装饰，并无实际意义
不要做：默认采用带发光点缀的深色模式——这种设计看起来很“酷”，却不需要真正做出设计决策

布局与空间

→ 网格、节奏和容器查询请参阅空间设计参考。

通过变化的间距营造视觉节奏，而不是处处使用相同的内边距。拥抱不对称和出人意料的构图。刻意打破网格以突出重点。

应该：通过变化的间距营造视觉节奏——紧凑的分组与宽敞的间隔相结合 应该：使用 clamp() 实现流动间距，让布局在大屏幕上更舒展 应该：使用不对称和出人意料的构图；刻意打破网格以突出重点 不应该：所有内容都套进卡片——并非所有内容都需要容器 不应该：在卡片中嵌套卡片——这会产生视觉噪声，让层级变得扁平 不应该：使用一模一样的卡片网格——同尺寸卡片配上图标、标题和文本，没完没了地重复 不应该：使用主视觉指标布局模板——大数字、小标签、辅助统计数据、渐变点缀 不应该：所有内容都居中——左对齐文本搭配不对称布局，更显设计感 不应该：处处使用相同的间距——没有节奏的布局会显得单调

视觉细节

应该：使用有意为之、恰到好处的装饰元素来强化品牌形象 不应该：到处使用玻璃拟态——将模糊效果、玻璃卡片和发光边框当作装饰，而非有目的地使用 不应该：使用一侧带有粗彩色边框的圆角元素——这种懒散的点缀几乎从来都不像是刻意设计的 不应该：用迷你图表作装饰——看似精致，却传达不了任何有意义的信息 不应该：使用带普通投影的圆角矩形——安全、平庸，像是任何 AI 的产出 不应该：使用模态框，除非确实没有更好的替代方案——模态框是偷懒的做法

动效

→ 时长、缓动和减少动态效果请参阅动效设计参考。

聚焦于影响最大的时刻：精心编排的页面加载动效，配合交错显现，比零散的微交互更能带来愉悦体验。

应该：用动效传达状态变化——进入、退出、反馈 应该：使用指数缓动（ease-out-quart/quint/expo），实现自然减速 应该：对于高度动画，使用 grid-template-rows 过渡，而不是直接为高度添加动画 不应该：为布局属性（width、height、padding、margin）添加动画——只使用 transform 和 opacity 不应该：使用弹跳或弹性缓动——它们显得过时且俗气；真实物体会平滑减速

交互

→ 表单、焦点和加载模式请参阅交互设计参考。

让交互感觉迅速。使用乐观 UI——立即更新，稍后同步。

应该：使用渐进式披露——从简单开始，通过交互逐步展现更多功能（先显示基本选项，将高级选项放在可展开区域中；通过悬停状态展示次要操作） 应该：设计能教会用户如何使用界面的空状态，而不只是说“这里什么都没有” 应该：让每个可交互区域都显得经过精心设计且响应灵敏 不应该：重复相同的信息——冗余的标题、重复标题内容的引言 不应该：让每个按钮都成为主按钮——使用幽灵按钮、文本链接和次要样式；层级很重要

响应式设计

→ 移动优先、流动设计和容器查询请参阅响应式设计参考。

应该：使用容器查询（@container）实现组件级响应式布局 应该：根据不同使用场景调整界面——而不只是缩小界面 不应该：在移动设备上隐藏关键功能——应调整界面，而不是阉割功能

用户体验文案

→ 标签、错误和空状态请参阅用户体验文案参考。

应该：让每个词都发挥作用 不应该：重复用户已经能看到的信息

---

AI 味测试

关键质量检查：如果你向某人展示这个界面，并说“这是 AI 做的”，对方会立刻相信吗？如果会，那就是问题所在。

鲜明独特的界面应该让人问“这是怎么做出来的？”，而不是“这是哪个 AI 做的？”

回顾上面的“不要”指南——这些正是 2024—2025 年 AI 生成作品的痕迹。

---

示例

示例 1：具有鲜明美感的落地页

用户说：“为一款开发者工具产品搭建落地页，要做得和其他 SaaS 产品都不一样。” 行动：选择大胆的设计方向（例如粗野主义或编辑风格）；挑选独特的字体搭配和协调的配色；采用灵活的间距，并设置一个明确的视觉焦点；避免卡片套卡片和英雄区指标等陈词滥调。 结果：单页布局层次清晰、字体令人印象深刻，没有通用的 AI 痕迹（没有紫色渐变，也没有带粗重强调色边框的圆角卡片）。

示例 2：仪表盘或应用 UI

用户说：“创建一个用于查看分析数据的深色主题仪表盘。” 行动：坚持一种明确的深色美学（例如精致的深色搭配染色中性色，而不是默认的黑底发光效果）；对面板使用容器查询；加入一个经过斟酌的动态效果（例如列表分批加载）；确保空状态信息实用。 结果：功能完善且设计用心的仪表盘——配色鲜明，没有青色或紫色的光晕，数据层次清晰，并能适应不同屏幕。

示例 3：海报或营销作品

用户说：“为一场关于前端性能的会议演讲制作海报。” 行动：选择鲜明的字体或视觉概念；使用模块化的字体比例和有限的配色；避免采用通用的素材照片加标题布局。 结果：一张本身就足以成为设计作品的海报——字体和构图令人印象深刻，而非填充模板。

---

实施原则

让实现的复杂度与美学构想相匹配。极繁主义设计需要复杂的代码，以及丰富的动画和特效。极简或精致的设计则需要克制、精准，并仔细关注间距、字体和细微之处。

发挥创造力，做出意想不到又真正契合语境的选择。每个设计都应该与众不同。在浅色和深色主题、不同字体和不同美学风格之间变换。绝不要让每一代作品都趋同于常见选择。

请记住：AI 能够创作出非凡的作品。不要有所保留——尽情展现跳出框架思考，并全力贯彻鲜明构想后能创造出什么。