← 一覧へ
🎨 デザインCC / Codex 両対応難易度: 中級

デザインレビュー design-review

デザインの悩み、AIが解決します!

出典リポの★
119,302
最終更新
1ヶ月前
作者
garrytan

これは何?

デザインレビューは、あなたのデザインをプロの目でチェックしてくれるスキルです。視覚的な不整合やスペーシング、階層の問題を見つけ、それらを修正することで、より洗練されたデザインを実現します。AIスロップパターンや遅いインタラクションも自動で改善してくれるので、デザインの品質を高めるのに最適です。

デザインレビューの紹介マンガ

これでできること

  • 視覚的な不整合を自動的に発見します
  • スペーシングや階層の問題を修正します
  • AIスロップパターンを検出して改善します
  • 遅いインタラクションを最適化します
  • デザインの全体的なポリッシュアップを行います

こんな時に便利

ウェブサイトのデザインをブラッシュアップしたい時
UIに視覚的な不整合があると感じる時
デザインのスペーシングや階層を改善したい時
ユーザーインタラクションが遅いと感じる時
デザインの品質を全体的に高めたい時

使い方

デザインレビューを使うには、単に「デザインをチェックして」や「視覚的な不整合を修正して」といった指示を与えるだけでOKです。AIが自動的にデザインを分析し、問題点を見つけて修正してくれます。修正後のデザインは、変更前と変更後のスクリーンショットとともに表示されるので、比較しながら確認することができます。

使用例(こう頼んでみよう)

デザインをチェックして、視覚的な不整合を修正してくださいUIのスペーシングと階層を改善してくださいこのページのデザインをポリッシュアップして

必要なもの

  • 特になし

導入方法

いちばん簡単(AIに頼む)
次のスキルを入れて: https://github.com/garrytan/gstack/tree/main/design-review
手動で置く
Claude Code → ~/.claude/skills/design-review/
Codex → ~/.agents/skills/design-review/

使いこなしのコツ

  • デザインの変更点は一つずつ確認しながら進めるのがオススメです
  • 修正前後のスクリーンショットを比較することで、変更点を明確に理解できます