# Frontend Design

> 创建具有高设计水准、生产级的独特前端界面。当用户要求构建 Web 组件、页面、Artifact、海报或应用程序（例如网站、落地页、仪表板、React 组件、HTML/CSS 布局，或对任何 Web UI 进行美化/样式调整）时，应使用此技能。生成富有创意、打磨精细的代码和 UI 设计，避免平庸的 AI 审美。

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

---


此技能旨在引导创建具有独特性的生产级前端界面，避免平庸的“AI 工业垃圾”审美。实现真正的运行代码，并对审美细节和创意选择给予极大关注。

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

## 设计思维 (Design Thinking)

在编码之前，请先理解上下文并致力于一个 **大胆 (BOLD)** 的审美方向：
- **用途**：此界面解决了什么问题？谁在使用它？
- **基调**：选择一种极端风格：极致极简 (brutally minimal)、繁复主义 (maximalist chaos)、复古未来主义 (retro-futuristic)、有机/自然 (organic/natural)、高级/精致 (luxury/refined)、趣味/玩具化 (playful/toy-like)、社论/杂志感 (editorial/magazine)、粗犷主义 (brutalist/raw)、装饰艺术/几何 (art deco/geometric)、柔和/粉彩 (soft/pastel)、工业/实用主义 (industrial/utilitarian) 等。有很多风格可供选择。利用这些作为灵感，但要设计一个忠于该审美方向的作品。
- **限制**：技术要求（框架、性能、无障碍性）。
- **差异化**：是什么让它 **令人难忘 (UNFORGETTABLE)**？别人会记住的一点是什么？

**关键点**：选择一个清晰的概念方向并精准执行。大胆的繁复主义和精练的极简主义都有效——关键在于 **意图 (intentionality)**，而非强度。

然后实现可运行的代码（HTML/CSS/JS, React, Vue 等），并确保：
- 生产级且功能完备
- 视觉冲击力强且令人难忘
- 具有清晰审美视角的整体性
- 每一个细节都经过精心打磨

## 前端审美准则 (Frontend Aesthetics Guidelines)

重点关注：
- **字体 (Typography)**：选择美观、独特且有趣的字体。避免使用 Arial 和 Inter 等通用字体；相反，应选择能提升前端审美的独特字体；出人意料且极具个性的字体选择。将独特的标题字体与精炼的正文字体配对。
- **色彩与主题 (Color & Theme)**：致力于整体审美。使用 CSS 变量保持一致性。具有鲜明点缀的主导色比胆怯、均匀分布的色板表现更好。
- **动态 (Motion)**：使用动画处理效果和微交互。对于 HTML，优先考虑纯 CSS 方案。在 React 中可用时使用 Motion 库。专注于高影响力的时刻：一个精心策划的、带有交错显示 (animation-delay) 的页面加载比分散的微交互更能带来惊喜。使用出人意料的滚动触发和悬停状态。
- **空间构成 (Spatial Composition)**：出人意料的布局。不对称性。重叠。对角线流向。打破网格的元素。慷慨的负空间或受控的密度。
- **背景与视觉细节 (Backgrounds & Visual Details)**：营造氛围和深度，而不是默认使用纯色。添加与整体审美匹配的情景效果和纹理。应用创意形式，如渐变网格 (gradient meshes)、噪点纹理 (noise textures)、几何图形模式、分层透明度、戏剧性的阴影、装饰性边框、自定义光标和颗粒叠加层。

**绝不 (NEVER)** 使用通用的 AI 生成式审美，例如过度使用的字体族（Inter, Roboto, Arial, 系统字体）、陈词滥调的配色方案（特别是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏特定情境特征的模板化设计。

发挥创意并做出出人意料的选择，让人感觉是真正为该情境设计的。每个设计都应该是独一无二的。在亮色和暗色主题、不同字体、不同审美之间进行变化。在各次生成中，**绝不 (NEVER)** 趋同于共同的选择（例如 Space Grotesk）。

**重要提示**：实现的复杂度应与审美视觉相匹配。繁复主义设计需要包含大量动画和效果的复杂代码。极简或精炼的设计则需要克制、精准，并细致关注间距、字体和微妙细节。优雅源于对视觉愿景的完美执行。

记住：Claude 能够完成非凡的创意工作。不要保留，展示出打破常规思维并全力投入独特视觉时真正能创造出的作品。