Bolt.new は 1 つのプロンプトから実行可能なプロジェクト一式を組み上げます——それが強みであり、罠でもあります。足場は速く手に入りますが、プロンプトの曖昧な一文はすべて、コードベースのどこかでデフォルト値になります。このガイドは Bolt で「Web サイト」——マーケティングページ、ポートフォリオ、ローンチページ——を作ることに絞った内容です（プロンプト例は英語のまま使用してください）。
ページより先にプロジェクトを絞る
Bolt はまずプロジェクトの形を決め、ページのデザインはその後です。冒頭でプロジェクトを縮めます：
Vite + React + Tailwind, single page, no router, no backend, no component library. Everything in one App.tsx plus small local components.
これがないと、空のページを指すナビ付きのマルチルート足場が出てくることがあります。もっともらしい構造に生成が浪費されるだけです。
ビジュアルアイデンティティを前倒しする
どのビルダーでも同じ原則ですが、Bolt は Tailwind の設定ファイルまで書くため、効果が二重になります：
Extend the Tailwind theme: background #06060A, accent emerald-400, font display "Clash Display", font body Inter. Border radius 14px everywhere.
色をその場その場で記述するのではなくテーマにトークンとして置くことで、生成されるすべてのセクションがそれを継承し、後の編集も一貫します。
ページは 2 パスで頼む
Bolt は長いプロンプトを扱えますが、Web サイトは 2 通に分けた方がきれいに出ます。まずシェル（ナビ・ヒーロー・フッター・テーマ・モーション規約）、次に「now add sections 2–5」を各 1 行で。2 通目は確立済みの規約を継承し、ファイルの途中で再発明しません。
インタラクションの詳細を固定する
Bolt は実際のコードを書くため、インタラクションの要望は「意図」ではなく実ハンドラとして着地します。具体的に：24px スクロール後にボーダーとブラーが付くスティッキーナビ；1 項目だけ開くアコーディオン FAQ；ナビ高さに合わせた scroll-margin-top 付きのスムーススクロール。それぞれ 1 文で、ほぼそのまま生き残ります。
プロンプトこそが製品になる瞬間
そこそこの Bolt ページと目を引くページの差は、ツールではなく、プロンプトに本物のアートディレクションが入っているかどうかです。それを毎案件書くのは職人技で、借りる方が速い。私たちのライブラリのエントリはまさにそのパッケージ——方向性・骨格・タイポ・モーション・制約——を Bolt を含む主要ビルダーでテストしたものです。60 件はアカウント不要で無料。アニメーション背景は動画アセットなしの純 CSS/canvas で出力されるため、Bolt とは特に相性が良いです。