前端设计 是做什么的？
通过大胆的创意选择，打造令人难忘、与平庸的 AI 生成审美截然不同的前端界面。
另请参阅： 基础排版、色彩、间距请参考
ui-design；CSS 模式请参考web-design。
安装
OpenClaw / Moltbot / Clawbot
npx clawhub@latest install frontend-design
该技能的功能
指导创建视觉上独特的 Web 界面，通过以下方式实现：
- 在编码前确立大胆的美学方向
- 有意识地选择字体、色彩和空间
- 实现令人愉悦的动效和微交互
- 避免标记 AI 生成 UI 的可预测模式
何时使用
- 构建新组件、页面或 Web 应用程序时
- 创建落地页、营销网站或产品 UI 时
- 重新设计界面以使其更令人难忘
- 任何视觉影响至关重要的前端工作
关键词
前端设计, Web UI, UI 设计, 落地页, 创意 UI, Web 美学, 排版, 视觉设计, 动效设计, 独特界面
设计思维过程
在编写代码之前，先承诺一个美学方向：
1. 理解上下文
- 目的：这个界面解决什么问题？
- 受众：谁会使用它，他们期望什么？
- 约束条件：框架、性能、可访问性要求
2. 选择一个大胆的方向
选择一个极端的美学方向 —— 平庸是会被遗忘的：
| 方向 | 特征 |
|---|---|
| 极端极简 | 冷峻、必要、毫无冗余 |
| 繁复混沌 | 密集、层次丰富、有意为之的压倒感 |
| 复古未来 | 融合复古美学与现代技术 |
| 有机/自然 | 柔和、流动、源于自然 |
| 奢华/雅致 | 高端材质、微妙优雅 |
| 俏皮/玩具风 | 有趣、亲和、色彩明亮 |
| 编辑/杂志风 | 以字体为先、基于网格 |
| 粗野/原生 | 暴露结构、反设计 |
| 装饰/几何 | 大胆形状、对称、装饰 |
| 工业/实用 | 功能优先、坚固稳健 |
3. 确定令人印象深刻的元素
有人会记住这个界面的哪一件事？对此做出承诺。
美学指南
排版
绝不使用通用字体：
- Arial, Helvetica, system-ui
- Inter, Roboto（除非有非常明确的意图）
务必选择有特色的字体：
- 将富有个性的展示字体与精致的正文字体搭配
- 探索：Space Grotesk, Clash Display, Cabinet Grotesk, Satoshi, General Sans, Instrument Serif, Fraunces, Newsreader
/* 示例搭配 */
--font-display: 'Clash Display', sans-serif;
--font-body: 'Satoshi', sans-serif;
色彩与主题
- 承诺使用协调的调色板 —— 不要用安全的颜色来回避
- 主色 + 强调色 比颜色均匀分布效果更好
- 使用 CSS 变量 以确保一致性
- 避免白色背景上的紫色渐变（“AI 默认”）
:root {
--color-bg: #0a0a0a;
--color-surface: #141414;
--color-text: #fafafa;
--color-accent: #ff4d00;
--color-muted: #666666;
}
空间构图
打破常规：
- 不对称胜过完美平衡
- 有意识地重叠元素
- 对角线流动或非传统布局
- 大量的留白空间或有控制的密度 —— 而不是中庸
- 打破网格的元素以吸引注意力
动效与交互
专注于高影响力的时刻：
- 页面加载：使用
animation-delay实现错位渐变显示 - 滚动触发的动画带来惊喜
- 悬停状态富有特色
- 对于 HTML，优先使用 CSS 动画；对于 React，优先使用 Motion 库
/* 错位入场 */
.card { animation: fadeUp 0.6s ease-out backwards; }
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
背景与氛围
创造深度和氛围：
- 渐变网格和多点渐变
- 噪点纹理和颗粒叠加
- 几何图案或微妙网格
- 分层透明度
- 戏剧性阴影或完全平坦
- 自定义光标用于交互元素
实现原则
使复杂度与愿景相匹配
- 繁复愿景 → 包含大量动画的精巧代码
- 极简愿景 → 克制、精准、完美的间距
- 优雅 = 出色地执行愿景，而不是添加更多东西
在不同生成之间做出变化
绝不收敛于同一模式：
- 交替使用浅色/深色主题
- 每次使用不同的字体族
- 探索不同的美学方向
- 每个设计都应有独特的感受
绝对不要做
- 绝不使用通用字体族（Inter, Roboto, Arial, 系统字体）
- 绝不使用白色背景上的紫色渐变 —— 这属于“AI 审美”
- 绝不使用可预测、千篇一律的布局
- 绝不跳过设计思维阶段 —— 先理解再构建
- 绝不回避安全的、中庸的美学 —— 对一个方向做出承诺
- 绝不要忘记独特的设计需要独特的代码
- 绝不在不同生成之间收敛于相同模式 —— 有意地做出变化
- 绝不无目的地增加复杂性 —— 极简主义和繁复主义都需要意图