Skill on Yanmu

Web Design Skill 実践マニュアル（詳細版）

Wed, 27 May 2026 00:00:00 +0800

Web Design Skill 実践マニュアル（詳細版）

対象ツール： Claude Code / OpenCode 目標： このガイドに従って、AI を使用して高品質な宇宙探索博物館のウェブページを生成します 所要時間： 40〜90 分

ゼロ：始める前に - やることを理解する

全体プロセス概要

`1`	`環境構築 → Skill インストール → プロジェクト作成 → ベアラン体験 → Skill 活用 → 比較`

なぜ先に「ベアラン」してから Skill を使うのか？

これは比較実験です：

直接 Skill を使うと、その価値を実感できません
まず AI に自由にやらせる → 典型的な AI 風ウェブページが見える（紫ピンク青のグラデーション、角丸カード、絵文字アイコン…）
そして Skill でやり直す → 同じトピック、同じモデルが全く異なる結果を出すのを目の当たりにします

必要なツール一覧

ツール	説明	入手方法
ターミナル	AI と対話する場所	Windows: PowerShell / Terminal；macOS: Terminal
Claude Code または OpenCode	AI コーディング Agent	インストール手順参照
Git	GitHub から Skill ファイルをダウンロード	`winget install Git.Git`（Win）/ `brew install git`（macOS）
ブラウザ	ウェブページのプレビュー	Chrome / Edge / Firefox
画面録画ソフト（オプション）	プロセスを録画	OBS Studio（無料）/ システム標準

Agent の準備確認

Claude Code を使う場合

説明： Anthropic 公式のターミナル AI コーディングツール。

インストール確認：

`1`	`claude --version`

バージョン番号が表示されればインストール済み。

インストールされていない場合：

1
2

# まず Node.js をインストール（https://nodejs.org）、その後：
npm install -g @anthropic-ai/claude-code

OpenCode を使う場合

説明： SST チームが開発したオープンソースのターミナル AI コーディングツール。

インストール確認：

`1`	`opencode --version`

インストールされていない場合：

# 方法 1：Go でインストール
go install github.com/sst/opencode@latest

# 方法 2：Homebrew でインストール（macOS/Linux）
brew install sst/tap/opencode

プロジェクトディレクトリ作成

作業フォルダ作成

1
2
3

cd ~/Desktop
mkdir space-museum-demo
cd space-museum-demo

Git リポジトリ初期化

`1`	`git init`

初期ファイル作成

claude

入力：

現在のディレクトリに index.html ファイルを作成してください。基本的な HTML5 構造のみ（DOCTYPE、head、body）、スタイルやコンテンツは不要です。HTML lang は zh-CN、title は「宇宙探索博物館」に設定してください。

ローカルプレビューサーバー起動

`1`	`npx serve .`

ブラウザで http://localhost:3000 にアクセス。

web-design-skill ダウンロード

リポジトリクローン

1
2

cd ~/Desktop/space-museum-demo
git clone https://github.com/ConardLi/web-design-skill.git

ベアラン体験 - AI の「ネイティブ美学」を見る

🎯 目的： デフォルト動作でウェブページを生成させ、AI の「ネイティブ美学」を観察する。

Agent 起動（Skill ロードなし）

1
2
3

claude
# または
opencode

設計要件入力

宇宙探索博物館のオンライン展覧ウェブページを作成してください。すべてのコードを1つの index.html ファイルに（HTML + CSS + JS インライン）。要件：

1. ダークテーマ、宇宙感とSF的な雰囲気
2. ヒーローエリアに博物館名「星間探索博物館」とスローガンを表示
3. 展示カードエリアに4つの宇宙探索マイルストーン（ガガーリン、アポロ11号、ハッブル望遠鏡、ジェイズ・ウェッブ望遠鏡）
4. タイムラインエリアに宇宙探索の重要な年号
5. スクロールアニメーション効果（要素がスクロール時にフェードイン）
6. レスポンシブレイアウト、モバイル対応

完全なコードを生成し、index.html に書き込んでください。

AI 生成待ち

約1〜3分かかります。

結果確認

ブラウザで http://localhost:3000 を更新。

観察チェックリスト：

