# Frontend Design

> 创建独特、生产级的高质量前端界面。当用户要求构建 Web 组件、页面、作品、海报或应用程序时使用此技能（例如网站、着陆页、仪表板、React 组件、HTML/CSS 布局，或对任何 Web UI 进行样式/美化）。生成富有创意、精致的代码和 UI 设计，避免通用的 AI 美学风格。

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

---


本技能指导创建独特、生产级的前端界面，避免通用的"AI 廉价品"美学风格。实现真实可用的代码，对美学细节和创意选择给予极致关注。

用户提供前端需求：要构建的组件、页面、应用程序或界面。他们可能包含关于目的、受众或技术约束的上下文信息。

## 设计思维

在编码之前，理解上下文并坚定地选择一个大胆的美学方向：
- **目的**：此界面解决什么问题？谁使用它？
- **基调**：选择一个极端：极简主义、极繁主义混乱、复古未来主义、有机/自然、奢华/精致、趣味/玩具般、编辑/杂志风、野兽派/原始、装饰艺术/几何、柔和/粉彩、工业/实用主义等。有太多风格可供选择。用这些作为灵感，但要设计一个真正符合美学方向的方案。
- **约束**：技术要求（框架、性能、可访问性）。
- **差异化**：什么让这个设计令人难忘？人们会记住的一件事是什么？

**关键**：选择明确的概念方向并精确执行。大胆的极繁主义和精致的极简主义都有效——关键在于意图，而非强度。

然后实现可用的代码（HTML/CSS/JS、React、Vue 等），使其：
- 生产级且功能完整
- 视觉冲击力强且令人难忘
- 具有明确美学观点的整体性
- 在每个细节上都经过精心打磨

## 前端美学指南

专注于：
- **字体排印**：选择美观、独特、有趣的字体。避免 Arial 和 Inter 等通用字体；选择能够提升前端美学品质的独特字体；出人意料、充满个性的字体选择。将独特的展示字体与精致的正文字体配对。
- **色彩与主题**：坚持一致的美学风格。使用 CSS 变量保持一致性。主导色搭配鲜明点缀色优于胆怯、均匀分布的调色板。
- **动效**：使用动画制作效果和微交互。HTML 优先使用纯 CSS 方案。React 可用时使用 Motion 库。专注于高影响力的时刻：一个精心编排的页面加载，带有错开的揭示效果（animation-delay），比分散的微交互更能带来愉悦感。使用令人惊喜的滚动触发和悬停状态。
- **空间构图**：出人意料的布局。不对称。重叠。对角线流动。打破网格的元素。充足的负空间或受控的密度。
- **背景与视觉细节**：创造氛围和深度，而不是默认使用纯色。添加符合整体美学的情境效果和纹理。应用创意形式，如渐变网格、噪点纹理、几何图案、分层透明度、戏剧性阴影、装饰边框、自定义光标和颗粒叠加。

永远不要使用通用的 AI 生成美学，如过度使用的字体系列（Inter、Roboto、Arial、系统字体）、陈旧的配色方案（特别是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏特定情境特色的千篇一律设计。

创造性地诠释并做出出人意料的、真正为情境量身定制的设计选择。没有任何两个设计应该相同。在明暗主题、不同字体、不同美学风格之间变化。永远不要在多代设计中趋同于常见选择（例如 Space Grotesk）。

**重要**：实现复杂度要与美学愿景相匹配。极繁主义设计需要复杂的代码，包含大量动画和效果。极简主义或精致设计需要克制、精确，以及对间距、字体排印和微妙细节的细致关注。优雅来自于对愿景的良好执行。

记住：Claude 具备非凡的创造能力。不要保留，展示跳出思维定式、完全致力于独特愿景时所能创造的真正成果。