用途：在用户需要构建 Web 组件、页面、应用或界面时，应用此技能产出独特、可直接上线的前端界面，风格鲜明、细节考究，避免千篇一律的"AI 味"设计。用户通常提供需求说明，可能包含意图、目标受众或技术限制。
主要能力：先确定视觉方向再做编码，作者要求先回答四个问题——目的（解决什么问题、给谁用）、基调（选择一种极端风格并精准执行，如极简、极繁、复古未来、自然、奢华、玩具感、杂志编辑、粗野主义、装饰几何、柔和粉彩、工业实用等）、约束（框架、性能、无障碍）、差异化（什么元素让人过目不忘）。交付物须为可运行的生产级代码（HTML/CSS/JS、React、Vue 等），风格统一、细节考究。
可调用的工艺手段：排版上避免 Arial、Inter 等常见字族，选有性格的展示字体搭配精致正文字体；色彩上使用 CSS 变量维持统一视觉、以主导色配锐利点缀；动效上纯 HTML 优先用 CSS，React 可用 Motion 库，集中于高冲击时刻（如一次错落的入场动画加滚动触发与悬停效果）；空间构图上追求不对称、重叠、对角流动、打破网格；背景上使用渐变网格、噪点纹理、几何图案、层次透明、戏剧阴影、装饰边框、自定义光标等营造氛围。作者明确要求避免 AI 惯用审美（Inter、Roboto、Arial、系统字体、紫渐变白底、模板化布局），并在多次生成中轮换主题与字体、不重复安全默认值。
配图脚本：技能自带 scripts/find-relevant-image.py，会在静态图片库中按描述匹配图片。调用方式：python scripts/find-relevant-image.py "<description>"，description 为图片用途描述。脚本对比 assets/images.csv 中各图片标签与描述的重合度选最高分，校验文件后保存到 scripts/outputs/（不存在会自动创建），最终完整输出路径打印到 stdout，文件名由图片元数据决定。示例：python scripts/find-relevant-image.py "warm, inviting background photo for a bakery landing page"。当设计需要真实图片而非占位图时调用。
限制：资料未提供该技能的具体收费、价格、平台要求与安装命令，暂未提供。