スタイルデモビルダー

スタイルデモビルダー は何をしますか？

あらゆる製品を、参照ウェブサイトのビジュアルスタイル（パレット、タイポグラフィ、レイアウトパターン、モーション）を借用しつつ、ユーザー自身の製品ストーリーを語る美しいデモランディングページに変換します。

黄金律: スタイルをクローンし、コンテンツは決してクローンしないこと。参照サイトは見た目を提供し、ユーザーのサイト/製品は言葉を提供します。出力は参照のコピーを再現してはならず、ユーザーの既存レイアウトを単に再スキンするものでもありません。借用したスタイルで新しいページを作成する必要があります。

これが最も多いミスです。 参照のパレットをコピーしても、ユーザー自身のサイトのセクション骨格（番号付き機能ブロック、カードモチーフ、順序）を維持したままでは、新しい色で塗られたユーザー独自のサイトとして読まれてしまいます。色の変更はスタイルの変更ではありません。参照のレイアウト骨格とシグネチャコンポーネントを借用しなければなりません。常にユーザー自身のサイトの構造も調査し（ステップ2）、何から逸脱すべきかを把握してください。

サポートされるレイアウトパターン（リクエストに応じて選択）:

• 単一借用スタイル — ページ全体を1つの参照のルックで統一。
• セクションごとのスタイルツアー — 各セクションが異なるサイトのアイデンティティを借用（例：ヒーロー→projectdiscovery、料金→linear、CTA→superhuman）。各<section>に独自のスコープ付きテーマブロック（背景、アクセント、タイプ、半径、シグネチャコンポーネント）を付与します。ユーザーが「各セクションに独自のテーマを」と言った場合に最適です。コントラストを求めない限り、すべてを一貫させてください（例：すべてダーク）。

ツールキット（このスキルに同梱 — 使用し、再導出しないでください）

パスはこのスキルディレクトリからの相対パスです。ゼロから手書きするよりもこれらを優先してください。以下に示す落とし穴をエンコードしているため、再び遭遇することはありません。

• template/ — ビルド可能な Next 14 + GSAP + Lenis スキャフォールドで、モーションレイヤーが既に配線されています（SmoothScroll、ScrollProgress、Reveal、トークン化されたglobals.css、スターターpage.tsx）。すべてのビルドはここから始まります。
• template-html/index.html — 同じトークン+モーションレイヤーを1つの自己完結型ファイルとしてまとめたもの（GSAP/LenisはCDN経由）。ユーザーが単一ファイルHTML出力を選択した場合に使用します。スキャフォールドやインストールは不要です。
• scripts/new-demo.sh <dest> — テンプレートを<dest>にコピーし、npm installを実行します。
• scripts/verify.sh <dir> — ステップ5をスクリプト化したもの: next devの実行中はビルドを拒否し、型チェックを行い、静的エクスポートをビルドし、out/index.htmlをgrepします。
• scripts/extract-style.js — Chromeツールのjavascript_toolを介して開いている参照ページで実行し、実際のフォント、色、半径、スケールを仕様ドラフトに抽出します（ステップ2）。
• scripts/shoot.mjs <url> — ヘッドレスPlaywrightスクリーンショット。ディスプレイのないサンドボックス/CI専用です。ローカルでは代わりにChromeツールでスクリーンショットを撮ってください。
• scripts/deploy.sh [dir] [--prod] — ビルドされた静的ディレクトリ（out/、または単一ファイルHTMLのフォルダ）をライブURLにデプロイします。デフォルトはVercelです。単なる静的ファイルなので、任意のホストで動作します。外部向けです。最初にビルドし、--prodの前にユーザーに確認してください。
• scripts/audit.sh <url> — 開発サーバーまたはデプロイに対するLighthouseスコア（パフォーマンス/アクセシビリティ/ベストプラクティス/SEO）。
• references/patterns.md — 参照のエネルギーによって選択されるアニメーションレシピ+シグネチャコンポーネントのブループリント。

ステップ1 — ユーザーにインタビューする（これを最初に行う）

