bolt.new はシーケンス図からどこまで自動生成できるか？

2.1. シーケンス図を指定してアプリを生成させる

シーケンス図の画像と以下のプロンプトを指定して生成させました。

砂時計アプリを作成してください。
以下の要件に従うこと。

# 要件
・画像のシーケンス図に準拠すること。
・メソッド名もシーケンス図に準拠すること。

以下のような画面が生成されました。

シーケンス図の指定のみで、画面の指定はしていませんが、使いやすい画面を生成してくれました。
シーケンス図で指定した設定時間の選択や、スタート、一時停止、リセットボタンの生成はできていました。

2.2. 生成結果の詳細

シーケンス図を指定して生成させた結果、ロジック部分は以下のようなコードが出力されていました。

import { TimerOptions } from '../types';

export class TimerLogic {
  private remaining_time: number = 0;
  private timer_id: number | null = null;
  private options: TimerOptions | null = null;

  getTimerOptions(): TimerOptions | null {
    return this.options;
  }

  getRemainingTime(): number {
    return this.remaining_time;
  }

  setTimer(time: number): void {
    this.remaining_time = time;
    this.saveToStorage();
  }

  start(): void {
    if (!this.timer_id) {
      this.timer_id = window.setInterval(() => {
        if (this.remaining_time > 0) {
          this.remaining_time--;
        } else {
          this.reset();
        }
      }, 1000);
    }
  }

  pause(): void {
    if (this.timer_id) {
      window.clearInterval(this.timer_id);
      this.timer_id = null;
    }
  }

  reset(): void {
    this.pause();
    this.remaining_time = 0;
    this.saveToStorage();
  }

  private saveToStorage(): void {
    localStorage.setItem('timer_options', JSON.stringify({
      remaining_time: this.remaining_time,
    }));
  }

  loadFromStorage(): void {
    const stored = localStorage.getItem('timer_options');
    if (stored) {
      const options = JSON.parse(stored);
      this.remaining_time = options.remaining_time;
    }
  }
}