前途科技前途科技
  • 洞察
  • 服务
  • 关于
  • AI 资讯
    • 快讯
    • 产品
    • 技术
    • 商业
    • 政策
    • 初创
  • 洞察
  • 资源中心
    • 深度研究
      • AI 前沿
      • 案例研究
      • AI 知识库
    • 行业报告
      • 白皮书
      • 行业报告
      • 研究报告
      • 技术分享
      • 专题报告
    • 精选案例
      • 金融行业
      • 医疗行业
      • 教育行业
      • 零售行业
      • 制造行业
  • 服务
  • 关于
联系我们
AI 前沿/08.24 · 09:00/5 MIN/编译自 GitHubStore/0 阅读

5w颗星!前Google工程师为Agent打造的设计系统

项目简介 Anthropic 的 frontend-design 是第一个被广泛使用的 Claude 设计技能。Impeccable 从那里起步。 每个模型都在相同的 SaaS 模板上训练。如

                    <div class="detail-content-box has-mask large">
                        <section style=&#039;color: rgb(39, 52, 68);background-color: rgb(255, 255, 255);font-size: 16px;font-weight: 400;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;font-synthesis: none;line-height: 29.6px;text-align: left;margin: 0px;padding: 0px;border-radius: 0px;display: block;word-break: break-word;overflow-wrap: break-word;list-style-type: disc;vertical-align: baseline;text-rendering: optimizelegibility;box-sizing: border-box;width: 100%;&#039; lang="en" data-pm-slice="0 0 []"><span data-octopus-pseudo="before" aria-hidden="true" style=&#039;color: rgb(39, 52, 68);font-size: 16px;font-weight: 400;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;font-synthesis: none;line-height: 29.6px;text-align: left;margin: 0px;padding: 0px;border-radius: 0px;display: table;word-break: break-word;overflow-wrap: break-word;list-style-type: disc;vertical-align: baseline;text-rendering: optimizelegibility;box-sizing: content-box;width: 0px;height: 0px;min-width: 0px;min-height: 0px;transform-origin: 0px 0px;z-index: auto;&#039;></span><h2 lang="en" style=&#039;color: rgb(17, 24, 39);font-size: 19px;font-weight: 700;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;font-synthesis: none;letter-spacing: -0.38px;line-height: 26.98px;text-align: left;margin: 0px 0px 14px;padding: 0px 0px 0px 12px;border-bottom: 0.666667px solid rgb(216, 222, 228);border-left: 4px solid rgb(37, 99, 235);border-radius: 0px;display: block;word-break: break-word;overflow-wrap: break-word;list-style-type: disc;vertical-align: baseline;text-rendering: optimizelegibility;box-sizing: border-box;&#039;><span lang="en" style=&#039;color: rgb(17, 24, 39);font-size: 19px;font-weight: 700;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;font-synthesis: none;letter-spacing: -0.38px;line-height: 26.98px;text-align: left;margin: 0px;padding: 0px;border-radius: 0px;display: inline;word-break: break-word;overflow-wrap: break-word;list-style-type: disc;vertical-align: baseline;text-rendering: optimizelegibility;box-sizing: border-box;&#039;><span leaf="">项目简介</span></span></h2>

Anthropic 的 frontend-design 是第一个被广泛使用的 Claude 设计技能。Impeccable 从那里起步。

每个模型都在相同的 SaaS 模板上训练。如果跳过指导,每个项目都会出现同样的几个“套娃特征”:一切都用 Inter、紫到蓝的渐变、卡片套卡片、彩色背景上的灰色文字、每个标题上方的圆角方形图标瓦片。

Impeccable 增加了:

  • 一次设置流程。/impeccable init 会写入 PRODUCT.md
标签:AI大模型

想了解 AI 如何助力您的企业?

免费获取企业 AI 成熟度诊断报告,发现转型机会

置顶文章

会打字,就能"拍"电影:ScriptTask 开放限量内测
置顶

会打字,就能"拍"电影:ScriptTask 开放限量内测

//

24小时热榜

美国多地掀起数据中心反抗浪潮
TOP1

美国多地掀起数据中心反抗浪潮