AskUserQuestion ツールを使用します。これらをまとめて質問します。最初の2つは自由記述（「その他」フィールドまたはチャットで回答するようユーザーに伝えてください）。残りは適切なオプションを備えた複数選択式です。常に「自分で追加」のパスを含めてください。

1. あなたのウェブサイト/製品 — URL（例：www.acme.com）または短い説明。これがコンテンツのソースです。
2. 参照ウェブサイト — スタイルを借用する1つ以上のURL（例：granola.ai、linear.app、stripe.com）。これがルックのソースです。
3. フォントスタイル (複数選択) — 例：エディトリアルセリフ · クリーンサンセリフ · モノスペース/テクニカル · 角丸/フレンドリー · 参照に合わせる。
4. テーマ (オプション、複数選択) — 例：ライト/ペーパー · ダーク/シネマティック · 大胆なカラーブロック · ミニマル/余白多め · 参照に合わせる。

これらの追加質問も含めてください（結果が大幅に変わります）:

5. 雰囲気/トーン — 落ち着いたエディトリアル · 映画的でドラマチック · 遊び心があり楽観的 · コーポレートで信頼できる。
6. モーションレベル — 控えめ（優しいリビール） · リッチなスクロールアニメーション（パララックス、スクロール連動セクション） · インタラクティブ（訪問者が操作できるクリック可能なデモ）。デフォルト: リッチなスクロールアニメーション。
7. アクセントカラー — 参照に合わせる · 特定の色 · 自分で選ばせてください。
8. 深さ — ヒーロー+数セクション · フルストーリー（すべてを伝える: 仕組み、機能、実績、CTA）。デフォルト: フルストーリー。
9. 出力形式 — 実行可能なNext.jsプロジェクト（推奨） · 単一の自己完結型HTMLファイル。

ユーザーがメッセージ内で既にいくつかの回答を提供している場合は、それらを再度質問しないでください。

ステップ2 — 参照サイトを調査する

推測ではなく、実際に参照を確認する必要があります。

1. 最初にmcp__workspace__web_fetchを試します。マーケティングサイトは通常クライアントレンダリングされるため、空を返すことがよくあります。それは想定内です。
2. Chromeブラウザツールに切り替えます（遅延されている場合はToolSearch経由でロード）: navigate → get_page_textでコピー/構造を取得、次にcomputerスクリーンショット（スクロールダウンして3〜5フレームキャプチャ）で実際のビジュアル言語を読み取ります。最もプライバシー保護のオプションでCookieバナーを閉じてください。
3. 安価に証拠ドラフトを取得します: 開いている参照ページでChromeツールのjavascript_toolにscripts/extract-style.jsを貼り付けます。実際のフォント、色の頻度、タイプスケール、半径が返されます。次に短いスタイル仕様を記述します（references/style-extraction.mdのスキーマを埋めてください）: 背景、パレット+アクセント、タイプの組み合わせ、セクション/レイアウトパターン、シグネチャコンポーネント（例：浮遊する製品モックアップ）、モーションの特性。スクリプトは目が誤判断する値をキャッチします。スクリーンショットはレイアウトとシグネチャとなる「特徴」をキャッチします。両方を使用してください。
4. 同様の方法でユーザーのサイトも読み取ってください。実際の製品コンテンツと、自身のレイアウト/セクション骨格、フォント、フッターをメモするためです。これは、意図的にそれらから逸脱するため（製品の構造ではなく参照の構造を借用するため）と、製品の実際のフッター/法的テキストをそのまま再利用して発明するのを避けるために必要です。
5. 非ラテン文字コンテンツ: 製品のコピーにデヴァナーガリー、CJK、アラビア語、キリル文字などが含まれる場合（例：ヒンディー語+英語のコードスイッチングデモ）、今すぐメモしてください。そのスクリプトをカバーするフォントをロードする必要があります（ビルドガイドの落とし穴を参照）。

ドメインが取得できないかブロックされている場合は、ユーザーに伝え、スクリーンショット/説明から続行してください。取得制限を回避しようとしないでください。