カラー：紫ピンク青のグラデーションはあるか？
レイアウト：標準的な「中央揃えタイトル + サブタイトル」か？
AI 風の特徴：絵文字アイコン？大きな角丸カード？

ベアランバージョン保存

`1`	`現在の index.html をコピーして、index-no-skill.html という名前を付けてください。`

Agent に Skill をインストール

🎯 目的： web-design-skill のルールを Agent のシステムプロンプトに注入する。

Claude Code - 2つのインストール方法

方法 A：CLAUDE.md に書き込む（推奨、永続的）

`1`	`web-design-skill/skill.md ファイルの内容を読み込み、CLAUDE.md ファイルを作成してください。`

方法 B：会話で参照（一時的）

`1`	`@web-design-skill/skill.md この Skill ファイルのルールに従ってウェブページを設計してください。`

OpenCode - インストール

方法 A：AGENTS.md に書き込む（推奨）

`1`	`cp web-design-skill/skill.md AGENTS.md`

Skill が有効か確認

設計を始める前に、お聞きください：設計システムに従って、どのような配色方案を使いますか？フォントは？間隔のルールは？絶対にやってはいけないことは？

Skill が有効なら、AI は OKLCH 色空間、具体的なフォント推薦、「AI 風を除去する」ルールについて言及します。

Skill 活用 - 高級感を磨く

🎯 目的： 同じ要件で、Skill が AI を導いて全く異なるウェブページを作らせる。

新しい会話開始

重要：新しい会話を開始すること！

設計要件入力

今回は意図的に最小限の要件のみ：

`1`	`宇宙探索博物館のオンライン展覧ウェブページを作成してください。すべてのコードを1つの index.html ファイルに。`

フェーズ A：AI が質問

AI がまず確認質問をする場合があります。

フェーズ B：AI が設計システムを説明

コードを書く前に、AI が設計システムを説明：

設計システム：
━━━━━━━━━━━━
配色方案（OKLCH ベース）：
- 背景：oklch(15% 0.02 260) — 深い宇宙ブルー
- メイン：oklch(70% 0.15 250) — 冷たい青
- サブ：oklch(60% 0.12 310) — 深い紫
- テキスト：oklch(95% 0.01 260) — ホワイトに近い

フォント：
- 見出し：Orbitron（テック感）
- 本文：Space Grotesk（可読性良好）

間隔システム：8px グリッドベース

レイアウト戦略：マガジン風大画像レイアウト、従来のカードグリッドではない

フェーズ C：AI が V0 を出力（粗い初期版）

ブラウザで方向性が正しいか確認。

フェーズ D：反復改善

1回のフィードバックで1〜2点のみ。

フェーズ E：最終検証

新しいデザインレビューエキスパートとして、このウェブページを包括的にチェックしてください：
1. 「明らかに AI が作った」特徴はありますか？すべて列挙してください。
2. 配色は調和していますか？OKLCH を使っていますか？
3. フォントの使用は適切ですか？使い古されたフォントはありませんか？
4. レイアウトは創造的ですか？標準的なヒーロー + カードグリッドではありませんか？
5. アニメーションは自然ですか？グロー効果の使いすぎはありませんか？
6. モバイル対応は正常ですか？

Skill バージョン保存

AI 完成後、最終版を保存：

# Agent 対話中の場合、AI にコピーを依頼：
# "現在の index.html をコピーして、index-with-skill.html という名前にしてください"

# Agent 終了後、手動でコピー：
cp index.html index-with-skill.html

2つのバージョンを比較

ブラウザで両方のファイルを開く：

1
2

http://localhost:3000/index-no-skill.html     ← ベアランバージョン
http://localhost:3000/index.html               ← Skill バージョン

動画録画（オプション）

推奨ショット

ショット 1：完成品ショーケース（30秒）
ショット 2：比較表示（1分）
ショット 3：プロセス再生（2〜3分）
ショット 4：デザイン詳細解説（1分）
ショット 5：まとめ（30秒）

付録 A：よく使うプロンプトテンプレート

AI に設計システムを先に説明させる

コードを書く前に、設計システムを自然言語で説明してください：
1. 配色方案（OKLCH 使用）
2. フォント選択（見出しと本文それぞれ）
3. 間隔システム
4. レイアウト戦略
5. 絶対にやってはいけないことを確認してからコーディングを開始します。

素早い V0 を要求

