プロンプトエンジニアリング on Yanmu

Web Design Skill 学習ノート

Tue, 26 May 2026 00:00:00 +0800

Web Design Skill 学習ノート

Claude Design とは？

Claude Design は Anthropic がリリースしたデザインツールで、リリース当日に Figma の株価を暴落させました。

コアコンセプト： 左側にタイプし、右側にデザインが表示される（本質的には実行可能なウェブページ、画像ではない）

従来のデザインツールとの違い

次元	従来のデザインツール（Figma など）	Claude Design
主導者	人がキャンバス上で操作、AI が補助	AI が主要生成者、人がレビュー担当
出力物	デザイン画像	実行可能なコード
交流方式	手動描画	テキスト記述 → 自動生成
バージョン管理	手動操作	クリック可能なリンク、タグでバージョン切替

本質： Claude Design は Claude Code（デザイナー版）に近く、AI 版 Figma ではありません。

コアプロンプト分解（6つの要点）

ビデオは Claude Design のリークされたプロンプトを深く分析し、6つのコアデザイン原則を抽出しました：

ロールポジショニング — 動的アイデンティティ切替

オリジナルプロンプトの要旨： 「あなたはエキスパートデザイナーで、ユーザーはプロダクトマネージャーです」

重要な洞察：

❌ 「あなたは AI アシスタントです」と言わない
✅ デザイナー ↔ プロダクトマネージャーの協力関係を構築

2つのメリット：

AI の意思決定がより果断に — デザイナーは判断力を持つべき、すべてを確認する必要はない
重要なポイントは確認に来る — ユーザーがプロダクトマネージャーなので、最終決定はユーザーが行う

動的アイデンティティ切替：

アニメーション作成 → モーションデザイナー
プロトタイプ作成 → UX デザイナー
プレゼン作成 → デックデザイナー

💡 洞察： 多くの人のプロンプトは「あなたはフロントエンド開発者です」と一言で終わります。良いロールポジショニングは動的であるべきで、具体的なタスクに応じて柔軟にアイデンティティを切り替えます。

ワークフロー — 6ステッププロセス

`1`	`要件理解 → リソース探索 → 計画作成 → 構造構築 → 検証完了 → 簡潔なまとめ`

ディテール1：質問の技術（いつ聞くべき？いつ直接やるべきか？）

問題： 多くのエージェントは、まず質問の嵐を浴びせるか、何も聞かずに黙ってやるかのどちらかです。

Claude Design の戦略：

「PPT を作って」と入力 → まずいくつかの質問（情報不足）
「PPT を作って、全運会で使う、10分」→ 直接やる（緊急シナリオ、情報十分）

💡 洞察： コンテキストの緊急度と情報の完成度に基づいて、質問するか実行するかを柔軟に決定します。

ディテール2：まとめの原則

✅ 重要な考慮事項と次のステップのみ述べる
❌ すでにやったことを繰り返さない

💡 洞察： この原則は AI が大量の無駄話を生成するのを効果的に防ぎます。

AI 風の除去（最も価値のある部分）

典型的な AI 生成ウェブページの特徴：

紫ピンク青のグラデーション背景
大きな角丸カード
絵文字をアイコンとして使用
どこにでも偽データを配置
左側に色付きボーダーの角丸カード
使い古されたフォント
意味のないデータとアイコンの積み重ね

記事全体に「さらに」「注目すべきは」「以上のように」が散りばめられているようなもので、一目で AI が書いたとわかります。

Claude Design のアプローチ： 完全な**「地雷原チェックリスト」**を作成し、AI にこれらのクリシェを使用しないよう一つ一つ伝えます。

フォント推薦も慎重に検討：

絶対に使用してはいけないフォントを明確にリスト + 代替案
ニッチだが品質の高いフォントを推薦

カラーシステム — OKLCH 色空間

配色戦略の優先順位：

`1`	`ブランドカラー → OKLCH 派生カラー → 決して新しい色をでっち上げない`

なぜ HSL ではなく OKLCH なのか？

	HSL	OKLCH
知覚均等性	❌ 不均等（同じ明度値で、黄色は青よりずっと明るい）	✅ 均等
AI 配色効果	数値は問題ないが見栄えが悪い	明度と彩度を保ったまま色相だけ変えると、色が自然に調和

💡 洞察： OKLCH は一見小さなディテールですが、ウェブページの高級感を直接1レベル上げることができます。