ステップ3 — 計画

ユーザーの製品コンテンツを参照の構造パターンにマッピングします。短いセクションのアウトラインを作成します。フォント（参照に最も近い無料のGoogle Fonts）、パレット、モーションプランを選択します。真に曖昧な点を確認し、その後ビルドします。

ステップ4 — ビルド

デフォルトスタック: Next.js 14（App Router、静的エクスポート）+ GSAP ScrollTrigger + Lenis、globals.cssの先頭にデザイントークンを記述した手書きCSS。

テンプレートからスキャフォールディング — スタックを手書きしないでください。 scripts/new-demo.sh <dest>を実行します。template/（モーションレイヤーが既に配線され、ビルド可能であることが確認済み）をコピーし、依存関係をインストールします。その後:

1. app/globals.cssの:rootにスタイル仕様からデザイントークンを設定し、app/layout.tsxのフォントをマッチしたGoogle Fontsに交換します。
2. app/page.tsxを実際のセクションで置き換えます — ユーザーのコンテンツを参照のレイアウト骨格（ユーザー自身のサイトの骨格ではない）にマッピングします。
3. シグネチャコンポーネントを構築し、references/patterns.mdから2〜4つのモーションレシピを選択します。references/build-guide.mdにはスティッキータブとモックアップのスターターがあります。残りは.rise、[data-speed]、<Reveal>を再利用します。

ユーザーが単一ファイルHTMLを選択した場合は、代わりにtemplate-html/index.html（同じトークン+モーションレイヤー、GSAP/LenisはCDN経由、インストール不要）から開始し、そのコンテンツを置き換えます。マルチテーマバリアントについては、ビルドガイドのセクションごとのツアーに関する注意事項を参照してください。

常にprefers-reduced-motionを尊重します。参照の雰囲気を保ちつつ、独自のマークアップとコピーを記述します。

ステップ5 — 検証

scripts/verify.sh <dir>を実行します。型チェック、静的エクスポートのビルド、out/index.htmlのgrepを行います。実際の製品コピー、アクセントカラー、フォント名の独自のgrepを追加してください（スクリプトが促します）。すべてが成功するまで修正します。

結果を確認します。 ローカルセッションではレンダリングを見ることができます: npm run devを起動し、Chromeツールをhttp://localhost:3000に向け、computerスクリーンショットを撮ります（スクロールしながら）。これが実際の品質チェックです。実行してください。grepだけを信頼しないでください。localhostに到達できないディスプレイのないサンドボックスでは、scripts/shoot.mjs http://localhost:3000（またはデプロイに対して）を使用してヘッドレススクリーンショットを取得し、それすら利用できない場合はその旨を伝えてください。

npm run devの実行中に決してnpm run buildを実行しないでください。 両方とも.nextに書き込みます。ビルドは実行中の開発サーバーのチャンクを上書きし、Error: Cannot find module './31.js'（または類似のエラー）でページが停止します。これは実際に問題を引き起こしたバグのように見えますが、そうではありません。開発サーバーが稼働中の場合:

• npx tsc --noEmit で型チェックを行います（.nextに触れません）。
• 実際のnpm run buildを行うには、最初にdevを停止します。
• 開発サーバーが既に破損している場合: pkill -f "next dev"、rm -rf .next、その後npm run devを再起動します。

実行中の開発サーバーを編集する場合、ビルドする代わりにtsc --noEmit + curl localhost:3000 | grepでコンテンツを確認してコンパイルを確認することを推奨します。

ステップ6 — パッケージ化して引き渡す

node_modules、.next、outを削除し、プロジェクトをZIP圧縮し、mcp__cowork__present_filesで共有します。実行コマンド（npm install && npm run dev）と、参照のスタイルがどのように適用されたかの1段落の要約を添えてください。

ステップ7 — 公開と監査（オプション）

ユーザーが共有可能なURLや品質評価を希望する場合:

