项目简介
Impeccable 提供共享的设计词汇、领域参考和反模式规则,以增强 AI 模型的前端设计输出。它包含 23 个命令,可作为多种编码助手的技能使用。
README 预览
# Impeccable\n\nThe vocabulary you didn't know you needed. 1 skill, 23 commands, and curated anti-patterns for impeccable frontend design.\n\n> **Quick start:** Visit [impeccable.style](https://impeccable.style) to download ready-to-use bundles.\n\n## Why Impeccable?\n\nAnthropic's [frontend-design](https://github.com/anthropics/skills/tree/main/skills/frontend-design) was the first widely-used design skill for Claude. Impeccable started from there.\n\nEvery model trained on the same SaaS templates. Skip the guidance and you get the same handful of tells on every project: Inter for everything, purple-to-blue gradients, cards nested in cards, gray text on colored backgrounds, the rounded-square icon tile above every heading.\n\nImpeccable adds:\n- **7 domain reference files** ([view source](skill/)). Typography, color, motion, spatial, interaction, responsive, UX writing. Load on every command, alongside a brand-vs-product register that adjusts the defaults.\n- **23 commands.** A shared design vocabulary with your AI: `polish`, `audit`, `critique`, `distill`, `animate`, `bolder`, `quieter`, and more.\n- **27 deterministic anti-pattern rules** plus a 12-rule LLM critique pass. CLI and browser extension run the deterministic ones with no LLM and no API key. Each is tied to specific design guidance the skill teaches against.\n\n## What's Included\n\n### The Skill: impeccable\n\nA comprehensive design skill with 7 domain-specific references ([view skill](skill/SKILL.src.md)):\n\n| Reference | Covers |\n|-----------|--------|\n| [typography](skill/reference/typography.md) | Type systems, font pairing, modular scales, OpenType |\n| [color-and-contrast](skill/reference/color-and-contrast.md) | OKLCH, tinted neutrals, dark mode, accessibility |\n| [spatial-design](skill/reference/spatial-design.md) | Spacing systems, grids, visual hierarchy |\n| [motion-design](skill/reference/motion-design.md) | Easing curves, staggering, reduced motion |\n| [interaction-design](skill/refer
常见问题 (5)
故障排除运行impeccable的detect.mjs时,出现“bundled detector not found”错误的原因是什么?
此错误发生的原因是 npx skills 安装程序仅打包了技能子树,缺少检测引擎。该问题已在最新版本中解决——请更新技能。如果无法更新,请使用以下变通方法:mkdir -p .agents/skills/impeccable/scripts/detector && ln -sf "$(pwd)/node_modules/impeccable/cli/engine/detect-antipatterns.mjs" .agents/skills/impeccable/scripts/detector/detect-antipatterns.mjs。这会将来自 impeccable npm 包的引擎符号链接到预期位置。
故障排除为什么critique-storage.mjs脚本在Windows上不返回任何输出?
该脚本的入口点守卫比较了 import.meta.url(在Windows上使用正斜杠)和 file://${process.argv[1]}(反斜杠),导致相等性检查失败,main() 从未被调用。此漏洞在 v3.1.1 版本中通过改用能规范化路径分隔符的 pathToFileURL(process.argv[1]).href 修复。使用以下命令更新技能:npx skills add pbakaus/impeccable
故障排除为什么在 pnpm workspace 中运行 impeccable live-server --background 会报告超时,而 'stop' 却找不到服务器?
已知的根目录解析 bug(skill 4.6.0 / engine 0.1.15):在 pnpm workspace 内部,父进程与分离的后台子进程解析出的项目根目录不同,因此 server.json 会被写入同级的 workspace 应用(例如 apps/web/.impeccable/live/server.json),而不是你运行命令时所在的目录。随后父进程会轮询错误的路径,打印 Timed out waiting for live server to start. 并以退出码 1 退出,尽管服务器实际上是健康的(curl http://127.0.0.1:8400/health 返回 ok)。传入 --target . 也无济于事——该标志在子进程生成之前就已经被消费掉了。
变通方法:
1. 找出状态文件实际写入的位置:find . -path '*/.impeccable/live/server.json'
2. 从那个目录(即同级应用)运行 stop 来停止被孤立的服务器:cd apps/web && impeccable live-server stop --keep-inject
3. 或者按端口杀掉它:使用 lsof -nP -iTCP:8400 -sTCP:LISTEN 获取 PID,然后 kill <PID>。
4. 要彻底避免该问题,请从 workspace 根目录启动 impeccable live-server,或者将静态 mock 文件移动到 pnpm workspace 之外的独立目录中——该 bug 在那些情况下不会发生。
注意:从同级应用直接运行不带参数的 stop 还会对错误项目的入口文件执行 live-inject --remove,因此清理时请使用 --keep-inject。
故障排除为什么 impeccable detect 会对一个包含无 padding 内层 wrapper 的 wrapper 报告 cramped-padding 误报?
在 impeccable ≤4.1.0 中,cramped-padding 的贴边检查只测量直接子元素。如果一个带颜色的 wrapper 的唯一子元素是一个透明、无文本的内部 div(例如用于 container-query 尺寸调整的包装器),那么该内部盒子的四条边都会贴边,因此即使承载文本的孙级元素具有正常的 padding,该规则也会触发。变通方法:添加一个文件级忽略——ignore-value cramped-padding "*" --file <glob>——但请注意,这也会屏蔽这些文件中真实存在的 cramped-padding 问题。永久修复:PR #1059 使该规则能够穿透一个透明、无文本且子元素确实会堆叠的 wrapper(block/flow-root 或 column flex;row-flex 子元素无法在顶部/底部贴边),并改为在这些子元素处测量 inset。待该 PR 发布后,请升级 impeccable。
操作指南如何跨会话持久化Impeccable的评审结果,以避免重新提出已解决的问题?
创建一个手动的CRITIQUE.md文件,用于存储之前的批评输出。在运行新的/impeccable critique之前,指示智能体读取CRITIQUE.md以获取上下文,并在审查后更新该文件。这种变通方法模拟了提议的功能,直到内置的持久化功能实现。