メインコンテンツへスキップ
Hero Image

プロトタイプ開発タイムアタック

AI-Driven-Development

概要

バイブコーディング用のテンプレートを使い、 最速でプロトタイプ開発する方法を試してみた。 X(旧 Twitter) の簡易版開発にかかった時間は以下のとおり。

  • ドキュメント作成: 50 分
  • 実装 15 分
  • UI / UX 調整: 120 分

プロトタイプ開発であるにもかかわらず、技術やデザインにこだわりすぎたのが失敗だった。

背景

ここしばらくコーディングを AI に任せているが、開発の順序に満足できていなかった。 しっかりやろうと思うと、最低限動かすという観点では不要なファイルや、テストを作る必要がある。 ただ、まずは動くものを見たいという思いがある。 そこでプロトタイプ開発に注力する方法を模索した。

X の簡易版くらいなら簡単なプロンプト一つでできそうだが、この手順でおこなった場合の所要時間を知りたかった。

リポジトリ

https://github.com/gnkm/alt-x-002

X の簡易版(投稿、タイムライン表示)を作った。

進め方

バイブコーディング用のテンプレートをベースにした。 このリポジトリには、以下の Cursor 用カスタムコマンドが準備されている。

  • PRD 作成
  • 技術スタック決定
  • 設計
  • 実装計画作成
  • 実装

これらを順に進めていった。

PRD 作成: 15 分

カスタムコマンドで PRD を作った。 以下のテンプレートを使うようにしている。

# PRD: {プロジェクト名}

## 1. Stakeholder
- 主たる利用者:
- 利用シナリオ(1つ):

## 2. Stakeholder Needs
- 解決したい課題:
- 成功とみなす状態:

## 3. System Context
- システムの境界:
- 外部システム(あれば):

## 4. Functional Requirements(最大3つ)
- FR-1:
- FR-2:
- FR-3:

## 5. Non-Functional Constraints
- 時間:
- 技術制約:
- 運用制約:

## 6. Assumptions
- 仮定していること:

## 7. Acceptance Criteria
- Given / When / Then(1〜3個)

力を入れて開発する場合は ISO/IEC/IEEE 29148 形式の要求仕様書を作っているが、 プロトタイプ開発なので簡易にした。

技術スタック検討: 25 分

カスタムコマンドでは、軽量案、バランス案、本格案を提示させるようにしている。 今回は、Vite + React + TypeScript + Python の本格案を選択した。 本格案の代替案も提示させて、それらを比較のうえ決定した。 Dexie.js というライブラリを提示されたのだが、知らないライブラリだったのでエージェントに教えてもらう必要があり時間がかかった。 プロトタイプなので、ここはこだわらず、提示された中から最も簡単なもの、もしくは自分が慣れている技術を採用すれば良かったかもしれない。

設計: 5 分

よく確認せず完了としてしまった。 結果的には問題なかった。

実装計画作成: 5 分

カスタムコマンドではタスク詳細も作るようにしているが、詳細は確認せず、概要だけ確認して完了とした。

実装: 15 分

体感では一瞬で終わったが、コミットログを見ると 15 分かかっていた。 特に修正することなく、動くものができた。

修正(uv pip の禁止): 5 分

Dockerfile を確認したところ uv pip install を使っていたので uv sync を使うように修正した。 一瞬で終わりそうなものだが、コミットログによると 5 分かかっていた。

UI / UX 調整: 120 分

Anthropic のフロントエンド用 Skills を使って UI / UX を調整した。 (Claude Code ではなく Cursor を使っている。skill を参考にするよう指示を出した。) ここは自分の匙加減ではあるが、なかなか納得のいくものができず、時間がかかった。 UI / UX に時間がかかった理由は以下のとおり。

  • 完成イメージを言語化していなかった
  • プロトタイプとしての妥協ラインを決めていなかった

これらを決めておくことで、時間を短縮できるだろうと思う。

今回わかったこと

プロトタイプ開発を最速で進めるうえで、以下がボトルネックになりやすい。

  • 実装そのものより判断に時間がかかる
  • 特に技術スタック検討は深掘りし始めると止まらない
  • UI / UX は完成イメージがないと終わらない

次回の改善ルール

次に同じことをやる際は、以下をルールとして進める。

  • 技術選定は10分で打ち切る
  • 知らないライブラリは使わない
  • UI / UX の合格ラインを事前に1文で定義する

結論

プロトタイプ開発では、実装速度よりも判断の速さが支配的になる。 技術や UI / UX にこだわるほど、完成は遠のく。 次回は判断をルール化し、迷うことなく進めたい。