CH 24 · ブルータリスト個人サイト：1 つのプロンプトで HTML を出力
本章の目標
この章では HTML、CSS、JavaScript の書き方は教えません――それらは dsh が書いてくれます。あなたがやるべきことはただ 1 つ、「自分が何を作りたいか」を明確に伝えることだけです。具体例として――ブルータリストスタイルの個人サイトを使い、プロンプトからページ生成、そして微調整して満足するまでの一連のフローを体験します。この章を終えると、dsh にゼロから静的ウェブページを生成させる方法と、結果を得てからどう反復改善するかを理解できます。
ステップ 1: ワークスペースを準備する
コンピュータ上にクリーンなディレクトリを選びます。例えば E:\software-workspace\DeepSeek harness demo\HTML を、dsh のワークスペースとして設定します。
なぜ別のディレクトリが必要なのか？ dsh が生成するファイルはワークスペースに置かれるため、他のプロジェクトと混ざるとごちゃごちゃになるからです。この章では index.html が 1 つ生成されるので、別のディレクトリにしておくと管理しやすいです。
ステップ 2: プロンプトを書く
これがこの章で最も重要なステップです。「個人サイトを作って」だけではいけません――そうするとテンプレ臭の強い汎用ページになりがちです。ただし、スタイルの詳細をすべて書き出す必要もありません――dsh は自分でブルータリストスタイルとはどんなものか調べます。
以下のプロンプトはそのまま使えます（ここでは名前を supermortal として例示しているので、自分の名前に置き換えてください）:
ブルータリズム（Brutalism）スタイルの個人サイトを作ってください。単一ファイル HTML（CSS と JS は index.html にインライン）。
まずブルータリスト系ウェブデザインの典型的な特徴とビジュアルスタイルを調べてから、そのスタイルで作ってください。
ページの内容:
- 上部: supermortal という名前 + 一文の自己紹介
- 中央: 3 つのセクション――自己紹介、プロジェクト一覧、連絡先
- プロジェクト一覧は最低 3 つのプロジェクトを含め、それぞれに名前、一文の説明、リンク（# のプレースホルダーで OK）を持たせる
- 下部: 著作権情報 + 「トップへ戻る」ボタン
技術要件:
- 純粋な HTML + CSS + ネイティブ JS、フレームワークは使わない
- レスポンシブ対応、モバイルでも閲覧可能
- すべてのテキスト内容はプレースホルダー、後で自分で書き換える
- ファイルは現在のワークスペースに直接書き込み、ファイル名は index.html
書き終えたらブラウザで開いてページが正常にレンダリングされるか確認し、ファイルの場所を教えてください。このプロンプトの発想は: スタイルは dsh に調べてもらう（ブルータリズムの典型的特徴を検索します）、コンテンツ構造と技術要件はあなたが決める（ページに何を載せるか、どんな技術を使うか）。これさえあれば、dsh は推測不要でそのまま成果物を作ってくれます。
このプロンプトを dsh の入力欄に送って、完了を待ちます。dsh は自分でスタイルを調べ、自分でファイルを作成し、自分でブラウザを開いて検証し、自分で結果を報告します。
ステップ 3: 結果を確認し、微調整する
dsh が完了すると、ワークスペースに index.html が追加されています。ダブルクリックしてブラウザで開き、効果を確認してください。
初回出力は大抵 100% 満足できるものにはなりません。例えば私が初めて実行したとき、コンテンツが大きすぎ、両端に詰め込まれすぎていました:
このとき、プロンプトを書き直してやり直す必要はありません。dsh にどこが間違っているか直接伝えればよいのです。私が送った微調整プロンプトは:
コンテンツが大きすぎるので少し小さくし、コンテンツを中央寄りに移動して両端に詰め込みすぎないように、もっと内容が充実した感じにしてくださいdsh は index.html を直接修正し、修正後にブラウザを更新して効果を確認:
この章で学んだこと
以下の項目を完了できれば合格です:
- [ ] dsh に静的ウェブページを生成させるプロンプトを書ける
- [ ] スタイルの説明は dsh に調べさせることができる、すべてを書き出す必要はないことを知っている
- [ ] dsh が出力したページを受け取った後、微調整する方法を知っている（プロンプトを書き直さず、どこが間違っているか直接伝える）