jpskill.com
🎨 デザイン コミュニティ

design-critique

Get structured design feedback on usability, hierarchy, and consistency. Trigger with "review this design", "critique this mockup", "what do you think of this screen?", or when sharing a Figma link or screenshot for feedback at any stage from exploration to final polish.

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o design-critique.zip https://jpskill.com/download/22593.zip && unzip -o design-critique.zip && rm design-critique.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/22593.zip -OutFile "$d\design-critique.zip"; Expand-Archive "$d\design-critique.zip" -DestinationPath $d -Force; ri "$d\design-critique.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して design-critique.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → design-critique フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

[Skill 名] design-critique

/design-critique

見慣れないプレースホルダーが表示される場合や、どのツールが接続されているかを確認する必要がある場合は、CONNECTORS.mdをご覧ください。

複数の側面から構造化されたデザインフィードバックを得られます。

使用方法

/design-critique $ARGUMENTS

デザインをレビューします: @$1

FigmaのURLが提供された場合は、Figmaからデザインを取得します。ファイルが参照された場合は、それを読み込みます。それ以外の場合は、ユーザーにデザインを説明または共有するよう求めます。

私が必要とする情報

  • デザイン: FigmaのURL、スクリーンショット、または詳細な説明
  • コンテキスト: これは何か？誰のためのものか？どの段階か（探索、洗練、最終）？
  • 焦点 (任意): 「モバイルに焦点を当てる」または「オンボーディングフローに焦点を当てる」

批評フレームワーク

1. 第一印象 (2秒)

  • 何が最初に目を引きますか？それは正しいですか？
  • 感情的な反応はどうですか？
  • 目的はすぐに明確ですか？

2. 使いやすさ

  • ユーザーは目標を達成できますか？
  • ナビゲーションは直感的ですか？
  • インタラクティブな要素は明白ですか？
  • 不要な手順はありますか？

3. 視覚的階層

  • 明確な読み順はありますか？
  • 適切な要素が強調されていますか？
  • 余白は効果的に使用されていますか？
  • タイポグラフィは適切な階層を作り出していますか？

4. 一貫性

  • デザインシステムに従っていますか？
  • スペーシング、色、タイポグラフィは一貫していますか？
  • 類似の要素は同様に動作しますか？

5. アクセシビリティ

  • 色のコントラスト比
  • タッチターゲットのサイズ
  • テキストの可読性
  • 画像の代替テキスト

フィードバックの与え方

  • 具体的に: 「レイアウトが分かりにくい」ではなく「CTAがナビゲーションと競合している」
  • 理由を説明する: フィードバックをデザイン原則やユーザーニーズに結びつける
  • 代替案を提案する: 問題を特定するだけでなく、解決策を提案する
  • 良い点を認める: 良いフィードバックには肯定的な観察も含まれる
  • 段階に合わせる: 初期段階の探索には、最終的な仕上げとは異なるフィードバックを与える

出力

## デザイン批評: [デザイン名]

### 全体的な印象
[1-2文の第一印象 — 良い点、最大の改善機会]

### 使いやすさ
| 発見事項 | 重大度 | 推奨事項 |
|---------|----------|----------------|
| [問題] | 🔴 致命的 / 🟡 中程度 / 🟢 軽微 | [修正] |

### 視覚的階層
- **最初に目を引くもの**: [要素] — [これは正しいですか？]
- **読みの流れ**: [レイアウト内で視線はどのように動きますか？]
- **強調**: [適切なものが強調されていますか？]

### 一貫性
| 要素 | 問題 | 推奨事項 |
|---------|-------|----------------|
| [タイポグラフィ/スペーシング/色] | [不一致] | [修正] |

### アクセシビリティ
- **色のコントラスト**: [主要なテキストの合格/不合格]
- **タッチターゲット**: [適切なサイズですか？]
- **テキストの可読性**: [フォントサイズ、行の高さ]

### 良い点
- [肯定的な観察 1]
- [肯定的な観察 2]

### 優先的な推奨事項
1. **[最も影響の大きい変更]** — [理由と方法]
2. **[2番目の優先事項]** — [理由と方法]
3. **[3番目の優先事項]** — [理由と方法]

