記事を書く際に一番面倒なのは書くことではなく図添えだ——びっしり詰まったスクリーンショットを貼るか、AIに美しいけれど誰にも読み解けないイラストを描いてもらうか。Web制作も同じで、AIが手を出すと決まって青紫グラデーション + 角丸カード + 中央の大見出しで、クライアントが変わっても同じ一式。2026年7月、コミュニティがCodex / Claude CodeなどのAgent環境に適合する2つのSkillをオープンソース化し、この2つの問題にピンポイントで取り組んだ：guizang-material-illustration（記事の図解）と web-design-taste（Webの審美眼）。どちらも1行コマンドでインストールでき、Agentに自然言語で話しかけるだけで使える。

Skill 1：guizang-material-illustration（記事の図解）

どの問題を解くのか

記事を書く、週報を作る、SNSに投稿する、PPTを準備する——いずれも「コンセプト図」避けては通れない：1つの概念、1つのフロー、1組のデータをはっきり説明する図だ。難しいのは表紙（テンプレートでなんとかなる）ではなく、矢印、注釈、空間関係が必要な説明図の方だ。

このSkillは歸藏（@op7418）がオープンソース化したもので、GPT-Image 2.0 ベースで、あなたの記事、ノート、データや製品説明を、中国語ラベル付きの3Dマテリアル風説明図1枚に変える。読者は一目で言いたいことを掴める。

きれいな白背景、控えめな3Dマテリアル、図に直接印字された中国語ラベル。遠目には雑誌の本文ページのようで、近くで見ても細部まで読み取れる。

中核能力

• シーン適応：業務報告/製品説明、データチャート（棒グラフ、ガントチャート、サンキーダイアグラム、ヒートマップ）、教育用説明図（テコの原理、電磁誘導）、人文系図解（シルクロード、漢詩のイメージ）
• 統一された視覚言語：白背景のスタジオライティング、控えめな3Dマテリアル、鮮やかなアクセントカラー1色（デフォルトはIKBブルー）、図内に埋め込まれた短い中国語ラベル
• マイナー概念の検索：Agentがまず概念がマイナーかどうかを評価し（PKCEフロー、Zettelkastenカードシステムなど）、マイナーなら先に参考画像を検索して視覚的手がかりを抽出してから、統一スタイルへ変換する
• チャートの再描画（スキン替えではなく）：元画像のスクリーンショットや生データから意味情報（チャート種別、座標、データ値、極値）を抽出し、GPT-Image 2.0 にゼロからまったく新しいマテリアル風チャートを描かせる
• アンチパターン補正 + QA審査：納品前にラベルの正確さ、データの正しさ、画面のトリミング、ウォーターマークの文字化けを項目ごとに点検し、問題を見つけたらその場で再生成する

インストールと使い方

GitHubリポジトリ：github.com/op7418/guizang-material-illustration

インストールコマンド（あなたのCodexなどのAgentに話しかけて実行）：

npx skills add https://github.com/op7418/guizang-material-illustration --skill guizang-material-illustration

インストールしたら自然言語で駆動できる。例えば：

歸藏のマテリアルイラストSkillで、この製品説明を中国語ラベル付きの仕組み図に1枚仕上げて

この記事から核となる概念を3つ選んで、それぞれ文字入りの図解を1枚ずつ生成して

モードを選ぶこともパラメータを指定することも不要で、Agentが材料に基づいてどんなタイプの図を生成すべきか自動判断する。

💡 ヒント：このプロンプト一式はGPT-Image 2.0 でしかテストされていない。CodexからGPT-Image 2.0 を呼ぶ組み合わせが最も安定する。歸藏のPPT Skill、SNSカードSkillと組み合わせて使うこともできる。

向く / 向かない

向く：記事の図解、知識説明図、概念分解図、業務報告の図、製品の仕組み図、システムアーキテクチャ図、データチャートの美化、教育教材の図、人文系の主張を添える図、SNSカードの中心図、PPTのメインビジュアル。

