用途:当用户要求构建 Web 组件、页面、应用或界面时,使用本技能引导生成独特、达生产级标准的前端界面,规避通用的 AI 审美套路,并以真实可运行代码实现高度讲究的视觉细节与创意选择。用户提供前端需求,可能包含目的、受众或技术约束等信息。
使用方式:编码前先确定设计思路,明确界面要解决的问题与使用者,选定一种极端的美学调性(如极简、极大主义、复古未来、自然有机、奢华精致、玩具感、杂志编辑风、粗野主义、装饰艺术、柔和粉彩、工业实用等),兼顾框架、性能、无障碍等技术约束,并思考差异化亮点。确定清晰概念方向后精确执行,再用 HTML/CSS/JS、React、Vue 等实现可运行代码。
主要能力与准则:排版上回避 Arial、Inter 等通用字体,选择独特有个性的展示字体搭配精致正文字体;配色坚持统一审美,用 CSS 变量保证一致性,主色加鲜明点缀优于平均分布;动效用 CSS 优先,React 可用 Motion 库,强调页面加载的编排式错峰揭示与滚动、悬停惊喜;布局上采用非对称、重叠、对角流向、打破网格等意外构成;背景注重氛围与纵深,可用渐变网格、噪点、几何纹理、层次透明、戏剧阴影、装饰边框、自定义光标等。
限制与注意:避免滥用字体家族、紫色渐变配白底等陈词滥调配色和可预测布局;不同生成之间应有所变化,不要总收敛到同一选择。实现复杂度需匹配审美愿景:极大主义需丰富动画效果,极简精致则需克制精准。具体框架要求、性能指标、无障碍标准与价格信息暂未提供。