キャンバスベースのワイヤーフレーム入力
ユーザーはtldrawキャンバス上でワイヤーフレームを描き、アプリは選択したシェイプをAI処理用のJPEG画像として取得します。
Make Real
Make Realは、tldraw SDKとAIモデルを使い、手描きワイヤーフレームを動作するHTMLプロトタイプに変換するNext.jsアプリです。キャンバスでスケッチし、コード生成し、埋め込みプレビューで確認できます。
Make Real
Make Realは、手描きのUIスケッチを動作するHTMLプロトタイプに変換するNext.jsアプリケーションです。tldraw SDK上に構築されており、ユーザーがキャンバスでワイヤーフレームを描き、それをAIモデルに送信し、生成されたインターフェースを埋め込みプレビューで確認するワークフロー向けに設計されています。
リポジトリのドキュメントによると、このアプリはOpenAI、Anthropic、Google AIモデルで動作でき、3つのプロバイダーを並列で実行するモードもサポートしています。生成されたHTMLはプレビューシェイプにストリーミングされ、完成した出力はリンクで共有したりReplitへエクスポートしたりできます。
主な機能
ストリーミング型プロトタイプ生成
アプリは画像とプロンプトをAIプロバイダーのルートへ送り、生成されたHTMLをストリーミングで受け取るため、出力に応じてプレビューが更新されます。
インラインHTMLプレビュー
生成コードはiframeを使ったカスタムのプレビューシェイプ内でレンダリングされるため、結果をキャンバス上で直接確認できます。
複数プロバイダーの並列実行
「all」プロバイダーモードではOpenAI、Anthropic、Googleをまとめて実行し、結果ごとに個別のラベル付きプレビューを作成できます。
反復的な改善
以前のプレビューシェイプが選択されている場合、そのHTMLを含めて次回生成の反復的な改善に利用できます。
出力の共有とエクスポート
このアプリにはHTMLやURLのコピー、新しいウィンドウでのプレビュー表示、生成したHTMLのReplitへのエクスポートが含まれます。
一般的なユースケース
ワイヤーフレームからプロトタイプへの引き継ぎ
デザイナーやプロダクトオーナーがキャンバス上でUIをスケッチし、コードエディタからやり直すことなく、操作感やレイアウトのアイデアをすぐに確認できる動くプロトタイプが欲しい場合。
モデル比較ワークフロー
作成者が1回の実行で複数のモデルの出力を比較し、異なるプロバイダーが同じスケッチとプロンプトをどう解釈するかを確認する場合。
既存プロトタイプの改善
チームメンバーが以前のプレビューシェイプを選択し、次の生成で前回のHTMLを取り込むよう依頼してドラフトを反復 सुधारする場合。
共有と引き継ぎ
コンセプトを他者と共有する人が、生成されたリンクまたはエクスポートしたReplitプロジェクトを使って、プロトタイプをエディタ外へ持ち出す場合。
ローカル開発とカスタマイズ
リポジトリから作業している開発者が、生成フローを確認または変更するためにYarnコマンドでローカル実行する場合。
Pros and Cons
Pros
- 同じキャンバスワークフローから、描いたワイヤーフレームをレンダリング済みのHTMLプロトタイプに変換できます。
- OpenAI、Anthropic、Googleを含む複数のAIプロバイダーをサポートし、並べて生成するためのallプロバイダーモードがあります。
- 生成されたHTMLをプレビューへストリーミングするため、実行完了前に結果を確認できます。
- 以前生成したHTMLを次のパスに戻して、反復的な改善ができます。
- リンク共有とReplitエクスポートに対応しており、プロトタイプをエディタ外へ移せます。
Cons
- リポジトリによると、このプロジェクトにはテストスイートがありません。
- 現在の設定ではTypeScriptのstrictモードは無効です。
- このアプリは外部のAIプロバイダーキーと環境設定に依存するため、完全に自己完結したオフラインツールではありません。
FAQ
Make Realは何をするものですか？
Make Realは、tldraw SDK上に構築された、手描きのワイヤーフレームをAIを使って動作するHTMLプロトタイプに変換するNext.jsアプリです。リポジトリの説明では、生成にOpenAI、Anthropic、またはGoogle AIモデルを使用できます。
ローカルではどのように実行しますか？
リポジトリでは、このプロジェクトにテストスイートはなく、開発は`yarn dev`、`yarn build`、`yarn start`、`yarn lint`などのYarnコマンドで行うと記載されています。公開版の製品は `makereal.tldraw.com` で利用できます。
複数のAIプロバイダーをサポートしていますか？
はい。ドキュメントによると、「all」プロバイダーモードではOpenAI、Anthropic、Googleを`Promise.allSettled`で並列実行し、それぞれにラベル付きのプレビューを生成します。
生成結果はどうなりますか？
生成されたHTMLは、カスタムのtldrawプレビューシェイプ内に表示されます。ドキュメントでは、完了したHTMLはリンク共有のためにVercel Postgresへアップロードでき、生成結果の開く操作やコピー操作にも対応していると説明されています。
Quick Facts
- カテゴリ
- 開発者向けツール
- プラットフォーム
- Next.js Webアプリ
- 主なワークフロー
- tldrawキャンバスにワイヤーフレームを描き、HTMLプロトタイプを生成
- AIプロバイダー
- OpenAI、Anthropic、Google AI
- ソースドメイン
- github.com
- ライブサイト
- makereal.tldraw.com
Make Realの代替品
GenMB
GenMBは、フロントエンド、バックエンド、データベース、認証、自動化を備えたフルスタックWebアプリを作成できるAI Webアプリビルダーです。
Prompty Town
Prompty Townは、リンクを小さなインターネット都市の建物に変えるWebサービスです。タイルを購入してプロンプトを追加し、他の建物と並べて公開できます。
beehiiv
beehiivは、クリエイター、出版社、ブランド向けのニュースレタープラットフォーム。メールニュースレターとWebサイトを1か所で構築・成長・収益化でき、無料のLaunchプランも利用できます。
PixelDrive
PixelDriveは、ブラウザ編集、REST API、CSV一括、MCPで1つのテンプレートから大量のブランド画像を生成できるAPI。キャッシュ可能なレンダリングと従量課金に対応。
Speculos
SpeculosはClaude Code向けのデプロイツール。作成したアプリを共有URLで公開し、private・org-wide・publicに対応。会社ドメイン、データ接続、顧客クラウド配備の管理機能も搭載。
Awish
Awishは、自然言語の指示を連携アプリ間の自動ワークフローに変えるAI搭載のノーコード自動化プラットフォーム。反復作業、チャット型アシスタント、更新作業を手動設定なしで自動化。