pbakaus/impeccable

# 完美 你未曾意识到自己需要的词汇表。包含 1 项 skill、17 条命令以及精心策划的反模式，旨在打造完美的前端设计。 ## 为什么选择 Impeccable？ Anthropic 创建了 [frontend-design](https://github.com/anthropics/skills/tree/main/skills/frontend-design)，这是一项引导 Claude 进行更优 UI 设计的 skill。Impeccable 在此基础上构建，提供了更深度的专业知识和更强的控制力。 每个 LLM 都从相同的通用模板中学习。在没有指导的情况下，你会得到同样可预测的错误：Inter 字体、紫色渐变、卡片套卡片、彩色背景上的灰色文本。 Impeccable 通过以下方式对抗这种偏见： - **一项扩展的 skill**，包含 7 个特定领域的参考文件（[查看源码](source/skills/frontend-design/)） - **17 条引导命令**，用于审计、审查、润色、提炼、动画化等 - **精心策划的反模式**，明确告诉 AI 什么*不该*做 ## 包含内容 ### The Skill: frontend-design 一项包含 7 个特定领域参考资料的综合性设计 skill（[查看 skill](source/skills/frontend-design/SKILL.md)）： | Reference | Covers | |-----------|--------| | [typography](source/skills/frontend-design/reference/typography.md) | 字体系统、字体搭配、模块化比例、OpenType | | [color-and-contrast](source/skills/frontend-design/reference/color-and-contrast.md) | OKLCH、带色调的中性色、暗黑模式、无障碍访问 | | [spatial-design](source/skills/frontend-design/reference/spatial-design.md) | 间距系统、网格、视觉层级 | | [motion-design](source/skills/frontend-design/reference/motion-design.md) | 缓动曲线、错开动画、减少动画 | | [interaction-design](source/skills/frontend-design/reference/interaction-design.md) | 表单、聚焦状态、加载模式 | | [responsive-design](source/skills/frontend-design/reference/responsive-design.md) | 移动优先、流体设计、容器查询 | | [ux-writing](source/skills/frontend-design/reference/ux-writing.md) | 按钮标签、错误信息、空状态 | ### 17 条命令 | Command | What it does | |---------|--------------| | `/teach-impeccable` | 一次性设置：收集设计上下文，保存到配置 | | `/audit` | 运行技术质量检查（a11y、性能、响应式） | | `/critique` | UX 设计审查：层级、清晰度、情感共鸣 | | `/normalize` | 与设计系统标准对齐 | | `/polish` | 发布前的最终检查 | | `/distill` | 剥离至本质 | | `/clarify` | 改进不清晰的 UX 文案 | | `/optimize` | 性能改进 | | `/harden` | 错误处理、i18n、边缘情况 | | `/animate` | 添加有目的性的动效 | | `/colorize` | 引入策略性的颜色 | | `/bolder` | 增强平淡的设计 | | `/quieter` | 降低过度大胆的设计 | | `/delight` | 添加愉悦时刻 | | `/extract` | 提取为可复用组件 | | `/adapt` | 适配不同设备 | | `/onboard` | 设计新手引导流程 | ### 反模式 该 skill 包含关于应避免内容的明确指导： - 不要使用过度使用的字体（Arial、Inter、系统默认字体） - 不要在彩色背景上使用灰色文本 - 不要使用纯黑/纯灰（始终应带有色调） - 不要把所有东西都包在卡片里或在卡片内嵌套卡片 - 不要使用弹跳/弹性缓动（感觉过时） ## 实战演示 访问 [impeccable.style](https://impeccable.style#casestudies) 查看使用 Impeccable 命令转换真实项目的前后案例研究。 ## 安装 ### 选项 1：从网站下载（推荐） 访问 [impeccable.style](https://impeccable.style)，下载适用于你工具的 ZIP 文件，并解压到你的项目中。 ### 选项 2：从仓库复制 **Cursor:** ``` cp -r dist/cursor/.cursor your-project/ ``` **Claude Code:** ``` # 特定于项目 cp -r dist/claude-code/.claude your-project/ # 或者 global（适用于所有项目） cp -r dist/claude-code/.claude/* ~/.claude/ ``` **Gemini CLI:** ``` cp -r dist/gemini/.gemini your-project/ ``` **Codex CLI:** ``` cp -r dist/codex/.codex/* ~/.codex/ ``` ## 用法 安装完成后，在你的 AI 辅助工具中使用命令： ``` /audit # Find issues /normalize # Fix inconsistencies /polish # Final cleanup /distill # Remove complexity ``` 大多数命令接受一个可选参数，以专注于特定区域： ``` /audit header /polish checkout-form ``` **注意：** Codex CLI 使用不同的语法：`/prompts:audit`、`/prompts:polish` 等。 ## 支持的工具 - [Cursor](https://cursor.com) - [Claude Code](https://claude.ai/code) - [Gemini CLI](https://github.com/google-gemini/gemini-cli) - [Codex CLI](https://github.com/openai/codex) ## 贡献 查看 [DEVELOP.md](DEVELOP.md) 了解贡献者指南和构建说明。 ## 许可证 Apache 2.0。详见 [LICENSE](LICENSE)。 frontend-design skill 基于 [Anthropic 的原始版本](https://github.com/anthropics/skills/tree/main/skills/frontend-design)构建。归因信息详见 [NOTICE.md](NOTICE.md)。 由 [Paul Bakaus](https://www.paulbakaus.com) 创建

标签：AIGC, Anthropic, Anti-Patterns, CIS基准, Claude Skills, DNS解析, LLM增强, UI/UX, 交互设计, 人工智能, 前端设计, 动效设计, 响应式设计, 大语言模型应用, 开源项目, 排版, 提示词工程, 无障碍访问, 用户模式Hook绕过, 策略决策点, 自定义脚本, 色彩理论, 设计系统, 设计规范, 设计语言, 防御加固