Impeccable 高品质前端设计v2.0.0

免责声明：本站部分 Skill 来源于公开渠道，使用前请注意识别相关风险，内容版权归原作者所有，如 Skill 涉及版权问题，请在线反馈，核实后予以下架处理。

概述

Impeccable 是一套反「AI 审美趋同」的前端设计工具集，核心目标是让生成的界面具备明确的美学立场与品牌辨识度。它从设计上下文收集出发，要求先锁定目标受众、使用场景与品牌调性，再进入具体执行；覆盖视觉风格定向、排版系统搭建、空间节奏控制、动效交互设计、响应式适配、UX 文案打磨等全链路。区别于泛泛的「美化代码」，它强调每次设计都应选择极端而意图清晰的方向——无论是极简克制还是混沌极大化——并通过内置的「AI Slop Test」自检机制，确保产出让人追问「这是怎么做出来的」而非「哪个 AI 做的」。最终交付为可直接投入生产的前端实现，附带完整的设计系统提取与质量加固能力。

技能包含

• SKILL.md（本文件）：技能主说明，含设计上下文收集流程、核心美学原则与场景化能力导航
• references/：30 份领域参考文件，涵盖视觉、布局、动效、质量、设计系统五大方向
  • 风格调整：bolder.md、quieter.md、colorize.md、overdrive.md
  • 布局排版：arrange.md、typeset.md、adapt.md
  • 动效体验：animate.md、delight.md、onboard.md
  • 质量保障：audit.md、critique.md、polish.md、harden.md、optimize.md
  • 设计系统：extract.md、normalize.md、distill.md、clarify.md
  • 领域深入：typography.md、color-and-contrast.md、spatial-design.md、motion-design.md、interaction-design.md、responsive-design.md、ux-writing.md、heuristics-scoring.md、personas.md、cognitive-load.md
  • 项目初始化：teach-impeccable.md
• _skillhub_meta.json：技能包元数据

核心能力

• 反趋同美学定向：强制收集设计上下文后，选择极端且意图明确的视觉方向，避免 Inter + 紫蓝渐变 + 圆角卡片的 AI 默认配方
• 排版系统级控制：模块化字体比例、clamp() 流体尺寸、展示字体与正文字体的层级搭配，拒绝等宽字体冒充「技术感」
• 色彩与空间策略：oklch/color-mix/light-dark 色彩管理，变化间距创造节奏，禁止纯黑纯白与无意义毛玻璃
• 动效交互精修：状态变化驱动动画，指数缓动曲线，渐进式披露与有教育意义的空状态
• 全链路质量审计：a11y、性能、响应式、反模式检查，配合启发式评分与认知负载评估
• 设计系统提取与治理：从现有界面提取组件与 token，或反向规范化偏离标准的实现，支持精简去噪

应用场景