ホーム / 動画 · ✦ 公式

新しいビジュアルエディター: コードベース内で直接デザイン

Cursor · Cursor · ·2:05 ·101.6K 回視聴
新しいビジュアルエディター: コードベース内で直接デザイン

Cursor公式のビジュアルエディターデモ: 要素を選択、ドラッグ&ドロップでレイアウト変更、アライメントコントロールでdiv中央配置、デザインシステムからフォントとカラートークンをスワップ、グリッドレイアウトを調整 — エージェントが全ての変更をコードベースに直接適用します。

説明全文

Cursor 2.2で搭載されたビジュアルエディターの公式ガイド。ブラウザプレビュー内の要素選択、ドラッグ&ドロップでのレイアウト再配置、アライメントコントロールを使用したdiv中央配置、デザインシステムから取得したフォントとカラートークンのスワップ、および水平グリッドから垂直グリッドへの変換(最大幅と中央配置を含む)を実演します。ビジュアルの全ての変更がエージェントによってコードベースの実編集に変換されます。

チャプター

  1. 0:00 要素の選択
  2. 0:35 ドラッグ&ドロップレイアウト
  3. 1:10 トークン: フォントとカラー
  4. 1:40 グリッドレイアウト調整
YouTube で見る コンテンツは元の公開元サイトにあります。
Cursor でのデザインに関するファーストパーティの参考資料として、Cursor-Design コミュニティ向けに厳選しました。