コンテンツ原則 — 「1000個の NO で1つの YES を」

スティーブ・ジョブズの有名な言葉を引用。

AI のウェブページ作成の伝統的な問題： 空間をすべて埋めたがる — Hero、特徴、レビュー、データ、FAQ、連絡先情報…全部入れるが、どれも平凡。

Claude Design の態度：

すべての要素がなぜそこに存在すべきかを証明しなければならない
ページが空っぽに感じるなら → レイアウトの問題かもしれない、余白を使って解決
1つの大胆な余白 > 10の埋め合わせセクション

検証メカニズム — サブエージェントチェック

原理： 開発完了後、独立したサブエージェントをフォークしてウェブページの包括的チェックを行います。

なぜ独立したサブエージェントなのか？

同じコンテキストの AI は「自己満足」しやすい
独立したサブエージェントは「感情的な荷物」がないため、問題を発見しやすい

検証内容：

AI 風の特徴はあるか？
配色は調和しているか？
フォントは適切か？
レイアウトは創造的か？

Skill ファイルのコア最適化

Skill ファイルは Claude Design のプロンプトをベースに、3つの重要な最適化を行いました：

コード前に設計システムを述べる

コーディングを始める前に、AI に明確にリストアップさせる：

配色方案
フォント選択
間隔システム
…

なぜ？ 明確にしないと、AI は黙って自分で決めてコードを書きます。完成品を見た時に方向が間違っていたら、やり直しになります。事前に明確にすれば、コーディング前の方向修正コストはゼロです。

最小実用版を早期に出力

AI にまず仮定とプレースホルダーを持つ粗い V0 バージョンを作らせる
粗い V0 > 何倍も時間をかけて磨き上げた V1

なぜ？ 方向が完全に間違っていたら、V1 がどれだけ洗練されていても全部無駄になります。

追加補足

AI 風除去の項目をさらに追加
いくつかの検証済みフォントと配色の参照表を追加
参照ファイルを添付（典型的なコードテンプレート、プロンプトの「copy study the component」部分から）

効果比較デモ

テスト環境：Cursor + Claude 4.7（Skill あり vs Skill なし）

宇宙探索博物館オンライン展覧ページ

	Skill なし	Skill あり
配色	シアン紫ピンクのグラデーション、典型的な AI ネオン感	OKLCH 定義、雑誌印刷に近い深い色調
フォント	やや古い	見出しと本文に特徴、テック感
レイアウト	標準 Hero + カード、教科書的なランディングページ	従来のカード式でない、創造性がある
アニメーション	星空と惑星のアニメーション、ただし大量のグロー効果が積み重なっている	快適、創造性がある
総合	宇宙感はある、創造性に欠ける	非常に経験豊富なデザイナーの傑作のように

独立フォトグラファーの個人ポートフォリオ（最小プロンプト）

	Skill なし	Skill あり
デザインスタイル	ダーク背景 + ネオングロー + 半透明カード、古い	北欧のフォトグラファーを架空の人物として設定、完全なビジュアルスタイルをゼロから設計
コピー	AI 感たっぷり	—
感情表現	フォトグラファーが持つべき自由感が全く表現されていない	高級フォトグラフィーアルバムをめくっているように
意思決定戦略	そのままやった、質問なし	配色の傾向、コア要素などを積極的に質問

最終結論

1
2

Skill なし: 85点 → 使える、完成している、合格
Skill あり: 95点 → 美しい、洗練されている、スタイルがある

Skill の各ルールは個別に見ると効果は大きくありませんが、合わさると質的な変化を生み出します。これは「使える」から「美しい」へ、「完成している」から「洗練されている」へ、「合格」から「スタイルがある」への差です。

コア知識早見表

#	知識ポイント	一言まとめ
1	動的ロールポジショニング	タスクに応じて AI アイデンティティを柔軟に切替、「あなたはフロントエンド」と一言で終わらせない
2	6ステップワークフロー	要件理解→リソース探索→計画作成→構造構築→検証完了→簡潔なまとめ
3	質問の技術	情報の完成度と緊急度に基づいて質問するか実行するかを決定
4	AI 風の除去	地雷原チェックリストを作成、グラデーション/絵文字/大きな角丸カードなどのクリシェを禁止
5	OKLCH 配色	知覚均等な色空間、HSL より調和のとれた色を生成
6	コンテンツ抑制	すべての要素が存在理由を証明、大胆な余白
7	サブエージェント検証	独立したコンテキストでチェック、「自己満足」を回避
8	コード前に設計システムを述べる	デザイン決定を早期に露出、方向性のエラーを回避
9	素早い V0	粗いが速いプロトタイプ > 洗練されているが方向が間違った完成品

