Vibe Codingメモ 2025-08-11
スクショを集める
ChatGPTでスクショを言語化させる
code:prompt.md
これらスクリーンショットの配色・タイポグラフィー・余白・密度・動き・レイアウトの共通点を要約して、“XXXXの雰囲気”としてデザイン原則5か条にして。さらに、これらのスクリーンショットにおける **主要UIウィジェット** の共通要素を箇条書きで出力してください。
KiroまたはChatGPTで要件定義書と詳細設計書を書かせる
ここで技術スタックも指定する
code:spec.md
bolt.new でこのようなXXXXを実現したいと思います。
要件定義書(SPEC.md)および詳細設計書(DESIGN.md)を書いてください。
目的:XXXXのプロトタイプ
技術:Vite + React、tailwind
注意事項: **lucide-reactを絶対に使わないでください**
画面構成:(ここに画面構成を書く)
データ:ダミー(モック関数で毎3秒リフレッシュ)
非目標:本番デプロイ、実データ接続
bolt.newに前のステップで作った要件定義書と詳細設計書をそのまま投げる
最小限の変更をしたらbolt.newのボタンでGitHubにリポジトリを作る
KiroまたはVSCode GitHub Copilotでテストを追加する
KiroまたはVSCode GitHub CopilotでGitHub Pagesにデプロイさせる
ChatGPT CodexまたはGoogle Julesで細かい不具合を直す