デザイナーやフロントエンド開発者は、日々インターフェースを逆解析しています：スクリーンショットから間隔を測ったり、文字スケールを推測したり、コンポーネントを再構築してその動作を確認したり。デザインを再現することで、これらの作業が1ステップに短縮されます — スクリーンショットやURLをアップロードするだけで、デザイントークン、コンポーネントの分解、そして動作するフロントエンドコードを取得できます。
このツールはRekreateで開発中です。以下は、このツールが生成する内容と、現在利用可能なツールの機能です。
- 入力：スクリーンショット、Figmaフレーム、またはURL。出力：トークン、コンポーネント、コード。
- カラーパレット、文字スケール、間隔リズム、角丸、シャドウを変数として抽出。
- コンポーネントレベルの出力 — カード、ナビゲーション、価格表など、単なる平坦なマークアップではありません。
- 開発中。
/makeの画像ツールは現在利用可能です。
デザイン再現ツール — 開発中
インターフェースを入力すると、その背後にあるシステムを取得できます：名前付きトークンのカラーパレット、文字スケール、間隔リズム、角丸やエレベーション、そして各コンポーネントをHTMLとCSSで再構築し、適切なクラス名とレスポンシブな動作を備えています。
目的は他人の製品をクローンすることではありません。デザイナーがスクリーンショットを見るたびに抱く質問、「これ、どうやって作られているの？」 に数秒で答えることです。
このツールはまだ公開されていません。無料アカウントを作成すると、公開次第アプリ内でお知らせします。
再現されたデザインから得られるもの
| レイヤー | 計画されている出力 |
|---|---|
| カラー | 役割付きパレット — サーフェス、インク、ミュート、アクセント、セマンティック — をCSS変数として、ライトとダーク両方に対応 |
| 文字 | フォントファミリー、使用されているスケール、ウェイト、行間、文字間隔 |
| 間隔 | 基礎となるリズム（4/8ptなど）に加え、コンテナ幅とガター |
| コンポーネント | ボタン、カード、ナビゲーション、フォーム、テーブル — 各コンポーネントを独立したHTMLとCSSで提供 |
| 状態 | ホバー、フォーカス、無効、エラーなど、推測可能な状態 |
| アクセシビリティノート | コントラスト警告やフォーカス状態の欠如を指摘、黙ってコピーしません |
使い方
参照をアップロード
憧れの製品のスクリーンショット、Figmaフレーム、またはライブURL。
スコープを選択
画面全体、または理解したい特定のコンポーネント — 価格カード、サイドバー、空の状態。
システムを確認
まずトークンを確認：パレットが正しいか、文字スケールが一致するか、間隔がグリッドに沿っているか。モデルが誤推測した部分を修正。
コードを取得
コンポーネントをプロジェクトにコピーするか、チームが本物を構築する際の参考実装として保持。
インスピレーション、模倣ではなく
インターフェースパターンは共有される技術です。タイトル、本文、ボタンを持つカードは誰の所有物でもありません。業界がそのパターンに収束したのは、それが機能するからです。
所有されるもの：製品のビジュアルアイデンティティ — ロゴ、イラストスタイル、カスタムフォント、画像、コピー — および独自のコード。再現されたデザインは、メカニズムを教え、そこに自分のブランドを反映させるべきです。
画面が競合他社の画面にロゴだけ違う状態で似ている場合、それは構造を学んだのではなく、アイデンティティをコピーしたことになります。トークンを出発点として使用し、自分のシステムに向けて進化させてください。
Rekreateがこれを構築する理由
私たちの製品全体は1つのアイデアに基づいています：すでに機能しているものから始め、それを自分のものにする。 これはバイラル動画から始まり、広告、写真、声へと広がり、デザインもインターフェースに適用された同じ動きです。
また、チーム向けの/makeファミリーを完成させます：広告を再現、ランディングページを再現、その背後にあるデザインシステムを再現 — すべて1つの場所で、あなたが使う言語で。
隣接するツールに興味があれば、ウェブサイト再現ツールやアプリ再現ツールをフォローしてください。
よくある質問
AIはスクリーンショットからUIデザインを再現できますか？
はい — ビジョンモデルは画像からパレット、文字スケール、レイアウトを抽出し、コードでコンポーネントを再構築できます。Rekreateのデザイン再現ツールは開発中ですが、現在は画像、ロゴ、動画に対応したツールが利用可能です。
Figmaファイルを出力しますか？
計画されている出力はデザイントークンとフロントエンドコードです。トークンはほとんどのデザインツールにクリーンにインポートできますが、このツールは動作するコードを取得することを目的としています。
他人のUIを再現するのは合法ですか？
レイアウトやインタラクションパターンは、ブランドアセットのように保護されていません。他人のロゴ、イラスト、カスタムフォント、コピー、独自コードを再利用しないでください — 構造を取り、自分のアイデンティティを加えてください。
ダークモードに対応していますか？
はい、計画されています：トークンはテーマごとに抽出されるため、再現されたコンポーネントは1つのテーマにハードコードされるのではなく、両方で動作します。
いつ公開されますか？
公開日は未定です。無料アカウントを作成すると、新しい/makeツールが公開され次第アプリ内で表示されます。
Rekreateで次のバズる動画を作成しよう
実績のあるショート動画を見つけて、自分のスクリプト、アバター、声で再現し、Seedance、Kling、Veoを使ってシーンを生成するワークスペース。
無料トライアルを開始 →