该技能是一款前端设计指导能力，用于创建独特、达到生产级水准的前端界面，避免千篇一律的“AI slop”审美，并以出色的审美细节与创意选择实现真正可用的代码。
【用途】 当用户要求构建 Web 组件、页面、应用或界面时使用。用户会提供前端需求，可能附带用途、受众或技术约束等上下文。技能引导从设计思考到代码实现的完整过程。
【设计思考】 在编码前先理解上下文，并确定一个大胆的美学方向：
- 目的：这个界面解决什么问题？谁会使用？
- 基调：选择一种极端的风格，例如极度极简、极繁混沌、复古未来、有机自然、奢华精致、 playful/玩具感、编辑杂志风、粗野主义/原始、装饰艺术/几何、柔和粉彩、工业实用等。可将其作为灵感，但应设计出真正忠于该方向的方案。
- 约束：技术需求（框架、性能、无障碍）。
- 差异化：什么让它令人难忘？别人会记住的那一点是什么？ 关键：选择清晰的概念方向并精确执行。大胆的极繁与精致的极简都可行，关键在于有意为之，而非强度大小。
【主要能力】 随后实现可运行的代码（HTML/CSS/JS、React、Vue 等），要求：达到生产级且功能可用；视觉醒目且令人难忘；风格统一、有清晰美学观点；每个细节都精心打磨。前端美学指南包括：
- 排版：选择美观、独特、有趣的字体，避免 Arial、Inter 等通用字体，选用能提升美感的独特选择，将独特的展示字体与精致的正文字体搭配。
- 色彩与主题：坚持统一美学，用 CSS 变量保持一致；主色配锐利点缀胜过怯懦的均匀配色。
- 动效：用动画实现效果与微交互，HTML 优先纯 CSS 方案，React 可在可用时使用 Motion 库；重视高冲击时刻，例如一次编排良好的页面加载配合错落揭示（animation-delay）比零散微交互更令人愉悦；使用能带来惊喜的滚动触发与悬停状态。
- 空间构成：采用意外布局、非对称、重叠、斜向流动、打破网格的元素；要么留出充足负空间，要么进行受控的密集排布。
- 背景与视觉细节：营造氛围与纵深而非默认纯色，添加与整体美学匹配的语境化效果与纹理；使用渐变网格、噪点纹理、几何图案、层叠透明、戏剧化阴影、装饰边框、自定义光标、颗粒叠加等创意形式。
【禁止事项】 绝不使用常见 AI 生成审美：被滥用的字体族（Inter、Roboto、Arial、系统字体）、陈词滥调配色（尤其是白底紫色渐变）、可预测的布局与组件模式、缺乏语境特征的千篇一律设计。应创造性地诠释，做出真正为语境设计、令人意外且各不相同的选择；在明暗主题、字体、美学之间变化，避免在不同生成中反复收敛到相同选择（例如 Space Grotesk）。
【实现复杂度与美学愿景匹配】 极繁设计需要配合大量动画与效果的精细代码；极简或精致设计则需要克制、精确，并仔细处理间距、排版与微妙细节。优雅来自良好地执行愿景。
【使用方式】 用户给出前端需求（组件、页面、应用或界面）及可能的用途、受众、技术约束，技能据此引导设计思考并产出符合上述要求的工作代码。关于具体安装命令或调用方式，资料中暂未提供。
【适用场景】 需要构建具有鲜明设计风格、高质量视觉表现的 Web 组件、页面或应用时。
【限制】 资料未提供关于收费、价格、支持的框架或平台版本、性能指标、无障碍具体标准等细节，暂未提供。