ホーム / チュートリアル · ✦ 公式

Cursor ブラウザビジュアルエディタ — ライブアプリ向けデザインモード

Cursor Team · Cursor Blog ·

Cursor の公式ビジュアルエディタは、ブラウザ内プレビューをデザインサーフェスに変換します。DOM全体のドラッグ&ドロップレイアウト編集、スペーシング・色・タイポグラフィ・デザイントークン対応の Figma スタイルインスペクタ、React 状態トグル、そしてエージェントが実コードにコミットするポイント・アンド・プロンプトフローを備えています。

パブリッシャー概要

The visual editor brings web app, codebase, and visual editing into one window — edit your live app directly, then let the agent persist the changes as real, reviewable code.

この記事の内容

  • Drag-and-drop layout editing across the DOM tree
  • Visual style controls: spacing, color, typography, shadows, radius
  • Design tokens and design-system integration
  • React component state testing (loading, error, disabled)
  • Point and prompt: describe a change in natural language
  • The Apply step: client-side overrides become real code

Source: Cursor Blog

原文を読む コンテンツは元の公開元サイトにあります。
Cursor でのデザインに関するファーストパーティの参考資料として、Cursor-Design コミュニティ向けに厳選しました。