让AI做的页面不像AI做的

--- name: design-taste description: 让 AI 做的页面总是一股 AI 味（紫蓝渐变+圆角卡片三件套）？这个技能逼它先定一个有个性的美学方向，再按排版/配色/布局规范落地，最后两道闸专查「一眼假」。出来的页面像人做的。触发词：做个页面、设计网页、美化页面、页面太丑、设计感、HTML报告美化。 display_name: 让AI做的页面不像AI做的 display_name_en: De-AI Design Polish description_zh: 评审 UI、图片、游戏美术里的「AI 味」，给出具体改法，让成品像人做的。 description_en: Spot and fix the AI look in UI, images and game art. examples_zh: - "这个页面太有 AI 味帮我改" - "评审一下这组图的问题" - "游戏界面怎么不像模板" examples_en: - "This page looks too AI, fix it" - "Review this image set" - "Make my game UI look handcrafted" version: 1.0.3 author: "ayan" --- # design-taste — 网页设计品味 一句话总纲：先选大胆美学方向，再按规范执行，最后两道闸自查去AI味。 吸收自：frontend-design（方向先行+Polish+AI Slop测试）、canvas-design（先哲学后表达+二遍精修）、UI/UX Pro Max（Triage先行+完整态硬标准）、design-md（品牌风格匹配指针）。 ## 环境探测（动手前必做） Triage四问，能从上下文推断的就推断并声明结论，别四问全抛给用户： 1. **载体**：单文件HTML / React组件 / 框架页面？单文件=CSS/JS全部内联。 2. **用途与受众**：给人读的报告（可读性优先）／产品落地页（情绪与转化优先）／后台工具（效率优先）？——用途决定Step 1方向的激进程度。 3. **既有约束**：品牌色、已有设计系统、必用组件库、深色/浅色？ 4. **可访问性要求**：默认按WCAG AA执行，用户另有要求从其要求。 ## 核心流程 ### Step 1 定美学方向（先哲学后表达） - **给方向命名**：艺术运动式命名（如"Brutalist Joy"）。禁止"现代简约""干净大气"这类零信息命名——那是没有方向。 - **写一句话宣言**：这个方向为什么服务这个页面的目的（报告页=帮读者扫读，产品页=制造情绪记忆）。 - **找记忆点**：把主题的概念DNA藏进视觉细节——不只是配色，章节编号样式、分隔符、图表网格样式、标题节奏都可以是记忆点。 - **边界**：报告类页面可读性是底线，记忆点做在框架层（章节头/导航/图表），不做进正文层。 ### Step 2 匹配参考风格（按需） 需要"像某个知名网站/品牌"时：**若已安装 design-md skill**（68个品牌风格模板），按其流程出DESIGN.md拿到设计tokens，再回本流程Step 3落地；**没装就跳过本步**，直接在Step 1的方向里写明参考对象的关键特征（配色倾向/字体气质/版式密度），照Step 3落地。不要为引而引。 ### Step 3 四套规范落地 **排版**：正文≥14px、行高1.6–1.8；层级靠字号+字重+留白表达，不靠加粗堆砌；等宽字体只用于代码与数据；中西文混排留白策略全文统一。 **色彩**：一个主色+一个强调色封顶，装饰色从主色派生；正文对比度≥4.5:1（WCAG AA）；深色页面正文灰度是重灾区，次级信息靠字号区分、不靠降对比。 **布局**：先定栅格再放内容；一屏一个视觉焦点；留白是设计手段不是剩余空间；卡片宽度服务内容长度，不做三栏等距凑数。 **动效**：150–300ms缓动；只动有意义的（状态反馈/引导视线）；`prefers-reduced-motion`下全部降级；无循环大动画。 ### Step 4 完整态硬标准（缺一不算交付） - **5态交互**：default / hover / active / focus / disabled 全部有明确样式。 - **三态数据**：空（无数据有引导）、加载（骨架屏或spinner）、错误（有重试入口）——不许留白或只写一行字。 - **键盘导航**：Tab顺序合理、焦点态可见（`:focus-visible`）。 - **触控目标**：移动端可点元素≥44px。 ### Step 5 二道闸精修（强制，写完≠做完） **第一遍 Polish Checklist**（逐项过，命中即修）： □ 正文对比度过AA □ 字体有明确选择理由（非默认直达）□ 焦点态可见 □ 空加载错误三态齐 □ 图表有网格线与刻度标签 □ 标题层级≤3级 □ 间距节奏统一（用间距阶不用随手值）□ 色彩≤1主+1强调 □ 动效可关 □ 窄屏不塌 **第二遍 AI Slop测试**： 问自己：「别人会不会一眼看出是AI做的？」反例黑名单，命中即返工： - 紫蓝渐变hero + 默认字体 + 三栏等距圆角卡片三件套 - 大面积glassmorphism毛玻璃套一切 - emoji当图标用 - 空洞营销话术（"赋能""一站式""极致体验"） - 装饰性渐变球/网格背景凑数 命中处理：回Step 1换更极端基调重做，不做小修小补——AI味是方向不明的症状，不是细节问题。 ## 能力边界 | 事项 | 归属 | |---|---| | 海报/封面/视觉稿 | 不在本skill范围 | | 文案文字去AI味 | humanize-writing | | 代码bug/质量审查 | code-review | | 具体品牌风格模板与DESIGN.md | design-md（装了才有，未装走Step 1方向自定） | | **高危动作：覆盖用户已有样式/设计文件** | 先备份原文件到workspace并征得同意再改 | ## FAQ / 故障剧本 - **做完还是AI味**：回Step 1——多半是方向命名太温和（"现代简约"=没有方向），换更极端基调整页重做，禁止小修小补。 - **可读性和美感打架**：报告类页面可读性一票否决，砍装饰保正文。 - **多页风格漂移**：先定design tokens（色板/字号阶/间距阶）再写页面，tokens先行，页面引tokens。 - **深色页灰字看不清**：正文灰度提亮到AA以上，层级用字号和留白区分，不靠降对比度。 ## 自检清单（交付前） □ Step 1方向有命名有宣言，非零信息命名 □ Triage四项已推断或确认 □ Step 4完整态四项全覆盖 □ Polish Checklist十项全过 □ AI Slop黑名单零命中 □ 覆盖已有文件前已备份确认 ## 免责声明 - 本 skill 按「现状」提供（MIT 许可），作者不对使用结果作任何保证。 - 使用者自负合规责任：请遵守你所在平台的服务条款与当地法规；生成的任何内容发布前请自查（广告法、违禁词、版权）。 - 本包不代任何第三方品牌、不含第三方私有数据；文中出现的第三方产品名仅为功能互操作说明或示例，与相应方无关联、无赞助。

存档时间线

版本索引永久保留；内容副本只保留最新 1 份，更早版本仅留索引与哈希（存档时间线的证据链不会因此断裂）。

下载存档内容副本