v0で生成するコードをAtomic Designにするプロンプト
前置き
生成系AIサービスの v0を良く使っているのですが、そのままWebサービスに展開するときに個人的に修正をするのが大変だったので調整したプロンプトになります。
やりたいこと
v0でコードを生成したときに以下のルールを守ってコードを出力するようにします。 Next.jsでの開発経験は全くないのでバットプラクティスかもしれませんが、自分が修正しやすいことを前提にするので一旦無視します。
- Atomic Designでコンポーネントを実装する
- v0がデフォルトで有効にしている「tailwind css」を使わない実装にする
- v0がデフォルトで有効にしている「Shadcn UI」を使わない実装にする
- state管理とstateを更新するためのロジックはhokksを利用する
- Next.jsに依存しない様々なプロジェクトで使えるような共通ロジックは「utils」フォルダに実装する
- api疎通は「Repository Factory」パターンで実装する
- apiから受け取ったデータは「zod」で型チェックを行う
プロンプト
以下のプロンプトを最初に実行して後はエラーや気になるところを一つずつ指摘していけばいい感じにサイトが出来上がるかと思います。
plain text
1〇〇のデザイン作成をお願いします。
2
3以下はコーディング規約となるので厳守でお願いします。
4- TailwindCSSは使用せず、すべてカスタマイズしたCSSで実装してください。
5- shadcn/ui は使用せず、すべてカスタマイズしたコンポーネントで実装してください。
6- UIはAtomic Designの概念に基づいて実装してください。
7 - atoms
8 - 最も基本的なUI要素（例：ボタン、入力フィールド、ラベル）
9 - components/atomsディレクトリに配置
10 - 基本的にサーバーコンポーネントとして実装する
11 - 基本的にステートレスコンポーネントとして実装する
12 - 単にプロップスを受け取り、UIをレンダリングする役割とする
13 - 基本的にサーバーコンポーネントとして実装する
14 - molecules
15 - 複数の原子を組み合わせた機能的なUIグループ（例：フォーム、カード）
16 - components/moleculesディレクトリに配置。
17 - 基本的にサーバーコンポーネントとして実装する
18 - 基本的にステートレスコンポーネントとして実装する
19 - 単にプロップスを受け取り、UIをレンダリングする役割とする
20 - 基本的にサーバーコンポーネントとして実装する
21 - organisms
22 - 複数の分子（場合によっては原子も）を組み合わせて、より複雑なUIセクションを形成（例：ヘッダー、フッター）
23 - components/organismsディレクトリに配置。
24 - ステート管理が不要であれば、サーバーコンポーネントとして実装する
25 - templates
26 - ページのレイアウトを定義し、実際のコンテンツを配置する前の構造を提供
27 - components/templatesディレクトリに配置
28 - pages
29 - 各種ルーティング用のページ
30- state管理とstateを更新するためのロジックはhokksを利用する
31- Next.jsに依存しない様々なプロジェクトで使えるような共通ロジックは「utils」フォルダに実装してください。
32- api疎通は「Repository Factory」パターンで実装してください。
33- api疎通は必ずpagesファイルで行うように実装してください。
34- apiから受け取ったデータは「zod」で型チェックを行うようにしてください。
35 zodの定義はmodelsフォルダに実装してください。
36
37### ディレクトリ構成（サンプル一部のみ）
38/components/
39 ├── atoms/
40 │ ├── button/
41 │ │ ├── index.tsx
42 │ │ ├── style.css
43 │ ├── badge/
44 │ │ ├── index.tsx
45 │ │ ├── style.css
46/pages/
47 ├── index.tsx
48 ├── style.css
49/models/
50 ├── hoge.ts
51/repositories/
52 ├── factory.ts
53 ├── hogeRepository.ts
54/utils/
55 ├── date.ts
56 ├── file.ts
57 出来たサイト
実際に作成したサイトを「こちら」で公開しました。 〇〇の部分は以下に変更しています。
plain text
1ECサイトのデザイン作成をお願いします。
2このサイトはトップページ、商品一覧、商品詳細ページを持っています。
3その他必要なページも適宜実装をお願いします。細かいところは詰めてませんが、見れるレベルにはなっているかと思います。 後はこのコードをベースに調整していけば良いと思います。
サイトトップ
商品一覧
商品詳細
終わり
v0を使いたいけどそのままプロジェクトで本格的に運用するのが難しいと思っていました。 ですが、このくらいのものが出来上がれば運用できるのでは？と感じているので少しずつ改善していこうと思います。