/ 튜토리얼 · ✦ 공식

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 커뮤니티를 위해 엄선했습니다.