从 skills.sh 与 skillsmp.com 两大 Skill 市场收集并安装全部主流前端设计 Skill， 选出 5 个设计哲学差异最大的，加上无 Skill 对照组，在完全相同的任务简报、相同技术约束 （单文件 HTML、仅允许 Google Fonts、禁用外部图片）下各自独立生成页面。 十个任务覆盖视觉表现、交互逻辑、组件合理性、创造性、多样性、电商、移动端与数据叙事。以下全部为可交互的真实产物。
切换任务查看 8 个变体的实时渲染；qiaomu-design 与 impeccable 均已补齐 10 个任务。缩略图为真实页面的等比缩放，点击可放大交互，也可在新标签页打开原始文件。任务 D/E 的向导流程、表单校验、弹窗、Toast 均真实可操作，建议放大后实际点一遍。
基于 80 个产物与各变体的执行记录评估。第一轮（A-C）考察视觉表现，第二轮（D-G）考察交互、组件、创造性与多样性，第三轮（H-J）考察电商、移动端与数据叙事；qiaomu-design 与 impeccable 均覆盖全部 10 个任务。
| 变体 | 视觉个性 | 工程规范 | 动效工艺 | 三页一致性 | 一句话定位 |
|---|---|---|---|---|---|
| baseline | ●●●●● | ●●●●● | ●●●●● | ●●●●● | 干净、正确、但一眼「AI 味」 |
| frontend-design | ●●●●● | ●●●●● | ●●●●● | ●●●●● | 视觉冒险家，每页一个记忆点，但风格跨页跳跃 |
| web-design-guidelines | ●●●●● | ●●●●● | ●●●●● | ●●●●● | 看不见的品质：a11y 与排版规范全面碾压 |
| ui-ux-pro-max | ●●●●● | ●●●●● | ●●●●● | ●●●●● | 数据库驱动的六边形战士，风格是「查」出来的 |
| taste-skill | ●●●●● | ●●●●● | ●●●●● | ●●●●● | 最强反模板纪律：连文案用词都在管 |
| emil-design-eng | ●●●●● | ●●●●● | ●●●●● | ●●●●● | 动效工匠：静态截图看不出，一交互就懂 |
| impeccable | ●●●●● | ●●●●● | ●●●●● | ●●●●● | 确定性 polish 抬高下限：色彩种子、register 分流与可访问性纪律让三页更稳 |
| qiaomu-design 融合版 | ●●●●● | ●●●●● | ●●●●● | ●●●●● | 视觉个性接近 frontend-design，工程规范持平 Vercel，三页发散且各自成立 |
| 变体 | 交互完成度 (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 |
| impeccable | ●●●●● | ●●●●● | ●●●●● | ●●●●● | 组件和流程页最稳，404 与多样性页有明显 register 分流；detect/polish 思路适合做上线前门禁 |
| qiaomu-design 融合版 | ●●●●● | ●●●●● | ●●●●● | ●●●●● | 拨盘按任务自动切换（向导 5/5/6 ↔ 404 拉满 10/9/2）；preflight 生成中实际拦截 3 次违规 |
| 变体 | 电商详情 (H) | 移动端 (I) | 数据叙事 (J) | 第三轮结论 |
|---|---|---|---|---|
| baseline | ●●●●● | ●●●●● | ●●●●● | 功能齐全的三张及格卷，无一失误也无一记忆点 |
| frontend-design | ●●●●● | ●●●●● | ●●●●● | 「夜晚窑炉」与「咖啡账本」再证氛围断层领先；首字下沉、汉字步序皆神来之笔 |
| web-design-guidelines | ●●●●● | ●●●●● | ●●●●● | 移动端主场：44px/inputmode/键盘导航满配，59 处 aria 是全场纪录 |
| ui-ux-pro-max | ●●●●● | ●●●●● | ●●●●● | 电商是它的准则库主场：sticky CTA/面包屑/触控逐条命中，商业完成度最高 |
| taste-skill | ●●●●● | ●●●●● | ●●●●● | 规格表 2 列大数字卡片是 4.9 节的教学示范；主动规避 beige+espresso 默认配色 |
| impeccable | ●●●●● | ●●●●● | ●●●●● | 首战亮眼：OKLCH 种子色 + register 分流 + detect 无 LLM 检测真实修掉 2 处违规——确定性检测是全场独有机制 |
| emil-design-eng | ●●●●● | ●●●●● | ●●●●● | 移动端手感之王：stagger 入场、灵动岛 ease-drawer、环形图绘入 |
| qiaomu-design 融合版 | ●●●●● | ●●●●● | ●●●●● | 功能契约 + DNA + 两轮制稳定发挥；四视角评审在三页各拦下 reveal 隐藏内容等真问题（主场优势声明见下） |
对照组暴露了默认输出的收敛性：紫色系主色、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 抖动）。好的交互像是多条设计哲学的交汇点——这也解释了为什么此维度分差最小。
把六边形对比的产物拉回赛场：融合版在完全相同的 7 个简报下重跑全部任务。 结果验证了融合思路——视觉个性追平 frontend-design（暖纸赤陶落地页、巨字作品集、星空 404）， 工程规范追平 web-design-guidelines（焦点陷阱、tabular-nums、reduced-motion 全覆盖，自动扫描零违规）， 且拨盘机制真实生效：向导自动收敛到 5/5/6，404 自动拉满 10/9/2。 最有说服力的细节：preflight 门禁在生成过程中实际拦截了 3 次违规（两次 transition:all、一次 Inter 字体）并强制返工—— 规则不是写着好看的。
v3.0 复赛（用户反馈后迭代）：初版 PK 被用户评价"没有显著更好"，复盘结论是禁令只抬下限不抬上限。 v3.0 加入进攻三步（58 站 DNA 注入 / 工艺密度 ≥5 / 截图-三视角评审-精修的两轮制）后重跑了落地页、作品集、404 三个视觉任务。 两轮制的评审真实揪出并修复了淡入 JS 黑屏、徽章溢出裁剪、标题断句尴尬等问题；DNA 注入让 Framer 的蓝光环阴影、 SpaceX 的幽灵按钮、Linear 的层级底色成为可溯源的具体值。当前展示的 A/C/F 三页即 v3.0 产物。 公平性说明：评分者与 skill 作者同源，且融合版规则来自对这批对手的学习，存在天然主场优势，仅供参考。
应要求补测 pbakaus/impeccable（上游完整版，走其 craft 流程 + register 分流 + OKLCH 种子色脚本），现已覆盖全部 10 个任务。 三个发现：①确定性检测是全场独有机制——detect.mjs 不依赖 LLM 跑 45 条规则，真实修掉了 transition:width 动画等违规， 比"靠模型自觉"的门禁更硬；②register 分流（brand 版式自由 / product 克制字阶）与我们的拨盘异曲同工但更简洁； ③它的 anti-cream 规则直接命中本实验多个变体的暖纸底偏好——包括融合版 v3.1 的落地页，这条已值得吸收。 新题上八家的三张卷面差距比前两轮更小：电商/移动端这类强惯例场景里，规则密集型 skill 们趋于收敛， 差异主要剩下氛围胆量（frontend-design）与机制可靠性（detect / 两轮制）。
两个市场检索到的前端设计相关 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 系列 | 同仓库的风格分支：极简、粗野主义、高端视觉等 | 预装 |