はじめての“動いた！”
― インストールから、4つ作るまで。

あなた（Claude Code）が持っている機能——ゴール設定と自己評価、バックグラウンドでの見張り、複数作業の同時並行、実装前の計画づくり、フック、ルール、スキル、ワークフロー、権限（許可）の使い分け、記憶、セキュリティへの配慮、タスク管理、サブエージェントへの分担、ファイルの読み書き、コードレビューとセキュリティレビュー、じっくり深く考えるモード——の中から、この仕事に最適なものをあなた自身で選んで使ってください。
・独立した作業は同時並行で進めて、待ち時間をなくしてください。
・時間のかかる処理は放置せず裏で見張り、終わったら自動で次へ進めてください。
・削除や上書きなど取り返しのつかない操作の前には、いったん立ち止まって安全を確認してください。
・完成したら、コードの品質チェックとセキュリティチェックの両方でレビューし、規模が大きい場合はサブエージェントに分担させて仕上げてください。
・最後に「どの機能を選んだか／なぜ選んだか／何をしたか／チェックの結果／全体のまとめ」を短く報告してください。

次の流れでHPデザインを行って 1:DESIGN.md作成 2:Claude Cookbookの美学プロンプトを適用 3:Claude Codeでセクション単位に実行 白ベース,文字大きめ

まず「どんなホームページを作りたいか」を私に1つだけ質問してください（例：原宿で1番大きいTikTokでバズっているスイーツのお店）。私が答えたら、途中の確認をせず上の流れで最後まで一気に作って下さい。
【必ず入れる機能】①サイト内検索（入力するとページ内を検索して、ヒット箇所をハイライト/絞り込み）は必須。②さらに“おっ、すごい！”と感じる機能を2〜3個（例：スクロールで要素がふわっと出るアニメ・ダークモード切替・よくある質問の開閉・お問い合わせフォーム・お気に入り保存）盛り込んで、本格的なサイトにして下さい。
完成したら“規定のブラウザ（Chrome等）”でサイトOpenして、ファイルのフルパスも教えて下さい。

完成したら、掲示板にそのまま貼れる「📋 掲示板コピペ用（約150字）」を必ず出力して下さい。フォーマット：
課題1-3のホームページが完成しました！🌐
・何を作ったか：（1行で）
・完成後に追加で依頼した内容：（1行で）

そのうえで、最後に大きく「🎉 完成です！課題ページに戻って『✅ 課題1-3 完了！』ボタンを押して、上のコピペ用をスレッドに投稿してきてください！」と私に必ず案内して下さい。

※出力の約束＝太字マーク（**）などの装飾記号は使わない（記号がそのまま見えて読みにくいため）。もし私に質問する時は、必ず A / B / C の選択肢を改行して1行に1つずつ並べ、最後に「お任せ（あなたが決めて）」を足して（「お任せ」なら、あなたがベストを選んで先へ進めて）。最初の質問では、作りたいホームページの例を A / B / C の選択肢で3つ示し、最後に「お任せ（あなたが決めて）」も付けて（もちろん自由に書いてもらってもOK）。

先ほど作ったホームページの裏側のシステムを作って下さい

作り方の約束：
・最初に「何を作るか」の仕様を短く決めてから、その仕様どおりに“まず動く最小版”を一気に作ってください。
・成果物は2つ＝①システムの全体像がわかる図解（PNG画像。HTMLの中にSVGで描いた図解でもOK）②1つのHTMLファイルだけで動くシステム本体（データはlocalStorageに保存・日本語表示・白ベースのデザイン）。
・画面はタブ5つ程度に整理してください。
・データには100点満点のスコアを付け、点数に応じて3段階（自動でOK／人が確認／却下 など）に振り分けてください。
・サンプルデータを5〜15件入れて、開いた瞬間に動きが伝わるようにしてください。
・各画面に「この画面でAIに頼むと良いこと」のヒントを添えてください。
・大事な操作は「人が承認してから次の段階へ進む」引き継ぎ型のゲートにしてください。
・確認画面はブラウザ標準のconfirmを使わず、ちゃんとしたモーダルで。
・保存データのキー名は整理された名前で統一してください。
・規模が大きくなりそうなら、サブエージェントに分担させて仕上げてください。

