インポート

1Figma

1. Figma で「ファイル」の「ローカルコピーを保存」を選び、.fig ファイルを取得します。
2. 「ファイル」の「インポート」にある「Figma」（Cmd+Shift+F）、ホームのカード、ダブルクリック、ウィンドウへのドロップのいずれかで開きます。
3. 取り込むページを選ぶか、「すべてのページをインポート」を選びます。
4. 位置をそのまま保つなら「Figma のレイアウトを維持」、スタックを組み直すなら「Design Editor 自動レイアウト」を選びます。

正確に取り込めなかった要素は警告として一覧表示されます。Figma でレイヤーをコピーして、ここに貼り付けることもできます。

2pen.dev

.pen ファイルは新しい無題のドキュメントとして開かれ、元のファイルに書き戻されることはありません。シェーダー、スクリプト、メモ、ブラウザノードも取り込まれます。

3SVG と画像

画像ツールで PNG、JPEG、GIF、WebP、SVG ファイルを配置できます。SVG は編集可能なベクターレイヤーになります。ラスター画像はキャンバスに直接ドロップすることもできます。

4HTML

「ファイル」の「インポート」から HTML（Cmd+Shift+H）を選ぶと、.html または .htm ファイル、あるいはスタイルと画像を含む .zip を取り込めます。CSS のカスケード、変数、メディアクエリ、グリッドに従い、近似で再現した部分を一覧表示します。

de import:html https://example.com --viewport-height 900

5スクリーンショットを再現する

ホームのスクリーンショットカードから PNG または JPEG をエージェントに送ると、編集可能なデザインとして再現します。

6Chrome 拡張機能

リポジトリに含まれる拡張機能を使うと、表示中のページを実行中のエディタに取り込めます。ページ全体のキャプチャ、単一要素の選択、design.md の抽出、.de ファイルのダウンロードができます。