Communitygithub.com

Umby Discover:外科的ブリーフ&クリエイティブディレクション

WebサイトやWebアプリを構築・再設計する前に、外科的でハイインパクトなクリエイティブおよびプロダクトディスカバリーを実施します。ブランド方向性、購買者の懐疑、コンバージョン優先度、美的緊張感、本物の証明資産を4~5の鋭い質問で解決し、具体的なクリエイティブ&機能契約を確定することで、凡庸なAI出力を排除します。新規サイト/アプリ構築、リブランド、または仕様不足のUIリクエストの開始時に使用します。

Umby Discover:外科的ブリーフ&クリエイティブディレクション とは?

**Umby Discover** は、AIエージェント(Claude Code、Cursor、Codexなど)向けに設計されたスキルで、WebサイトやWebアプリの構築・再設計の前に、外科的かつ高レバレッジなプロダクトディスカバリーとクリエイティブディレクションを実行します。目的は、従来の「20問の退屈なアンケート」を避けつつ、LLMが生成する一般的な「スロップ(AIの平均的な出力)」を排除することです。 本スキルは、まずリポジトリ内の既存ファイル(package.json、CSSトークン、ブランド資産など)をチェックし、**5本の柱(ジョブ/一次アクション、美的アーキタイプ、証拠/コンテンツ、スコープ/スタック、ブラウンフィールド制約)** に基づいて不足している意図を特定します。次に、**4~5の外科的な質問**を厳選し、ユーザーに具体的な選択肢(例:「Precision Dark Monolith vs. Editorial High-Key Light」)を提示します。構造化された選択肢ツールが利用可能な場合はそれを使用し、そうでなければプレーンテキストでリスト表示します。 ユーザーの回答に基づき、**デザイン&プロダクト契約**(Design & Product Contract)を12~15行に凝縮して確定します。これには、ターゲットオーディエンスと懐疑、プライマリCTA動詞、選択された美的アーキタイプとベンチマーク、タイポグラフィペア、OKLCHカラーパレット、セクションリズム、禁止事項(アンチゴール)が含まれます。この契約は後続のスキル(umby-architect、umby-craft)に直接引き渡され、一貫性のある高品質な実装を保証します。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Umbylicus/umby-beast-code/tree/HEAD/skills/umby-discover

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Umby Discover:外科的ブリーフ&クリエイティブディレクション は何をしますか?

常時適用ルールがあります。 何かを変更する前に、../umby-beast-code/references/standing-rules.md を読んでください。承認ゲート、明示的な許可なしのデプロイやマージ禁止、プレビュー付きフィーチャーブランチ、保護されたコード、すべてのURLの保持またはリダイレクト、本物の証拠のみ、そして作業ログについて規定されています。

汎用的なプロンプトはエージェントに推測を強いますが、LLMの推測とはインターネットの統計的平均に過ぎません。あなたの役割は、コンポーネントコードを1行も書く前に、具体的で、意見が明確で、カテゴリーをリードするプロダクトとビジュアルアイデンティティを確定することです。ユーザーを退屈な20の質問にさらす必要はありません。


ステップ1:観測可能な事実と欠落した意図を分離する

  1. 最初にワークスペースファイルを確認します(package.json、既存のCSSトークン、ブランド資産、README.md、既存のルート)。リポジトリがすでに答えている質問をしてはいけません。
  2. ユーザーのリクエストを凡庸でないブリーフの5本の柱に照らして監査します。
    • 柱1 — ジョブとプライマリアクション: 誰がこのページを訪れ、どんな懐疑心を抱き、完了させたい単一のアクションは何か?
    • 柱2 — 美的アーキタイプと緊張感: これは視覚的にどこに位置するか?(references/aesthetic-archetypes.md を参照し、AI以外の12のアーキタイプを確認。)
    • 柱3 — 証拠とコンテンツの現実: 実際のプロダクトデータ、指標、写真、またはライブのインタラクティブなメカニズムはあるか?それとも、偽の「10,000人以上の顧客」のような埋め草ではなく、正直なインタラクティブシミュレーションを構築すべきか?
    • 柱4 — 表面スコープとスタック: パス1に含めるべきページ/フローと、適用されるスタックの制約(Astroの静的スピード vs. Next.jsのインタラクティブアプリ vs. Shopifyのヘッドレス)は何か?
    • 柱5 — ブラウンフィールド制約(更新のみ): どのURL、ロゴ、ブランドカラー、チェックアウト/認証契約が変更不可か?