Context7 ガイド：AIコーディングアシスタントに最新ドキュメントを理解させる

Sat, 02 May 2026 19:51:00 +0800

概要

こんな経験はありませんか？AI にコードを書かせたら、たくさん出力したのに実行するとエラーになる。または、ドキュメントに明らかに存在する API なのに、AI が「存在しません」と言う。

AI がバカなのではありません。学習データには賞味期限があるのです。数ヶ月前や一年前のデータで学習している間に、フレームワークは何度もアップデートされています。

Context7 はこの問題を解決します。Upstash チームが開発したもので、質問時に最新の公式ドキュメントを取得し、AI のコンテキストに注入して、現在のバージョンに基づいて回答させます。

使い方は簡単で、プロンプトの末尾に use context7 を追加するだけです。AI に「推測するな、まず最新ドキュメントを確認してから答えて」と伝えるようなものです。

なぜ必要か？

💥 具体例

個人サイトに「トップに戻る」ボタンを追加したいとします。ページをスクロールすると右下にボタンが表示され、クリックすると一番上に戻る、というものです。

AI が古い知識で書いたコード： 数十 KB のサードパーティライブラリを読み込み、それを呼び出すためのコードを大量に書く。機能は実現できますが、たった一つのボタンのためにページが遅くなり、コードが冗長になります。

実際には今はもっと簡単です： モダンブラウザにはスムーズスクロールとスクロール検出が組み込まれています。数行のコードで済み、追加ライブラリは不要です。

AI はこれを知りません。なぜなら数年前の教材で学習したからです。

use context7 を追加すると、Context7 が最新ドキュメントを確認し、ネイティブ機能で十分だと判断します。AI は古いやり方ではなく、より軽量な方法を選びます。

これは、友達にスマホの修理を頼んだとき、3年前の手順を記憶だけで分解しようとするようなものです。ネジの位置は変わっています。最新のチュートリアルを先に見ておけば、壊さずに済みます。

Context7 の有無の違い

	なし	あり
情報源	AI の古い知識（時代遅れの可能性）	公式ドキュメントからリアルタイム取得
API の正確性	よく間違える、または既に存在しない API を使う	現在のバージョンの API を保証
コード品質	数年前の古い書き方の可能性	最新の推奨される書き方
バージョン対応	バージョンを無視して推測	指定したバージョンを検索

🔄 仕組み

数ステップで完了します：

質問する（末尾に use context7 を追加）
    ↓
Context7 が質問対象のコードパッケージを特定
    ↓
GitHub と公式ドキュメントサイトから最新情報を取得
    ↓
最も関連性の高い部分をフィルタリングして AI の「コンテキスト」に注入
    ↓
AI が最新ドキュメントをもとに回答

「コンテキスト」とは、AI が現在の会話で「見える」内容のことです。ドキュメントを注入するのは、テーブルに参考書を広げるようなもので、AI はそれを見ながら回答します。

ドキュメントの出所は？GitHub リポジトリ、公式ドキュメントサイト、そしてプロジェクトメンテナーが作成した llms.txt（AI 向けのドキュメントインデックスファイル）です。

結果を取得した後、Context7 は LLM を使ってインテリジェントに並べ替え、最も関連性の高い部分だけを選び出します。

2つの使い方：

方法	説明
MCP モード（推奨）	一度インストールすれば、AI コーディングアシスタントが自動的に呼び出す。MCP は AI にプラグインを追加するようなもの
CLI 手動モード	ターミナルでコマンドを打って手動でドキュメントを検索

コア機能

スマートマッチング：名前を言えば、探しに行く

AI にあるツールの使い方を尋ねると、Context7 はそのツールの最新マニュアルをネット上で見つける必要があります。しかし、同じ名前のものが複数存在することもあります。

一般的な名前なら自動で認識できます。名前が曖昧で混乱しやすい場合は、誰/何 の形式で正確に指定します：

`1`	`/tailwindlabs/tailwindcss を使って私のウェブページにナビゲーションバーを追加してください。use context7`

