GitHub公式のプレビューカード
デザイン画像からHTML、CSS、JavaScriptを生成し、画面実装のたたき台を作れます。
#デザイン変換#Web制作
※この説明はAIが公式READMEから自動生成したものです。内容は必ず公式ページでもご確認ください。
これは何？パソコンに入れて使うアプリ
できること
スケッチ、ワイヤーフレーム、FigmaやXDなどのデザイン画像をアップロードすると、HTML/CSS/JavaScriptの画面コードに変換する。
誰に効く？
Web制作者、試作者
用意するもの
画像、OpenAI
時間のめやす
10〜20分
使うとこうなる
- 1デザイン画像を用意する→変換元として読み込める
- 2画像をアップロードする→画面コードが生成される
- 3生成結果を見る→実装のたたき台として使える
作れるもの・できることの例
LPのHTML、画面モックのCSS、ワイヤーからの実装案
使えるようになるまでの手順をひらく
- 下の「GitHubで見る」ボタンで公式ページを開く
- ページ内の「（リリース）」から自分のPC用（Windowsなど）のファイルをダウンロード
- ダウンロードしたファイルを開いてインストール
- アプリを起動すれば使えます（画面が英語のことも多いですが、操作はシンプルです）
⬇️ ダウンロードページでの操作（この3タップで完了）
- ページを下にスクロールして 「Assets」 という折りたたみを押して開く（ここがファイル一覧）
- Windowsの人 →「.exe」か「Setup」／Macの人 →「.dmg」と付くファイルを1回押す（ダウンロードが始まります）
- ダウンロードしたファイルを開く。Windowsが青い警告を出したら「詳細情報」→「実行」（有名な無料ソフトでもよく出る画面です）
※緑の「Code」ボタンは開発者用なので押さなくてOK。ファイルがたくさん並んでいたら、上の条件に合う1つだけ選べば大丈夫。
こんな人には向かないかも
- 登録やAPIキーの設定を一切やりたくない人
🔑 必要な鍵（APIキー）
OpenAI（ChatGPT） の発行ページ↗発行は無料。APIはChatGPT Plus（月額）とは別勘定で、使った分だけの課金。※Codex等の一部公式ツールは、キーの代わりにChatGPTの月額プランでログインして使える
鍵は「合鍵」の文字列。発行→コピー→ツールの設定に貼り付け、の3手です。迷ったらAIチャットに「画面つきで教えて」と。
迷ったらこれ：いつも使っているAIチャット（ChatGPT・Claude・Geminiなど）にこのツールのGitHubリンクを貼って 「これを使いたい。私のPCでの始め方を一歩ずつ教えて」と頼むのが一番の近道です。
注意点
生成コードは手直し前提。細部の再現に限界あり。
ひとことメモ
として公開されています。内容は公式ページでもご確認ください。