用途：该技能用于创建具有辨识度、可直接投入生产的前端界面，适用于用户要求构建网页组件、页面等场景，重点在审美细节与创意决策上避开泛化的“AI 生成”观感。
主要能力：先执行“设计思维协议”——在编码前先提问，理解用途、受众、语气方向、技术约束（框架、性能、可访问性）以及差异化记忆点；随后明确提出2-3种带取舍的替代方案；最后实现可运行的代码（HTML/CSS/JS、React、TypeScript 等），要求生产可用、视觉突出且细节精致。
它提供大量美学方向参考，如极简、复古未来、编辑杂志、粗野主义、新瑞士网格、动能排版、故障数字噪点、Y2K、蒸汽波、合成波、孟菲斯、Risograph、包豪斯、构成主义、电影黑色、等距系统、数据仪表盘等，另附“强制多样性”机制（颜色冷暖、布局方向、字体性格、动效哲学、信息密度等维度），用于无品牌约束或思路枯竭时探索方向。
设计原则上强调：字体要有鲜明特征、避免 Inter/Arial/Roboto/Space Grotesk 等通用或过度使用选项；色彩用 CSS 变量保持一致性，主色配少量锐利强调色；动效优先纯 CSS，React 场景可用 Motion 库，注重视觉冲击力强的编排时刻；空间构图追求非对称、重叠、破格等非常规布局；背景使用渐变网格、噪点纹理、几何图案等营造氛围。同时列出明确避免的 AI 风格元素：通用 SaaS 蓝、白底紫渐变、玻璃拟态、模仿 Apple 设计等。
还包含可访问性要求（WCAG AA）、响应式、颜色与对比的双层体系（4-5 个中性色 + 1-3 个强调色）、字体层级与数学间距比例、以及交付前的核对清单。
限制：资料未说明该技能的具体安装方式、运行命令、收费情况或平台支持；使用流程中以提问—确认—实现为主，需匹配实现复杂度与所选美学方向。