tailwindlabs は作者名、tailwindcss はプロジェクト名です。「Apple」を検索するのと同じで、果物なのか携帯なのか——はっきり言えば間違えません。

対応ライブラリ

人気のあるものはすべて収録：React、Next.js、Vue、Tailwind CSS、Express、Prisma、Supabase、TypeScript……完全なリストは context7.com/rankings をご覧ください。

バージョン認識

バージョンによって API は大きく異なることがあります。バージョン番号を直接指定すれば、Context7 が対応するバージョンのドキュメントを検索します：

1
2
3

Vue 3 でカウンターを書いて。use context7
Next.js 14 の Pages Router で API ルートを書いて。use context7
Tailwind CSS v4 でダークモードを設定して。use context7

iPhone 12 の分解チュートリアルを頼めば、誰も iPhone 15 のものを渡しません。

インストール

ワンクリックインストール

`1`	`npx ctx7 setup`

npx は Node.js に付属しているコマンドで、追加インストールは不要です。Node.js をまだインストールしていない場合は、nodejs.org からダウンロードしてインストールしてください。

実行すると以下の処理が行われます：

ブラウザが開いてログイン認証（OAuth）
API Key の生成（あなたの「身分証明書」）
エディタの自動設定

3ステップで完了です。

エディタを指定する場合はパラメータを追加：

1
2
3

npx ctx7 setup --claude      # Claude Code
npx ctx7 setup --cursor      # Cursor
npx ctx7 setup --opencode    # OpenCode

アンインストール：npx ctx7 remove

手動設定

自動インストールが機能しない場合は、手動で MCP Server を追加します：

{
  "mcpServers": {
    "context7": {
      "url": "https://mcp.context7.com/mcp",
      "headers": {
        "CONTEXT7_API_KEY": "あなたのAPIキー"
      }
    }
  }
}

各ツールの設定ファイルの場所（~ はユーザーディレクトリ、Windows なら C:\Users\ユーザー名）：

ツール	設定場所
Cursor	Settings → MCP、または `~/.cursor/mcp.json`
Claude Code	`~/.claude/settings.json`（グローバル）または `.claude/settings.json`（プロジェクト）
Windsurf	Settings → Cascade → MCP servers
Cline	VS Code 拡張内 MCP Servers → Configure
OpenCode	プロジェクトルート `opencode.json`

API Key は context7.com/dashboard で取得。形式は ctx7sk... で、無料ユーザーにも割り当てがあります。

✅ 動作確認

テストメッセージを送信：

`1`	`ボタン付きのカウンターウェブページを書いて。use context7`

AI がクリーンでモダンなコードを出力し、余分なライブラリを読み込まなければ、正常に動作しています。

使用方法

基本の使い方

プロンプトの末尾に use context7 を追加：

1
2

シンプルな履歴書ウェブページを書いて。use context7
秒数を入力してカウントダウンするツールを書いて。use context7

ライブラリの正確な指定

/owner/repo 形式で名前のマッチングをスキップ：

`1`	`/tailwindlabs/tailwindcss を使って私のページにナビゲーションバーを追加して。use context7`

ライブラリ名に曖昧さがある場合に推奨。

バージョン指定

1
2

Bootstrap 5 ではなく Bootstrap 4 の書き方でカードレイアウトを書いて。use context7
Vue 3 の Composition API で TODO リストを書いて。use context7

複数ライブラリの組み合わせ

`1`	`Bootstrap + Font Awesome でアイコンギャラリーページを作って。use context7`

自動トリガーの設定

毎回 use context7 と手入力したくない場合は、ルールファイルに設定：

→ Cursor .cursorrules に記述：

`1`	`ユーザーの質問がサードパーティのフレームワークやライブラリの API 使用方法に関する場合、自動的に Context7 で最新ドキュメントを検索する。`

→ Claude Code CLAUDE.md に記述：

1
2
3

## ドキュメント検索ルール
- サードパーティのライブラリやフレームワークに関する場合、最初に Context7 で最新ドキュメントを検索する
- Context7 が返した内容に基づいてコードを生成することを優先する

CLI コマンド

AI との会話でしか Context7 を使わないなら、この部分はスキップしても構いません。CLI はターミナルでコマンドを打つのが好きな人向けです。

npm は Node.js に付属のパッケージマネージャー、-g は「グローバルインストール」を意味します。