コネクタが利用可能な場合

~~design toolが接続されている場合:

  • Figmaから直接デザインを取得し、コンポーネント、トークン、レイヤーを検査します
  • 既存のデザインシステムと比較して一貫性を確認します

~~user feedbackが接続されている場合:

  • デザインの決定を最近のユーザーフィードバックやサポートチケットと相互参照します

ヒント

  1. コンテキストを共有する — 「これはB2B SaaSのチェックアウトフローです」という情報は、私が関連性の高いフィードバックを提供するのに役立ちます。
  2. 段階を明記する — 初期段階の探索には、最終的な仕上げとは異なるフィードバックが与えられます。
  3. 焦点を絞るよう依頼する — 「ナビゲーションだけを見てください」と依頼することで、ある領域についてより深いフィードバックを得られます。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

/design-critique

If you see unfamiliar placeholders or need to check which tools are connected, see CONNECTORS.md.

Get structured design feedback across multiple dimensions.

Usage

/design-critique $ARGUMENTS

Review the design: @$1

If a Figma URL is provided, pull the design from Figma. If a file is referenced, read it. Otherwise, ask the user to describe or share their design.

What I Need From You

  • The design: Figma URL, screenshot, or detailed description
  • Context: What is this? Who is it for? What stage (exploration, refinement, final)?
  • Focus (optional): "Focus on mobile" or "Focus on the onboarding flow"

Critique Framework

1. First Impression (2 seconds)

  • What draws the eye first? Is that correct?
  • What's the emotional reaction?
  • Is the purpose immediately clear?

2. Usability

  • Can the user accomplish their goal?
  • Is the navigation intuitive?
  • Are interactive elements obvious?
  • Are there unnecessary steps?

3. Visual Hierarchy

  • Is there a clear reading order?
  • Are the right elements emphasized?
  • Is whitespace used effectively?
  • Is typography creating the right hierarchy?

4. Consistency

  • Does it follow the design system?
  • Are spacing, colors, and typography consistent?
  • Do similar elements behave similarly?

5. Accessibility

  • Color contrast ratios
  • Touch target sizes
  • Text readability
  • Alternative text for images

How to Give Feedback

  • Be specific: "The CTA competes with the navigation" not "the layout is confusing"
  • Explain why: Connect feedback to design principles or user needs
  • Suggest alternatives: Don't just identify problems, propose solutions
  • Acknowledge what works: Good feedback includes positive observations
  • Match the stage: Early exploration gets different feedback than final polish

Output

## Design Critique: [Design Name]

### Overall Impression
[1-2 sentence first reaction — what works, what's the biggest opportunity]

### Usability
| Finding | Severity | Recommendation |
|---------|----------|----------------|
| [Issue] | 🔴 Critical / 🟡 Moderate / 🟢 Minor | [Fix] |

### Visual Hierarchy
- **What draws the eye first**: [Element] — [Is this correct?]
- **Reading flow**: [How does the eye move through the layout?]
- **Emphasis**: [Are the right things emphasized?]

### Consistency
| Element | Issue | Recommendation |
|---------|-------|----------------|
| [Typography/spacing/color] | [Inconsistency] | [Fix] |

### Accessibility
- **Color contrast**: [Pass/fail for key text]
- **Touch targets**: [Adequate size?]
- **Text readability**: [Font size, line height]

### What Works Well
- [Positive observation 1]
- [Positive observation 2]

### Priority Recommendations
1. **[Most impactful change]** — [Why and how]
2. **[Second priority]** — [Why and how]
3. **[Third priority]** — [Why and how]

If Connectors Available

If ~~design tool is connected:

  • Pull the design directly from Figma and inspect components, tokens, and layers
  • Compare against the existing design system for consistency

If ~~user feedback is connected:

  • Cross-reference design decisions with recent user feedback and support tickets

Tips

  1. Share the context — "This is a checkout flow for a B2B SaaS" helps me give relevant feedback.
  2. Specify your stage — Early exploration gets different feedback than final polish.
  3. Ask me to focus — "Just look at the navigation" gives you more depth on one area.