まず最小限の実用版（V0）をください。
プレースホルダーと未完成の部分があって構いません。
方向を確認してから詳細を洗練してください。
詳細に時間をかけすぎないでください。

包括的検証をトリガー

1
2

新しいデザインレビューエキスパートとして、現在のウェブページを包括的にチェックしてください。
「明らかに AI が作った」特徴をすべて列挙し、配色、フォント、レイアウトのすべての問題を修正してください。

まとめ

1
2

ウェブデザインのコアワークフロー：
要件理解 → 設計システム確認 → 素早い V0 → 反復改善 → 検証

Skill のエッセンスを覚える3つの文：

設計システムが先、コードが後 — 方向が間違えばコードは無駄
まず粗い V0、その後磨き上げる — 素早い反復、最低コスト
大胆な余白、すべての要素は存在を証明せよ — 抑制こそが高級感

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	粗いが速いプロトタイプ > 洗練されているが方向が間違った完成品

OpenCode 完全ガイド：オープンソース版 Claude Code のインストール、設定、高度な活用法

Thu, 30 Apr 2026 02:00:15 +0800

📋 目次

一、OpenCodeとは？

OpenCodeは現在最もホットなAIプログラミングツールで、本質的にはオープンソース版のClaude Codeです。Claude Codeのほぼすべてのコア機能を複製し、中国ユーザーによくある速度制限やアカウント停止の問題を解決しました。

Claude Codeとの比較

比較項目	Claude Code	OpenCode
オープンソース	❌ クローズドソース	✅ オープンソース
無料モデル	❌ 有料API必要	✅ 無料モデル内蔵
中国ユーザー向け	⚠️ 速度制限/停止リスク	✅ 制限なし
Skills/MCP	✅ サポート	✅ 完全互換
Session並列	❌	✅ コア機能

コアポジショニング

オープンソース版Claude Code：ほぼ全機能、中国ユーザー向け、速度制限・アカウント停止なし
無料モデル：GLM-4.7、MiniMax-2.1などの無料モデルがそのまますぐ使える
トップクラスモデル接続：AntigravityプラグインでGemini 3 Pro、Claude 4.5 Opusを無料利用；/connectでGPT Codexに接続
キラー機能：Session並列処理、Timelineロールバック、Share共有、Ultra Workマルチエージェント協調
プラグインエコシステム：Oh My Open Code (OMO) — 7つのプログラミングエージェント + 3つのMCP Server + 各種ツール

二、4つのインストール形態

⭐ 1. コマンドライン版（主力おすすめ）

最も安定し、機能が最も充実した使用方法。

# インストール（Node.jsを先にインストールする必要があります）
npm i -g opencode-ai

# 起動
opencode

前提条件：Node.jsのインストールが必要（nodejs.orgから対応OS版をダウンロード）

2. デスクトップクライアント（Beta）

公式サイトからクライアントをダウンロードし、インストール後、プロジェクトフォルダを選択して使用。

⚠️ 現在Betaテスト段階でバグ较多、主力ツールとしての使用は推奨されません。

3. VS Codeプラグイン版

前提条件：コマンドライン版OpenCodeがインストール済み。プラグイン版のコア価値はIDEとのシームレスな統合にあり、AIが直接コードのコンテキストを認識します。

VS Code拡張機能ストアでOpenCodeを検索してインストール
ショートカット Ctrl + Shift + P → open opencodeと入力してEnter
プラグインが左側ウィンドウで開いているコードファイルを自動的に関連付け
コードを選択後 Ctrl + Alt + K でOpenCodeチャットウィンドウに素早く貼り付け

4. クラウド実行環境（GitHub Actions）

オープンソースプロジェクトの自動化されたIssue修正に最適：

プロジェクトをGitHubの公開リポジトリにアップロード
リポジトリにAPI Keyを設定（Settings → Secrets and Variables → Actions）
Issueのコメントに/opencode + 要件説明を入力
GitHub Actionsが自動的にOpenCodeワークフローを実行
完了後、自動的にPull Requestを作成

三、無料モデルの設定

利用可能なモデルを確認

`1`	`/models # 利用可能なすべてのモデルを表示（freeマーク付きは無料で使用可能）`

