使い方ガイドへスキップ
improve-ui作者 Julien Thibeaut

Improve UI スキル。

Claude Code と Codex 向けのデザインレビュースキル:プロダクトの表面を自身のデザイン証跡に照らして監査し、実装プランを作成します。

  • デザインレビュー & アクセシビリティ
  • レビューレポート
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 できること

Claude Code と Codex で improve-ui スキルが行うこと

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

improve-ui は、実際にそれを統治しているデザインシステムに対して、1つの一貫したプロダクト表面を監査し、その後、別のエージェントが実行するための自己完結型の実装プランを作成します。プロダクトのソースに対しては読み取り専用であり、ファイルの作成・編集は design-plans の下でのみ許可され、依存関係の追加、フォーマッタの実行、コミット、プッシュは一切許可されません。

指摘は、契約・実行時・修正という3つの証明、さらに後段のファルシフィケーション(反証)パスを通過する必要があり、レポートは確信度、ユーザーへの影響、到達範囲、修正コストの順に並べられ、最大3件までに絞られます。これは、インターフェースのアイデンティティを置き換えることなく見直し・改善・整理を行うデザイナーや開発者、デザインシステムのドリフトを調査する人、デザインハンドオフを準備する人に適しています。アクセシビリティ、振る舞い、パフォーマンス、アーキテクチャに関する問題は、明示的に要求されない限り対象外です。

レビューレポート
プロンプト例を見る ↗

仕組み

  1. 01
    一貫した1つの表面を選ぶ

    広範な依頼は、主要なプロダクトタスクのために1つのデプロイ可能なアプリケーションと1つの一貫した表面ファミリーに絞り込まれます。このスキルは、リポジトリ全体を単一のプロダクトとして扱うのではなく、その選択自体を明示します。

  2. 02
    ローカルシステムを再構築する

    ソースは、それが最新であり、選択された表面を統治していることが証明された後にのみ使用されます。ドラフト、提案、移行計画、タスクリストは、明示的に承認され現在有効であると確認されない限り、将来の意図を示すものとして扱われます。

  3. 03
    候補ごとに3つの証明を要求する

    残す候補には、契約、実行時パス、そして1つの決定的な修正が必要です。検索結果、繰り返し、実装の差異はあくまで候補を生むにすぎず、それだけでは指摘にはなりません。

  4. 04
    検証と反証

    候補は報告前に再度攻撃的に検証され、その検証を通過したものだけが指摘テーブルに掲載されます。

  5. 05
    レポート:順序付けと上限

    指摘は確信度、ユーザーへの影響、到達範囲、修正コストの順に並べられ、リストは3件までに絞られます。

  6. 06
    選択された変更を明記する

    作成前に、引用されたソースを再度開き、可能な場合は現在のコミットを記録し、影響を受ける表面全体で再利用可能な正確なプリミティブと参考例を特定します。

02 適合性を確認

improve-ui スキルを使用するタイミング

この種の設計レビューが必要な場合は、Claude Code または Codex で improve-ui スキルを使用してください。以下の適合性と制限は、スキル自身のファイルから引用されています。

適している場合

  • アイデンティティを置き換えずにインターフェースをレビュー、洗練、改善、整理するよう求められた場合

境界を知る

  • プロダクトソースを変更しません。design-plans/ 配下でのみファイルを作成または編集します。
  • 依存関係のインストール、フォーマッターの実行、コミット、プッシュ、その他ワーキングツリーを変更する操作は行いません。
  • 設計ドキュメントを更新しないでください。承認されたドキュメント変更は、実行者向けのプランに記録してください。
  • ユーザーが提供した場合、または明示的にビジュアル検査を要求した場合にのみ、レンダリング結果を証拠として使用します。

03 スキルの内部

improve-ui スキルがデザインレビューにもたらすもの

SKILL.md が Claude Code または Codex に指示する4つの項目を、ファイル内のセクション順に示します。

  1. 1. 対象画面を選択する

    ユーザーが指定したスコープを尊重します。リクエストが広範な場合は、デプロイ可能なアプリケーションを1つと、主要なプロダクトタスクを代表する一貫性のある画面ファミリーを1つ選択します。

  2. 2. ローカルシステムを再構築する

    DESIGN.md、リポジトリガイダンス、画面固有の設計ドキュメントを確認してください。

  3. デザイン言語

    引用元が明示的に例外として示している場合を除き、「明示的な例外」の下には「文書化なし」と記載します。

  4. 3. 発見事項を証明する

    証明ゲートを適用する前に、追跡したすべての画面のユーザー向けラベル、アクティブ状態の表示、レスポンシブ分岐、兄弟バリアントについて、内部矛盾がないか検査します。

04 実際に使う

Claude Code または Codex に improve-ui をインストール

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codex、またはお使いのエージェントに improve-ui を追加

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

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

skills/improve-ui/SKILL.md 用の一般的な skills CLI 形式です。リポジトリによっては独自のパスが文書化されている場合があります。

スキルに最初のデザインレビュータスクを与える

SKILL.md にはサンプルプロンプトが含まれていません。このスターターはカタログの一行説明から作成されています。タスク行を実際のブリーフに置き換えてください。

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 からではありません)。

最初の結果を確認

出力を受け入れる前に、トランスクリプトとファイル内で以下を確認してください。

  • 結果はレビューレポートとして提供され、このスキルのカタログに記載されています。
  • エージェントは結果を生成する前に、計画またはトランスクリプトで improve-ui スキルを指名します。
  • あなた自身のコンテンツ、名前、数値は出力で変更されずに表示されます。

OpenDesign では、improve-ui をその SKILL.md リンクからインポートしてください:Plugins → Add → Skill → Import from link、その後トップバーで選択します。

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Repository
github.com/ibelick/ui-skills ブランチ main
スキルファイル
skills/improve-ui/SKILL.md 内容チェックサムは検証時に記録されました。コミット 79081ab
License
MIT LICENSE より
リポジトリスター数
8,402 GitHub スナップショットは 2026-09-14 に ibelick/ui-skills リポジトリ全体に対して取得されました。このリポジトリにはこのカタログに含まれる 5 つのスキルが含まれています。improve-ui の評価や使用回数ではありません。
OpenDesign により検証済み
2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign 本体にはバンドルされていません(2026-08-28 確認)。このページには実行記録がありません。
スキル自身による説明
「既存のプロダクトサーフェスを独自のデザイン証拠と照らし合わせて監査し、検証された UI の問題を特定し、別のエージェント向けに自己完結型の実装計画を作成します。プロダクトソースに対しては厳密に読み取り専用です。インターフェースのアイデンティティを置き換えることなくレビュー、改良、改善、またはクリーンアップするよう求められた場合、デザインシステムのドリフトを調査する場合、またはデザインハンドオフを準備する場合に使用します。」

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 で、同じブランドルールを Web サイト、スライド、操作できるプロトタイプ、ダッシュボード、画像、HTML 動画に展開できます。ローカルの Codex、Claude Code、Cursor などを接続して無料で制作しましょう。

  • Web、スライド、プロトタイプ、ダッシュボード、画像、動画
  • 140+ のデザインシステムと完全なテンプレート/スキルライブラリ
  • ローカル Codex と 21+ のコーディングエージェントを接続 · 無料
無料ダウンロード

macOS と Windows に対応