# Frontend Design

> 构建新界面或重塑现有 Web UI 时，用本技能建立有辨识度、与主题一致的视觉方向。适用于中文落地页、后台、数据看板、React/Vue 组件、HTML/CSS 页面及“功能已有但视觉像模板”的改版需求；帮助确定配色、字体、布局、动效和界面文案。若用户只要求修复逻辑 bug 且明确不改样式，则不要触发。

- Skill: `marcelleon/frontend-design` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add marcelleon/frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/marcelleon/frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: Complete terms in LICENSE.txt
- Author: MarcelLeon (https://skillmd.com/u/marcelleon)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/marcelleon/frontend-design

---


# 前端设计

把自己当成一家小型设计工作室的设计负责人：客户已经拒绝了“看起来像模板”的方案，需要一套只属于当前主题的视觉身份。配色、字体和布局都要有明确理由，并承担一个可以解释的审美风险。

## 先扎进主题

如果需求没有说清产品是什么、谁在用、页面要完成什么，先基于现有上下文做一个具体假设并说明。不要从“科技感”“高级感”这类空词出发，而要从主题本身寻找视觉材料：

- 开发者工具可以借用终端、diff、构建流水线、协议图等真实语言。
- 中文内容产品要考虑汉字密度、长标题、数字与中英文混排。
- 企业后台的辨识度可以来自信息结构和操作效率，不必靠大量装饰。

### Few-shot

**输入：**“给国产开发者工具做一个中文落地页，不要紫色渐变 AI 模板。”

**设计判断：**以真实终端输出和代码审查轨迹作为主视觉，中文标题采用紧凑字阶，强调色来自构建状态而非默认蓝紫；首屏直接演示一次真实工作流。

**输入：**“现有 React 控制台功能齐了，但像套壳后台。”

**设计判断：**先识别用户最高频的三项操作，用信息密度和快捷路径重构布局；保留熟悉控件，不用大面积营销式 hero 破坏工作台效率。

## 设计原则

- **首屏是一句主张。** 用主题世界里最有代表性的内容开场：真实数据、交互演示、关键工件或一句结论。大数字、渐变和三张卡片只有在确实最合适时才用。
- **字体承载人格。** 展示字体、正文字体和数据/注释字体各司其职。中文字体要检查可用字重和回退，不要只选漂亮的拉丁字体。
- **结构必须表达信息。** 编号、分隔线、标签和网格应体现真实顺序或层级；内容不是流程时不要机械写 01/02/03。
- **动效服务理解。** 选择一个高价值时刻做编排，优先解释状态变化和操作反馈；散落的动画会增加 AI 模板感。
- **复杂度匹配愿景。** 极繁需要完整执行，极简需要精确间距、字体和细节。不要用半成品装饰冒充风格。

## 两遍设计流程

### 第一遍：提出设计计划

用简短计划明确：

- **颜色**：4–6 个有名称的 hex token，并说明其与主题的关系。
- **字体**：至少两个角色；中文字体和拉丁/数字字体要能协同。
- **布局**：用一两句描述或 ASCII 线框比较候选结构。
- **签名元素**：只选一个最值得记住、且能代表主题的元素。
- **内容**：使用真实文案和真实数据结构，不用 lorem ipsum 填满页面。

### 第二遍：反模板审查

在编码前问：

1. 把产品名换掉，这套设计是否仍能无缝套到任何 AI 产品？
2. 是否落入奶油底+衬线+陶土色、黑底+荧光强调色、报纸细线网格等当前常见默认？
3. 编号、卡片、渐变和动画是否真的传达信息？
4. 中文长文本、移动端和键盘操作是否仍成立？

若答案暴露模板化，就调整设计计划并说明原因，再开始实现。

## 实现要求

- 从设计 token 派生颜色、字体、间距和圆角，避免页面局部各自决定。
- 注意 CSS specificity，避免通用 `.section` 和组件类互相覆盖。
- 响应到移动端，提供可见键盘焦点，并尊重 `prefers-reduced-motion`。
- 界面文案从用户视角命名：用户“管理通知”，不是“配置 webhook”。
- 按钮使用明确动词，如“保存修改”“发布”，操作前后保持同一词汇。
- 错误信息说明发生了什么以及如何修复；空状态给出下一步，不写空洞情绪文案。
- 设计过程中截图自查；大胆只花在一个地方，删除不服务主题的装饰。

## 交付前自检

- 是否有一个无法被其他产品轻易复制的主题表达？
- 中文字体、换行、中英混排和数字对齐是否稳定？
- 文案是否具体、主动、无营销填充？
- 交互状态、错误、空态、焦点和 reduced motion 是否完整？
- 是否在真实视口截图检查，而不只看源代码？