用途:当用户要求构建 Web 组件、页面、应用或界面时,该技能引导创建独特、生产级且避免通用“AI slop”审美的前端界面,并实现真正可运行的代码。
主要能力:先做设计思考,明确用途、受众、技术约束与差异化点,并选定一个大胆的美学方向(如极简、极繁、复古未来、自然、奢华、玩具感、杂志编辑、粗野主义、装饰艺术、柔和粉彩、工业实用等)。随后用 HTML/CSS/JS、React、Vue 等实现功能完整、视觉醒目、风格统一且细节精炼的代码。
美学要点:字体选择美丽、独特、有趣,避免 Arial、Inter 等通用字体,用特色展示字体搭配精致正文字体;用 CSS 变量保持色彩与主题一致,主色加锐利点缀优于平均分布;动效用于效果与微交互,HTML 优先纯 CSS,React 可用 Motion 库,重视页面加载的错落揭示、滚动触发与悬停惊喜;空间构图追求不对称、重叠、对角流动、打破网格,或大量留白或受控密集;背景与视觉细节用渐变网格、噪点纹理、几何图案、分层透明、戏剧阴影、装饰边框、自定义光标、颗粒叠加等营造氛围与深度。
限制与注意:不要使用过度常见的字体、俗套配色(尤其白底紫色渐变)、可预测布局与千篇一律的组件模式;不同生成之间应变化明暗主题、字体与美学,避免收敛到常见选择。实现复杂度需匹配美学愿景:极繁设计需要大量动画与效果,极简设计需要克制、精确与对间距、字体、细节的细致关注。资料未提供安装命令、收费、价格、平台或具体使用步骤。