# Frontend Design

> 创建具有高设计水准、独特且可用于生产环境的前端界面。当用户要求构建Web组件、页面、制品、海报或应用（例如网站、着陆页、仪表板、React组件、HTML/CSS布局，或对任何Web UI进行样式设计/美化）时，可使用此技能。生成富有创意、经过打磨的代码和UI设计，避免通用的AI美学风格。

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

---


此技能可指导创建独特、可用于生产环境的前端界面，避免千篇一律的“AI流水线”美学风格。在实现可正常运行的代码时，格外注重美学细节与创意选择。

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

## 设计思路

在编码之前，先了解上下文并确定一个明确的美学方向：
- **用途**：该界面要解决什么问题？用户是谁？
- **风格基调**：选择一种极致风格：极简主义、极繁主义混乱感、复古未来主义、有机自然风、奢华精致风、趣味玩具风、杂志编辑风、粗野原始风、装饰艺术几何风、柔和马卡龙风、工业实用风等等。有众多风格可供选择，可以以此为灵感，但要设计出符合选定美学方向的独特风格。
- **限制条件**：技术要求（框架、性能、可访问性）。
- **差异化**：什么让这个界面令人过目不忘？用户会记住的核心亮点是什么？

**关键要点**：选择清晰的概念方向并精准执行。大胆的极繁主义和精致的极简主义都可行——关键在于设计的目的性，而非强度。

随后实现可运行的代码（HTML/CSS/JS、React、Vue等），代码需满足：
- 可用于生产环境且功能完整
- 视觉冲击力强、令人难忘
- 风格统一，具有明确的美学视角
- 每一个细节都经过精心打磨

## 前端美学指南

重点关注：
- **排版**：选择美观、独特且富有特色的字体。避免使用Arial、Inter这类通用字体；转而选择能提升前端美学的独特字体；意料之外、富有个性的字体选择。将独特的标题字体与精致的正文字体搭配使用。
- **色彩与主题**：坚持统一的美学风格。使用CSS变量确保一致性。主色调搭配鲜明的强调色，效果优于平淡、均匀分布的调色板。
- **动效**：使用动画实现特效和微交互。对于HTML优先使用纯CSS解决方案。如果可用，在React中使用Motion库。聚焦高影响力的时刻：一次精心编排的页面加载动画（使用animation-delay实现渐显效果）比零散的微交互更能带来愉悦感。使用滚动触发和令人惊喜的悬停状态。
- **空间布局**：打破常规的布局。不对称设计、元素重叠、斜向视觉流、突破网格的元素。充足的留白或受控的信息密度。
- **背景与视觉细节**：营造氛围和深度，而非默认使用纯色。添加符合整体美学风格的上下文特效和纹理。运用创意形式，如渐变网格、噪点纹理、几何图案、分层透明效果、夸张阴影、装饰性边框、自定义光标和颗粒叠加层。

**绝对不要**使用通用的AI生成美学风格，例如过度使用的字体家族（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（尤其是白色背景搭配紫色渐变）、可预测的布局和组件模式，以及缺乏特定场景特色的模板化设计。

创造性地解读需求，做出符合特定场景的独特选择。每个设计都应独一无二。在浅色与深色主题、不同字体、不同美学风格之间切换。绝对不要在多个设计中重复使用常见选择（例如Space Grotesk字体）。

**重要提示**：实现复杂度要与美学愿景匹配。极繁主义设计需要包含大量动画和特效的复杂代码。极简主义或精致风格的设计则需要克制、精准，并注重间距、排版和细微细节。优雅源于对设计愿景的出色执行。

请记住：Claude能够完成极具创意的工作。不要设限，展示跳出思维定式、全力投入独特愿景时所能创造的真正成果。