WindChat は無料で使えるのか

無料の範囲がある。ライセンスなしでは直近 5 件のメッセージをプレビューでき、自分の作業に合うか判断するには足りる。無制限のプレビュー、無制限のチャットグループ、優先メールサポートは有料ライセンスが要る。

料金はいくらか

月額が $1.99、年額が $9.99、買い切りが $19.99 の一括払いだ。どれも機能は同じで、5 台まで有効化できる。

React に対応しているのか

対応している。React のプレビューは 2024 年 1 月の版で加わった。Tailwind のクラスで書いた単一の部品という形が対象で、ChatGPT の React プロンプトはほぼこの形式で返る。import を使って複数ファイルに分けたプロジェクトは描画されない。

プログラムが分からなくても使えるのか

使えるが、書ける人のほうが成果は大きい。HTML を学び始めた人は平易な依頼を打ち込んで結果を見ればよく、開発者はプロンプトを細かく詰めることで同じプレビューをはるかに遠くまで活かせる。

対応ブラウザとプラットフォームは

WindChat は chatgpt.com 向けの Chrome 拡張で、Chrome と Chrome 拡張を読み込める Chromium 系ブラウザで動く。単体アプリもスマートフォン版もない。

ない。ブラウザ拡張であり、サーバー API も開発者向け連携も提供しない。すべてブラウザのセッション内で完結し、他のプログラムから呼び出すものはない。

WindChat

Windseed · コーディング

WindChat はフロントエンド試作のためのブラウザ拡張で、ChatGPT の中で Tailwind CSS の HTML と React のコードをその場で表示する。モデルが書き進めるうちに、ページとして形になる。

ツールを見る

WindChat について

What Is WindChat

WindChat は ChatGPT 拡張機能で、ChatGPT にコードプレビューの画面を足す。作りたいページや部品を伝えると、モデルがコードブロックで返し、拡張がそれを会話の横で実際のページとして描く。これまでの手順はコードをコピーし、新しいファイルを作り、貼り付け、保存し、ブラウザを再読み込みする流れだった。WindChat はその中間を丸ごと省く。

対象は ChatGPT フロントエンド支援の用途で使う人で、汎用のチャットボットとして使う人ではない。Tailwind CSS プレビューが主目的だ。デザイナーはレイアウトの案を起こし、開発者は部品のアイデアを試し、学習者はクラス名が実際に見出しへ何をするのかを目で確かめる。Tailwind CSS への対応が中核で、HTML プレビューと React プレビューは 2024 年 1 月の版以降で扱える。

制約もある。WindChat は ChatGPT の画面の内側で動くため、OpenAI が表示を変えるたびに壊れうる。開発者はそのつど日付付きの更新版で追従してきた。無料枠の範囲も問題になる。ライセンスなしでは直近 5 件のメッセージしかプレビューできず、それ以上は有料のキーが要る。

Getting Started

Chrome ウェブストアから WindChat を入れ、同じブラウザで ChatGPT を開くと ChatGPT コードプレビューが使える状態になる。
新しい会話を始め、Tailwind CSS のクラスを使った HTML か React のコードブロックを 1 つだけ返すよう指示するプロンプトを貼る。
返答を待つ。WindChat がコードブロックをページとして会話の横に表示する。
プロンプトを直して送り直し、新しい表示と前の表示を見比べる。
プレビューを無制限にするならライセンスを購入し、拡張の設定で有効にする。

AIツール情報

WindChatの料金、対応プラットフォーム、性能を簡単に確認できます。

無料プランはい

有料プラン$1.99 - $19.99 (monthly, yearly, lifetime)

プラットフォームChrome browser extension for chatgpt.com

開発元Windseed

カテゴリコーディング

リリース日Apr 2023

最終更新Feb 2025

サイト訪問数N/A

サイト世界ランキングN/A

API提供状況いいえ

こんな人におすすめ

このツールが最も力を発揮するユーザー、タスク、シーン。

ユーザー

フロントエンド開発者
UI デザイナー
HTML と React を学び始めた人
個人開発者や小規模プロジェクト

タスク

ランディングページの試作
部品の反復
プロンプトのデバッグ
授業やデモ

シーン

金曜の午後に急いで作るモック
2 つのデザイン方針を比べる
不具合を同僚に説明する
チュートリアルの React 断片を試す

主な機能

生成コードのリアルタイム表示

WindChat は ChatGPT の返答にあるコードブロックを読み、ページとして描く。返答が増えるたびに表示も変わるので、調整の連続が目に見える版の連続になる。会話では書き続けながら、プレビューはその場に残る。レイアウトを言葉で説明するのと、実際に眺めるのとの違いはここにある。

Tailwind CSS の描画

Tailwind への対応がこの拡張の存在理由だ。flex、gap、rounded、bg-slate-900 といったユーティリティクラスが書いたとおりに適用され、表示はモデルが出したマークアップと一致する。プロジェクト固有の CSS やコンポーネントライブラリに頼るページは、ここでは見え方が変わる。プレビューはビルドの流れに接続していないからだ。

React コードのプレビュー

React の返答は 2024 年 1 月の版からプレビューできる。Tailwind のクラスとサンプルデータで書いた単一の部品という、よくある形を扱える。ChatGPT の React プロンプトはほぼこの形で返ってくる。複数ファイルに分けて import やバンドラ設定を持つプロジェクトは、会話内のプレビューでは動かない。

その場で回せる反復

効くのは速さだ。プロンプトの 1 行を変えて送り直せば、新しい表示が古い表示に置き換わる。余白や階層の良し悪しが、デプロイではなくひと目で判断できる。この循環があるから、ChatGPT はコード生成の道具から、UI の下書き帳に近づく。

出力を揃えるプロンプトのひな形

公式サイトは Tailwind CSS と React の開始用プロンプトを公開している。出力形式を固定する内容で、コードブロックは 1 つ、コメントなし、画像は picsum.photos、アイコンは Bootstrap Icons を使う。冒頭に貼っておけば毎回ルールを説明せずに済み、モデルがコードの中に文章を差し込まなくなるので表示も崩れにくい。