Alloy

稼働中のウェブサイトをキャプチャし、チャットで修正を指示すると、既存のデザインシステムを反映したプロトタイプを即座に生成するAIツール

無料＋有料cliwebdesktopLLMベース

概要

Alloyは、実際の製品に基づいてAIプロトタイピングを実現する専門ツールです。ブラウザ拡張機能を使用して現在のウェブアプリをキャプチャし、チャットでアイデアを提案すると、デザインシステムやコンポーネントライブラリを自動的に理解し、ブランドイメージに完全に合致するプロトタイプを生成します。主な機能としては、20以上の外部ツールとの統合、FigmaおよびReactアプリへのエクスポート、そしてチームメンバーとの即時共有機能があります。特に製品マネージャー（PM）やチームが、既存のデザイン資産を活用して追加のデザイン作業を行うことなく、顧客の要望を可視化し検証するプロセスに効果的です。利用プランは、ユーザーごとに週10クレジットを提供する無料プランと、無制限のプロトタイピングおよび管理者権限を含む月額20ドルのProプランで構成されており、さまざまな規模のチームが柔軟に利用できます。

差別化ポイント

多くの競合ツール（v0、Uizardなど）が白紙の状態から新しいUIを生成する「Generation-first」方式であるのに対し、Alloyはブラウザ拡張機能を使って実際のWebサイトのコード（DOM/CSS）をキャプチャし、修正する「Context-first」方式を採用しています。これにより、フォントや余白が微妙に異なる「偽物」のような印象を与えることなく、実際に運用中のサイトと100%同じスタイルを基盤として、自然な修正を行えます。

主な機能

ブラウザ拡張機能による実際のウェブアプリのワンクリックキャプチャ
AIチャットベースのUI編集（Vibe Prototyping）
デザインシステムの自動認識およびコンポーネントスタイルの適用
ReactコードおよびFigmaファイルのエクスポート
20以上の外部コラボレーションツールとの統合
macOS・Windowsネイティブデスクトップアプリ（2026年）

メリット・デメリット

ウェブ検索で収集したユーザーの声をまとめたものです

メリット

最大の長所は「違和感のないリアリティ」です。キャプチャしたサイトのデザインシステムをAIが自動的に学習するため、ボタンを1つ追加しただけでも、もともと存在していたかのように自然に生成されます。Figmaやコーディングの知識がなくても、ブラウザ上でチャットするだけで企画案を作成できるため、PMから高く評価されています。また、生成された成果物をReactコードやFigmaにエクスポートでき、開発へのハンドオフ工程も短縮できます。

デメリット

まだ初期段階の製品であるため、複雑なインタラクションを実装する際に、AIが意図しない要素を作成したり、レイアウトが崩れたりする不具合がしばしば報告されています。また、まったく新しいサービスをゼロから作る用途には適しておらず（既存サイトのキャプチャが必須）、無料プランのクレジット制限（週10回）も厳しいため、本格的な業務で使用するには有料プラン（$20/月）への加入が事実上必須です。