すっかりスキルおじさんと化しているこもりです。こんにちは。今日は、新スキルの追加と既存スキルの機能強化のお知らせです。
今回追加した新スキル「brief-me」は、モックアップを作る前に「ビジネス要件を質問形式で整理して BRIEF.md に書き出す」ためのスキルです。
モックアップ生成系のスキルの主体となっている2つのスキル「create-mockup」「create-multi-mockup」は、自由入力のオプション指定を使うことで実際に作りたいサイトに寄せつつも、コード実装やFigmaで作り始める土台・起点となるものをエージェントに依頼し、「とりあえずそれっぽいものを作らせる」というところにフォーカスしていました。
`brief-me`は、これまで多くの方が通常のプロンプトで書いていたであろう内容、人によっては `CLAUDE.md` に落とし込んでいたような内容を質問でまとめ、外部参照可能なファイルとして書き出します。新規モックアップ作成時には、その答えがそのまま利用されますし、他のページのモックアップを生成する際にはファイルの有無をチェックして利用できるという仕組みです。
brief-meの質問項目は一般的にありそうな内容で用意しています。質問内容は、エージェント自身が考えて提示、答えとなる選択肢もエージェントが提供された情報に併せて考えて出すものです。もちろん、このあたりの内容についてはご自身が求めるものへカスタマイズしてお使いいただければと思います。生成されたファイルは後からテキストで追記・編集しても良いかと思います。
講座内へは既に反映済です。もしお使いのスキルがあれば最新版へ入れ替えていただけば〜（coginitive-ui-design、japanese-web-guidelineは、他のスキルでも裏で利用しています）。公開中のREADME.mdも更新済です。
以下、今回追加されたスキルと機能改修・強化されたスキルです。
---
新規追加
brief-me — モックアップ前の要件ヒアリング
モックアップを作る前に、ビジネス要件を質問形式で整理して BRIEF.md に書き出す新スキルです。「create-mockup」「create-multi-mockup」と同じ階層に入れてお使いください。
- サイト種別・ターゲット・商材と訴求ポイント・競合との差別化・規模感・デバイス優先度・既存ブランド資産・コンバージョンゴール・留意点を、4回の質問ラウンドで収集
- デザインスタイル（カラー・フォント・レイアウト）は扱いません — そちらは従来通り
create-mockup側の質問が担当します - 生成された
BRIEF.mdはcreate-mockup/create-multi-mockupが自動検知するので、貼り付けや参照指示は不要
「毎回プロンプトに書いていたターゲットや訴求点」をエージェントの推測任せにせず、質問への回答として固定できます。
---
機能強化
create-mockup / create-multi-mockup — BRIEF.md 連携
- プロジェクトルートに
BRIEF.mdがあると自動で読み込み、要件コンテキストとして使用します（サイトタイプの質問はスキップされ、コピーやセクション構成にターゲット・訴求点・ゴールが反映されます） -
BRIEF.mdがなくbrief-meがインストール済みの場合は、起動時の質問に「先に要件ヒアリングを実行しますか？」の選択肢が追加されます（デフォルトは従来通りそのまま進行） - ブリーフに既存ブランド資産（ロゴ・指定カラーなど）が記載されている場合、カラー・スタイルの提案はそれを固定制約として扱います
cognitive-ui-design — パターンの「似通い」対策
複数回生成すると似たレイアウトに寄っていく問題への対策を追加しました。
- 各視線誘導モデルの「定番の描画」を名指しし、理由なしの自動採用を禁止。代わりに各モデル2〜3個の代替描画を用意しました
- レイアウト構造とは独立した副軸を導入。複数パターン生成時は同じ組み合わせの重複を禁止し、保守的な選択肢の組み合わせで多様性を出します
-
create-multi-mockupのパターン割り当て・確定チェックも同じ仕組みに同期済み
※ このスキルは引き続き英文のまま配布しています（読者が Claude 自身のため）。
japanese-web-guideline — 左揃えへの倒れすぎを修正
デスクトップで1行に収まる短い説明文まで左揃えになってしまう偏りを修正しました。
- 「文字数 × 16px」の判定に合格した説明文は、デスクトップでは中央揃え（
text-left md:text-center）がデフォルトであることを明文化 - 冒頭のコード例を条件付きに書き換え
- Hero セクションでは、幅を狭くする意図がなければ先にコンテナ幅を広げて中央揃えのまま通す導線を追加
- 判定ロジック自体（文字数 × 16px、1行判定）は変わっていません
README
-
brief-meをスキル早見表・スキル一覧・依存関係・組み合わせパターンに追加
---
お試し版のスキルを是非どうぞ
先週公開したお試し版スキル「create-mockup-lite」は、実際に使っている様子だけでなくスターターキットの始め方なども入れてYouTubeに動画をアップしておきました（Xの投稿はこちら）。
実務でももちろん使えますが、こちらはあくまでも軽量版でありモックアップ生成機能限定のスキルとなっています。モックアップ生成のスキルは、講座内の各種スキルと組み合わせて初めてその真価を発揮します。こちらの軽量版は、ご自身の環境でスキルが動くかどうかの動作チェックとしてもお使いください。