Zenn
Open9

動くUIの試作：続AIエージェントとのプログラミング

WSL 2
LLM
Claude
Cline
@noriaki@noriaki

Claude 3.7 Sonnetには事前情報（プロジェクトのナレッジや指示設定）を与えず、何度かやり取りしてdraw.io ( diagrams.net )用のXMLを作った。XMLが出力される度にサイトへペーストして表示確認してた

最初は、何が・どこに・どんな配置で・どんな様相でを列挙。

Claude Chat (Claude 3.7 Sonnet) へのプロンプト01

draw.io ( diagrams.net ) で利用可能なXMLを下記の要件で作成してください。

描画したいデザインの種別

スマートフォン用Webアプリのモックデザイン

デザインの中に表示される要素

商品カテゴリ毎に複数の商品画像と在庫数が一目で分かる。

  • 商品カテゴリ名が見出し
  • 複数の商品と在庫が縦に並ぶ
  • 一つの商品と在庫状況は横並び
  • 商品は商品画像が左側にあり、その下に商品名が小さめのテキストで表示される
  • 在庫状況は、ストックされた在庫数で未開封のものと在庫だが開封済みで使いかけのものの2種の状態がある
  • 各商品は状態ごとにいくつ在庫があるか丸いオブジェクトの数で表示されている

サンプルとして表示される内容

  • 日用品から商品カテゴリや商品を選択
プロンプト01の結果（ draw.io での表示）

思ったより粗いカテゴリ分類になったのと、商品画像が無かったので修正。

プロンプト02

「日用品」をもう少し細分化したものを商品カテゴリとしてください。
また、商品画像のパーツが無かったので上述の要件を再確認して追加してください。

プロンプト02の結果（ draw.io での表示）

商品画像を図形オブジェクト（○とか△とか）の組み合わせでがんばって描画してた。モックなのでプレースホルダに修正。
また、最初の仕様では商品状態が2種あることだけを伝えたが、商品画像と商品状態の関係がUIデザインにおける「近接」と「整列」から外れていたので意図を含めて伝え修正してもらった。

プロンプト03

商品画像を図形で表現してくれたのはスゴいですが、ちょっと過剰なのでやめましょうか。商品画像の部分は画像と分かるようなプレースホルダーを表示するだけでOKです。

在庫状態の「未開封」と「開封済」は上下ではなく左右に並べたいです。
意図としては、商品が縦に並び、在庫状態が横に並ぶことで視覚的には表形式に見えるため、在庫数を表す丸いオブジェクトの数の多い少ないが一覧として一目で分かると考えるためです

プロンプト03の結果（ draw.io での表示）

@noriaki@noriaki

プロジェクトのコードベース内に ./knowledge/ ディレクトリを作って、そこへ v0.dev 製のモックコードを置き、ClineにUIモックコードを理解してもらった

UIモックコードを参考に、プロジェクトの作法やAIの振る舞い (rules) を考慮してプロジェクトコードへ実装してもらった

@noriaki@noriaki

どこで間違った（混ざった？）か分からないが、Tailwind CSSのバージョンが合ってなくて表示が崩れていたので、バージョン3を使ってとClineへ指示して修正してもらった PR #13

ちょっと記憶が定かではないけど、このバージョン修正前は開発サーバ上の表示ではCSSが上手くあたっていないように見えた。
Cline自身にブラウザを実行してもらって、それに対して表示が崩れていると指示しても上手く解決できなかった。
画像による差分から原因分析してもらうというのも上手くいかなかった。具体的には v0.dev のプレビューで撮ったスクショ画像（期待UI）と手元の開発サーバの表示を撮ったスクショ（現状UI）をClineへ画像ファイルとして渡して読ませてみるやり方。

ログインするとコメントできます