テック技報最新号へ →
デザイン

Pristineスキル:実画面を4通り(明暗×PC/スマホ)で撮り、10点満点で採点してから直させる

エージェントがコードだけ見て「できました」と言うのを防ぎ、撮る→採点→直す→撮り直すを1コマンドで回すデザインスキル。

@maddhruv · 2026-10-24
#AI×デザイン#スキル#ビジュアルレビュー#スクリーンショット#DESIGN.md

どんな問題を解決するか / いつ使うか

コーディングエージェントが作るUIは「壊れてはいないが印象に残らない」(スキルの言う6点)で止まりがち。DESIGN.mdを持っていない既存プロジェクトでも、最初にそれを作らせてから同じ基準で採点・修正させたいときに使う。

やり方

  1. 導入: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)。
  2. 最初に /pristine init:製品の内容・利用者像・既存のデザインシステムを読み取り、DESIGN.md(製品、ペルソナ、ブランド、デザインシステム、Do/Don't)を書く。
  3. 4つのコマンドを使い分ける。
    | コマンド | 何をするか |
    |---|---|
    | critique <URLやファイル> | 撮影し、ペルソナの目で11項目を10点満点で採点。P0〜P2の修正案を出す(編集しない) |
    | design "<作りたいもの>" | 2〜3の方向性を文章で出し、選んだものを実装。作り直しでは機能の保持チェックリスト付き |
    | polish <対象> | 見た目の方向は保ったまま、点数を上げる修正だけ当てて撮り直す(引数なしの /pristine はこれ) |
  4. 直す観点を指定することもできる(例:/pristine polish bolder animate。ほかに quieter、typeset、layout、clarify、distill、harden など全16種)。

注意点

出典

X の元の投稿を開く