Duply

Duplyとは何ですか？

「AIにデザインの意図が伝わらない」という悩みを解消しませんか？ Duplyは、実際のデザインシステムを構造化された明確な「DESIGN.md」ファイルに変換することで、AIを活用する開発者がより洗練されたWebサイトやプロダクトを構築できるようサポートするツールです。「モダンな感じにして」や「Stripeみたいな見た目にして」といった曖昧なプロンプトに頼るのではなく、AIエージェントが実際に従うことができる実用的なデザインリファレンスを提供します。 Duplyによる各分析は、タイポグラフィ、スペーシング、カラー、レイアウトパターン、コンポーネント、リズム、インターフェース全体の雰囲気など、既存プロダクトの背景にあるビジュアル言語を正確に捉えます。ライブラリを閲覧し、プロダクトに合ったデザインスタイルを選択して、DESIGN.mdファイルをコピーし、お使いのAIコーディングツールに貼り付けるだけで利用できます。 これにより、AIエージェントは明確なビジュアルの方向性を持って、ランディングページ、SaaSプロダクト、ダッシュボード、アプリなどのデジタルインターフェースを初期段階から構築できるようになります。結果として、意図しないUI要素の削減、プロンプト微調整の手間の軽減、そして複数の画面にまたがる一貫したプロダクト体験の実現につながります。 Duplyは、最初のエントリープロンプトから、AIが生成するインターフェースをより意図的で、ブランドに適合し、実際のプロダクトに近いクオリティに仕上げたいと考えているファウンダー、デベロッパー、デザイナー、AIビルダー、そして「バイブコーダー（直感でコードを書く人）」のために作られています。

Duplyの使い方は？

まず、AI生成プロダクトに適用したいデザイン言語を選択することから始めます。 1. Duplyのライブラリを閲覧し、希望するスタイルにマッチするリファレンスを選択します。 2. そのデザインシステムの構造化された「DESIGN.md」ファイルをコピーします。 3. お使いのAIコーディングツールに、デザインの指示書（ガイダンス）として貼り付けます。 4. そのDESIGN.mdを視覚的リファレンスとして使用し、Webサイト、ランディングページ、SaaSプロダクト、ダッシュボード、またはアプリを構築するようAIエージェントに指示します。 5. タイポグラフィ、スペーシング、カラー、コンポーネント、レイアウトパターン、インターフェース全体の雰囲気について、明確な方向性を持たせながらブラッシュアップを重ねます。

Duplyのコア機能

Duplyの使用例