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