説明
CodeRocket UIは、開発者が真っ白なキャンバスから始めるのではなく、自分のブランドに似たコンポーネントライブラリを構築するのを助けます。製品の短い説明が提案されたデザイン方向（ブランドカラー、コーナー半径、密度）に変わり、ユーザーはそれがシステム全体に適用される前にレビューします。
続きを読む
コアワークフローは3つのステージで実行されます。まず、製品を説明し、色、タイポグラフィ、間隔、密度をカバーするAI生成のデザイン提案をレビューします。次に、システムを視覚的にまたはプロンプトで洗練させ、ライブラリ全体を一度に編集するか、単一のコンポーネントを単独で再スタイリングします。最後に、結果を実際のコードベースに持ち込みます：ソースを直接ダウンロードするか、プライベートレジストリを通じてインストールします。
ライブラリ自体は、Base UIに基づいて構築された48のコンポーネントと26のインターフェースブロック（ボタン、フォーム、ダイアログ、コンボボックス、カレンダー、データテーブルなど）をカバーしており、エクスポート前に試すことができる動作を持っています。コンポーネントは、編集可能なReactまたはVueとTypeScriptソースとして提供され、エクスポートされたコードはCodeRocket UIに対するランタイム依存性を持たず、編集、ホスティングが可能で、MITライセンスの下で独立して使用できます。製品を支えるオープンソースコンポーネントライブラリはGitHubに公開されています。
CodeRocket UIは、コーディングエージェントにも接続します。CLI、プライベートレジストリ、MCP接続により、Codex、Claude Code、Cursorはプロジェクトの保存されたデザイントークンと既存のコンポーネントを読み取ることができるため、エージェントは新しいボタンやカードをゼロから生成するのではなく、既存のものを見つけて再利用できます。セットアップ手順はドキュメントに記載されています。
価格は2つのティアがあります。無料プランには、完全なエディタ、コンポーネントカタログ、編集可能なソースエクスポートが含まれ、アカウントごとに一度限りのトライアルとして合計5回のAI支援生成が含まれます。Proプランは、支払いアクセスが有効な限り、UTCカレンダーの月ごとに100回のAI生成を追加します；これは個別に手配され、価格とアクセス期間は支払い前に合意され、アカウントは手動で有効化され、自動請求はありません。両方のティアのAIリクエストはサービス制限を共有し、AI生成が一時的に利用できなくてもエディタとエクスポートは機能します。
現在、ReactとVueが同じデザイントークンとAIワークフローでサポートされており、SvelteとSolidJSは計画中のフレームワークとしてリストされています。CodeRocket UIは、開発者や小規模チームが画面を構築する前にコードベース全体で一貫したデザインシステムを望むためのものであり、ウェブサイトビルダーや一般的なアプリ生成ツールではありません。
- カテゴリーAI アプリビルダー
- 料金モデルオープンソース
- デプロイセルフホスティング
- プラットフォームWeb
CodeRocketの主要機能
短い製品説明からのAI生成デザイン提案（色、タイポグラフィ、間隔、密度）
Base UIに基づいて構築された48のReactおよびVueコンポーネントと26のインターフェースブロック
システム全体または単一のコンポーネントの再スタイリングのためのビジュアルエディタ
既存のプリミティブから新しいコンポーネント（フォーム、カード、パネル）のAI合成
MITライセンスの下での編集可能なTypeScriptソースエクスポート、ランタイム依存性なし
実際のプロジェクトにライブラリをインストールするためのCLIとプライベートレジストリ
コーディングエージェント（Codex、Claude Code、Cursor）が保存されたデザイントークンとコンポーネントを読み取れるようにするMCP接続
エクスポート前に動作を試すためのライブコンポーネントエクスプローラー
CodeRocketの使い方は？
製品を説明する：短い方向性を示し、AIが提案した色、タイポグラフィ、間隔をレビューします。
システムを洗練させる：視覚的にまたはプロンプトで、システム全体または単一のコンポーネントを編集します。
カタログを探索する：48のコンポーネントと26のブロック、その実際の動作をエクスポート前に試します。
不足しているものを構成する：新しいフォーム、カード、またはパネルを説明し、AIに既存のコンポーネントから組み立てさせます。
出荷する：編集可能なソースをダウンロードするか、プライベートレジストリを通じてプロジェクトにインストールします。
コーディングエージェントを接続する：MCP接続またはレジストリを追加し、Codex、Claude Code、またはCursorがコンポーネントを再利用できるようにします。
CodeRocketの使用例
- 新しいデザインシステム
- コーディングエージェントの引き渡し
- コンポーネントライブラリのエクスポート
- カスタムコンポーネントの組み立て