モデル	特徴
GLM-4.7	プログラミング能力が高い、ゼロ設定
MiniMax-2.1	プログラミング能力が優秀、応答が速い

トップクラスモデルへの接続

方法1：Antigravityプラグイン（Gemini + Claudeを無料接続）

AntigravityはGoogleが提供するAIプログラミングIDEで、Gemini 3 ProとClaude 4.5 Opusを無料で提供しています。

OpenCodeにインストールプロンプトを貼り付け（Antigravity GitHubのトップページからコピー）
AIが自動的にインストールを完了するのを待つ
新しいターミナルを開いてログインコマンドを実行、Google → Antigravityログインを選択
Googleアカウントにログイン、生成されたURLを貼り付け
OpenCodeを再起動、/modelsでGemini 3 ProとClaude 4.5 Opusが表示される

方法2：GPT Codex（OpenAI公式提携）

OpenAIとOpenCodeが公式提携し、ChatGPT Codexに直接接続できます。

`1`	`/connect # OpenAI → GPT Pro → ブラウザログインを選択`

前提条件：ChatGPT Plus以上のサブスクリプションが必要。

方法3：OpenRouter（万能接続）

OpenRouterを通じて、市販されているほぼすべての大規模モデルに接続でき、国内ユーザーも簡単にクレジットを取得できます。

`1`	`/connect # OpenRouter → API Keyを入力を選択`

OpenCodeは75種類のAI接続方法をサポートしており、ほぼすべてのモデルベンダーを網羅しています。

四、コア機能のハイライト

1. 質問による要件明確化

コーディングを始める前に、OpenCodeは一系列の質問をします：

コードサンプルだけでいいですか、それとも完全に実行可能なプログラムが必要ですか？
どの機能が必須ですか？
どのモデルを使用しますか？
環境変数はどのように保存しますか？

この「先に聞いてから行動する」メカニズムにより、手戻りが大幅に減少します。

2. コマンドラインコードDiffインターフェース

OpenCodeのコマンドラインdiff表示は、すべてのコマンドラインプログラミングツールの中で最高とされており、コードの変更が一目瞭然です。

⭐ 3. Session並列処理

これはOpenCodeの最も特徴的な機能です — 複数Sessionの並列実行：

# 最初のタスクを開始（例：タイマー追加）
# タスク実行中に新しいセッションを作成
/new

# 2番目のタスクを開始（例：ブラシの色変更）
# すべてのセッションの状態を確認
/sessions

# セッション間を切り替え
/session <id>

回転シンボルはSessionがバックグラウンドで実行中であることを示します。2つの要件を完全に並列開発できます。

4. Timelineチェックポイントロールバック

`1`	`/timeline # 現在のセッションの完全な会話履歴を表示`

任意の履歴ノードを選択：

Revert：コードとチャットコンテンツをその時点にロールバック
View：当時AIが行った変更を確認

プログラミングの「タイムマシン」のように、大胆に異なるアプローチを試すことができます。

5. Share共有

1
2
3

/share      # 会話履歴をウェブページとして共有
/unshare    # 共有を停止
/export     # 会話履歴をファイルとしてエクスポート

共有後、完全な会話履歴とコード変更プロセスを表示するウェブリンクが生成され、コラボレーションやデモンストレーションに便利です。

五、Skillsスキル移行

OpenCodeはClaude CodeのSkillsディレクトリ構造と完全互換で、移行コストが極めて低いです：

1
2

# ディレクトリ構造の対応関係
.claude/skills/<skill-name>/    →    .opencode/skills/<skill-name>/

操作手順

プロジェクトのルートディレクトリに.opencodeフォルダを作成
.opencodeの下にskillsフォルダを作成
元の.claude/skills/配下のスキルフォルダをそのままコピー
OpenCodeを再起動すると、AIがこれらのSkillsを認識して呼び出す

各Skillはディレクトリ付きの説明書で、AIに特定分野のタスクを完了する方法を伝えます。

六、MCP設定

OpenCodeは2つのMCP（Model Context Protocol）モードをサポートしています：

ローカルMCP（Local）

ローカルコマンドで実行。~/.config/opencode/opencode.jsonで設定：

{
  "mcpServers": {
    "shed-cn": {
      "type": "local",
      "command": "npx",
      "args": ["shed-cn"],
      "enabled": true
    }
  }
}

