# Frontend Design

> 创建具有高设计质量的独特、生产级前端界面。当用户要求构建 Web 组件、页面、工件、海报或应用程序时使用此技能（示例包括网站、落地页、仪表板、React 组件、HTML/CSS 布局，或为任何 Web UI 设置样式/美化时）。生成富有创意、精美的代码和 UI 设计，避免通用的 AI 美学。

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

---


此技能指导创建独特的、生产级前端界面，避免通用的"AI 草率"美学。实现真实可运行的代码，对美学细节和创意选择给予极大关注。

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

## 设计思维

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

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

然后实现可运行的代码（HTML/CSS/JS、React、Vue 等），它是：
- 生产级且功能性的
- 视觉上引人注目且令人难忘的
- 具有清晰美学观点的连贯性
- 每个细节都经过精心打磨

## 前端美学指南

专注于：
- **排版**：选择美丽、独特且有趣的字体。避免通用字体如 Arial 和 Inter；相反，选择提升前端美学的独特选择；出人意料的、富有个性的字体选择。将独特的展示字体与精致的正文字体配对。
- **颜色与主题**：承诺连贯的美学。使用 CSS 变量保持一致性。主导颜色配以鲜明强调色优于胆小的、均匀分布的调色板。
- **动效**：使用动画实现效果和微交互。对于 HTML 优先使用纯 CSS 解决方案。可用时对 React 使用 Motion 库。专注于高影响力时刻：一个精心编排的页面加载与交错显示（animation-delay）比分散的微交互创造更多愉悦感。使用滚动触发和令人惊讶的悬停状态。
- **空间构图**：意想不到的布局。不对称。重叠。对角流动。打破网格的元素。慷慨的负空间或受控的密度。
- **背景与视觉细节**：创建氛围和深度，而非默认使用纯色。添加与整体美学匹配的上下文效果和纹理。应用创意形式，如渐变网格、噪声纹理、几何图案、分层透明度、戏剧性阴影、装饰性边框、自定义光标和颗粒叠加。

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

创造性地解释并做出真正为上下文设计的意想不到的选择。没有设计应该是相同的。在浅色和深色主题、不同字体、不同美学之间变化。永远不要在多次生成中趋同于常见选择（例如 Space Grotesk）。

**重要**：使实现复杂性与美学愿景相匹配。极繁主义设计需要带有大量动画和效果的精细代码。极简主义或精致设计需要克制、精确以及对间距、排版和细微细节的仔细关注。优雅来自于很好地执行愿景。

记住：Claude 能够进行非凡的创意工作。不要退缩，展示当跳出框框思考并完全致力于独特愿景时真正可以创造什么。