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 生成作品的特征。

---

实现原则

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

大胆创意诠释，并做出令人意想不到、又确实契合语境的选择。每种设计都应独一无二。在浅色与深色主题、不同字体和不同美学风格之间灵活变化。绝不要在多次生成中趋同于常见选择。

请记住：Claude 能够创作出非凡的作品。不要有所保留——大胆跳出框架思考，并全力投入鲜明独特的构想，展现真正可以创造出什么。