リモートMCP（Remote）

URLでリモート呼び出し。Context7を例に：

{
  "mcpServers": {
    "context7": {
      "type": "remote",
      "url": "https://context7-mcp-server-url",
      "headers": {
        "Authorization": "Bearer <your-api-key>"
      },
      "enabled": true
    }
  }
}

設定完了後、OpenCodeを再起動し、/mcpと入力すると設定済みのMCP Serverを確認できます。

七、Oh My Open Code (OMO) スーパープラグイン ⭐

OMOはOpenCodeで最も人気のあるプログラミングプラグインで、本質的にはツール + MCP + プログラミングエージェントの組み合わせバンドルです。

7つのプログラミングエージェント

エージェント	役割	おすすめモデル
🧠 シーシュポス (Sisyphus)	メインエージェント、計画とオーケストレーション	Claude 4.5 Opus / GPT 5.2
🔮 予言者 (Prophet)	アーキテクチャ設計、コードレビュー	—
📚 司書 (Librarian)	文献調査、ドキュメント検索	—
🔍 探索者 (Explorer)	ウェブ検索	—
🎨 フロントエンドエンジニア	フロントエンド開発	Gemini 3 Pro
📝 ドキュメントライター	ドキュメント生成	—
🖼️ マルチモーダル	画像/PDF理解	—

各エージェントにはその作業に最適な大規模モデルが割り当てられています。作者によると、最適な組み合わせを見つけるために24,000ドル相当のTokenを費やしたとのことです。

3つのMCP Server

Web Search：ウェブ検索
Context7：最新の技術ドキュメントを取得
Grep App：GitHubリポジトリの高速コード検索

統合ツール

LSPアドバンスト版：プログラミング言語の構文とセマンティクスを通じてAIのコード特定を支援
ASTツール：コード構文木を通じた関連検索
LOCツール：マルチモーダル視覚能力で画像、PDFを理解
Delegate Task / Background Task：エージェントのタスク割り当てとバックグラウンドスケジューリング

インストールと使用

設定ファイルの場所：C:¥Users¥<ユーザー名>¥.config¥opencode¥oh-my-opencode.json

OMO GitHubのトップページからinstallで始まるプロンプトをコピー
OpenCodeに貼り付け、設定質問に回答（サブスクリプション状況など）
自動的にインストール完了

2つのコア使用法

① @ で特定エージェントを指定

`1`	`@フロントエンドエンジニアこのページのレスポンシブレイアウトを最適化して`

② Ultra Workモード（魔法の言葉ULW）

`1`	`ULW ペットショップアプリを作成して`

Ultra Workモードでは、シーシュポスがメインエージェントとして以下の処理を行います：

タスクをTodo Listに分解
複数のバックグラウンドタスクを同時並行実行
各エージェントを中央からオーケストレーション
完成したプロジェクトを納品

Ralph Loopモード

AIに長時間ループで作業を強制し、極めて困難なタスクに適しています：

`1`	`/ralph-loop`

例：「最新のSpring Boot 4標準を使用してプロジェクト全体をリファクタリングし、すべてのテストケースがパスするまで」——タスクが完了するまで数時間連続実行可能です。

八、その他の便利機能

`/init` — プロジェクト知識初期化

AIにプロジェクトフォルダ全体を読み込ませ、agents.mdファイルをシステムプロンプトとして生成し、AIがプロジェクトを素早く理解できるようにします。

`/compact` — コンテキスト圧縮

これまでの会話を簡潔な要約にまとめ、モデルのコンテキストウィンドウを解放し、Tokenのオーバーフローを防ぎます。

カスタムコマンド

~/.config/opencode/commands/の下に.mdファイルを作成してカスタムコマンドを定義：

# テスト実行
モード：build
コマンド：npm test
説明：プロジェクトのすべてのテストケースを実行

使用方法：/テスト実行でトリガー。

カスタムエージェント

~/.config/opencode/agents/の下に.mdファイルを作成：

# Code Review Agent
タイプ：subagent
モデル：claude-4.5-opus
説明：コードレビューを専門とし、コード品質、セキュリティ脆弱性、ベストプラクティスをチェックします。

Primary Agent：Tabキーで切り替え、会話で直接使用
Sub Agent：メインエージェントがバックグラウンドで自動スケジューリング

