{"repo":"lance-digital/gear-ui","free":true,"listed":false,"github":"https://github.com/lance-digital/gear-ui","clone":"git clone https://github.com/lance-digital/gear-ui.git","description":"要件文から画面UI定義書とHTMLモックをAIで生成するオープンソースプロジェクト","language":"TypeScript","stars":20,"topics":["ai","code-generation","llm","mock","nextjs","open-source","requirements","typescript","ui"],"license":"Apache-2.0","category":"ai-agents","readme_excerpt":"gear-ui 日本語 English AIで 画面UI定義書 と HTMLモック を2段パイプラインで生成する OSS ツール。 An OSS tool that generates screen-UI specifications and HTML mocks with a two-stage LLM pipeline. --- 日本語 AIで 画面UI定義書 と HTMLモック を2段パイプラインで生成する OSS ツールです。 LLM は Claude (Anthropic) と OpenAI / OpenAI互換 を切り替えて利用できます。 特徴 - 仕様駆動 : いきなり「自然言語 → UI」に飛ばず、画面UI定義書JSONを 中間表現 として挟むので、画面間で項目名・遷移・コンポーネントが一貫します - デザイントークン縛り : モック生成プロンプトに「生のカラーコード禁止、 var(--color-primary) のようなセマンティック変数のみ使用」というガードレールが組み込まれており、 tokens.css の差し替えだけで全画面のテーマを切り替えられます - マルチプロバイダ : 環境変数だけで Claude / OpenAI / OpenAI互換（OpenRouter・Together・Groq・Ollama 等）を切り替え可能 - iframeプレビュー : 生成HTMLは即プレビュー。 sandbox で隔離されているので安全 動作要件 - Node.js = 20.9 （Next.js 16 の要件） - いずれかのLLM APIキー: - Anthropic : console.anthropic.com - OpenAI または OpenAI互換プロバイダ クイックスタート BYOK（Bring Your Own Key） : UIから直接APIキーを設定する方式なので、 .env の編集は不要です。 サーバホスト側で全ユーザー共通のキーを設定したい場合は cp .env.example .env.local で ANTHROPIC API KEY を設定するとフォールバックとして使われます。 プロバイダの設定例 .env.local : 使い方 1. 左ペインに要件文を入力（システム概要・対象ユーザー・機能など、自由形式） 2. 「画面定義を生成」で 1〜8 画面分の UI 定義書 JSON が生成される 3. 画面タブを選択して中央ペインで JSON を確認 4. 右ペインの「モックを生成」で選択画面の HTML モックを生成 5. テーマセレクタ（neutral / indigo / emerald）でデザイントークンを切り替え（ 再生成なしで即反映 ） 6. 「デザインルール」ボタンから、情報密度・角丸・レイアウト・トーンの方針や自由記述の指示を設定（ プロジェクトごとに保存 。次回のモック生成／再生成に反映） 画面イメージ 1. 要件入力 2. 画面UI定義書 3. HTMLモック --- --- --- デザインルール モックの 見た目の方針 をプロジェクト単位で指定できます。プレビュー上部の「デザインルール」ボタンから設定し、内容はプロジェクトに保存されます。設定後に「モックを生成／再生成」すると反映されます。 項目 選択肢 用途 --- --- --- 情報密度 コンパクト / 標準 / ゆったり 余白・パディングの詰まり具合 角丸 シャープ / 標準 / 丸め カードやボタンの角の丸さ レイアウ","default_branch":null,"files":null,"tree":[],"storefront":"/r/lance-digital","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/lance-digital/gear-ui/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}