跳转到使用指南
improve-ui作者 Julien Thibeaut

Improve UI Skill.

Claude Code 和 Codex 的设计评审 skill:根据产品自身的设计依据审计产品界面并编写实施计划。

  • Design Review & Accessibility
  • 审查报告
ibelick/ui-skills · skills/improve-ui/SKILL.mdSKILL.md
--- name: improve-ui description: Audit an existing product surface against its own design evidence, identify verified UI problems, and write self-contained implementation plans for another agent. Strictly read-only on product source. Use when asked to review, refine, improve, or clean up an interface without replacing its identity; investigate design-system drift; or prepare a design handoff. --- ## Boundaries ## 1. Select the surface ## 2. Reconstruct the local system ## Design language ## 3. Prove findings ## 4. Vet findings
从上游文件读取的前置内容和章节标题,2026-09-14 · 完整内容 7,816 字符

01 功能说明

improve-ui skill 在 Claude Code 与 Codex 中的作用

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

Improve UI 会针对真正约束某个产品界面的设计系统,审计该界面这一连贯整体,然后为另一个 Agent 撰写可独立执行的实施计划。它对产品源码只读:文件只能在 design-plans 下创建或编辑,不允许安装依赖、格式化、提交或推送。

每项发现必须经受三重验证——契约、运行时与修正方案——外加后续的证伪核查,报告最多列出三项,按置信度、用户影响、覆盖范围与修正成本排序。适合设计师和开发者在不改变界面本身特质的前提下审查、打磨或清理界面,排查设计系统的偏移,或为设计交接做准备。无障碍、行为逻辑、性能与架构问题除非特别要求,否则不在范围内。

审查报告
查看示例提示词 ↗

工作方式

  1. 01
    选定一个连贯的界面

    一个宽泛的请求会被收窄为一个可部署的应用和一个针对主要产品任务的连贯界面族;该 skill 明确说明这一选定范围,而不是把整个仓库当作单一产品对待。

  2. 02
    重建本地系统

    只有在证实某个来源是最新的、且确实约束所选界面之后,才会使用它;草案、提案、迁移方案与任务清单描述的是未来意图,除非已被明确采纳且属于当前状态。

  3. 03
    每个候选项需具备三重证明

    每个被保留的候选项都需要一份契约、一条运行时路径与一项确定性的修正方案;搜索结果、重复出现与实现差异只能产生候选项,而非发现。

  4. 04
    核验与证伪

    在报告之前会再次尝试推翻候选项,只有经受住这一轮核查的候选项才能进入发现表。

  5. 05
    报告:有序且有上限

    发现按置信度、用户影响、覆盖范围与修正成本排序,最终列表截至三项。

  6. 06
    明确指定所选变更

    在撰写之前,会重新打开引用的来源,在可获取时记录当前提交,并在受影响的界面范围内确定可复用的精确基础组件与范例。

02 找到适合场景

何时使用 improve-ui Skill

当任务是此类设计审查时,在 Claude Code 或 Codex 中使用 improve-ui skill。下方的适用范围和限制取自该 skill 自身的文件。

适合场景

  • 当被要求审查、优化、改进或清理界面且不替换其标识时

了解边界

  • 绝不修改产品源代码。仅在 design-plans/ 下创建或编辑文件。
  • 不要安装依赖、运行格式化工具、提交、推送或以其他方式改变工作树。
  • 不更新设计文档。在计划中为执行者记录已接受的文档更改。
  • 仅在用户提供渲染证据或明确要求视觉检查时使用。

03 Skill 内部

improve-ui Skill 为设计审查带来的能力

SKILL.md 指示 Claude Code 或 Codex 执行的 4 件事,按文件自己的部分顺序。

  1. 1. 选择界面

    遵循用户的范围。如果请求范围宽泛,选择一个可部署的应用程序和一个代表主要产品任务的连贯界面族。

  2. 2. 重构本地系统

    检查 DESIGN.md、仓库指引和界面本地的设计文档。

  3. 设计语言

    在 Explicit exceptions 下写 None documented,除非引用的来源明确标识了例外情况。

  4. 3. 证明发现项

    在应用证明门槛前,检查每个追踪界面的用户可见标签、激活状态呈现、响应式分支和同级变体的内部矛盾。

04 投入使用

在 Claude Code 或 Codex 中安装 improve-ui

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 improve-ui 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill improve-ui

针对 skills/improve-ui/SKILL.md 的通用 skills CLI 形式;具体仓库可能记录了自己的路径。

为 Skill 提供第一个设计审查任务

SKILL.md 不包含示例提示;此启动器根据目录一行摘要编写。将任务行替换为你的实际 brief。

Starter prompt
Use the improve-ui skill on the material I attach. What the skill should do here: Audits a product surface against its own design evidence and writes implementation plans. Rules: do not invent copy, data or brand assets. State your plan first, then produce the result and tell me what to check.

来源:根据目录一行用途编写的启动器提示(不是来自 SKILL.md)。

检查首次结果

在接受输出之前,在记录和文件中查找以下内容:

  • 结果以审查报告形式交付,如目录中为此 skill 列出的那样。
  • Agent 在生成结果之前会在其计划或记录中提及 improve-ui skill。
  • 您自己的内容、名称和数字在输出中保持不变。

在 OpenDesign 中,通过 SKILL.md 链接导入 improve-ui:Plugins → Add → Skill → Import from link,然后在顶部栏中选择它。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Repository
github.com/ibelick/ui-skills Branch main
Skill 文件
skills/improve-ui/SKILL.md 验证时记录的内容校验和;提交 79081ab
License
MIT 来自 LICENSE。
仓库星标数
8,402 GitHub 快照拍摄于 2026-09-14,针对整个 ibelick/ui-skills 仓库,该仓库在此目录中包含 5 个 skills。不是 improve-ui 的评分或使用计数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序(检查日期 2026-08-28);本页面未记录实际运行。
Skill 自身的描述
"根据现有产品界面自身的设计证据对其进行审计,识别已验证的 UI 问题,并为另一个 Agent 编写自包含的实现计划。严格对产品源代码只读。当被要求审查、优化、改进或清理界面而不替换其身份时使用;调查设计系统偏移;或准备设计交付。"

来自 SKILL.md 的前言描述。完整文件约 7,816 个字符。在 GitHub 上阅读完整文件。

Improve UI

在真实设计审查任务上运行 improve-ui。

下载 OpenDesign,从其 SKILL.md 链接导入 improve-ui,粘贴上方提示词,在查看结果之前先阅读计划。

终端
npx skills add https://github.com/ibelick/ui-skills --skill improve-ui

OpenDesign 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS 与 Windows