design-psychology-skill は何をしますか？
およそ60の研究に基づいたコンバージョン＆デザイン心理学の原則に基づいて、あらゆるWebサイトやUIを監査・構築するClaudeスキル。ライブURLとローカルコードを自動検出します。
概要
このスキルは、AIエージェント（Claude Code、Cursor、Codexなど）が、認知バイアス、行動経済学、UIパターンライブラリから導き出された実証済みの原則を使用して、Webインターフェースを評価・改善できるようにします。
動作方法
- 入力の検出: スキルはまず、入力がライブURLかローカルファイルパスかを判別します。
- ライブURLの場合:
curlまたはブラウザツールを使用してページを取得し、HTML/CSSを分析します。 - ローカルコードの場合: 作業ディレクトリ内のファイル（例：
.html、.jsx、.css）を直接読み取ります。
- ライブURLの場合:
- 原則との照合: 約60の原則（以下に一部をリスト）を分析に対して実行します。各原則には以下が含まれます。
- 名前とカテゴリ（例：認知負荷、社会的証明、フィッツの法則）
- 説明と「なぜ機能するか」という根拠
- 合格/不合格/該当なしを判断するための具体的なチェック
- スコアリングと出力: Markdownレポートを生成します。
- 原則ごとのスコアと説明
- 重大度別（高・中・低）に分類された優先アクション項目
- 改善のためのコードスニペット（該当する場合）
含まれる原則（サブセット）
| カテゴリ | 原則 | 説明 |
|---|---|---|
| 認知 | フォン・レストルフ効果 | 際立った要素は記憶に残りやすい。CTAを目立たせる。 |
| 社会的 | 社会的証明 | ユーザーは他人の行動に影響される。証言やユーザー数を表示する。 |
| 行動 | フィッツの法則 | ターゲットまでの距離とサイズが時間に影響する。CTAボタンを大きくし、指/カーソルに近づける。 |
| 感情 | 美学-ユーザビリティ効果 | 魅力的なデザインは、より使いやすく認識される。視覚的な魅力を優先する。 |
使用例
// ライブサイトを監査する（Claude Codeで）
ユーザー: 「https://example.com をデザイン心理学の原則で監査して」
Claude: ページを取得し、スキルを実行し、Markdownレポートを提供します。
// ローカルコードベースを構築する（Cursorで）
ユーザー: 「この `/src/components/CheckoutForm.jsx` をデザイン心理学に基づいて最適化して」
Claude: ファイルを読み取り、原則を適用し、コード修正を提案します。
出力例
# デザイン心理学監査レポート: https://example.com
## 概要
- 合格: 34/60
- 部分合格: 12/60
- 不合格: 8/60
- 該当なし: 6/60
## 高優先度アクション
### 1. [不合格] フォン・レストルフ効果 - CTAボタンが背景に溶け込んでいる
- **問題**: 「今すぐ登録」ボタンが背景と同系色のため、目立たない。
- **改善**: ボタンの色を対照的な色（例：青の背景にオレンジ）に変更し、パディングを追加する。
- **コード例**:
```css
.cta-button {
background-color: #ff6600;
color: #ffffff;
padding: 12px 24px;
font-weight: bold;
}
## インストール
このスキルをClaude Codeで使用するには:
claude install-skill Fh-Ndiritu/design-psychology-skill
または、`.claude/skills` に手動で追加してください。
## 対応プラットフォーム
- Claude Code (推奨)
- Cursor
- Codex CLI
- 任意のファイルシステムとウェブアクセス権を持つAIエージェント
## ライセンス
MIT