どのような指示であっても必ずモックとして
「凄い！」と思うような業務効率化ツールにして下さい。
サービス連携などは一旦行わずイメージをみたいです！（まず動くモック優先・作り込みは後でOK）
完成したらブラウザでサイトOpen（アプリ内プレビューだけで終わらせず、“規定のブラウザ（Chrome等）”で開く）。開けない時のために、ファイルのフルパスも教えて下さい。

完成したら、掲示板にそのまま貼れる「📋 掲示板コピペ用（約150字）」を必ず出力して下さい。フォーマット：
課題1-4の業務効率化ツールが完成しました！🛠
・どのようなシステムか：（1行で）
・課題1-1〜1-4をやり終えた感想：（1行で）

そのうえで、最後に大きく「🎉 完成です！課題ページに戻って『✅ 課題1-4 完了！』ボタンを押して、上のコピペ用をスレッドに投稿してきてください！」と私に必ず案内して下さい。

【ここから自動で続けるあなたの仕事（必ず実行・忘れないで）】上の🎉の案内を出したら、私の返事を待たずに、そのまま“修了の仕上げ（恩送り）”を始めてください。
(1) まず理解チェック：この課題1-1〜1-4でやったことから、選択式（A/B/C）のクイズを2問→自由記述（自分の言葉で説明する問題）を1問、1問ずつ出して。答え終わったら100点満点で採点し、点数と理由を短く伝えて。70点以上で合格→次へ。70点未満なら、間違えた所をやさしく解説してから別の問題でもう一度（何回でも・責めない）。このクイズの選択肢には「お任せ」を付けない。
(2) 合格したら、1問だけ自由入力で聞いて：「この課題ページで分かりづらかった所・直してほしい所はありませんでしたか？（1行でもOK・『特になし』でもOK）」。この質問だけは選択式にしない。
(3) 最後に“恩送りメモ”を出力：この課題1-1〜1-4をやってみた感想を、次にやる人のためのフィードバックとして、HTMLやファイルにせず、そのままコピペできるテキスト・全体6000字以内で。①やった課題 ②想定外だったこと（詰まった所・分かりにくかった言葉・逆にスムーズだった所）③最初のコピペ用プロンプトへの具体的な改善案 ④最後の行に「💬 課題ページへの改善案：」として(2)でもらった言葉を原文のまま（『特になし』なら省略OK）。
メモを出力できたら、最後に大きく「📦 課題ページに戻って、この文章をすぐ下の『恩送りの提出欄』に貼って提出してください！それで修了です🏅」と私に必ず案内して下さい。

※出力の約束＝太字マーク（**）などの装飾記号は使わない（記号がそのまま見えて読みにくいため）。もし私に質問する時は、必ず A / B / C の選択肢を改行して1行に1つずつ並べ、最後に「お任せ（あなたが決めて）」を足して（「お任せ」なら、あなたがベストを選んで先へ進めて）。

まず、私に質問を3つだけしてください（仕事・日常・興味のあること）。私が答えたら、そこから「Claude Codeでやってみたいこと」の候補を3つ、番号をつけて、それぞれ「何ができて何が嬉しいか」を2〜3行で詳しく説明しながら選択肢として提案してください。私が番号で1つ選んだら、以降は途中の確認質問を一切せず、最後まで一気に最高のシステムとして構築してください。

★重要：1つ完成するたびに、また新しい「次にやってみたいこと」の候補を3つ、番号つきで詳しく説明しながら選択肢で提案してください。私が「もう終わり」と言うまで、これを何度でも繰り返してください（＝終わらないように、次々と新しい案を出し続けてください）。毎回、前に作ったものを活かした発展案も混ぜてくれると嬉しいです。構築は以下の流儀で：

