説明
Duplyは、AIコーディングエージェント向けに特別に設計されたDESIGN.mdファイルとして文書化された実世界のデザインシステムを提供するプラットフォームです。ユーザーは、スタイル、業界、表面、色、フォントをフィルタリングしながら、キュレーションされたデザインシステムのライブラリをブラウズできます。デザインを選択すると、ユーザーは単一のDESIGN.mdファイルをコピーでき、そのファイルを使用してAIエージェントがそのビジュアル言語で構築します。これにより、出力が正確で選択したデザインを反映することが保証されます。
DESIGN.mdファイルは、構造化されたトークンとして完全なデザインシステムをキャプチャする単一のMarkdownドキュメントです。これには、定義された使用役割を持つ色、タイポグラフィスケール、スペーシングリズム、ボーダー半径、シャドウ、およびそれらのトークンを参照するコンポーネント仕様などの要素が含まれます。この形式を使用することで、AIコーディングエージェントはDESIGN.mdを読み取り、指定されたデザイン言語に従ったユーザーインターフェースを構築でき、推測を排除し、洗練された最終製品を確保します。
Duplyのアプローチにより、ユーザーはデザインの視覚的側面を超えた作業スタートをAIエージェントに提供できます。このプラットフォームは、すべての画面がモックデータに基づいて構築され、単一のプロンプトを通じて統合されることを保証します。これにより、ユーザーは最初からデザインの好みに沿った生産準備が整ったコードベースを期待できます。
DESIGN.mdファイルに加えて、Duplyは開発者がデザインシステムをプロジェクトに実装しやすくするために、即貼り付け可能なTailwind v4およびCSS変数トークンファイルもエクスポートします。このプラットフォームは、実世界の製品のデザインシステムを文書化し、ユーザーがStripe、Linear、Vercelなどの有名ブランドのデザイン言語にアクセスし、利用できるようにします。Duplyを使用することで、ユーザーは見た目が素晴らしいだけでなく、希望するデザインフレームワーク内でシームレスに機能するアプリケーションを自信を持って構築できます。
Duplyの主要機能
311のデザインシステムが利用可能
無料で使用可能
単一のMarkdownファイル形式
構造化されたデザイントークン
AIコーディングエージェントと互換性
生産準備が整ったコードベース
エクスポート可能なTailwind v4およびCSS変数トークン
キュレーションされたデザインシステムのライブラリ
Duplyの使い方は？
ブラウズ: Duplyで利用可能なデザインシステムのライブラリを探索します。
選択: キュレーションされたオプションから気に入ったデザインを選びます。
コピー: コピーボタンを使用して選択したデザインのDESIGN.mdファイルを取得します。
統合: DESIGN.mdをプロジェクトに貼り付け、AIエージェントに従うよう指示します。
構築: AIエージェントが選択したデザイン言語に一致するUIコンポーネントを作成します。
Duplyの使用例
- ウェブ開発
- UIデザイン
- プロトタイピング
- ブランディング
- AI統合
