Living stage: ガイド付きセットアップ
あなたは、このサイトのバージョンを誰かが作成するのを手伝っています。それは、自分自身の人生を持つインクのキャラクター、ページをスクロールすると腕が印刷されるキャラクター、彼らの言葉で語られるストーリーです。エンジンはすでに動作しています。あなたの仕事は、テンプレートをコピーし、ユーザーにインタビューし、5つの箇所を埋めることです。エンジンコードは書かないでください。
カスタマイズする5つの箇所
| 対象 | ファイル |
|---|---|
| 言葉：名前、タグライン、チャプター、コールトゥアクション、イースターエッグ | src/content/site.ts |
| リンクツリーのリンク | src/content/links.ts |
| キャラクターの見た目 | src/content/character.tsx（プリセットは src/art/looks.tsx にあります） |
| パレット、フォント、モーション | design/tokens.json、src/styles/tokens.css にミラーリング |
| 共有画像とアイコン | npm run og（上記から生成） |
また、インタビューの決定事項を docs/STORY.md に書き込みます。src/art/looks.tsx を読んで、プリセットの見た目を src/content/character.tsx にコピーしても構いません。
これ以外のすべて（src/art/、src/audio/、src/components/、src/sections/、src/App.tsx）はエンジンです。このジョブのために読む必要はありません。大きくて必要ありません。見た目と見出しのルールについては docs/CHARACTER.md を、トークンを触る前に docs/DESIGN_SYSTEM.md を読んでください。チェックが失敗し、エラーがそこを指している場合にのみ、エンジンファイルを開いてください。
ステップ0: コードを取得する（高速、コード生成なし）
現在のフォルダがすでにテンプレートのコピーである場合（src/content/site.ts と .claude/skills/living-stage/ がある場合）、ステップ1にスキップしてください。
それ以外の場合は、新しいサイトをどこに置くか（フォルダ名）を尋ね、履歴なしでテンプレートをコピーしてインストールします。
npx degit fuzzyplace/lil_guy_portfolio my-site
cd my-site
git init
npm install
次に、開発サーバーを起動し（npm run dev、またはプレビューツールがあればそれを使う）、ユーザーにサンプルサイトを見せて、何を作っているのか理解してもらいます。開発サーバーを実行したり見たりできない場合は、代わりにスクリーンショットを使用してください。npm run build && npm run verify は screenshots/verify-desktop-hero.png（ヒーロー、スタント中）などを書き出し、npm run looks は各見た目のクローズアップを書き出します。（初回のみ：npx playwright install chromium）。次に何が起こるかを2行で伝えてください。短いインタビューを1問ずつ行い、その後あなたがビルド、チェックし、（ユーザーの承諾を得て）デプロイします。
ステップ1: インタビュー
決定方法（これが最も重要）
トップダウンで、一度に1つのレイヤーずつ決定し、上のレイヤーが確定するまで下のレイヤーについて尋ねないでください。ストーリーと声が決まる前にビジュアルを完了すると、意味の通らないコピーになります。
- 意図： サイトの対象者、感じてもらいたいこと、最後にしてもらいたいこと。
- ストーリー： 上から下へスクロールするアーク。
- コピースタイル： 声、文章の形、フレーミングの仕掛け。
- 構造： ブロック（チャプター、ポップアウト、コンタクト）とそれぞれの目的。
- セリフ： 実際の言葉、タグラインが最初。
- キャラクター： 見た目。
- パレット、フォント、モーション。
- リンク： リンクツリーとコールトゥアクション。
決定した各レイヤーを docs/STORY.md の「LOCKED」セクションに書き込みます（進むにつれて、サンプルペルソナのエントリを置き換えていきます）。それ以降のすべては、これに遡って辿れる必要があります。もし後のアイデアが確定したレイヤーと矛盾する場合は、その旨を伝え、何かを変更する前に尋ねてください。
質問の仕方
- 一度に1つの質問を、平易なチャットテキストで行います。複数質問のフォームやダイアログは使用しません。
- 各質問の前に、 それが何を決定し、ページ上で何が変わるかを1行で説明します。
- 説明ではなく、見せてください。 スタイルや見た目の質問では、3～4の選択肢を示し、それぞれを実際のコンテンツで書きます。毎回同じ3つの瞬間（冒頭、1つのチャプター、終わり）です。キャラクターについては、プリセットを見せてください（開発サーバーでは
?look=beanie|bun|hood|bot、またはクローズアップ用にnpm run looks）。パレットについては、背景にテキストの色を付けたスウォッチを見せてください。 - 1つの選択肢を推奨し、その理由を一文で説明します。 ユーザーが選ぶか、混ぜるか、却下します。
- 各回答の後、 何が確定したかを1行で言い換え、
docs/STORY.mdに書き込み、次の質問をします。 - 「あなたに任せる」 は、あなたが決定し、それを
docs/STORY.mdの「Decisions」に記録し、次に進むことを意味します。 - コスト感を常に意識してください。すでに読んだファイルを再読せず、各回答に対してサイト全体を再生成せず、変更があった行だけを編集してください。
レイヤーごとに尋ねること
- 意図。 誰のためか（採用担当者、クライアント、協力者、友人）？何を感じてもらいたいか？最後にしてもらいたいことは何か（メール、電話予約、フォロー、何もしない）？
- ストーリー。 まず生の素材を尋ね（何をしてきたか、今何をしているか、次に何をしたいか、副業で何か作っているか）、次に2～3のアークをそれぞれ1行で提案します。デフォルトのアークは、過去、現在、スルーラインのあるポップアウト、未来、コンタクトです。チャプターとポップアウトの順序は自由です。
- コピースタイル。 ユーザー自身の素材に基づいてレンダリングされた3～4の声を提供します。例：静かな一人称、実験ノート、フィールドノート、ターミナルログ、またはミックス。1つを推奨します。
- 構造。 ブロックのリスト。各ブロックの役割を1行で説明し、どれがヘッダーナビゲーションに表示されるかも記載します。1つのブロックはコンタクトブロックでなければなりません。
- セリフ。 確定した声で全てのセリフをドラフトし、それらをコンテキストの中で一緒に見せます（
site.tsを書いた後の開発サーバー）。まずタグラインを正しく設定します。docs/CHARACTER.mdの「Headlines」を読んでください（2～4行の短い行、最初の行は実在の単語、背の高い文字と短い文字が隣り合い、行末にカンマ、1行あたり最大24文字）。また、アイブロウ、リード、フッターのイースターエッグ、コンソールのイースターエッグ、2つのトラストライン、404ラインも含みます。ドラフトコピーで問題ありません。ユーザーが承認するまで何も出荷しません。 - キャラクター。 4つのプリセットを見せます。どれも合わない場合は、1文の説明（髪型または帽子、服装、光を浴びるもの）を求め、最も近いプリセットを
src/content/character.tsxにコピーし、1つのシェイプをずつ変更してカスタムルックを描きます。docs/CHARACTER.mdのボックス、ジョイント、塗りつぶしのルールに従ってください。本人のものでありユーザーが依頼した場合を除き、写真や実在の人物の肖像をトレースしないでください。プリセットはparts.NECKとparts.SKULLを共有しています（src/art/looks.tsxからエクスポート）。結果はnpm run looksで表示します（screenshots/look-current.png）。 - パレット、フォント、モーション。 3つのパレットをスウォッチで提供します（デフォルトのインクグレー、ストーリーに合う2つ）、アクセントカラー、デフォルトフォントを維持するかどうかを尋ねます。最初に
design/tokens.jsonを編集し、変更したすべての色をsrc/styles/tokens.cssにミラーリングします（グレーのランプだけがそこに--md-ref-gray-*変数を持っています。他のすべての色は直接--md-sys-color-<role>に配置されます）。その後npm run tokens:contrastを実行します。これによりテキストのコントラスト（4.5:1）と2つのファイルの整合性がチェックされます。フォグ（fog-light、fog-mid、fog-deep、fog-edge）はパレットのムードを伝えます。4つすべてに色を付けます。アクセントは控えめに保ちます（docs/DESIGN_SYSTEM.md）。モーション：デフォルトの継続時間、またはより穏やかな（長い）継続時間。 - リンク。 各リンクとその遷移先を尋ねます（Connect、Work、Play、またはリネームしたグループ）。実際のURLのみ。まだ持っていないものは
href: null, status: 'soon'とします（開発環境では表示、本番環境では非表示）。その後、コールトゥアクション：予約リンク、メール、またはプロフィールリンク。
ステップ2: ビルドとチェック
- 確定した内容からコンテンツファイルを書き込みます。
site.urlをサイトが公開される場所（https://host、末尾スラッシュなし）に設定します。まだドメインがない場合は、ホストのアドレス（例：https://their-site.vercel.app）を使用し、後で更新します。 npm run checkを実行します（型、コピールールを含むテスト、コントラストとトークンのずれ、ビルド）。失敗したものを修正します。site.urlがまだテンプレートのデモ（lil-guy-portfolio.vercel.app）を指している場合や、コールトゥアクションがexample.comを指している場合、ビルドは警告を出します。コピールール：emダッシュやenダッシュ、感嘆符、一般的な埋め草の単語は使用禁止です。npm run ogを実行してシェアカードとアイコンを生成します。npm run build && npm run verifyを実行します（初回のみ：npx playwright install chromium）。1440pxと375px、モーション軽減ありとなしで、キャラクターがロード時に表示されるか、エントランスとタイトルスタントを実行するか、スクロール中も画面に留まるか、エラーがないかをチェックします。スタントが再生されない場合、タグラインがキャラクターに立つ場所を与えていません。ユーザーと一緒に見直してください。- スクリーンショット（
screenshots/verify-desktop-hero.pngとverify-mobile-hero.pngはヒーローのスタント中、verify-desktop.pngとverify-mobile.pngはページの終わり）と開発サーバーを見せて、何を変更するか尋ねます。ユーザーが満足するまでループします。node scripts/shots-sections.mjsは各チャプターにつき1枚のショットを生成します。 - プライバシーチェック。
src/content/内のすべての文字列をもう一度読みます。公開したくない可能性のあるもの（自宅の住所、共有することを選択していない個人の電話番号やメールアドレス、家族や健康に関する詳細、許可を得ていない雇用主やクライアント）をフラグします。サンプルペルソナの残骸を削除します：「Pim Lanternby」、「PIM」、「The Quiet Hour」、ランプとラジオのセリフ、ユーザー自身から提供されていないexample.com、example.org、example.netのリンク、そしてデモアドレスlil-guy-portfolio.vercel.appです。
ステップ3: デプロイ
デプロイするとユーザーのサイトが公開されるため、実行する前にユーザーに確認を取ってください。docs/DEPLOY.md に従ってください（デフォルトはVercel。NetlifyとGitHub Pagesも使用可能）。公開後、URLを開き、デプロイされた og.png でシェアカードを確認し、ユーザーにリンクを伝えてください。
最後に短いサマリーを伝えてください：何が公開されたか、何がまだ soon か、そしてユーザーが後で送ると言ったものがあればそれも含めます。