# CLI のインストール
npm install -g ctx7

# ライブラリの検索
ctx7 library react
ctx7 library nextjs "middleware"

# ドキュメントの取得
ctx7 docs /facebook/react "hooks state management"
ctx7 docs /vercel/next.js "middleware authentication"

# Skills 管理
ctx7 skills search        # Skill を検索
ctx7 skills install       # Skill をインストール
ctx7 skills list          # インストール済みを表示
ctx7 skills remove        # アンインストール

# 認証
ctx7 login                # ログイン
ctx7 whoami               # 状態を確認
ctx7 logout               # ログアウト

❓ よくある質問

AI の内蔵ウェブ検索との違いは？

ウェブ検索ではブログやフォーラムの投稿がヒットしますが、品質はまちまちで、自分で信頼性を判断する必要があります。Context7 は公式ドキュメントのみから情報を取得し、LLM で最も関連性の高い断片をフィルタリングして、AI に直接渡します。

💰 `use context7` でコストが増えますか？

いいえ。ドキュメント検索のステップが増えますが、AI が正確な情報を得られるため、推測や修正の繰り返し、長くて間違ったコードを書くことがなくなります。総合的なトークン消費量はむしろ減ります。

使っているライブラリが未収録の場合は？

context7.com で “Add Docs” をクリックして申請するか、use context7 を付けずに AI を自分の知識だけで回答させます。

インストールしたのに効果がない？

以下を一つずつ確認：

npx ctx7 setup でエラーが出なかったか
MCP 設定ファイルの JSON 形式が正しいか（カンマ一つで失敗します）
API Key が有効か（ctx7sk... で始まります）
エディタを完全に閉じてから開き直したか
MCP リストのステータスが緑色か
質問時に use context7 を書いたか

応答速度に影響しますか？

1〜2秒の待ち時間が増えますが、正確な回答が得られるので修正のやりとりが減ります。エラーが起きてから修正する時間に比べれば、この1〜2秒ははるかに短いです。

まとめ

項目	内容
概要	AI コーディングアシスタントにリアルタイムの最新ドキュメントを提供するプラットフォーム
解決する問題	学習データの古さによる AI の誤ったコード出力
コア原理	公式ドキュメントをリアルタイムに取得し、AI コンテキストに注入
インストール	`npx ctx7 setup` の一行で完了
使用方法	プロンプト末尾に `use context7` を追加
価格	無料枠あり、個人利用に十分
公式サイト	context7.com
GitHub	github.com/upstash/context7

インストールすれば、AI が古い知識でごまかす心配はもうありません。

プロンプトエンジニアリング on Yanmu

Web Design Skill 学習ノート

Web Design Skill 学習ノート

Claude Design とは？

従来のデザインツールとの違い

コアプロンプト分解（6つの要点）

ロールポジショニング — 動的アイデンティティ切替

ワークフロー — 6ステッププロセス

ディテール1：質問の技術（いつ聞くべき？いつ直接やるべきか？）

ディテール2：まとめの原則

AI 風の除去（最も価値のある部分）

カラーシステム — OKLCH 色空間

コンテンツ原則 — 「1000個の NO で1つの YES を」

検証メカニズム — サブエージェントチェック

Skill ファイルのコア最適化

コード前に設計システムを述べる

最小実用版を早期に出力

追加補足

効果比較デモ

宇宙探索博物館オンライン展覧ページ

独立フォトグラファーの個人ポートフォリオ（最小プロンプト）

最終結論

コア知識早見表

関連リソース

Context7 ガイド：AIコーディングアシスタントに最新ドキュメントを理解させる

概要

なぜ必要か？

💥 具体例

Context7 の有無の違い

🔄 仕組み

コア機能

スマートマッチング：名前を言えば、探しに行く

対応ライブラリ

バージョン認識

インストール

ワンクリックインストール

手動設定

✅ 動作確認

使用方法

基本の使い方

ライブラリの正確な指定

バージョン指定

複数ライブラリの組み合わせ

自動トリガーの設定

CLI コマンド

❓ よくある質問

AI の内蔵ウェブ検索との違いは？

💰 use context7 でコストが増えますか？

使っているライブラリが未収録の場合は？

インストールしたのに効果がない？

応答速度に影響しますか？

まとめ

💰 `use context7` でコストが増えますか？