最初のデザイン

1ホームから始める

アプリを起動するとホームが開きます。最近使ったファイルがグリッドまたはリストで表示され、「新規ファイル」「ファイルを開く」「テンプレート」「デザインシステム」「シーンテンプレート」を選べます。

上部のプロンプト欄では、1 文からデザインを始められます。作るもの（ランディングページ、モバイルアプリ、Web アプリ、スライド、ダッシュボード、その他）とサイズ（デスクトップ、タブレット、モバイル、スライド）を選び、内容を説明してください。組み込みのエージェントが新しいキャンバスに描きます。

その下のインポートカードからは、Figma ファイル、Web ページ、再現したいスクリーンショット、pen.dev ファイルを開けます。ホームが表示されているときに Cmd+N を押すと、空のファイルを作成します。

2ボードを描く

1. F を押してフレームツールを選び、キャンバス上でドラッグします。最上位のフレームはボードになり、画面、ページのセクション、スライドとして使えます。
2. R、O、T を押して、その中に長方形、楕円、テキストを追加します。
3. レイヤーを選択し、右側のパネルでサイズ、塗り、線、エフェクトを編集します。
4. ボードのオートレイアウトをオンにすると、子要素が間隔とパディング付きで積み重なります。

3保存する

Cmd+S で .de ファイルとして保存します。中身はプレーンな JSON なので、git で差分を確認しやすく、エージェントも読み取れます。画像はデフォルトで隣の <name>.assets/ フォルダーに保存されます。エージェントは、すべての画像を埋め込んだ単一ファイルとして保存することもできます。

4プレビューする

Cmd+P でプレビューを開きます。上部でスマホ、デスクトップ、キャンバスを選びます。画面としてマークしたボードは Web サイトのページのように動作し、アドレスバーや戻る・進むが使えます。

5テンプレートから始める

「ファイル」の「テンプレートから新規作成」で、組み込みのシーンテンプレート（カード、比較、スライド、インフォグラフィック、チュートリアル、カルーセル）を開けます。どのドキュメントも「ファイル」の「テンプレートとして保存」で自分のテンプレートにできます。

プロンプトセンターには、スターター画面、モバイルアプリ、Web ページ、ダッシュボード、コンポーネント、編集のための定型プロンプトが用意されています。繰り返し使うプロンプトは「マイプロンプト」に保存できます。