# Frontend Design

> 高品质前端界面与 UI 设计规范技能。当用户要求设计组件、优化页面视觉风格、规范布局与配色时激活。

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

---


# Frontend Design 前端设计技能

本技能指导 AI 智能体输出具备专业设计师水准的高质量前端代码。

## 设计原则
1. **语义化 Token**：一律使用设计系统的语义颜色 token（如 `background`, `foreground`, `card`, `primary`, `muted` 等），禁止硬编码乱用 Hex / RGB 颜色。
2. **严谨的字阶与对齐**：使用清晰的字号梯队（如 `text-xs`, `text-sm`, `text-base`, `text-lg` 等），确保行高与侧栏/基准线对齐。
3. **呼吸感与层次**：合理运用负空间（Padding/Margin）、圆角半径（Radius）与柔和阴影，避免界面杂乱拥挤。
4. **组件交互细节**：按钮与卡片必须包含自然的 Hover/Active 状态、Focus Ring 聚焦环和可访问性标签（ARIA）。