デザインカンプや画面キャプチャを手作業でHTMLやCSSに書き起こす作業は時間がかかります。GB Coderの「Screenshot to Code」はマルチモーダルビジョンモデルを活用し、画像のレイアウト構造・配色・フォント特徴を解析して、そのまま動くコンポーネントをエディタ内に即時展開します。

1. デザインカンプとコード実装の橋渡し

レイヤーを細かく測ってFlexboxを書く手間を大幅に削減します。OSのクリップボードから画像を貼り付けるだけで、数秒で動くプロトタイプのひな型が手に入ります。

2. クリップボードからの直接画像ペーストとアップロード

Ctrl+Shift+Uまたはツールバーのカメラアイコンをクリックします。PNG/JPEG画像をドラッグ＆ドロップするか、キャプチャツールからCtrl+Vで貼り付け可能です。対象箇所のトリミングも行えます。

3. 出力形式の指定：HTML/CSSまたはReact TSX

用途に応じて静的HTML5/CSSまたはReact TSXを選択できます。静的モードでは標準CSS変数が定義され、ReactモードではTailwindクラスを含むコンポーネントが出力されます。

4. レイアウト構造・カラーパレット・タイポグラフィの自動抽出

画像内のFlexbox列、CSS Grid、余白の比率、角丸を認識します。主要な色はCSSカスタムプロパティとしてルートに展開されるため、カラー変更も容易です。

<!-- Generated responsive card layout component -->
<div class="pricing-grid">
  <div class="pricing-card featured">
    <span class="badge">Most Popular</span>
    <h3>Professional</h3>
    <div class="price">$29<span>/mo</span></div>
    <ul class="features-list">
      <li>Unlimited in-browser workspaces</li>
      <li>Instant WebContainer execution</li>
      <li>Custom domain publishing</li>
    </ul>
    <button class="btn-primary">Get Started</button>
  </div>
</div>