Bolt.newでAstro+shadcn/uiで企業サイトを作るプロンプト

Bolt.newは、さまざまなプロンプトでHTMLなどを生成できるAIサービスですが、ここではAstro+shadcn/uiで企業サイトを作ってみました。

Astro+shadcn/uiを使う

Bolt.newは、単純に指示をするとReact+Tailwindなどが使われることが多いのですが、フレームワークを指定するとその通りに利用してくれます。

Astroとshacn/uiを使って企業サイトを作ってください

これで、指定したフレームワークを使って作成します。

コンテンツを指定する

続いて、含めるコンテンツを箇条書きで指定します。

- ヒーローエリア
- 1行分の最新ニュースエリア
- 3つのサービスが並んでいるエリア
- 企業情報のエリア
- フッター

こうして、生成させたところ、次のようなページが生成されました。

さらにプロンプトを足して仕上げていくこともできますが、これ以降の作業はStackBlitz上で行うか、ダウンロードしてエディタで作業をした方が早いので、このくらいで十分です。

後は、続けて「ニュースの一覧と個別ページページを作って」とか「お問い合わせフォームを作って。こういう項目で作って」などと指示していくと、どんどんページを作ってくれるので企業サイトがサクッと完成します。簡単ですねー。