ステップ2:4~5の質問によるインテークゲートを実行する

上記の柱のうち2つ以上が実際に不足しており(かつユーザーが即座の自律実行を要求していない場合)、UIコードを書く前に一時停止し、references/question-bank.md から選択した3~5の外科的な質問をします。

優れた発見質問のルール

  • 利用可能な場合はホスト質問UIを使用する: 環境が構造化された多肢選択質問ツール(例:ask_question)を提供している場合は、それを使用し、質問ごとに3~4の具体的で対照的な選択肢を提示し、推奨する選択肢を先頭に (推奨) のプレフィックスを付けます。そうでない場合は、明確で番号付きのプレーンテキストリストを提示します。
  • 自由形式の宿題ではなく、具体的な対比を提供する: 「好きな色やフォントは何ですか?」と決して聞かないでください。代わりに、鋭い方向性のペアリングを提示します。例:「(推奨) Precision Dark Monolith(Linear / Raycast 級:オブシディアン #0b0c0e、シャープなヘアライン境界、単一のエレクトリックアクセント、インタラクティブなプロダクトステージ)」 vs. 「Editorial High-Key Light(Stripe Press / Mercury 級:暖かいアラバスター #faf9f6、エディトリアルセリフディスプレイ+クリーングロテスクボディ、たっぷりとした昼光間隔)」など。
  • 最大5つの質問に制限する: 1ラウンドの鋭い質問は刺激的ですが、3ラウンドもの細かい詰め問いは壊れているように感じられます。

ステップ3:クリエイティブ&機能契約を確定する

ユーザーが回答したら(または明示的な自律実行権限の下で最適なアーキタイプマッチを使用して即座に)、コンパクトなデザイン&プロダクト契約を記述します(インラインで12~15行、またはマルチルートプロジェクトの場合は .umby/DESIGN_BRIEF.md に保存)。

  1. オーディエンスと懐疑心: 誰が訪れ、ページが5秒以内に克服すべき正確な疑問を一文で。
  2. プライマリビューポートアクション: 正確に1つのプライマリCTA動詞句(例:「インタラクティブサンドボックスを開始」、「250gバッグを追加・$24」)。
  3. 選択したアーキタイプと3つのクラフトベンチマーク: references/aesthetic-archetypes.md から命名されたアーキタイプ + その品質水準(決してIP/アセットをコピーしない)を固定する3つの実世界の製品。
  4. タイポグラフィペアとスケール: ディスプレイファミリー + ボディファミリー + モノファミリー、明示的なウェイトとトラッキングルールを指定。
  5. OKLCHパレットアンカー: ベースサーフェスの明度/色相、プライマリインク、ヘアラインのアルファ、および単一の高い確信度のアクセントカラー。
  6. セクションリズムシーケンス: 5~8のページビートの順序付きリスト。隣接する2つのセクションが同じグリッドジオメトリを共有してはいけません。
  7. アンチゴール(明示的な除外事項): このプロジェクトで禁止される3つの具体的なクリシェ(例:「紫と青色のSaaSグローなし、3カラムのLucideアイコン機能行なし、未確認の顧客ヘッドショットなし」)。

この確定した契約を、直接 ../umby-architect/SKILL.md と ../umby-craft/SKILL.md に引き渡します。

関連スキル