• 監査: scripts/audit.sh http://localhost:3000（開発サーバー実行中）でLighthouseのパフォーマンス/アクセシビリティ/ベストプラクティス/SEOを出力します。目標は90以上。アクセシビリティとSEOは出荷前に修正するための簡単な成果です。
• デプロイ: 最初にビルドし（scripts/verify.sh <dir>でout/を生成）、その後scripts/deploy.sh outでプレビューURLを取得します。デプロイは外部向けです — scripts/deploy.sh out --prodの前にユーザーに確認し、古いout/をデプロイしないでください。静的ファイルなので、Vercel/Netlify/任意のホストで動作します。
• ライブURLに対してaudit.sh <deploy-url>を再実行し、実際のネットワークスコアを取得します。

ガードレール

• オリジナリティ: 参照のテキストを決してコピーせず、そのロゴや商標化された画像アセットを埋め込まないでください。代わりにCSS生成のテクスチャ/シェイプを使用してください。比較/単語の文脈での会社名は問題ありません。
• 機密性の高いドメイン: 製品が健康、金融、法律などの場合、トーンを責任感があり正確に保ち、デモデータを例示的なものとしてラベル付けし、保証を避け、適切な注意書きを含めてください（例：メンタルヘルスサイトの危機リソース行）。読み込み/マーケティング言語は非警戒的に保ちます。
• 例示データ: 表示される名前、数字、引用、可用性はプレースホルダーのデモコンテンツであることを注記します。ただし、小さく控えめに（短い行）、巨大な免責条項ブロックではなく、サイトのフッターであるかのように無理やりフッターに詰め込まないでください。ユーザーが製品の実際のフッターを希望する場合、それを複製し（下記参照）、例示の注記を別の場所に配置するか、ユーザーが明示的に上書きした場合は削除します。その場合は、デモデータがもはや例示的であることを示すものは何もないことをユーザーに伝えます。
• フッター: ターゲット製品の実際のフッターを優先します — 取得し、そのタグライン、リンク、著作権をそのまま再利用します。発明したり、ビルドノートを残したりしないでください。
• モーション: すべてのアニメーションは、縮小モーション設定下で優雅に劣化する必要があります。

学んだ落とし穴（繰り返さないこと）

実際の実行から得られた貴重な教訓です。完全な技術的詳細はreferences/build-guide.mdにあります。

1. 色の変更 ≠ スタイルの変更。 ユーザー自身のサイトのセクション骨格を維持し、色だけを交換しないでください。それでも元のサイトのように見えます。参照の構造とシグネチャコンポーネントを借用してください。（黄金律を参照。）
2. インラインマークアップ（<b>、<span>）を含むテキストのリスト項目/段落にdisplay:flexを使用すると、各インラインランが独自のフレックスカラムに分割されます — テキストが壊れたカラムに砕けます。箇条書きにはpositioned ::beforeを使用し、テキストコンテナはdisplay:blockを維持します。ラッパーのみをフレックスにし、散文の行自体はフレックスにしないでください。
3. npm run devの実行中に決してnpm run buildを実行しないでください（.nextが破損します）。devが稼働中の場合はnpx tsc --noEmitを使用して検証します。（ステップ5を参照。）
4. 非ラテン文字スクリプトには独自のウェブフォントが必要です。 デヴァナーガリー/CJK/アラビア語はInter/JetBrains Monoではレンダリングされません。適切なsubsets（例：Noto_Sans_Devanagari、subsets:["devanagari"]）を持つ一致するnext/fontをロードし、.hi{font-family:var(--f-deva)}クラスを適用します。OSのフォールバックフォントに依存しないでください。
5. 製品の実際のフッターを再利用し、発明したりビルドノートをそこに置いたりしないでください。（フッターのガードレールを参照。）

品質基準

実際のローンチページとして通用するものを目指してください: 確かなタイプスケール、抑制されたパレット、参照からのシグネチャとなるビジュアル要素、そしてコンテンツを装飾するのではなくスクロールに応じて明らかにするモーション。異なる参照に同じレイアウトを再利用しないでください。要点は、各結果が借用元のサイトのように見えることです。