向かない：完全なRedNoteカードのレイアウト（あれはSNSカードSkillの仕事）、PPTの構成設計、実写写真のレタッチ、ポートレート写真、長文ポスターの組版。

Skill 2：web-design-taste（Webの審美眼）

どの問題を解くのか

AIにWebページを作らせると、出来上がるものは一目で「AIっぽい」——青紫グラデーション、角丸カード、中央の大見出し。クライアントが変わっても同じだ。問題はAIに能力がないことではなく、あなたが欲しいものを言語化できないことにある。「高級」とは何か？白黒も高級、余白も高級、セリフ体も高級。あなたの頭の中の「高級」がどんな見た目かAIには分からないため、平均値を出すしかない。

このSkillは陳仲瑶（Alice59357）がオープンソース化したもので、核心のアイデアは一言：デザインを記述させず、選択問題だけ解かせる。

中核メカニズム

7枚のプリセットスタイルカードが、それぞれ完全なデザインパラメータを伴う。グリッドも字間もデザイントークンも知る必要はなく、3つの平易な質問に答えるだけ：

• このページは誰が見るのか？
• 見た後に、相手に何をしてほしいのか？
• 手元にどんな素材があるのか？

するとスタイルカードを提示してくれる。各カードは気質を一言で表す。1枚を選ぶか、「Aみたいだけど少し暖かく」と言えば、残りの翻訳作業はAIが引き受ける。

7種のスタイルは典型的なシーンをカバーする：

• Apple式 · プロダクトミニマル：1画面で1つのことだけを語る。静かで、落ち着いて、高級
• Vogue · 雑誌エディトリアル風：超大のセリフ見出しが白黒ポートレートに迫る。個人IPのホームページに向く
• 坂本龍一 · 静寂の余白：ページが楽譜の中の休止符のように、ほとんど何もないのにどの文字も正しい位置にある
• 暖光グラス感：暖かく夢見るようで、テクノロジー感はあるが冷たくない。AI作品ポートフォリオに向く
• 手作り紙感：生成り色の紙に手書きの書き込み。親しみがあって誠実で、教育コンテンツに向く
• ダーク計器感：暗い背景に光る数字、スキャンしてデータバーに入る。プロフェッショナルで鋭く、AIツールページに向く
• 明快なコンバージョン型：痛点フック→信頼の証→ベネフィット→証言→価格→行動。販売/申し込みページに向く

感覚語翻訳表

従来のフローでは、仕上がりを見て不満なのにどこが悪いのか言えず、「なんとなく違う」——デザイナーはこの一言を聞くと死にたくなる。このSkillには感覚語翻訳表が内蔵されており、あなたの感覚を具体的なデザイン操作へ自動翻訳する：

• 「ここが窮屈に見える」 → 余白を増やす
• 「色がちょっと濁ってる」 → 彩度を下げる、色数を減らす
• 「高級感が足りない」 → 本文の文字サイズを小さくする

あなたは平易な言葉で言い、専門的な修正はSkillが行う。

インストールと使い方

GitHubリポジトリ：github.com/Alice59357/web-design-taste

ダウンロード後、リポジトリのREADMEに従ってAgent環境へインストールし、自然言語で駆動する：3つの質問に答え（誰に見せるか、相手に何をさせるか、手元に何があるか）、スタイルカードを選び、感覚語で繰り返し修正する。

2つのSkillの併用

2つのSkillが扱うのは制作チェーン上の異なる環節で、組み合わせて使える：

1. web-design-taste でページ全体のスタイルと構成を決める
2. guizang-material-illustration で核となる概念パラグラフに中心図解を生成する
3. 歸藏の PPT Skill や SNSカード Skill と組み合わせて、マルチプラットフォーム展開まで完了する

これは「言語の境界が能力の境界を決める」という実践だ——言語化できない審美を、選べるカード、翻訳できる感覚語、固定された技術基盤に分解すれば、言語化できなかったものが選択でき、コピーできるものになる。