メインコンテンツへスキップ
M
← 記事一覧に戻る
·開発·27 min read·有料 ¥800

Claude Code で 0→MVP を1日で作る全記録 — recipe-ai Build in Public

recipe-aiClaude Code個人開発Build in PublicMVP
// lab/claude-code-lab/ep.13·13 total
← ep.12 【第12回】Claude Code 運用まとめ — 個人開発者のための「自走するClaude」完成形end of series →

YouTube の料理動画を見ながら「この材料、何グラムだっけ」と巻き戻す。あの無駄な時間を AI で消したい。そう思い立ってから、MVP が本番に乗るまで約1日。Claude Code に CLAUDE.md を食わせ、scaffold から Stripe 課金まで一気に走り切った全記録を公開する。

recipe-ai は個人開発のプロダクトであると同時に、自分が作った LaunchKit（SaaS スターター）の実証でもある。「本当にこのスターターで速く作れるのか」を自分自身で証明する Dogfooding プロジェクトだ。結果として、着工から2日目にはデプロイ完了、月額コスト ¥0 で放置モードに入った。

この記事でわかること:

  • CLAUDE.md / AGENTS.md を事前に設計しておくと、AI への指示出しがどれだけ変わるか
  • YouTube 料理動画からレシピを自動抽出する仕組みの全体像
  • Supabase Auth + RLS を使った認証・データ分離の実装手順
  • Cooking Mode（Wake Lock API）や材料スケーリングなどの UX 機能
  • Stripe Payment Links でチップ型課金を組み込む方法
  • 無料インフラでタイムアウト問題が発生し、Cloudflare Workers に移行するまでの経緯
  • 「判断の速さ」が開発スピードの本質である理由

何を作ったのか: recipe-ai

recipe-ai は、YouTube 料理動画の URL を貼るだけで、AI がレシピ（材料・手順・コツ）を自動抽出してくれる Web アプリだ。

技術スタック:

レイヤー技術コスト
フロントエンドNext.js 16 + Tailwind v4 + shadcn/ui¥0
認証 + DBSupabase（Auth, PostgreSQL）¥0（Free プラン）
AI 抽出Gemini 2.5 Flash（マルチモーダル）¥0（Free Tier）
API サーバーCloudflare Workers¥0（Free プラン）
ホスティングVercel¥0（Hobby プラン）
課金Stripe Payment Links（チップ型）3.6% / 件のみ

月額固定費: ¥0。

完成した機能一覧:

  • YouTube URL からレシピ自動抽出（映像+音声解析、字幕不要）
  • 4つの Gemini モデルから選択可能（精度 vs 速度）
  • Structured Output / Freeform の切り替え
  • レシピ保存（Supabase + RLS）
  • Cooking Mode（画面消灯防止 + ステップ送り）
  • 材料スケーリング（0.5x / 1x / 2x / 3x）
  • マークダウンコピー
  • 多言語対応基盤（next-intl、現在は日本語のみ）
  • Stripe 3段階チップ（¥100 / ¥500 / ¥1,000）
  • Tally フィードバックフォーム
  • 特定商取引法に基づく表記ページ

なぜ1日で作れたのか（概要）

3つの要因がある。

1. CLAUDE.md と AGENTS.md の事前設計

Claude Code に「何を作るか」「どう作るか」「何をやってはいけないか」を最初に全部書いておく。これをやるかやらないかで、AI とのやり取り回数が劇的に変わる。曖昧な指示の往復がなくなる。

2. LaunchKit スターターの流用

自分が作った SaaS スターター（KOBO）の構成をそのまま使った。Supabase Auth のクライアント設計、RLS のパターン、Tailwind + shadcn/ui のセットアップ、i18n の設定——全て既に動いているコードがある。ゼロから書く部分が大幅に減った。

3. コスト最優先という判断基準

「月額固定費 ¥0 で運用できるか」。この一本の軸で全ての技術選定を判断した。Vercel Hobby か Pro か迷わない。Supabase Free か有料か迷わない。AI モデルは無料枠があるかで選ぶ。判断に迷う時間がゼロになると、手が止まらない。

有料パートでは、Hour 0 から Hour 9 まで、実際の作業内容をコード付きで時系列に公開する。

recipe-ai を試す（無料）

この記事で作っている YouTube 料理レシピ抽出アプリ本体。動画 URL を貼るだけで AI がレシピに変換。月 5 本まで無料。

関連記事

【第6回】Claude Code で作る「売れるSaaS」開発フロー

Skills x MCP の統合設計

→

Gemini 2.5 Flash で YouTube動画からレシピを自動抽出する方法

recipe-aiの技術実装の詳細

→

150秒を1.9秒超えて全滅した話

無料インフラ3段階移行の全記録

→

Claude Crew Lab Free — 毎月の実験記録をメールで

Claude Code × 個人開発のリアルな事故・発見・SaaS アイデアを毎月第1月曜にお届け。登録で「収益化チェックリスト 15 項目」を無料プレゼント。

Lab Free 登録（月1回・無料）

この先は有料コンテンツです

記事の続きを読むには購入が必要です

¥800
// continue the lab

// end of series · thanks for reading

▸ // see all 13 episodes
  1. №01【第1回】Claude Code Skills 入門 — 自作スキルで開発効率を2倍にする実装ガイド
  2. №02【第2回】Claude Code MCP サーバー構築ガイド — ゼロから作る実用MCPの全コード
  3. №03【第3回】Claude Code サブエージェント設計パターン — 並列タスクで時給を上げる実践ガイド
  4. №04【第4回】Claude Code Hooks 完全ガイド — 保存時自動整形・コミット前チェックの実装
  5. №05【第5回】Claude Code リモートサーバー運用術 — VPS常駐型 Claude Crew の構築¥500
  6. №06【第6回】Claude Code で作る「売れるSaaS」開発フロー — Skill × MCP の統合設計¥800
  7. №07【第7回】Claude Code トークン節約運用 — 月500万トークンを¥3万に抑える実測ログ
  8. №08【第8回】Claude Code で GitHub Issue から PR まで自動化する実装ガイド
  9. №09【第9回】Claude Code サブエージェント並列実行 — 本番で使った5パターン¥500
  10. №10【第10回】Claude Code × Supabase で管理画面を30分で生成する Skill 実装ガイド
  11. №11【第11回】Claude Code Hooks で事故を防ぐ — git secrets / 本番DB保護の実装¥500
  12. №12【第12回】Claude Code 運用まとめ — 個人開発者のための「自走するClaude」完成形¥800
  13. №13Claude Code で 0→MVP を1日で作る全記録 — recipe-ai Build in Public¥800

この記事が役に立ったらシェア

← 記事一覧に戻る