九、まとめとおすすめ

適用シーン

シンARIO	おすすめ度	説明
初心者のAIプログラミング入門	⭐⭐⭐⭐⭐	無料モデル、ゼロコストでスタート
日常開発補助	⭐⭐⭐⭐⭐	Session並列 + Timelineロールバック
複雑なプロジェクト開発	⭐⭐⭐⭐⭐	OMOプラグインマルチエージェント協調
オープンソースプロジェクト保守	⭐⭐⭐⭐	GitHub Actionsクラウド自動化
Skills/MCP練習	⭐⭐⭐⭐⭐	Claude Codeエコシステムと完全互換

十、実践記録：Oh My OpenAgentのインストール

以下は、Oh My OpenAgent（旧Oh My Open Code）のインストールを個人的にテストした完全な会話記録で、環境はWindows + PowerShellです。

環境チェック

1
2

opencode --version
# 出力: 1.14.39

インストールプロセス

OpenCodeの会話で直接AIに伝えます：

“Install and configure oh-my-openagent by following the instructions here: https://raw.githubusercontent.com/code-yeongyu/oh-my-openagent/refs/heads/dev/docs/guide/installation.md"

AIがまずモデルのサブスクリプション状況を確認します：

サブスクリプション	私の状況
Claude Pro/Max	❌ なし
OpenAI / ChatGPT Plus	❌ なし
Gemini	❌ なし
GitHub Copilot	✅ 学生認証版
OpenCode Zen	✅ 無料利用可
Z.ai Coding Plan	❌ なし
OpenCode Go	❌ なし
Kimi for Coding	❌ なし
Vercel AI Gateway	❌ なし

⚠️ AIは「Without a Claude subscription, the Sisyphus agent might not work idealally」と表示しますが、GitHub Copilotがフォールバックモデルとして自動的に引き継ぎます。

サブスクリプション確認後、AIが自動的にインストールコマンドを実行：

bunx oh-my-openagent install --no-tui \
  --claude=no --openai=no --gemini=no \
  --copilot=yes --opencode-zen=yes \
  --zai-coding-plan=no --opencode-go=no \
  --kimi-for-coding=no --vercel-ai-gateway=no

インストール成功の出力：

[1/4] Checking OpenCode installation...
[OK] OpenCode 1.14.39 detected
[2/4] Adding oh-my-openagent plugin...
[OK] Plugin added -> C:¥Users¥<ユーザー名>¥.config¥opencode¥opencode.json

インストール後の設定ファイル

メイン設定ファイル ~/.config/opencode/opencode.json：

{
  "plugin": [
    "oh-my-openagent@latest"
  ]
}

エージェントモデル設定 ~/.config/opencode/oh-my-openagent.json：

AIがGitHub Copilotサブスクリプションに基づいて自動的にモデルを割り当て：

エージェント	割り当てモデル
Sisyphus（メインエージェント）	`github-copilot/claude-opus-4.7`
Oracle（予言者）	`github-copilot/gpt-5.5` (medium)
その他のエージェント	Copilot利用可能モデルから自動選択

認証設定

インストール完了後、手動でGitHub Copilotを認証する必要があります：

`1`	`opencode auth login`

インタラクティブ手順：

上下キーでGitHub Copilotを選択
Enterキーで確認
ブラウザが自動的に開き、GitHub学生アカウントにログイン
認証完了、ターミナルに認証成功と表示

エージェントモデルを再設定するには？

方法1：AIに直接伝える

“Sisyphusのモデルをclaude-sonnet-4.6に変更して” “Oracleはgpt-5.5を使って”

方法2：設定ファイルを手動編集

~/.config/opencode/oh-my-openagent.jsonの対応するエージェントのmodelフィールドを直接変更。

追加設定：OpenCode Zenをフォールバックとして追加

インストール時に無料のOpenCode Zenを忘れた場合（--opencode-zen=no）、後からOpenCodeの新しい会話でAIに修正してもらいます：

“実は無料のOpenCode Zenもあるんだけど、もうGitHub Copilotにはログインしてるから、修正して”

AIの最初の試みではOpenCode Zenがプライマリに設定され（opencode/claude-opus-4-7）、GitHub Copilotがフォールバックになりました。実際のニーズはその逆です：

