用途
该技能用于创建具有独特辨识度、达到生产级质量的前端界面，重点在于摆脱千篇一律的「AI 味」审美，同时交付真正能运行的代码，并对美学细节和创意选择给予高度关注。用户提供前端需求：要构建的组件、页面、应用或界面，也可以附带关于用途、受众或技术约束的背景信息。
主要能力
-
设计思考：在编码之前先理解上下文并确定一个大胆的美学方向，包括：
- 目的：这个界面解决什么问题？谁会使用？
- 基调：选择一个极致方向，例如极度极简、极繁混沌、复古未来、有机自然、奢华精致、趣味玩具感、编辑杂志风、粗野原始风、装饰几何风、柔和粉彩、工业实用风等。资料强调可从中汲取灵感，但应设计出忠于所选方向的方案。
- 约束：技术要求（框架、性能、无障碍）。
- 差异化：什么让它令人难忘？哪一点会被人记住？
- 关键点：选择清晰的理念方向并以精确性执行。大胆极繁与精致极简都可行，关键在于有意为之，而非强度高低。
-
代码实现：输出可运行代码（HTML/CSS/JS、React、Vue 等），要求达到生产级且功能可用、视觉醒目且令人难忘、风格统一且有清晰美学主张、每个细节都精雕细琢。
-
前端美学指导，着重于：
- 字体：选择美观、独特、有趣的字体，避免 Arial、Inter 等通用字体，采用能提升美感的独特选择，将有个性的展示字体与精致的正文字体搭配。
- 配色与主题：坚持统一的审美，用 CSS 变量保持一致；主色配鲜明点缀通常优于保守且均匀分布的调色板。
- 动效：用于效果和微交互；HTML 优先使用纯 CSS 方案，React 在可用时使用 Motion 库；聚焦高影响力时刻，例如一次精心编排、带错落揭示（animation-delay）的页面加载。使用滚动触发和令人惊喜的悬停状态。
- 空间构图：非预期布局、非对称、重叠、对角流动、破格元素、充足留白或受控密集。
- 背景与视觉细节：营造氛围与纵深，而非默认纯色；加入与整体审美相符的语境化效果与纹理，例如渐变网格、噪点纹理、几何图案、层叠透明、戏剧化阴影、装饰性边框、自定义光标、颗粒叠加等。
-
明确避免：过度使用的字体族（Inter、Roboto、Arial、系统字体）、俗套配色（尤其是白底紫色渐变）、可预测的布局与组件模式、缺乏语境特征的模板化设计。要求创造性诠释并做出出人意料的、真正贴合语境的选择，不同设计之间应有变化，在浅色与深色主题、不同字体、不同审美之间切换，不要在多代生成中反复趋同于常见选择（例如 Space Grotesk）。
使用方式
资料说明该技能在用户要求构建网页组件、页面、作品或界面等场景时使用。流程为：先接收前端需求与相关背景，进行设计思考并确定美学方向，然后实现可运行代码，交付兼具功能性与视觉冲击力、风格统一、细节精致的界面。资料强调：让实现复杂度与美学愿景相匹配——极繁设计需要复杂代码、丰富动画与效果；极简或精致设计则需要克制、精确，并对间距、字体和微妙细节格外用心。
适用场景
用户要求构建 Web 组件、页面、作品或界面等前端开发场景，且期望获得具有独特设计感、达到生产级质量的结果。
限制
资料未提供关于收费、价格、具体支持平台或使用次数限制的信息；除上述美学规则与实现要求外，未提供更多技术细节或可复现的操作步骤。