처음부터 만들기: 홈페이지에서 프롬프트로 생성하기
시스템이 아직 어떤 디자인으로도 만들어지지 않고 머릿속(또는 브랜드 가이드라인)에만 존재할 때 여기서 시작하세요.1
생성 입력창에서 요청하기
Replit 홈페이지의 프롬프트 입력창에 원하는 디자인 시스템을 설명하세요. 예: “Create a design system for Velocity, a premium supercar rental brand.”
2
질문에 답하기
Agent가 브랜드 개성, 색상, 타이포그래피 선호도 등 시스템에 관한 짧은 질문 목록을 제시합니다. Figma URL, 웹사이트, 코드, 참고 이미지, 브랜드 에셋, 또는 기존 DESIGN.md 같은 소스를 지정할 수도 있습니다.
목업에서 시작하기: 디자인 시스템 추출하기
이미 마음에 드는 디자인(생성된 프레임이나 가져온 템플릿 등)이 있고 나머지 모든 것을 그것에 맞추고 싶을 때 여기서 시작하세요.1
목업 선택하기
캔버스에서 모습을 가져오고 싶은 목업을 클릭합니다.
2
점 세 개 메뉴에서 추출하기
프레임의 ⋯(점 세 개) 메뉴를 열고 Extract design system을 선택합니다. Agent가 목업의 토큰, 색상, 타이포그래피를 살아있는 스타일 가이드로 추출하고, 이를 디자인 전체에 적용합니다.
검토하고 저장하기
어느 방법을 택하든 생성된 결과를 검토하세요: 역할별 색상(primary, accent, muted 등), 타이포그래피 스케일, 그리고 토큰(tokens.json에 저장되어 CSS 변수로 반영됨)을 포함한 살아있는 스타일 가이드입니다. 이후 Save design system을 선택해 워크스페이스에 저장하세요.