あなた（Claude Code）が持っている機能——ゴール設定と自己評価、バックグラウンドでの見張り、複数作業の同時並行、実装前の計画づくり、フック、ルール、スキル、ワークフロー、権限（許可）の使い分け、記憶、セキュリティへの配慮、タスク管理、サブエージェントへの分担、ファイルの読み書き、コードレビューとセキュリティレビュー、じっくり深く考えるモード——の中から、この仕事に最適なものをあなた自身で選んで使ってください。
・独立した作業は同時並行で進めて、待ち時間をなくしてください。
・時間のかかる処理は放置せず裏で見張り、終わったら自動で次へ進めてください。
・削除や上書きなど取り返しのつかない操作の前には、いったん立ち止まって安全を確認してください。
・完成したら、コードの品質チェックとセキュリティチェックの両方でレビューし、規模が大きい場合はサブエージェントに分担させて仕上げてください。
・最後に「どの機能を選んだか／なぜ選んだか／何をしたか／チェックの結果／全体のまとめ」を短く報告してください。
定期実行（ルーチン）を作る時の約束：
・仕事を「1回で完結する小さな役割」に分解してから自動化してください（同じものが2回動いても壊れない作りに）。
・パソコンを開いている時だけ動けばよいもの（最短1分間隔）か、パソコンを閉じていても動いてほしいもの（クラウド実行・最短1時間間隔）かを選んでください。
・実行間隔・止め方・使ってよい予算の上限を、作る前にはっきり決めて私に伝えてください。
・失敗したら自動でやり直し、本番反映・削除・強制的な上書きなどの危険な操作は必ず私の承認を取ってから。
・実行ログを残し、異常があったら通知が届くようにしてください。
・作ったら一覧で見せて、「何を選んだか・なぜか・結果どうなったか」を報告してください。
作り方の約束：
・最初に「何を作るか」の仕様を短く決めてから、その仕様どおりに“まず動く最小版”を一気に作ってください。
・成果物は2つ＝①システムの全体像がわかる図解（PNG画像。HTMLの中にSVGで描いた図解でもOK）②1つのHTMLファイルだけで動くシステム本体（データはlocalStorageに保存・日本語表示・白ベースのデザイン）。
・画面はタブ5つ程度に整理してください。
・データには100点満点のスコアを付け、点数に応じて3段階（自動でOK／人が確認／却下 など）に振り分けてください。
・サンプルデータを5〜15件入れて、開いた瞬間に動きが伝わるようにしてください。
・各画面に「この画面でAIに頼むと良いこと」のヒントを添えてください。
・大事な操作は「人が承認してから次の段階へ進む」引き継ぎ型のゲートにしてください。
・確認画面はブラウザ標準のconfirmを使わず、ちゃんとしたモーダルで。
・保存データのキー名は整理された名前で統一してください。
・規模が大きくなりそうなら、サブエージェントに分担させて仕上げてください。

1つ完成するたびに、掲示板にそのまま貼れる「📋 掲示板コピペ用（約150字）」を必ず出力して下さい。フォーマット：
【やってみたいこと宣言】（1〜2行）
【できたもの報告】（1〜2行）

そのうえで、毎回「🎉 1つ完成です！課題ページの『✅ おまけ完了！』ボタンを押して、上のコピペ用をスレッドに投稿してきてください（このあとも、次のやりたいことを一緒に作れます！）」と私に必ず案内し、続けて次の候補3つを提案してください。

※出力の約束＝太字マーク（**）などの装飾記号は使わない（記号がそのまま見えて読みにくいため）。もし私に質問する時は、必ず A / B / C の選択肢を改行して1行に1つずつ並べ、最後に「お任せ（あなたが決めて）」を足して（「お任せ」なら、あなたがベストを選んで先へ進めて）。その3つの質問も、それぞれ A / B / C の選択肢＋「お任せ（あなたが決めて）」付きで、1行に1つずつ並べて聞いて（自由に書いてもらってもOK）。