用途
该技能用于指导创建独特、达到生产级质量的前端界面，避免通用的“AI 味”审美。它要求实现真正可运行的代码，并在美学细节和创意选择上给予高度关注。
用户提供前端需求：要构建的组件、页面、应用或界面，可能包含关于用途、受众或技术约束的背景信息。
设计思路
在编码之前，先理解背景并确定一个大胆的美学方向：
- 目的：这个界面解决什么问题？谁在使用它？
- 基调：选择一个极端方向，例如极简、极繁混乱、复古未来主义、有机/自然、奢华/精致、俏皮/玩具感、编辑/杂志风、粗野主义/原始、装饰艺术/几何、柔和/粉彩、工业/实用主义等。可从中获取灵感，但应设计出忠于该美学方向的作品。
- 约束：技术要求（框架、性能、无障碍）。
- 差异化：什么让它令人难忘？哪一点会被人记住？
关键：选择一个清晰的概念方向并精准执行。大胆的极繁主义和精致的极简主义都可行，关键在于有意为之，而非强度。
然后实现可运行的代码（HTML/CSS/JS、React、Vue 等），要求：
- 生产级且功能可用
- 视觉上引人注目且令人难忘
- 具有清晰美学观点且整体统一
- 每个细节都经过精心打磨
前端美学指南
重点关注：
- 排版：选择美观、独特、有趣的字体。避免 Arial 和 Inter 等通用字体，转而选择能提升前端美感的独特字体；选择出人意料、有性格的字体。将独特的展示字体与精致的正文字体搭配。
- 颜色与主题：坚持统一的美学。使用 CSS 变量保持一致性。主导色配以鲜明点缀色，优于胆怯、均匀分布的调色板。
- 动效：使用动画实现效果和微交互。对于 HTML 优先使用纯 CSS 方案。在可用时对 React 使用 Motion 库。聚焦高冲击力时刻：一次精心编排的页面加载配合错落显现（animation-delay），比零散的微交互带来更多愉悦感。使用能带来惊喜的滚动触发和悬停状态。
- 空间构图：出人意料的布局。不对称。重叠。对角线流动。打破网格的元素。充裕的留白或受控的密集。
- 背景与视觉细节：营造氛围和深度，而非默认使用纯色。添加与整体美学匹配的情境效果和纹理。运用渐变网格、噪点纹理、几何图案、分层透明、戏剧性阴影、装饰性边框、自定义光标和颗粒叠加等创意形式。
切勿使用通用的 AI 生成审美，例如被过度使用的字体族（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（尤其是白底紫色渐变）、可预测的布局和组件模式，以及缺乏情境特征的千篇一律设计。
创造性地诠释，做出真正为情境而设计、出人意料的选择。没有两个设计应该相同。在浅色与深色主题、不同字体、不同美学之间变化。切勿在不同生成中趋同于常见选择（例如 Space Grotesk）。
重要：让实现复杂度与美学愿景相匹配。极繁设计需要精细的代码，包含大量动画和效果。极简或精致设计需要克制、精准，并仔细关注间距、排版和微妙细节。优雅来自对愿景的良好执行。
请记住：Claude 有能力完成非凡的创意工作。不要保留，展示当跳出框架并全力投入独特愿景时真正能创造出的东西。