Windframe
Devwares · コーディング
WindframeはAIを組み込んだTailwind CSSビルダーだ。ページを言葉で説明するかスクリーンショットを渡し、ビジュアルエディターで整えて、React、Vue、Svelte、素のHTML向けのレスポンシブコードを書き出す。
Windframe について
About
Windframeとは
Windframe AIはDevwaresが作る、Tailwind CSSビルダーの一種だ。Tailwind CSSで組んだサイトや画面のためのビジュアルエディターとして動く。一文かスクリーンショット、あるいは既製のテンプレートから始め、キャンバス上でレイアウトを詰め、そのままプロジェクトに置けるコードを持ち帰る。売りは速さにある。ページを説明できる人なら、ユーティリティクラスを一つずつ手書きしなくても形にできる。
よくあるAIウェブサイト作成ツールとの違いは出口だ。そうした道具の多くは自社でホスティングさせたがる。Windframeはソースを渡す。React、Next.js、Vue、Nuxt、Angular、Svelte、Astro、SolidJS、Rails ERB、素のHTMLだ。マークアップは標準のTailwindクラスで書かれるので、エンジニアは読めて、レビューできて、他のコードと同じリポジトリで育てられる。
制約も押さえておきたい。AIの出力はピクセル単位で正確ではない。公式ドキュメントもそう認めていて、独自アイコンや画像、グラフは元のスクリーンショットとずれることが多い。AI機能はクレジット制で、生成1回につき1クレジットを使う。無料アカウントではMCPを3回呼べる程度とエディターのお試しが付き、有料プランは月25ドルからになる。
Getting Started
- windframe.devで登録し、ブラウザでエディターを開く。インストールは要らない。
- 「ヒーローセクション付きのモダンなランディングページ」のような指示を入れるか、スクリーンショットを上げるか、ライブラリからテンプレートを選ぶ。
- キャンバスで仕上げる。要素をドラッグし、色や余白を変え、正確な値はプロパティパネルで入れる。
- 書き出し先を選び、生成されたファイルをコピーするか、プロジェクトごとダウンロードする。
- コーディングエージェントから直接UIを作りたい場合は、WindframeのMCPサーバーをClaude Code、Cursor、VS Codeに追加する。
AIツール情報
Windframeの料金、対応プラットフォーム、性能を簡単に確認できます。
こんな人におすすめ
このツールが最も力を発揮するユーザー、タスク、シーン。
ユーザー
- フロントエンド開発者：Tailwindのページを、クラスを一つずつ書かずに初稿まで持っていきたい人。出力コードは自分のリポジトリで読み直して伸ばせる。道具が手間を省くだけで、囲い込まない。
- 小さなチームの創業者やデザイナー：欲しいものは言葉にできるが、Tailwindを毎日は触らない。自分でランディングページを組み、動くコードをエンジニアに渡せる。
- 制作を請けるフリーランス：有料プランなら保存できるプロジェクト数に上限がなく、複数の案件を同時に開ける。コードに出典表示も要らない。
タスク
- Figmaのモックアップをコードにする：スクリーンショットを上げてレイアウトを生成させ、書き出し前にビジュアルエディターで細部を直す。
- マーケティングページの試作：ヘッダーや料金表、フッターのテンプレートから始め、文言と配色を差し替えれば1時間で動くページになる。
- 管理画面の構築：ウィジェットとグラフ付きのダッシュボードテンプレートが繰り返し部分を埋め、残りはビジュアルエディターで仕上げる。
- 既存サイトの作り直し：Tailwindのプロジェクトやコンポーネントライブラリを取り込み、キャンバスで編集し、別のフレームワーク向けコードとして書き出す。
- コーディングエージェントにデザインの文脈を渡す：MCPサーバーをつなげば、Claude CodeやCursorが実際のデザイントークンとコンポーネントのスタイルを持てる。
シーン
- 週末にポートフォリオを公開したいとき：AIがレイアウトを作り、1時間で文言と余白を詰め、書き出したファイルをそのままホスティングに置く。
- クライアントが毎回仕様を変えるリニューアル：画面で直して書き出し直せば、ラウンドごとにデザイナーがFigmaを描き直さずに済む。
- コードを書かない創業者がいるチーム：本人がエディターで案を組み、渡ってくるのは本物のコードだ。小さな実験に開発陣が付き合わなくてよくなる。
- RailsやAstroの既存コードベース：Tailwindを手作業で移植せず、対応する書き出し先を選べばいい。
主な機能
一文から始まるAI生成
欲しいものを書けば（「ヒーロー付きのモダンなランディングページ」「3プランの料金表」）、セクション丸ごと、あるいはページ全体が返ってくる。レスポンシブなレイアウト、実際の余白、読みやすいタイポグラフィ付きだ。Tailwind CSSジェネレーターは内蔵のデザイン基準に沿うので、最初の結果からして意図を感じる見た目になり、スタイルの当たっていない箱の山にはなりにくい。生成1回でAIクレジットを1つ使うので、長く試す日は消費を気にしたい。
スクリーンショットからコードへ
デザイン画像やモックアップ、公開中のサイトのスクリーンショットを上げると、Windframeが解析してTailwindクラス付きのHTMLを返す。デザインがすでにあり、コードだけが足りない場面では最短の道だ。公式ページはトレードオフも明記している。書き出したファイルはピクセル単位で一致しない場合があり、独自アイコンや画像、グラフは元と違う仕上がりになることがある。
コードと同期するビジュアルエディター
キャンバスでの変更はそのままTailwindのコードに反映される。要素を指して色やサイズ、余白を変えれば、マークアップが付いてくる。Tailwindビジュアルエディターとプロパティパネルで日常の調整は足り、エディターがレスポンシブのバリエーションを扱うので、1つのデザインがデスクトップ、タブレット、スマートフォンで使える。
10種類のフレームワークへの書き出し
1つのデザインがReact、Next.js、Vue、Nuxt、Angular、Svelte、Astro、SolidJS、Rails ERB、素のHTMLのコードになる。Reactコード出力もVueやSvelteも同じキャンバスから出てくるので、レイアウトを組み直す必要はない。標準のユーティリティクラスだけで書かれ、独自ランタイムは挟まない。エンジニアはレビューで読め、そのまま残せる。公式サイトは、書き出したコードは利用者のもので出典表示も不要だと明言している。
1,000種類を超えるテンプレート
ライブラリにはヘッダー、ヒーロー、料金表、ダッシュボード、フォーム、フッター、ページ全体のTailwind CSSテンプレートが揃い、毎週新しいバージョンが加わる。空白の状態から始めるのではなく、プロが作ったデザインから入れるので、白いキャンバスの前で止まらずに済む。ブロック、管理画面、コールトゥアクションのレイアウトは別に分類され、ページ全体が要る前に部品だけ探せる。
既存のTailwindを取り込んで編集
Tailwind UI、Flowbite、DaisyUIのコンポーネントを放り込むことも、自分のプロジェクトをimportすることもでき、エディターが開いて視覚的に触れる。Windframeは自分のコードの上に重ねる層になり、閉じた庭にはならない。新規ページだけでなく保守作業にも使える理由がここにある。
コーディングエージェント向けMCPサーバー
WindframeのMCPサーバーはClaude Code、Cursor、VS Code、Codexに、本物のデザイントークンとスタイルシステムを渡す。Linear、Shadcn、Notion、Stripe、Apple風のテイストが揃う。エージェントは値を推測するのではなく、タイポグラフィ、余白、配色の判断を受け取る。最初の3回は無料で、Proか買い切りアカウントなら上限なく使える。
メリットとデメリット
メリット
- 10種類のフレームワーク向けに実用レベルのコードを書き出すので、作業がホスティング上のプレビューで終わらない。
- ビジュアルエディターとコードが同期し、技術に詳しくない同僚もビルドを壊さずに参加できる。
- 1,000種類超のテンプレートが白紙の段階を短くする。料金表、ダッシュボード、ランディングページで特に効く。
- スクリーンショットからコードへの変換なら、既存デザインを数秒で処理できる。
- MCPサーバーが同じデザインシステムをClaude Code、Cursor、VS Codeに持ち込む。
デメリット
- 生成のたびにクレジットを消費し、月額プランは50クレジット。試行が多い人は追加購入か年額への切り替えが要る。
- 出力はピクセル単位で正確ではなく、アイコン、画像、グラフがスクリーンショットと違うことがある。公開前に手作業の修正が残る。
- 自社製品に組み込むための公開APIはない。MCPサーバーはエージェント向けで、独自連携の手段にはならない。
- エディターはブラウザで動く。接続が切れると作業が止まり、飛行機の中やホテルの弱いWi-Fiでは厳しい。
よくある質問
WindframeはTailwind CSSのインターフェースを視覚的に組み立てる。デザインを生成または取り込み、キャンバスで調整し、React、Vue、Svelte、Angular、Astro、Rails、素のHTML向けコードとして書き出す。ランディングページやダッシュボード、素早い試作によく使われる。
関連コンテンツ
Windframeに関連するツール、スキル、記事を探す。
Windframeの代替ツール
Base Code
Base44 (Wix) · コーディング · 生産性向上Base CodeはBase44の共有クラウド開発環境だ。既存のGitHubリポジトリに対する変更をチャットで伝え、プレビューで確認し、プルリクエストとして返せる。
Google EmbeddingGemma 2
Google DeepMind · ライティング · 画像 · コーディングGoogle EmbeddingGemma 2 は 7 億 4000 万パラメータのオープンなモデルで、テキスト、コード、画像、音声、動画フレームを同じ 768 次元空間のベクトルに変え、スマートフォンやノート PC 上で動く。
GitGlow
GitGlow · コーディング · 生産性向上GitGlow は自分のコードと AI エージェントの変更を一つのレビューにまとめるデスクトップ Git クライアントだ。出荷前に、マシンから何が出ていくのかを確かめられる。