새로 시작하거나 기존 디자인 가져오기
Replit Design에서 시작하거나, 워크스페이스 홈의 생성 입력창 아래에서 Design을 선택하세요. 시작하는 네 가지 방법:- 프롬프트: 원하는 것을 설명하고 첫 프레임을 생성하세요.
- 템플릿: 미리 만들어진 랜딩 페이지, 포스터, 소셜 게시물, 모바일 화면, 프로토타입에서 시작한 다음 리믹스하세요.
- 가져오기: Figma나 Claude에서 디자인을 가져오거나, URL이나 스크린샷으로 사이트를 재현하세요.
- 디자인 시스템: 저장된 시스템에서 시작하여 첫 프레임부터 온브랜드로 만드세요.
Replit Design 홈: 프롬프트, 가져오기, 또는 템플릿에서 시작하세요.
다양한 변형 살펴보기
결정하기 전에 폭넓게 살펴보세요. 모든 결과는 새 프레임으로 나타나므로 방향을 잃지 않습니다.- 제안: 프레임을 선택하면 Replit Design이 다음에 시도할 것을 제안합니다. 클릭 한 번이면 됩니다.
- 다른 모델: Design 뒤에서 작동하는 모델을 전환하고 같은 브리프를 보내 완전히 다른 방향을 얻으세요.
제안은 선택된 프레임 옆에 나타나며, 클릭 한 번이면 됩니다.
다듬기
자연스럽게 느껴지는 방식으로 결과물을 다듬으세요:- 채팅: 전체 보드나 한 번에 하나의 프레임에 대해 여러분만의 표현으로 Agent에게 브리핑하세요.
- Visual Editor: 어떤 요소든 클릭해서 텍스트, 색상, 간격, 이미지를 직접 조정하세요. 간단한 편집은 크레딧을 소모하지 않고 즉시 소스 코드에 적용됩니다.
- 그리기: 문제가 되는 부분에 동그라미를 치고, 의미하는 요소에 화살표를 그리고, 스티키 노트를 남기세요. Agent가 마크업을 읽습니다.
- 에셋 생성: 프로젝트의 외관에 맞도록 참조 자료를 첨부하여 디자인에 필요한 이미지, 동영상 클립, 벡터 그래픽을 만드세요.
네 가지 다듬기 입력 중 하나: 선택된 요소에서 열린 Visual Editor.
빌드하기
프레임이 준비되면 Agent에게 넘기세요. 여기서 디자인은 단순한 그림이 아니라 실제 소프트웨어의 사양입니다.- 디자인 빌드하기: 프레임을 새로운 작동하는 앱으로 전환하세요.
- 기존 앱 재스타일링: 이미 가지고 있는 앱에 프레임의 외관을 적용하세요.
선택된 프레임의 액션 바에 있는 Build 액션.
디자인 프레임에서 새 앱을 빌드하려면 Core 또는 Pro가 필요합니다. 그 외의 모든 Design 기능은 모든 플랜에서 사용할 수 있습니다. 플랜 세부 정보는 Billing을 참조하세요.
확장하기
다음 디자인을 이전보다 더 빠르게 만드세요:- 디자인 시스템 만들기: 마음에 드는 디자인에서 색상, 타이포그래피, 토큰, 컴포넌트를 추출하거나 처음부터 프롬프트로 만드세요.
- 거기서부터 새 작업 시작: 새 아티팩트가 첫 프레임부터 온브랜드로 생성됩니다.
- 기존 앱을 시스템에 편입: 이미 가지고 있는 앱의 스타일을 다시 만들어 모든 것이 일치하도록 하세요.
- 시스템 전환: 프로젝트별로 시스템을 선택하거나 변경하세요.
살아있는 스타일 가이드로 렌더링된 저장된 디자인 시스템.
Design과 Build 중 언제 시작할지
Design과 Build는 같은 프로젝트로 들어가는 두 가지 진입점입니다. Build는 Agent가 소프트웨어를 작동시키는 곳이고, Design은 외관을 만드는 곳입니다. 디자인한 내용은 디자인 도구에 갇히지 않습니다.- 외관이 가장 어려운 부분일 때는 Design에서 시작하세요: 먼저 방향을 탐색하고 승자를 빌드하세요.
- 동작이 가장 어려운 부분일 때는 Build에서 시작하세요: 먼저 작동하게 만들고 Replit Design에서 다시 스타일링하세요.
다음 단계
Design your first screen
프롬프트로 첫 디자인 프레임을 생성하세요. 디자인 경험이 필요하지 않습니다.