Posted inAI

手動のCSS記述はやめよう：Llama 3.2 Visionでローカルな「スクリーンショットからTailwindへの変換ツール」を構築する

AI tutorial - IT technology blog
AI tutorial - IT technology blog

ピクセル調整という「税金」

午前2時14分、私は15枚の新しいFigmaのダッシュボード画面を見つめていました。翌朝のデモまでに、そのすべてをレスポンス対応させる必要がありました。カラーコードを一つずつマッピングし、100回目となるflex-basisの値を計算しているうちに、目は真っ赤になっていました。デザインをコードに変換するのは難しい作業ではありません。ただ、ひたすら退屈なのです。多くの開発者は、フロントエンド開発時間の最大40%を、デザインツールにすでに存在するレイアウトを再現するためだけに費やしています。

コーディングの速度が遅延の原因になることは稀です。むしろ、翻訳作業の反復的な性質が摩擦を生みます。機密性の高い企業デザインをパブリッククラウドのAPIに送信することなく、この単調な作業を自動化する方法が必要でした。サードパーティのAIツールに必要な3ヶ月間のセキュリティ監査を回避するには、ローカルソリューションしか選択肢がありませんでした。

なぜ標準的なOCRではフロントエンドに不十分なのか

大型マルチモーダルモデル（LMM）に目を向ける前に、私は標準的なOCRツールを試しました。しかし、それらはすぐに失敗しました。OCRはテキストを読み取ることはできますが、空間的な関係性については盲目だからです。ボタンは単なる文字列ではありません。親コンテナに対するパディング、ボーダー半径（border-radius）、ホバー状態の特定の組み合わせなのです。

UIデザインは視覚的な言語です。それを翻訳するには、モデルが「意味的な意図」を理解しなければなりません。例えば、アイコンの水平リストは、単なる絶対配置の画像の羅列ではなく、justify-betweenを持つflexコンテナであるべきだと認識する必要があります。最近まで、このレベルの推論にはGPT-4oへの月額20ドルのサブスクリプションが必要でした。しかし、Llama 3.2 Visionのリリースがそれを変え、高精度な画像推論をローカルのワークステーションにもたらしました。

クラウド vs ローカル：プライバシーのコスト

私はこの問題を解決するために3つの方法を評価しました：

  • クラウドAPI (GPT-4o/Claude 3.5): 95%の精度を提供しますが、継続的なコストがかかります。1画像あたり約0.01〜0.04ドルですが、大量のテストを行うと積み重なります。さらに重要なのは、データがネットワークの外に出てしまうことです。
  • ヒューリスティックコンバーター: SVGのエクスポートをCSSに変換しようとするツール。これらは通常、27インチモニターより小さい画面では崩れてしまうような、絶対配置や固定幅を多用した「スパゲッティコード」を生成します。
  • Llama 3.2 Vision (11B): これが最適解（スウィートスポット）です。RTX 3060のような8GB VRAMのGPU、あるいは最新のMac Mシリーズチップでローカルに動作します。データをプライベートに保ち、リクエストあたりのコストは完全にゼロです。

スタック：Llama 3.2 + Ollama + Python

Pythonを使用して、Ollama経由でLlama 3.2 Visionにスクリーンショットを渡す軽量なブリッジを作成しました。このセットアップにより、画像を機能的なHTMLファイルに約15秒で変換できます。お使いのマシンで実行する方法は以下の通りです。

ステップ1：ローカルエンジンの準備

Ollamaは、CUDAドライバーと格闘することなく、これらのモデルを実行する最も効率的な方法です。ダウンロード後、ビジョン対応バージョンのLlama 3.2をプルします。

# 11B ビジョンモデルをダウンロード
ollama run llama3.2-vision

このモデルは、チャート、ドキュメント構造、ユーザーインターフェースを理解するために特別にトレーニングされています。高速に動作するほど軽量でありながら、複雑なCSSレイアウトを理解するのに十分な規模を備えています。

ステップ2：変換スクリプト

Pythonスクリプトは画像のエンコーディングを処理し、モデルが余計な話をしないように制御します。私たちが欲しいのは会話ではなく、コードです。まずOllamaライブラリをインストールします：pip install ollama。

import ollama

def convert_to_tailwind(image_path):
    with open(image_path, "rb") as f:
        img = f.read()

    # プロンプトが最も重要な部分です
    prompt = """
    シニアフロントエンドエンジニアとして振る舞ってください。
    このスクリーンショットを、Tailwind CSSを使用した単一のHTMLファイルに変換してください。
    公式のTailwind CDNを使用してください。
    レイアウトがレスポンシブであり、画像の余白（スペーシング）と一致するようにしてください。
    生のHTMLコードのみを返してください。マークダウンブロックや説明は含めないでください。
    """

    response = ollama.chat(
        model='llama3.2-vision',
        messages=[{'role': 'user', 'content': prompt, 'images': [img]}]
    )

    return response['message']['content']

# 変換を実行
html_output = convert_to_tailwind("ui_mockup.png")
with open("index.html", "w") as f:
    f.write(html_output)

ステップ3：プロダクション向けの調整

初期テストでは、モデルが時折汎用的なプレースホルダーを使用することがありました。これを修正するために、プロンプトを改良しました。「CDN経由でLucideアイコンを使用する」や「フォントファミリーには厳密にInterを使用する」といった指示を追加することで、出力の品質が約30%向上しました。モデルが特定の詳細を見落とした場合は、手動で修正しないでください。代わりに、*間違った*結果のスクリーンショットを撮り、「この出力と元のデザインの違いを見つけて修正して」とモデルに依頼してください。

結論：15秒で90%が完成

コーヒーを飲み終える頃には、パイプラインは強固なものになっていました。フォルダにスクリーンショットを放り込むだけで、90%完成したTailwindコンポーネントがほぼ瞬時に手に入ります。grid-cols-3を使うべきか、flex-wrapを使うべきかも正確に判断されていました。

最大のメリットは？APIの請求書が来ないことです。1時間で50回のイテレーションを無料で回せました。機密性の高いUIデザインを扱う開発者にとって、これは単なる便利ツールではなく、圧倒的な生産性の向上をもたらす武器になります。まずはカードやナビゲーションバーのような小さなコンポーネントから始めてみてください。出力に信頼が持てるようになったら、ページ全体のレイアウトに移行しましょう。もう二度と手動でpadding-topを計測したくなくなるはずです。

Share:
Tags: