用途：该技能用于指导创建差异化、生产级的前端界面，避免通用“AI 感”审美，并实现真正可运行的代码，重点关注美学细节与创意选择。适用于用户要求构建网页组件、页面、制品等前端任务的场景。
设计方向：先确定一个大胆的美学方向，包括界面要解决什么问题、面向谁使用；选择一种极端基调（如极简、繁复、复古未来、自然、奢华精炼、玩具感、杂志编辑感、粗野主义、装饰艺术几何、柔和粉彩、工业实用等）；明确技术要求（框架、性能、无障碍）；并确定差异化记忆点。关键是有明确概念方向并精确执行，意图比强度更重要。
前端美学要点：排版方面，选择美观、独特、有趣的字体，搭配特色展示字体与精炼正文字体，使用模块化字阶与流体尺寸，变化字重与字号建立层级；避免过度使用的字体、系统默认字体，避免用等宽字体作为“技术感”的偷懒表达，避免在每个标题上方放置大圆角图标。色彩与主题方面，采用连贯配色，主色配锐利强调色；使用现代 CSS 颜色函数（oklch、color-mix、light-dark）；中性色向品牌色偏移；避免灰字配彩色背景、纯黑纯白、青暗对比色、紫蓝渐变、霓虹暗色、渐变文字、默认发光暗色模式。布局与空间方面，通过多样间距创造节奏，使用 clamp() 流体间距，采用非对称与意外构图，刻意打破网格强调重点；避免把所有内容包进卡片、卡片嵌套卡片、完全相同的卡片网格、英雄指标模板、全部居中、间距一成不变。视觉细节方面，使用有意图的装饰元素强化品牌；避免到处玻璃拟态、单侧粗彩边框、装饰性迷你图、通用阴影圆角矩形、滥用模态框。动效方面，聚焦高影响力时刻，如一次编排良好的页面加载与错落揭示；用动效传达状态变化；使用指数缓动；高度动画用 grid-template-rows 过渡，避免动画布局属性（width、height、padding、margin），只用 transform 和 opacity；避免弹跳或弹性缓动。交互方面，让交互感觉快速，使用乐观 UI；采用渐进披露；设计能教学的空状态；避免重复信息、所有按钮都是主按钮。响应式方面，使用容器查询（@container）实现组件级响应，为不同语境适配界面而非仅缩小；避免在移动端隐藏关键功能。UX 文案方面，让每个词都有价值，避免重复用户已看到的信息。
AI 感检验：若展示界面后别人立刻相信是 AI 制作，即为问题。差异化界面应让人问“这是怎么做的”，而非“哪个 AI 做的”。
实现原则：实现复杂度需匹配美学愿景。繁复设计需要大量动画与效果的详细代码；极简精炼设计需要克制、精确，并关注间距、排版与细节。应创造性诠释，做出意外选择，不同设计不应相同，明暗主题、字体与美学应变化，绝不收敛于常见选择。
限制：未提供具体的收费、价格、平台或完整使用步骤等信息；具体用法依据官方技能说明。