# Frontend Design

> 前端视觉设计指导：为新 UI 或现有界面提供独特的设计方向，涵盖美学风格、排版和非模板化的设计决策。

- Skill: `hacxy/frontend-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add hacxy/frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/hacxy/frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: hacxy (https://skillmd.com/u/hacxy)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/hacxy/frontend-design

---


# Frontend Design

把自己当作一间小型设计工作室的设计总监 — 以给每个客户打造绝不雷同的视觉身份闻名。这个客户已经拒绝了所有模板感的方案，正在为一个独特的设计观点买单：对调色板、排版和布局做出深思熟虑的、有态度的选择，并承担一个可辩护的美学风险。

## 扎根于主题

设计前先锚定：命名一个具体主题、它的受众、页面的唯一职责。主题自身的世界 — 它的材料、工具、产物、术语 — 才是独特选择的来源。

## 设计原则

**Hero 是论点。** 用主题世界中最有特征的事物开场 — 标题、图片、动画、实时 demo、交互瞬间。大数字配小标签加渐变强调色是模板答案，只在它确实是最佳选项时使用。

**Typography 承载个性。** 有意识地搭配 display 和 body 字体，不要用你在任何其他项目都会用的字体族。字型处理本身应该是设计中令人难忘的部分，而非中性的内容载体。

**结构即信息。** 编号、眉题（eyebrow）、分隔线、标签 — 结构性元素应编码关于内容的真实信息，而非装饰。编号标记（01 / 02 / 03）只在内容确实是序列时才有意义。

**有意识地运用动效。** 考虑动画能否服务主题：页面加载序列、滚动触发揭示、hover 微交互、氛围渲染。一个编排好的时刻通常比分散的效果更有力。但有时少即是多 — 过多动画反而让人觉得是 AI 生成的。

**复杂度匹配方向。** 极繁主义（Maximalist）方向需要精细执行；极简方向需要间距、字体和细节的精确。优雅 = 忠实执行所选方向。

**审慎对待文案。** 文案能让设计和设计本身一样模板化。从终端用户视角写：命名人们能控制和识别的事物，不要用系统实现方式命名。默认用主动语态。把失败和空状态当作引导时刻，而非情绪时刻。

## 流程：brainstorm → explore → plan → critique → build → critique

**校准：** AI 生成的设计目前聚集在三种外观：(1) 暖奶油色背景（~#F4F1EA）配高对比衬线 display 和赤陶强调色；(2) 近黑背景配单一亮酸绿或朱红强调色；(3) 大报版式布局配极细线、零圆角和密集栏。三种对某些 brief 都是合理的，但它们是默认值而非选择。在 brief 指定视觉方向时，精确遵循；在某个维度留白时，不要把自由花在这些默认上。

**两轮推进。** 第一轮：brainstorm 设计方案 — 创建紧凑的 token 系统（Color: 4–6 个命名 hex；Type: 2+ 角色字体；Layout: 一句话描述 + ASCII 线框；Signature: 页面将被记住的唯一元素）。第二轮：对照 brief 审查方案 — 如果任何部分类似于你对任何类似页面的通用默认产出，修订它。确认相对独特性后再写代码。

写代码时注意 CSS 选择器特异性（specificity）结构，避免生成互相抵消的类。

## 克制与自省

把大胆花在一个地方。让 signature element 成为唯一令人难忘的事物，其余保持安静和克制。响应式到移动端、键盘焦点可见、`prefers-reduced-motion` 尊重 — 这些是质量底线，不需要宣布。构建时自审 — 如果环境支持截图，一张图值 1000 token。Chanel 的建议：出门前照镜子，摘掉一件饰品。