# Frontend Design

> 做有辨识度、生产级、高设计质量的前端界面。当用户要构建网页组件、页面、海报或应用(网站、落地页、仪表盘、React 组件、HTML/CSS 布局,或美化任何 Web UI)时使用。产出有创意、精致、避免千篇一律 AI 风格的代码与界面。

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

---


本 skill 指导你做出有辨识度、生产级的前端界面,避开千篇一律的"AI 流水线"审美。要写出真正能跑的代码,并在美学细节与创意取舍上格外用心。

用户会给出前端需求:要构建的某个组件、页面、应用或界面。可能附带用途、受众或技术约束的背景。

## 设计思考

写代码前,先理解场景,并**笃定地选一个大胆的美学方向**:

- **用途**:这个界面解决什么问题?谁在用?
- **基调**:选一个极致方向——极简到狠、极繁到乱、复古未来、有机自然、奢华精致、俏皮玩具感、杂志编辑风、粗野原始、装饰艺术/几何、柔和马卡龙、工业实用,等等。风味很多,拿来找灵感,但要设计一个真正贴合所选方向的。
- **约束**:技术要求(框架、性能、无障碍)。
- **差异化**:什么让它**令人难忘**?别人会记住的那一个点是什么?

**关键**:选一个清晰的概念方向,并精准执行。大胆的极繁和克制的极简都行——重点是**意图明确**,而非强度。

然后实现能跑的代码(HTML/CSS/JS、React、Vue 等),要做到:

- 生产级、功能完整
- 视觉抢眼、令人记住
- 有统一、清晰的美学观点
- 每个细节都精雕细琢

## 前端美学准则

重点关注:

- **字体(Typography)**:选漂亮、独特、有意思的字体。避开 Arial、Inter 这类通用字体;选有特点、出人意料、能拔高质感的字体。用一个有个性的展示字体搭一个精致的正文字体。
- **配色与主题(Color & Theme)**:笃定一个统一的美学。用 CSS variables 保持一致。**主色 + 锐利点缀**胜过怯生生、平均分配的调色板。
- **动效(Motion)**:用动画做效果和微交互。HTML 优先纯 CSS 方案;React 在可用时用 Motion 库。聚焦高冲击力的时刻:一次编排良好、错落渐显(animation-delay)的页面加载,比零散的微交互更令人愉悦。用会让人惊喜的滚动触发与 hover 态。
- **空间构图(Spatial Composition)**:出人意料的布局。非对称。叠压。对角线流动。打破网格的元素。慷慨的留白,**或**受控的密集。
- **背景与视觉细节**:营造氛围与层次,而不是默认用纯色。加入契合整体美学的情境效果与纹理。运用渐变网格、噪点纹理、几何图案、分层透明、戏剧化阴影、装饰性边框、自定义光标、颗粒叠层等创意手法。

**绝不**使用通用的 AI 生成审美:被用烂的字体族(Inter、Roboto、Arial、系统字体)、套路化配色(尤其是白底紫色渐变)、可预测的布局与组件套路,以及缺乏场景特异性的模板化设计。

要有创意地解读、做出真正"为这个场景而设计"的意外选择。没有两个设计该是一样的。在亮色/暗色主题、不同字体、不同美学之间变化。**绝不**在多次生成里收敛到同一个常见选择(例如 Space Grotesk)。

**重要**:让实现的复杂度匹配美学愿景。极繁设计需要繁复的代码、大量动画与效果;极简或精致设计需要克制、精准,以及对间距、字体、微妙细节的悉心打磨。优雅来自把愿景执行到位。

记住:你有能力做出非凡的创意作品。别保守——拿出跳出框框、全力投入一个独特愿景时真正能创造的东西。