> ## Documentation Index > Fetch the complete documentation index at: https://docs.replit.com/llms.txt > Use this file to discover all available pages before exploring further. # 디자인 시스템 만들기 > 프롬프트로 디자인 시스템을 처음부터 만들거나, 이미 마음에 드는 목업에서 시스템을 추출한 다음 워크스페이스에 저장하세요. 브랜드가 현재 어디에 있는지에 따라 디자인 시스템을 만드는 두 가지 방법이 있습니다. ## 처음부터 만들기: 홈페이지에서 프롬프트로 생성하기 시스템이 아직 어떤 디자인으로도 만들어지지 않고 머릿속(또는 브랜드 가이드라인)에만 존재할 때 여기서 시작하세요. Replit 홈페이지의 프롬프트 입력창에 원하는 디자인 시스템을 설명하세요. 예: *"Create a design system for Velocity, a premium supercar rental brand."* 디자인 시스템 생성 프롬프트가 입력된 홈페이지 프롬프트 입력창 Agent가 브랜드 개성, 색상, 타이포그래피 선호도 등 시스템에 관한 짧은 질문 목록을 제시합니다. Figma URL, 웹사이트, 코드, 참고 이미지, 브랜드 에셋, 또는 기존 DESIGN.md 같은 소스를 지정할 수도 있습니다. ## 목업에서 시작하기: 디자인 시스템 추출하기 이미 마음에 드는 디자인(생성된 프레임이나 가져온 템플릿 등)이 있고 나머지 모든 것을 그것에 맞추고 싶을 때 여기서 시작하세요. 캔버스에서 모습을 가져오고 싶은 목업을 클릭합니다. 프레임의 **⋯**(점 세 개) 메뉴를 열고 **Extract design system**을 선택합니다. Agent가 목업의 토큰, 색상, 타이포그래피를 살아있는 스타일 가이드로 추출하고, 이를 디자인 전체에 적용합니다. 선택된 프레임의 액션 바를 클로즈업한 모습으로, 더 보기 메뉴가 열려 Apply design system과 Extract design system이 표시된 화면 ## 검토하고 저장하기 어느 방법을 택하든 생성된 결과를 검토하세요: 역할별 색상(primary, accent, muted 등), 타이포그래피 스케일, 그리고 토큰(`tokens.json`에 저장되어 CSS 변수로 반영됨)을 포함한 살아있는 스타일 가이드입니다. 이후 **Save design system**을 선택해 워크스페이스에 저장하세요. 포커스 모드에서 살아있는 스타일 가이드로 표시된 APEX X1 Design System. 색상, 폰트, 레이아웃, 컴포넌트 사이드바와 핵심 팔레트, 타입 스케일, 예시 컴포넌트가 함께 표시됨 ## 다음 단계 * [기존 앱에 적용하기](/ko/design/apply-design-system) * [디자인 시스템 안에 들어있는 것](/ko/design/design-md)