ELW株式会社 テックブログ

リアルなログをそのままお届けします。

フロントエンド実装のVibe Codingを実プロダクトで試してみる

LLM勉強会 大規模言語モデル LLM AI

ELWのCTOの村上です。LLMの活用検討会の記事となります。 バックエンドと比較してフロントエンドのVibe Codingが難しいという課題感が社内であり、 その検証のためにVibe Codingで私が既存システムの改修チケットを実施してみたのでその紹介となります。

概要

  • タスク: 音声ファイル詳細のためのスマートフォン画面の実装
  • 主なタスク内容: 既存にないタブ切り替えデザイン、カード形式の一覧、独自音声再生UI
    • 既存の実装はあったので、API呼び出しはほぼそのまま使える状態であった
  • 使用したツール: Cline
    • Claude 3.7, 3.5, Gemini 2.5 proを使用
      • rate limitの兼ね合い
  • 実装時間: 6h
    • Agentなしだと3, 4倍は掛かる見込み

方法

  • 事前に該当する画面のTSXファイルを開いた上で、以下のようなプロンプトを実行する

      以下のデザインをFigmaをもとに実装してください。
  Figma MCPを使ってください。

  <figmaのフレームのURL>

  • 初期生成物とFigmaのデザインがずれている場合は、以下のようなプロンプトを実行

      タブのデザインがFigmaと差分があるので、修正してください。
  Figma MCPを使ってください。

  <figmaのフレームのURL>

  • Figmaのデザインと見た目がどうしても合わない場合は、Figmaのスクリーンショットを貼って、”決定ボタンのデザインが違います”など指摘

  • デザインが揃ったあとの確認・リファクタリング内容
    • divで実現しているところを、VStackなどの既存コンポーネントを使うように修正する
    • 色をベタ書きで指定しているところを、変数化する
      • 一部色が違っているところはどの色が正解なのかFigmaと既存定義の変数と照らし合わせて手で確認
    • useEffectを使っていてあまりに微妙がないところがないか確認
    • CSSでimportantを使っているところの修正を指示
    • 既存実装をいじっているところで影響が大きい変更がないか
      • オプショナルな引数を追加しているところはざっと実装を確認して許容する

備考

  • Clineが外部chromeに対応したようなので、今ならcomputer useでログイン突破できるかもしれない
    • 当時はログイン画面に遷移して動かなかった

課題

  • レビュワーの感想
    • 全体的な完成度は高い
    • グローバルなファイルをいじって悪影響が出ている部分があったので、そこはレビュー時に修正した
  • 文字数によってのスタイル崩れなどが発生している
    • 人が実装したものでも起票されているので、致命的ではない
    • 事前にそこも制約として踏まえたプロンプトにすれば改善できるかもしれない

議事録

  • MCPでFigmaの情報を読みとるなら、スクリーンショットをなぜ与える必要があるのか?
    • Figmaの情報はHTMLではないので、JSX(HTML)としての実装時に人間の視覚では明らかに差異があるものが生成されるときもあるため
  • Figmaの情報を与えるメリットはあるのか
    • レイアウトや色などの再現度が高かった
  • ファイル名やディレクトリ名などを読み取ってくれるので、内容にあったものにすると生成物の精度が上がる
  • エージェントに任せると余計なファイルもいじられるのが気になり、局所的にしか使っていない
    • 集合知として自分では浮かばない実装案が出ることもあるので、ある程度任せた上で修正するのも良いのでは
  • エージェントとChatGPT本体だと役割が異なるのでバックエンドが同じモデルとしても使い分けた方が良い