“違う、GitHub Copilotをプライマリにして、OpenCode Zenの無料モデルをフォールバックにして”

AIが修正した後の最終設定戦略：

1
2

プライマリモデル: github-copilot/*     （有料、優先使用）
フォールバックモデル: opencode/*       （無料クレジット、Copilot利用不可時に自動切り替え）

主要設定スニペット（Sisyphusを例に）：

{
  "sisyphus": {
    "model": "github-copilot/claude-opus-4-7",
    "fallback_models": [
      { "model": "opencode/claude-opus-4-7" },
      { "model": "opencode/gpt-5.5" }
    ]
  }
}

💡 ヒント：設定要件を説明する際、プライマリ/フォールバックの関係を明確に——「XXをプライマリ、YYをフォールバックに」——と伝え、AIが逆にしないようにしましょう。

使用ヒント

インストール完了後、ターミナルでopencodeと入力して開始：

プロンプトにultraworkまたはulwを含めると自動並列処理がトリガー
Tabを押してPrometheus（プランナー）モードに入
/start-workを実行して完全なオーケストレーションを実行

付録：トラブルシューティング

問題	解決策
`doctor`コマンドタイムアウト（30s）	一部のチェックがハングする場合、`--verbose`を追加してトラブルシューティング、またはスキップしても使用に影響なし
PowerShellでの`if`構文エラー	OpenCodeのbashコマンドはPowerShellで構文変換が必要
Sisyphusの非Claudeモデルでのパフォーマンス低下	既知の制限、Claudeサブスクリプションがあると最良の体験
AIがプライマリ/フォールバックモデルを逆にする	プライマリ/フォールバックの関係を明確に説明：「XXをプライマリ、YYをフォールバックに」、「YYを追加して」だけは言わない

📚 参考元：技術エビ - OpenCode詳細攻略、Oh My OpenAgentインストールガイド

Skill on Yanmu

Web Design Skill 実践マニュアル（詳細版）

Web Design Skill 実践マニュアル（詳細版）

ゼロ：始める前に - やることを理解する

全体プロセス概要

なぜ先に「ベアラン」してから Skill を使うのか？

必要なツール一覧

Agent の準備確認

Claude Code を使う場合

OpenCode を使う場合

プロジェクトディレクトリ作成

作業フォルダ作成

Git リポジトリ初期化

初期ファイル作成

ローカルプレビューサーバー起動

web-design-skill ダウンロード

リポジトリクローン

ベアラン体験 - AI の「ネイティブ美学」を見る

Agent 起動（Skill ロードなし）

設計要件入力

AI 生成待ち

結果確認

ベアランバージョン保存

Agent に Skill をインストール

Claude Code - 2つのインストール方法

方法 A：CLAUDE.md に書き込む（推奨、永続的）

方法 B：会話で参照（一時的）

OpenCode - インストール

方法 A：AGENTS.md に書き込む（推奨）

Skill が有効か確認

Skill 活用 - 高級感を磨く

新しい会話開始

設計要件入力

フェーズ A：AI が質問

フェーズ B：AI が設計システムを説明

フェーズ C：AI が V0 を出力（粗い初期版）

フェーズ D：反復改善

フェーズ E：最終検証

Skill バージョン保存

2つのバージョンを比較

動画録画（オプション）

推奨ショット

付録 A：よく使うプロンプトテンプレート

AI に設計システムを先に説明させる

素早い V0 を要求

包括的検証をトリガー

まとめ

Web Design Skill 学習ノート

Web Design Skill 学習ノート

Claude Design とは？

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

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

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

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

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

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

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

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

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

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

Skill ファイルのコア最適化

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

最小実用版を早期に出力

追加補足

効果比較デモ

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

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

最終結論

コア知識早見表

関連リソース

OpenCode 完全ガイド：オープンソース版 Claude Code のインストール、設定、高度な活用法

📋 目次

一、OpenCodeとは？

Claude Codeとの比較

コアポジショニング

二、4つのインストール形態

⭐ 1. コマンドライン版（主力おすすめ）

2. デスクトップクライアント（Beta）

3. VS Codeプラグイン版

4. クラウド実行環境（GitHub Actions）

`/init` — プロジェクト知識初期化

`/compact` — コンテキスト圧縮