> ## 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이 일관된 시각적 작업을 만들도록 하고 싶을 때, 저장된 디자인 시스템을 색상, 타이포그래피, 간격, 컴포넌트의 컨텍스트로 사용하세요.
export const DesignSystemCover = () =>
{[0, 1, 2, 3].map(swatch => )}
{["78%", "56%", "88%"].map((width, index) => )}
{[0, 1, 2, 3].map(component => )}
{[0, 1, 2].map(node => )}
{[0, 1, 2].map(dot => )}
;
디자인 시스템은 Replit에 재사용 가능한 시각적 방향을 제공합니다. 색상 토큰, 타이포그래피,
간격, 예시 컴포넌트, 로고, 브랜드 자산을 담아 새 디자인이 일관되게 유지되도록 할 수 있습니다.
저장된 시스템이 만들고자 하는 결과물을 안내해야 할 때는 프롬프트 박스에서 **plus** 메뉴를
선택한 다음 **Use a design system**을 선택하세요.
## 디자인 시스템이 유용한 경우
* **일관되게 만들기:** 새 작업 전반에서 색상, 타이포그래피, 간격, 컴포넌트를 일치시킵니다.
* **팀에 공유된 방향 제공하기:** 여러 Project에서 하나의 저장된 시스템을 시각적 참고 자료로
사용합니다.
* **기존 작업 재구성하기:** 아티팩트가 다른 시각적 언어를 따라야 할 때 시스템을 적용합니다.
저장된 시스템의 이름과 원하는 결과를 지정하세요. 해당 소스가 작업이 달성해야 할 내용을
정의할 때는 브리프, Figma 프레임, 스크린샷, 콘텐츠 요구 사항 같은 다른 관련 컨텍스트도
추가하세요.
예를 들면: "저장된 Acme 디자인 시스템을 사용해서 모바일 온보딩 화면을 만들어 주세요. 기존
타입 스케일과 버튼 스타일을 유지하고, 두 가지 레이아웃 방향을 보여주세요."
디자인 시스템은 시각적 작업의 방향을 정합니다. [Skill](/ko/chat/agent-skills)은 작업을 위한
재사용 가능한 지시나 접근 방식을 제공합니다.
## Design에서 디자인 시스템 워크플로 따르기
Design 가이드는 시스템에 포함되는 내용, 시스템을 만들거나 추출하는 방법, 기존 작업에
적용하는 방법을 설명합니다.
기존 작업에는 [디자인 시스템 적용하기](/ko/design/apply-design-system)를 따르세요.
프로젝트 컨텍스트와 시각적 방향이 준비되었다면, 이미지, 오디오, 비디오, SVG 같은
[에셋을 만드는 방법](/ko/chat/create-assets)을 살펴보세요.
## Design에서 디자인 시스템 워크플로 따르기
Design 가이드는 시스템에 포함되는 내용, 시스템을 만들거나 추출하는 방법, 기존 작업에
적용하는 방법을 설명합니다.