impeccable

name	impeccable
description	Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics. Trigger scenarios — use when the user mentions any of: - UI design, frontend design, web design, interface design, 界面设计, 前端设计 - responsive layout, mobile adaptation, breakpoints, 响应式, 自适应, 适配 - animation, motion, micro-interaction, transitions, 动画, 动效, 微交互 - UX copy, microcopy, error messages, labels, UX 文案, 文案优化 - performance optimization, bundle size, rendering, 性能优化, 渲染, 加载速度 - accessibility audit, a11y, WCAG, 无障碍, 可访问性 - design review, design critique, UX evaluation, 设计评审, 设计审查 - typography, fonts, type hierarchy, 字体, 排版, 字号 - color palette, color scheme, theming, 配色, 色彩, 主题 - layout, spacing, visual rhythm, grid, 布局, 间距, 视觉节奏 - simplify UI, declutter, reduce noise, 精简, 简化, 去噪 - design system, components, tokens, 设计系统, 组件库, token - edge cases, error handling, i18n, overflow, 边缘情况, 容错, 国际化 - onboarding, empty state, first-run experience, 引导, 空状态, 新手体验 - visual impact, make it bold, more personality, 视觉冲击, 更大胆, 更有个性 - tone down, calmer, less aggressive, 降噪, 更柔和, 更克制 - polish, finishing touches, pre-launch QA, 打磨, 最终检查 - extraordinary effects, shaders, scroll-driven, 炫酷效果, 非凡视觉 - normalize, consistency, design drift, 规范化, 一致性 - extract components, refactor patterns, 提取组件, 复用模式
description_zh	高品质 UI/UX 设计工具集：帮助生成独特、生产级的前端界面，涵盖视觉风格、布局排版、动效交互、质量保障、设计系统等全方位设计能力，避免泛 AI 审美
description_en	UI/UX design quality toolkit for creating distinctive, production-grade frontend interfaces with high design standards across visual style, layout, motion, quality assurance, and design systems
version	2.0.0
homepage	https://github.com/pbakaus/impeccable
license	Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution.
allowed-tools	Read,Write,Bash

Impeccable — 高品质前端设计工具集

基于 Impeccable 项目，帮助生成独特、生产级的前端界面设计，避免泛 AI 审美。

---

设计上下文（开始前必读）

设计技能在没有项目上下文时会产生泛化输出。开始任何设计工作前，必须确认设计上下文。

必需上下文：

• Target audience：谁使用这个产品？在什么情境下？
• Use cases：他们要完成什么任务？
• Brand personality/tone：界面应该给人什么感觉？

CRITICAL：不能通过阅读代码库来推断上下文。代码只告诉你构建了什么，不是为谁构建或应该有什么感觉。

收集顺序：

1. 如果当前指令中已有 Design Context 部分，直接使用
2. 读取项目根目录的 .impeccable.md 文件
3. 如果都没有，必须先执行上下文收集流程 → 读取 teach-impeccable.md

---

核心美学原则

设计方向

选择 大胆 的美学方向。大胆的极大化和克制的极简化都行——关键是意图性，不是强度。

• Purpose：解决什么问题？谁在使用？
• Tone：选一个极端：极简、混沌极大化、复古未来、有机自然、奢华精致、玩具般俏皮、杂志编辑风、野兽派、装饰艺术、柔和粉彩、工业实用风……
• Constraints：技术要求（框架、性能、可访问性）
• Differentiation：让人记住的一个点是什么？

实现的代码必须是：生产级且可用 · 视觉惊艳且令人难忘 · 具有清晰美学观点的统一风格 · 每个细节都经过精心打磨。

The AI Slop Test

如果你把这个界面展示给某人并说"这是 AI 做的"，他们会立刻相信吗？如果是，那就是问题所在。 独特的界面应该让人问"这是怎么做出来的？"，而不是"哪个 AI 做的？"

DO / DON'T 速查

维度	✅ DO	❌ DON'T	深入阅读
字体	独特展示字体 + 精致正文字体；模块化比例；clamp() 流体尺寸	Inter/Roboto/Arial/Open Sans；等宽当"技术感"；标题上方大图标+圆角	typography.md
色彩	oklch/color-mix/light-dark；中性色调偏向品牌色	纯黑 #000 / 纯白 #fff；AI 配色（青+深色、紫蓝渐变、霓虹点缀）；默认深色+发光	color-and-contrast.md