前途科技前途科技
服务关于快讯技术商业报告
前途科技微信公众号

微信公众号

扫码关注

Copyright © 2026 AccessPath.com, 前途国际科技咨询(北京)有限公司,版权所有。|京ICP备17045010号-1|京公网安备 11010502033860号|隐私政策|服务条款
 并提供 
DESIGN.md
,让后续命令了解受众、品牌/产品方向、语气、反参考、颜色、字体和组件。
  • 23 条命令。 与你的 AI 共享一套设计词汇:polish、audit、critique、distill、animate、bolder、quieter 等。
  • 59 条确定性检测规则,外加仅由 LLM 执行的 critique 检查。CLI 和浏览器扩展可运行确定性规则,无需 LLM,也无需 API 密钥。
  • 包含内容

    技能:impeccable

    该技能以一条命令安装:

    /impeccable <command> 

    每个新项目都从以下开始:

    /impeccable init

    init 会询问该界面是品牌(营销、落地页、作品集)还是产品(应用 UI、仪表盘、工具),然后写入每个后续命令都会读取的设计上下文。

    23 条命令

    所有命令都通过 /impeccable 访问:

    命令
    作用
    /impeccable craft
    完整的先塑形再构建流程,带视觉迭代
    /impeccable init
    一次性设置:收集设计上下文,写入 PRODUCT.md 和 DESIGN.md,配置实时模式,推荐下一步
    /impeccable document
    从现有项目代码生成根目录 DESIGN.md
    /impeccable extract
    将可复用组件和 token 提取到设计系统
    /impeccable shape
    在写代码前规划 UX/UI
    /impeccable critique
    UX 设计评审:层级、清晰度、情感共鸣
    /impeccable audit
    运行技术质量检查(无障碍、性能、响应式)
    /impeccable polish
    最终打磨、设计系统对齐、上线就绪
    /impeccable bolder
    放大平淡设计
    /impeccable quieter
    压低过于张扬的设计
    /impeccable distill
    提炼到本质
    /impeccable harden
    错误处理、国际化、文本溢出、边界情况
    /impeccable onboard
    首次运行流程、空状态、激活路径
    /impeccable animate
    添加有目的的动效
    /impeccable colorize
    引入战略性色彩
    /impeccable typeset
    修正字体选择、层级、字号
    /impeccable layout
    修正布局、间距、视觉节奏
    /impeccable delight
    加入愉悦瞬间
    /impeccable overdrive
    加入技术上非凡的效果
    /impeccable clarify
    改善不清晰的 UX 文案
    /impeccable adapt
    适配不同设备
    /impeccable optimize
    性能改进
    /impeccable live
    视觉变体模式:在浏览器中迭代元素

    使用 /impeccable pin  可创建独立快捷方式(例如 pin audit 会创建 /audit)。

    使用示例

    /impeccable audit blog           # 审计博客中心 + 文章页
    /impeccable critique landing     # UX 设计评审
    /impeccable polish settings      # 上线前最终打磨
    /impeccable harden checkout      # 增加错误处理 + 边界情况

    也可以直接用 /impeccable 加上描述:

    /impeccable redo this hero section

    反模式

    该技能包含明确的“避免事项”指导:

    • 不要使用过度滥用的字体(Arial、Inter、系统默认字体)
    • 不要在彩色背景上使用灰色文字
    • 不要使用纯黑/纯灰(始终加色调)
    • 不要把所有东西都包进卡片,或卡片套卡片
    • 不要使用 bounce/elastic 缓动(感觉过时)

    安装

    选项 1:CLI 安装器(推荐)

    在项目根目录运行:

    npx impeccable install

    它会显示检测到的 harness 文件夹(例如 ~/.claude、~/.codex、~/.grok,或项目本地的 .cursor),让你保留检测结果或自定义提供方,然后询问是安装到当前项目还是全局。可用 --providers=claude,codex,cursor,grok 和 --scope=project|global 在脚本中跳过这些选择。在 Claude Code、Cursor、Codex、GitHub Copilot 和 Grok Build 上,它还会为当前项目安装提供方原生的 hook 清单。适用于 Cursor、Claude Code、Gemini CLI、Codex CLI、Grok Build 以及所有其他受支持的工具。安装后请重新加载你的 harness。

    刷新已有安装:

    npx impeccable update

    Codex 用户应在安装或更新后打开 /hooks,并在提示时批准项目 hook。Codex 按 hook 定义跟踪信任,因此会改动 .codex/hooks.json 的更新可能需要再次批准。Grok Build 用户需要项目文件夹信任(/hooks-trust 或使用 --trust 启动)后,.grok/hooks/ 脚本才会运行。

    选项 2:Git 子模块

    适合希望通过 Git 将 Impeccable 纳入版本控制并持续更新的团队:将本仓库添加为子模块,并把编译后的提供方构建链接到 harness 文件夹:

    git submodule add https://github.com/pbakaus/impeccable .impeccable
    npx impeccable link --source=.impeccable --providers=claude,cursor
    git add .gitmodules .impeccable .claude .cursor
    git commit -m "Add Impeccable skills"

    使用项目需要的提供方,例如 claude、cursor、gemini、codex、github、grok、opencode、pi、qoder、trae、trae-cn、rovo-dev 或 vibe。该命令会从 .impeccable/dist/universal/ 链接各个技能文件夹,除非传入 --force,否则不会覆盖已有的真实技能目录。

    之后更新:

    git submodule update --remote .impeccable
    npx impeccable link --source=.impeccable --providers=claude,cursor

    选项 3:插件安装

    Claude Code:

    /plugin marketplace add pbakaus/impeccable

    仅限 Claude Code。添加 marketplace 后,打开 /plugin 并从列表中安装 Impeccable。

    Grok Build:

    grok plugin install pbakaus/impeccable#plugin --trust

    仅限 Grok Build。#plugin 后缀安装精简插件包(技能、agents 和 hooks),而不是完整 monorepo。然后在 Grok 会话中运行 /impeccable init。通过 npx impeccable install --providers=grok 进行项目级安装同样有效,会写入 .grok/skills/ 以及 .grok/hooks/impeccable.json。

    选项 4:从网站下载

    访问 impeccable.style,下载对应工具的 ZIP,并解压到项目中。

    选项 5:从仓库复制

    Cursor:

    cp -r dist/cursor/.cursor your-project/

    注意: Cursor skills 需要设置:

    1. 在 Cursor Settings → Beta 中切换到 Nightly 通道
    2. 在 Cursor Settings → Rules 中启用 Agent Skills

    了解更多 Cursor skills

    Claude Code:

    # 项目级
    cp -r dist/claude-code/.claude your-project/

    # 或全局(应用于所有项目)
    cp -r dist/claude-code/.claude/* ~/.claude/

    OpenCode:

    cp -r dist/opencode/.opencode your-project/

    Pi:

    cp -r dist/pi/.pi your-project/

    Gemini CLI:

    cp -r dist/gemini/.gemini your-project/

    注意: Gemini CLI skills 需要设置:

    1. 安装预览版:npm i -g @google/gemini-cli@preview
    2. 运行 /settings 并启用 “Skills”
    3. 运行 /skills list 验证安装

    了解更多 Gemini CLI skills

    Codex CLI:

    # 项目本地
    cp -r dist/agents/.agents your-project/
    mkdir -p your-project/.codex
    cp dist/codex/.codex/hooks.json your-project/.codex/hooks.json

    # 或用户级安装技能。把 .codex/hooks.json 复制到每个希望运行设计 hook 的项目中。
    mkdir -p ~/.agents/skills
    cp -r dist/agents/.agents/skills/* ~/.agents/skills/

    asset-producer 子 agent 嵌套在技能自己的 agents/ 文件夹中,Codex 会自动发现。无需单独复制 .codex/agents/。hook 是项目本地的,因为 Codex 从受信任项目配置旁的 .codex/hooks.json 发现 hooks。

    GitHub Copilot:

    cp -r dist/github/.github your-project/

    Trae:

    # Trae 中国(国内版)
    cp -r dist/trae/.trae-cn/skills/* ~/.trae-cn/skills/

    # Trae 国际版
    cp -r dist/trae/.trae/skills/* ~/.trae/skills/

    注意: Trae 有两个版本,配置目录不同:

    • Trae 中国:~/.trae-cn/skills/
    • Trae 国际:~/.trae/skills/

    复制后重启 Trae IDE 以激活技能。

    Rovo Dev:

    # 项目级
    cp -r dist/rovo-dev/.rovodev your-project/

    # 或全局(应用于所有项目)
    cp -r dist/rovo-dev/.rovodev/skills/* ~/.rovodev/skills/

    Qoder:

    # 项目级
    cp -r dist/qoder/.qoder your-project/

    # 或全局(应用于所有项目)
    cp -r dist/qoder/.qoder/skills/* ~/.qoder/skills/

    Mistral Vibe:

    # 项目级
    cp -r dist/vibe/.vibe your-project/

    # 或全局(应用于所有项目)
    cp -r dist/vibe/.vibe/skills/* ~/.vibe/skills/

    Grok Build:

    # 项目级
    cp -r dist/grok/.grok your-project/

    # 或全局(应用于所有项目)
    cp -r dist/grok/.grok/skills/* ~/.grok/skills/

    更推荐 npx impeccable install --providers=grok 或 grok plugin install pbakaus/impeccable#plugin --trust,这样设计 hook 也会一并安装。项目 hooks 需要每个文件夹执行一次 /hooks-trust(或 --trust)。

    Google Antigravity:

    # 项目级
    cp -r dist/antigravity/.agent your-project/

    # 或全局(应用于所有项目)
    mkdir -p ~/.gemini/config/skills
    cp -r dist/antigravity/.agent/skills/* ~/.gemini/config/skills/

    使用

    安装完成后,所有命令都通过单一的 /impeccable 技能运行:

    /impeccable audit        # 发现问题
    /impeccable polish       # 最终清理
    /impeccable distill      # 去掉复杂度
    /impeccable critique     # 完整设计评审

    单独输入 /impeccable 可查看完整命令列表。

    大多数命令可接受可选参数,以聚焦特定区域:

    /impeccable audit the header
    /impeccable polish the checkout form

    如果经常使用某一条命令,可用 /impeccable pin audit 固定它,从而得到独立快捷方式 /audit。

    注意: Codex 在这里使用 skills,而不是 /prompts: 命令。打开 /skills 或输入 $impeccable。仓库本地安装位于 .agents/skills/;用户级安装位于 ~/.agents/skills/。GitHub Copilot 使用 .github/skills/。如果新安装的技能没有出现,请重启工具。

    项目地址

    https://github.com/pbakaus/impeccable


    感谢阅读。如果本文对你有帮助,欢迎点赞、在看,或转发给需要的朋友。


    登录查看剩余 70% 内容
    TOP2

    GitHub 2K Star 的本地搜索工具

    3

    DeepSeek Harness 的 Cordis 插件架构

    1小时前
    4

    DeepSeek Harness 企业级部署解决方案!2026

    1小时前
    DeepSeek Harness 企业级部署解决方案!2026
    5

    5w颗星!前Google工程师为Agent打造的设计系统

    1小时前
    6

    从RAG到GraphRAG:用Neo4j构建知识图谱, 让知识库真正"活"起来

    1小时前
    从RAG到GraphRAG:用Neo4j构建知识图谱, 让知识库真正"活"起来
    7

    DeepSeek Harness 架构拆解:一个"一切皆插件"的 Agent 运行框架

    1小时前
    8

    厄尔尼诺叠加变暖 全球海洋温度破纪录

    2小时前
    厄尔尼诺叠加变暖 全球海洋温度破纪录
    热门标签
    大模型AgentRAG微调私有化部署Prompt EngineeringChatGPTClaudeDeepSeek智能客服知识管理内容生成代码辅助数据分析金融零售制造医疗教育AI 战略数字化转型ROI 分析OpenAIAnthropicGoogle

    关注公众号

    前途科技微信公众号

    扫码关注,获取最新 AI 资讯

    免费获取 AI 落地指南

    3 步完成企业诊断,获取专属转型建议

    已有 200+ 企业完成诊断