Pristineスキル:実画面を4通り(明暗×PC/スマホ)で撮り、10点満点で採点してから直させる
エージェントがコードだけ見て「できました」と言うのを防ぎ、撮る→採点→直す→撮り直すを1コマンドで回すデザインスキル。
どんな問題を解決するか / いつ使うか
コーディングエージェントが作るUIは「壊れてはいないが印象に残らない」(スキルの言う6点)で止まりがち。DESIGN.mdを持っていない既存プロジェクトでも、最初にそれを作らせてから同じ基準で採点・修正させたいときに使う。
やり方
- 導入:
npx skills add maddhruv/pristine(Claude Code なら/plugin marketplace add maddhruv/pristine→/plugin install pristine@pristine、Codex ならcodex plugin marketplace add maddhruv/pristine→codex plugin add pristine@pristine)。 - 最初に
/pristine init:製品の内容・利用者像・既存のデザインシステムを読み取り、DESIGN.md(製品、ペルソナ、ブランド、デザインシステム、Do/Don't)を書く。 - 4つのコマンドを使い分ける。
| コマンド | 何をするか |
|---|---|
|critique <URLやファイル>| 撮影し、ペルソナの目で11項目を10点満点で採点。P0〜P2の修正案を出す(編集しない) |
|design "<作りたいもの>"| 2〜3の方向性を文章で出し、選んだものを実装。作り直しでは機能の保持チェックリスト付き |
|polish <対象>| 見た目の方向は保ったまま、点数を上げる修正だけ当てて撮り直す(引数なしの/pristineはこれ) | - 直す観点を指定することもできる(例:
/pristine polish bolder animate。ほかに quieter、typeset、layout、clarify、distill、harden など全16種)。
注意点
- 撮影はエージェントが使えるブラウザ(Claude in Chrome、Playwright MCP、または同梱スクリプト)で、PC 1440px / スマホ 390px × ライト/ダークの4通り。
- 採点の根拠として、ヒックの法則・近接・フィッツの法則など20のUX法則を観点に結び付けている。
- 同系統:Hallmarkスキルで「作る・採点・作り直し・好きなサイトから抽出」を使い分け、AIっぽくないUIにする、デザイン用スキル+決まったルールで検出する仕組みで「AIっぽいUI」を潰す(Impeccable等)。複数入れると指示が競合しやすいので、1プロジェクト1つに絞るのが無難。
出典
- @maddhruv · 2026-10-23
- 公式サイト: pristine-ui.pages.dev(内容を確認)