本技能指导如何创建独特、生产级的前端界面，避免通用的“AI 垃圾”美学。实现真实可用的代码，并对美学细节和创意选择给予非凡的关注。
用户提供前端需求：要构建的组件、页面、应用程序或界面。他们可能包含有关用途、受众或技术约束的背景信息。
设计思考
在编码之前，理解上下文并致力于一个大胆的美学方向：
- 目的：该界面解决什么问题？谁使用它？
- 基调：选择一个极端方向：极致简约、极致混乱、复古未来主义、有机/自然、奢华/精致、俏皮/玩具、社论/杂志、粗野/原始、装饰艺术/几何、柔和/粉彩、工业/实用等。有很多风格可供选择。将这些作为灵感，但设计一个符合美学方向的风格。
- 约束：技术要求（框架、性能、可访问性）。
- 差异化：什么使这个界面令人难忘？有什么是用户一定会记住的？
关键：选择一个清晰的概念方向并精确执行。大胆的极繁主义和精致的极简主义都有效——关键在于意图，而非强度。
然后实现工作代码（HTML/CSS/JS、React、Vue 等），使其：
- 生产级且功能完整
- 视觉上引人注目且令人难忘
- 具有清晰的美学观点且连贯一致
- 每个细节都经过精心打磨
前端美学指南
专注于：
- 字体排印：选择美观、独特且有趣的字体。避免像 Arial 和 Inter 这样的通用字体；选择能提升前端美感的独特字体；出人意料、有特色的字体选择。将独特的展示字体与精致的正文字体配对。
- 颜色与主题：致力于连贯的美学。使用 CSS 变量保持一致性。大胆的主色调配以尖锐的强调色，比均匀分布的调色板更有效。
- 动效：使用动画实现效果和微交互。优先使用纯 CSS 解决方案处理 HTML。在可用时使用 Motion 库处理 React。关注高影响力的时刻：一次精心编排的页面加载，配合交错显示（animation-delay），比零散的微交互更能带来愉悦感。使用滚动触发和令人惊喜的悬停状态。
- 空间构成：非传统的布局。不对称。重叠。对角线流动。打破网格的元素。慷慨的留白或受控的密度。
- 背景与视觉细节：营造氛围和深度，而不是默认使用纯色。添加与整体审美相匹配的上下文效果和纹理。应用创意形式，如渐变网格、噪点纹理、几何图案、分层透明度、戏剧性阴影、装饰性边框、自定义光标和颗粒叠加。
绝对不要使用通用的 AI 生成美学，例如过度使用的字体系列（Inter、Roboto、Arial、系统字体）、陈词滥调的色彩方案（特别是白色背景上的紫色渐变）、可预测的布局和元素模式，以及缺乏特定上下文性格的千篇一律的设计。
创造性地解读，并做出令人意想不到的选择，使其感觉是为该语境真正设计的。没有一个设计应该是相同的。在浅色和深色主题、不同字体、不同美学之间变化。绝对不要趋同于常见选择（例如 Space Grotesk）。
重要：根据美学愿景匹配实现复杂度。极繁主义设计需要包含广泛的动画和效果的复杂代码。极简或精致的设计需要克制、精确，并仔细关注间距、字体排印和微妙的细节。优雅源于良好地执行愿景。
请记住：Claude 有能力完成非凡的创意工作。不要有所保留，展示在跳出框框思考并完全致力于独特愿景时，真正能够创造出什么。
任务导向的设计工作流
阅读完整的设计工作流了解监控/操作/创作分类、上下文发现、变体、状态和验证。在现有产品中，它们的设计系统和用户任务的优先级高于上述美学探索：不要将不寻常的字体、重叠、装饰性背景或营销构图强加于操作性 UI。使用可用的浏览器和文件工具，而不是特定的模型产品。可选的参考目录是 prismer-popular-web-designs 和 prismer-design-md；仅在用户要求的任务中加载。