frontend-design

此技能将指导你打造独具特色、达到生产级品质的前端界面，避免千篇一律的“AI 垃圾”审美。编写真正可用的代码，并对审美细节和创意选择倾注非凡的关注。

设计方向

选择一个大胆的审美方向：

• 目的：这个界面要解决什么问题？谁会使用它？
• 基调：选择一种极致风格：极简主义、混乱的极繁主义、复古未来主义、有机自然、奢华精致、玩趣玩具感、编辑部／杂志风、粗野原始、装饰艺术／几何、柔和粉彩、工业实用主义等。可供选择的风格丰富多样。可以从这些风格中汲取灵感，但要设计出真正符合所选审美方向的作品。
• 约束：技术要求（框架、性能、无障碍访问）。
• 差异化：有什么让人难以忘怀？人们会记住的关键点是什么？

至关重要：选择清晰的概念方向，并精准地贯彻执行。大胆的极繁主义和精致的极简主义都行得通——关键在于用心，而非强度。

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

• 达到生产级品质且功能完善
• 视觉效果鲜明、令人印象深刻
• 风格统一，审美观点清晰
• 每个细节都经过精心打磨

前端审美指南

字体排印

→ 字体的字号体系、搭配和加载策略，请参阅字体排印参考。

选择美观、独特且引人入胜的字体。将别具特色的展示字体与精致的正文字体搭配使用。

建议：使用配有流体字号（clamp）的模块化字号体系 建议：改变字重和字号，打造清晰的视觉层级 避免：使用过度常见的字体——Inter、Roboto、Arial、Open Sans、系统默认字体 避免：把等宽字体当作表达“技术／开发者”氛围的偷懒捷径 避免：在每个标题上方放置带圆角的大图标——它们鲜少有实际价值，还会让网站看起来像套用模板

色彩与主题

→ 关于 OKLCH、调色板和深色模式，请参阅色彩参考。

选择协调统一的调色板。以主色为主、搭配鲜明点缀色的配色，胜过谨小慎微、均匀分布的调色板。

建议：使用现代 CSS 颜色函数（oklch、color-mix、light-dark），打造感知均匀、易于维护的调色板 建议：让中性色带有品牌色调——哪怕一丝微妙的色彩倾向，也能潜移默化地营造整体协调感 避免：在彩色背景上使用灰色文字——这会显得黯淡；应改用背景色系中的一种色调 避免：使用纯黑（#000）或纯白（#fff）——始终为颜色加入色调；自然界中并不存在纯黑或纯白 避免：使用 AI 配色方案：深色背景上的青色、紫蓝渐变、霓虹点缀色 避免：用渐变文字追求“冲击力”，尤其是指标或标题——这只是装饰，并无实际意义 避免：默认采用带发光点缀的深色模式——这种设计不需要真正做出设计选择，也能显得“很酷”

布局与空间

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

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

DO：通过不同的间距营造视觉节奏——紧凑的分组与宽裕的间隔相结合 DO：使用 clamp() 设置流畅的间距，让布局在大屏幕上更舒展 DO：采用不对称和出人意料的构图；有意打破网格以突出重点 DON'T：不要把所有内容都放进卡片——并非所有内容都需要容器 DON'T：不要在卡片里嵌套卡片——这会造成视觉噪音，让层级变得扁平 DON'T：不要使用样式雷同的卡片网格——反复排列大小相同且包含图标、标题和文本的卡片 DON'T：不要使用主视觉指标布局模板——大数字、小标签、辅助统计数据和渐变点缀 DON'T：不要让所有内容都居中——左对齐文本搭配不对称布局，设计感更强 DON'T：不要到处使用相同的间距——缺少节奏会让布局显得单调

视觉细节

DO：使用经过精心设计、服务明确且能强化品牌形象的装饰元素 DON'T：不要到处使用玻璃拟态——将模糊效果、玻璃卡片和发光边框当作装饰，而非有目的地使用 DON'T：不要使用单侧带有粗彩色边框的圆角元素——这是一种偷懒的点缀，几乎从来都显得缺乏用心 DON'T：不要把迷你图表当作装饰——看似精致，却无法传达任何有意义的信息 DON'T：不要使用带通用投影的圆角矩形——这种做法安全但令人难忘，任何 AI 输出都可能如此 DON'T：除非确实没有更好的替代方案，否则不要使用模态框——使用模态框是偷懒的做法

动效

→ 关于时长、缓动和减少动效，请参阅动效设计参考。

专注于影响显著的时刻：精心编排、带有交错显现效果的页面加载，比零散的微交互更能带来愉悦感。

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

交互

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

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

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

响应式设计

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

DO：使用容器查询（@container）实现组件级响应式设计 DO：根据不同情境调整界面——不要只是缩小它 DON'T：不要在移动设备上隐藏关键功能——应调整界面，而不是阉割它

UX 文案

→ 关于标签、错误和空状态，请参阅UX 文案参考。

DO：确保每个词都有存在的价值 DON'T：不要重复用户已经能看到的信息

---

AI 垃圾测试

关键质量检查：如果你把这个界面给别人看，并说“这是 AI 做的”，对方会立刻相信吗？如果会，问题就在这里。

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

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

---

实现原则

让实现的复杂程度与美学构想相匹配。极繁主义设计需要精心编写的代码，搭配丰富的动画和效果。极简或精致的设计则需要克制、精准，并仔细把控间距、排版和细微之处。

发挥创意，做出出人意料、又真正契合情境的选择。每个设计都应独一无二。在浅色与深色主题、不同字体和不同美学风格之间灵活变化。切勿在不同创作中趋同于常见选择。

请记住：{{model}} 能够创作出非凡的作品。不要有所保留——突破常规思考，并全力投入独特构想，展现真正能创造出的作品。