ライブページ分析
ライブDOMをスキャンして、CSSカスタムプロパティ、計算済みスタイル、フォント、影、角丸、アニメーション、余白、UIパターンを検出し、それらの結果をAIコーディングツールに貼り付けられるプロンプトに変換します。
VibeDesign
VibeDesignは、WebサイトのデザインをAIコーディングツール向けの構造化プロンプトに変換するChrome拡張機能とWebアプリです。
vibe coding プロンプトのためのデザイン抽出
VibeDesignは、Webサイトの見た目のデザインをAIコーディングツール向けの構造化プロンプトに変換するChrome拡張機能と連携Webアプリです。ライブページを解析して、色、タイポグラフィ、影、角丸、アニメーション、余白、検出されたUIパターンなどのデザイントークンを抽出し、Claude Design、Replit、Bolt、Lovable、Figma Make などのツールに貼り付けられる出力を用意します。
この製品は、曖昧なプロンプトよりも正確にサイトの見た目を再現・変換したい人向けに作られています。APIキーなしでプロンプトを生成できるほか、Gemini、Claude、OpenAI を接続すると、より文章化されたデザインブリーフとして任意のAI強化ディレクションも利用できます。
VibeDesign が抽出・生成する内容
そのまま貼り付けられる出力
抽出したデザイントークンから構造化されたプロンプトを生成し、クリップボードへのコピーやJSONのダウンロードに対応しています。Claude Design、Replit、Bolt、Lovable、Figma Make などで再利用できます。
フォーカスモード
色、タイポグラフィ、影、モーション、レイアウト、コンポーネントに絞って分析できるため、デザインシステム全体ではなく一部だけ必要なときに便利です。
サイト別の自動復元
ドメインごとに分析を保存するため、同じサイトで拡張機能を再度開くと前回のプロンプトが自動的に復元されます。
履歴と同期
匿名利用時は履歴をローカルに保持し、無料アカウントではデバイス間同期と、過去の分析を表示・アクセス・削除できるダッシュボードを利用できます。
任意のAIディレクション
Gemini、Claude、OpenAI の任意のキーを接続すると、書き起こされた Design Direction セクションを追加できます。AIキーがなくてもそのまま動作します。
VibeDesign が役立つ場面
Webサイトのスタイルを再現する
サイトの視覚的な言語を抽出し、生成したプロンプトを AI ビルダーに貼り付けることで、単なる文章説明よりも具体的な指示で見た目を再現できます。
対象を絞ってデザイントークンを抽出する
色、タイポグラフィ、影、モーション、レイアウト、コンポーネントのうち必要な部分だけを分析し、デザインする前にシステムの一部を把握できます。
プロンプト履歴を確認・管理する
複数サイトにまたがる分析記録を残し、インスピレーションや参照を整理しながらダッシュボードから項目を見直したり削除したりできます。
匿名ワークフローと同期ワークフローを切り替える
簡単な単発分析には無料の匿名モードを使い、デバイス間同期や過去の作業へのダッシュボードアクセスが必要なときはサインインします。
AIディレクションでトークンを補強する
生成されたプロンプトに、抽出した生のトークンに加えて文章化されたデザイン方向のブリーフを含めたいときに、Gemini、Claude、OpenAI のキーを追加できます。
Pros and Cons
Pros
- コアとなるプロンプト生成は、アカウントや API キーなしで動作します。
- ライブページから幅広いデザイントークンと UI パターンを抽出します。
- サインインしたユーザーは、プロンプト履歴をローカルに保存するか、デバイス間で同期できます。
- 完全抽出を毎回行うのではなく、特定のデザイン領域に絞った分析モードを利用できます。
- プロンプトのコピーに加えて JSON のダウンロードもできるため、再利用やレビューに便利です。
Cons
- 料金ページには価格の詳細がありません。提供されたソースでは、そのページは現在 404 を返しています。
- AIによる拡張ディレクションなど、一部の機能はご自身の Gemini、Claude、OpenAI キーの接続が必要です。
FAQ
VibeDesign を使うのに API キーは必要ですか？
いいえ。サイトによると、この拡張機能はAPIキーなしで動作し、ルールベースのエンジンがデザイントークンを抽出して構造化されたプロンプトを自動生成できます。任意のAPIキーを追加すると、文章化されたデザイン方向のセクションが加わります。
アカウントを作成せずに使えますか？
はい。ホームページによると、匿名モードはアカウントなしで使え、ローカル履歴と月5件のプロンプト制限があります。サインインすると、デバイス間で同期された履歴とダッシュボードへのアクセスが有効になります。
VibeDesign はどのツールで使えますか？
セットアップガイドでは、任意の方向付け機能向けの対応AIプロバイダーとして Gemini、Claude、OpenAI が挙げられています。生成されたプロンプトは Claude Design、Replit、Bolt、Lovable、Figma Make にコピーできます。
APIキーはどのように扱われますか？
プライバシーポリシーによると、APIキーはブラウザのローカルストレージのみに保存され、VibeDesign のサーバーには送信されません。AIプロバイダーを使う場合、トークンは自分のキーを使って、ブラウザから選択したプロバイダーへ直接送信されます。
ページ上の何を分析しますか？
この拡張機能は、色、フォント、影、角丸、アニメーション、UIパターンなどのデザイントークンを対象に、ライブDOMを分析します。FAQとプライバシーポリシーの両方で、選択したサイト以外のページ本文、フォーム入力、閲覧履歴は収集しないと示されています。
Quick Facts
- カテゴリ
- デザインツール / 開発者ツール
- プラットフォーム
- Chrome拡張機能 + Webダッシュボード
- 主な用途
- Webサイトのデザインを AI コーディングプロンプトに変換
- 対応出力ツール
- Claude Design, Replit, Bolt, Lovable, Figma Make
- アカウント要件
- コア機能は任意、同期とダッシュボード履歴には必要
- ソースドメイン
- vibedesign.tech
VibeDesignの代替品
Refero MCP
Refero MCP for AI agents connects an MCP-compatible agent to Refero’s curated library of web and iOS product interfaces and user flows. It helps agents research real design patterns before generating UI, with access included in the Refero Pro plan.
Pixso
Pixsoは、ユーザーがワンクリックでデザイン草案とコードを生成できる次世代のAIネイティブUIデザインツールで、Figmaの国内代替品として機能します。
Make Real
Make Real is a Next.js app that turns hand-drawn wireframes into working HTML prototypes using the tldraw SDK and AI models. It helps users sketch on a canvas, generate code, and review the result in an embedded preview.
Napkin AI
Napkin AIは、テキストをプレゼン資料や文書、共有用コンテンツ向けの編集可能なビジュアルに変換します。テキスト起点で生成でき、共同編集にも対応。PPT、PNG、SVG、PDFで書き出せます。
Wowable
Wowableは、Google MapsやSNSプロフィール、スクリーンショットなどの公開情報から、編集・プレビュー・公開できるAIサイトビルダーです。無料プレビューあり。
okkslides
okkslides is an AI presentation maker that creates and edits business slide decks from prompts, documents, outlines, or existing PowerPoint files. It supports template-based generation, natural-language edits, and export to PowerPoint.