frontend-design

这项技能旨在指导你打造独具特色、可用于生产环境的前端界面，避免千篇一律的“AI 垃圾美学”。编写真正可运行的代码，并格外注重美学细节与创意选择。

用户会提供前端需求：要构建的组件、页面、应用或界面。他们可能还会说明用途、受众或技术限制。

注意事项与适用范围

仅当实现目标是 Web 前端时，才使用这项技能。在应用其美学指导前，先确认相关代码属于 HTML/CSS/JavaScript 或 Web UI 框架。

如果检查代码库后发现视觉界面是通过原生渲染器、GPU 着色器、游戏引擎、终端 UI、视频管线或其他非 Web 图形技术栈实现的，请停止使用这项技能。应将相关工作转交给适用的语言、渲染或视觉验证工作流。仅仅要求提升视觉精致度，并不能证明任务属于 Web 前端范围。

触发回归用例位于 evals/triggers.jsonl。

设计思路

开始编码前，先了解背景，并确立一个大胆鲜明的美学方向：

• 用途：这个界面解决什么问题？谁会使用它？
• 调性：选择一种极端风格：极简主义、混乱繁复、复古未来主义、有机自然、奢华精致、俏皮玩具风、编辑部／杂志风、粗野主义／原始风、装饰艺术／几何风、柔和粉彩、工业实用主义等。风格选择丰富多样，可从中汲取灵感，但最终设计必须忠于所选方向。
• 限制：技术要求（框架、性能、无障碍性）。
• 差异化：是什么让设计令人难忘？人们会记住其中的哪一点？

至关重要：明确选择一个概念方向，并精准贯彻。大胆繁复与精致极简都可行——关键在于有意为之，而非追求强烈感。

然后实现可运行的代码（HTML/CSS/JS、React、Vue 等），并确保其具备以下特点：

• 达到生产级质量且功能完善
• 视觉醒目、令人难忘
• 风格统一，审美立场鲜明
• 每个细节都经过精心打磨

前端美学指南

重点关注：

• 字体排印：选择优美、独特且有趣的字体。避免使用 Arial 和 Inter 等常见字体，转而选择能提升前端美感的独特字体；尝试出人意料、个性鲜明的字体。将独特的展示字体与精致的正文字体搭配使用。
• 色彩与主题：坚持统一的美学风格。使用 CSS 变量确保一致性。以主色为主、搭配鲜明点缀色的方案，胜过平淡且分布均匀的配色。
• 动效：使用动画呈现效果和微交互。对于 HTML，优先采用纯 CSS 方案；如果可用，则在 React 中使用 Motion 库。聚焦于影响力强的时刻：精心编排一次页面加载，并配合交错显现（animation-delay），比零散的微交互更能带来惊喜。运用滚动触发效果和令人意外的悬停状态。
• 空间构图：采用出人意料的布局。打破对称。制造叠加。运用对角线流动。让元素突破网格。留出充足的负空间，或打造有节制的紧凑布局。
• 背景与视觉细节：营造氛围和层次，而非默认使用纯色。添加符合整体美学的情境化效果和纹理。运用创意形式，例如渐变网格、噪点纹理、几何图案、分层透明效果、戏剧化阴影、装饰边框、自定义光标和颗粒叠加。

切勿采用千篇一律的 AI 生成美学，例如过度使用的字体系列（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（尤其是白底紫色渐变）、可预测的布局和组件模式，以及缺乏具体情境特色的模板化设计。

发挥创意，做出出人意料、真正贴合情境的选择。每个设计都应与众不同。在浅色与深色主题、不同字体和不同美学风格之间有所变化。切勿在多次创作中反复采用常见选择（例如 Space Grotesk）。

重要提示：让实现复杂度与美学构想相匹配。极繁主义设计需要精细的代码，以及丰富的动画和效果。极简或精致的设计则需要克制、精准，并仔细打磨间距、字体排印和细微之处。优雅源于对构想的出色实现。

请记住：Claude 能够完成非凡的创意作品。放开手脚，跳出常规思维，并全力打造鲜明独特的构想，展现真正可以创造出的成果。

验证

完成前，请尽可能在目标运行环境中检查已实现的界面。验证布局、响应式表现、文本适配、对比度、交互状态，并确认结果是可运行的 UI，而非静态模型。对于本地应用，请使用可用的浏览器或截图工作流检查桌面和移动端视口，然后再声称前端已完成。