zhu-guli326/image2_UI_skill

何を解決するか

静的なUIリファレンス、デザイン案、またはテキストによる説明を、完全に機能的でインタラクティブ、かつ編集可能なユーザーインターフェースに変換するという問題を解決します。単にUIのフラットな画像を生成するだけのツールとは異なり、このプロジェクトは構造的要素（コードとコンポーネント）を視覚的アセット（画像）から分離しているため、最終的な出力はモックアップではなく、実際のフロントエンドプロジェクトになります。

仕組み

このツールは、主に3つのモードで動作します。スクリーンショットやデザインファイルから既存のUIを再現する、リファレンスを特定の製品のブランドに合わせて再設計する、またはテキストによる説明から完全に新しいインターフェースを作成する、のいずれかです。「image2」と呼ばれるシステムを利用して高品質な視覚的アセット（人物、製品、またはイラストなど）を生成する一方で、構造的なコンポーネント、ナビゲーション、およびレイアウトには標準的なデザインシステム（iOS、Material、Ant Design、または shadcn/Radix など）を使用します。

対象ユーザー

このツールは、クリック可能なインターフェースを迅速にプロトタイプ化したり、既存のアプリのレイアウトを複製したり、ランディングページやダッシュボードを構築したり、eコマース、ソーシャル、ツールベースの製品向けに高精度なUIプロトタイプを生成したりする必要がある開発者やデザイナー向けに設計されています。

ハイライト

• Code-based Output: HTMLと、編集可能で実際のデータと統合できるフロントエンドプロジェクトを提供します。
• Hybrid Generation: UI構造のための実際のコードと、画像のためのAI生成された視覚的アセットを組み合わせます。
• Design System Integration: 一貫性を維持するために、確立されたライブラリからの既存のコンポーネントやアイコンの再利用を優先します。
• Device-Specific Detail: Safe Areas、Dynamic Islands、および Status Bars のようなモバイル特有の要素を扱います。
• Advanced Layouts: 切り抜かれた被写体、レイヤー化された要素、およびエディトリアルスタイルのレイアウトを含む、複雑な視覚的構成をサポートします。