从 skills.sh 与 skillsmp.com 两大 Skill 市场收集并安装全部主流前端设计 Skill， 选出 5 个设计哲学差异最大的，加上无 Skill 对照组，在完全相同的任务简报、相同技术约束 （单文件 HTML、仅允许 Google Fonts、禁用外部图片）下各自独立生成页面。 七个任务覆盖视觉表现（A/B/C）、交互逻辑（D）、组件合理性（E）、创造性（F）与设计多样性（G）。以下全部为可交互的真实产物。
切换任务查看 6 个变体的实时渲染。缩略图为真实页面的等比缩放，点击可放大交互，也可在新标签页打开原始文件。任务 D/E 的向导流程、表单校验、弹窗、Toast 均真实可操作，建议放大后实际点一遍。
基于 42 个产物与各变体的执行记录评估。第一轮（任务 A-C）考察视觉表现，第二轮（任务 D-G）考察交互、组件、创造性与多样性。
| 变体 | 视觉个性 | 工程规范 | 动效工艺 | 三页一致性 | 一句话定位 |
|---|---|---|---|---|---|
| baseline | ●●●●● | ●●●●● | ●●●●● | ●●●●● | 干净、正确、但一眼「AI 味」 |
| frontend-design | ●●●●● | ●●●●● | ●●●●● | ●●●●● | 视觉冒险家，每页一个记忆点，但风格跨页跳跃 |
| web-design-guidelines | ●●●●● | ●●●●● | ●●●●● | ●●●●● | 看不见的品质：a11y 与排版规范全面碾压 |
| ui-ux-pro-max | ●●●●● | ●●●●● | ●●●●● | ●●●●● | 数据库驱动的六边形战士，风格是「查」出来的 |
| taste-skill | ●●●●● | ●●●●● | ●●●●● | ●●●●● | 最强反模板纪律：连文案用词都在管 |
| emil-design-eng | ●●●●● | ●●●●● | ●●●●● | ●●●●● | 动效工匠：静态截图看不出，一交互就懂 |
| 变体 | 交互完成度 (D) | 组件合理性 (E) | 创造性 (F) | 多样性 (G) | 第二轮结论 |
|---|---|---|---|---|---|
| baseline | ●●●●● | ●●●●● | ●●●●● | ●●●●● | 功能常识扎实，短板在多样性：三个方向都逃不出赛博舒适区 |
| frontend-design | ●●●●● | ●●●●● | ●●●●● | ●●●●● | 开放命题下断层领先：Art Deco 向导、玻璃故障 404、三方向彻底割裂 |
| web-design-guidelines | ●●●●● | ●●●●● | ●●●●● | ●●●●● | 交互与组件双满分：焦点管理、aria 语义、焦点陷阱全场唯一做全 |
| ui-ux-pro-max | ●●●●● | ●●●●● | ●●●●● | ●●●●● | UX 准则逐条可溯源；唯一系统考虑 404 错误恢复路径的变体 |
| taste-skill | ●●●●● | ●●●●● | ●●●●● | ●●●●● | 会按任务性质自动调节冒险度：功能页收敛、404 放开，纪律性最强 |
| emil-design-eng | ●●●●● | ●●●●● | ●●●●● | ●●●●● | 交互密集任务的主场：shake 校验、可中断 toggle、快出慢进 Toast |
对照组暴露了默认输出的收敛性：紫色系主色、Inter 字体、居中 Hero、三等分卡片。效果最好的 Skill（frontend-design、taste-skill）核心手段都是负面清单——禁用 AI 惯用字体、禁用紫渐变、禁用居中构图、甚至禁用「革命性」这类词。禁令比正面示范更能打破模型的统计惯性。
frontend-design 产出了最惊艳的视觉（墨黑金落地页、构成主义作品集），但 web-design-guidelines 在源码层面全面领先：skip-link、aria-sort、tabular-nums、reduced-motion 兜底。前者赢在截图，后者赢在验收。生产项目里两者叠加使用（先设计后审计）可能是最优解。
ui-ux-pro-max 是唯一带可执行检索流程的 Skill（161 套配色、57 组字体的 CSV + 搜索脚本）。它为三个任务分别检索出 Glassmorphism / Data-Dense / Motion-Driven 并严格落地。上限不如自由发挥的 frontend-design，但下限最稳、可复现性最强，适合团队规模化使用。
emil-design-eng 的静态布局和对照组差距不大，但交互后差异显著：统一的 cubic-bezier 缓动、scale(0.95) 入场、50-70ms 交错、:active 按压反馈、hover 媒体查询防触屏误触。评估此类 Skill 必须实际交互，纯截图对比会严重低估它。
任务 E 里六个变体全部正确实现了危险操作二次确认（多数带"输入名称解锁"），说明组件常识是模型基本功。差异在体系化程度：web-design-guidelines 补全了焦点陷阱、Esc 关闭、焦点返还、aria-live 播报这些手测很难发现、验收必挂的细节；ui-ux-pro-max 则每个组件行为都能对应到检索出的 UX 准则条目。
任务 F（404 页）命题完全开放，对照组表现反而不差（星空 + 宇航员），但上限差距明显：frontend-design 做出了鼠标视差 + glitch 数字 + 纯 SVG 山脉太阳的完整叙事场景；taste-skill 展示了独特的机制——检测到创意命题后主动把自己的冒险度参数从 6 拉到 9。约束型任务看纪律，开放型任务看胆量，两者是不同的能力。
任务 G 要求同一组件给出 3 个截然不同的方向。对照组的三个方向（深空霓虹/黑白黑胶/荧光终端）看似不同、实则都在"酷炫暗色"舒适区。frontend-design 和 taste-skill 的三方向做到字体家族、色彩体系、控件语言全维度割裂——taste-skill 的"印刷编辑风播放器"（衬线斜体大字封面 + 1px 细线进度条）是全部 18 个方向里唯一跳出"播放器该有的样子"的方案。没有 Skill 时模型会用表面差异冒充多样性。
任务 D 六个变体的校验流程全部真实可用（已实测：不选航班点下一步均正确报错）。有趣的是相同行为背后的驱动不同：web-design-guidelines 出于 a11y（校验失败聚焦首个错误字段）、ui-ux-pro-max 出于检索到的 focus-management 准则、emil-design-eng 出于动效反馈（shake 抖动）。好的交互像是多条设计哲学的交汇点——这也解释了为什么此维度分差最小。
两个市场检索到的前端设计相关 Skill 汇总。标注「预装」的在本环境已存在，其余为本次新安装或替换为完整版，全部位于 ~/.claude/skills/。
| Skill | 来源仓库 | 说明 | 状态 |
|---|---|---|---|
| frontend-design | anthropics/skills | Anthropic 官方：反 generic AI 美学，skills.sh 安装量第一（620K） | 参评预装 |
| web-design-guidelines | vercel-labs/agent-skills | Vercel 工程团队 Web 设计规范：布局/排版/动效/无障碍 | 参评预装 |
| ui-ux-pro-max | nextlevelbuilder/ui-ux-pro-max-skill | 50+ 风格、161 配色、57 字体搭配的可检索设计数据库 | 参评升级为完整版 |
| taste-skill | leonxlnx/taste-skill | 反模板设计品味：1200 行严格 pre-flight 检查清单 | 参评预装 |
| emil-design-eng | emilkowalski/skills | Emil Kowalski 设计工程：动效、缓动、交互细节工艺 | 参评新安装 |
| frontend-design-landing-page | cloudflare/vibesdk | 营销转化页参考：奶油底色、大留白、胶囊 CTA | 新安装 |
| frontend-design-saas | cloudflare/vibesdk | SaaS 仪表盘参考：Stripe/Linear/Vercel 风 + WCAG AA+ | 新安装 |
| extract-design-system | arvindrk/extract-design-system | 从现有页面/截图反向提取设计系统 | 新安装 |
| design-an-interface | mattpocock/skills | Matt Pocock 的界面设计工作流 | 新安装 |
| sleek-design-mobile-apps | sleekdotdesign/agent-skills | 移动端 App 设计（skills.sh 310K 安装） | 新安装 |
| impeccable-design-polish | pbakaus/impeccable | 后置打磨型 Skill：对已有页面审计、抛光、加动效 | 预装 |
| gpt-tasteskill / minimalist / brutalist / stitch… | leonxlnx/taste-skill 系列 | 同仓库的风格分支：极简、粗野主义、高端视觉等 | 预装 |
