> ## 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.

# 나만의 디자인 시스템 만들기

> 색상, 타이포그래피, 토큰을 저장된 디자인 시스템으로 추출한 다음, 기존 앱에 적용하세요.

export const Connectors = ({items}) => <div style={{
  margin: "8px 0 20px"
}}>
    <style>{`
      .connectors-list, .connectors-list * { margin-top: 0 !important; margin-bottom: 0 !important; }
      .connectors-row {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 4px 0 !important;
        min-height: 0 !important;
        height: auto !important;
      }
      .connectors-row img {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        margin: 2px 0 0 !important;
        display: block !important;
      }
    `}</style>
    <div className="connectors-list">
      {items.map((item, i) => <div key={item.id} className="connectors-row" style={{
  borderTop: i === 0 ? "none" : "1px solid rgba(130,130,130,0.22)"
}}>
          <img src={`/images/connectors/${item.id}.svg`} alt="" width={20} height={20} />
          <div style={{
  minWidth: 0
}}>
            <div>
              <strong>{item.name}</strong>
              {item.why ? <span style={{
  opacity: 0.72
}}> · {item.why}</span> : null}
            </div>
            {item.auth === "api-key" ? <div style={{
  fontSize: "11.5px",
  lineHeight: 1.35,
  color: "#F26207",
  marginTop: "2px"
}}>
                Not a native connector. Agent will ask for your API key.
              </div> : null}
          </div>
        </div>)}
    </div>
  </div>;

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

브랜드가 Drive 폴더, Figma 파일, 또는 이미 마음에 드는 디자인 하나에 담겨 있습니다. 이를
워크스페이스에 저장되는 디자인 시스템으로 바꾸세요. 역할별 색상, 타입 스케일, 토큰, 몇 가지
예시 컴포넌트가 포함됩니다. 이후 새 작업은 브랜드에 맞게 시작되고, 기존 앱도 같은 시스템으로
다시 빌드할 수 있습니다. 이미 출시한 앱에 시스템을 적용하는 것은 스타일시트를 바꾸는
정도가 아니라 실제 재빌드입니다.

## 적합한 대상

* 다음 다섯 페이지를 디자인하기 전에 단일 기준이 필요한 프로덕트 디자이너
* 앱들이 제각각이 되어 모두를 같은 룩으로 맞춰야 하는 창업자

## 커넥터

<Connectors
  items={[
{
  id: "google-drive",
  name: "Google Drive",
  why: "로고, 색상, 타이포그래피, 브랜드 가이드라인",
},
{ id: "figma", name: "Figma", why: "추출할 기존 디자인" },
]}
/>

## 시작하기 전에

브랜드를 규정하는 모든 것을 현재 어디에 있든 모아 두세요. 브랜드 파일, 마음에 드는 디자인,
웹사이트, 또는 Figma 파일 등이 해당합니다. 로고, 색상, 타이포그래피가 Drive에 저장되어
있다면 Drive를 연결하세요. Figma URL, 사이트 URL, 또는 기존 `DESIGN.md`가 있다면
준비해 두세요.

## 에이전트에게 요청하기

<AiPrompt>
  이 Google Drive 폴더 \[link]의 브랜드 파일과 이 Figma 파일 \[URL]을 바탕으로
  \[brand]의 디자인 시스템을 만들어 주세요. 역할별 팔레트, 타입 스케일, 토큰을
  추출해 주세요. 로고도 포함해 주세요.
</AiPrompt>

## 예상 결과

Agent는 제공한 소스를 [리빙 스타일 가이드](/ko/design/design-md)로 만들어 줍니다. 각각 역할이
지정된 색상, 타입 스케일, 시스템의 나머지 부분이 참조하는 토큰, 두세 개의 예시 컴포넌트,
그리고 제공한 브랜드 에셋이 포함됩니다. 내용을 검토한 다음 **디자인 시스템 저장**을 선택해
워크스페이스에 보관하세요. 이후부터 새 작업은 첫 프레임부터 브랜드에 맞게 생성됩니다.

이미 만든 앱에 시스템을 적용하려면 대상을 선택하고
[시스템을 적용](/ko/design/apply-design-system)하세요.

## 나에게 맞게 활용하기

<AiPrompt>
  버튼, 폼 필드, 내비게이션, 카드, 테이블, 빈 상태 등 더 많은 예시 컴포넌트로
  디자인 시스템을 확장해 주세요.
</AiPrompt>

<AiPrompt>
  시스템에 다크 모드를 추가해 주세요. 같은 토큰을 사용하되, 역할별로 두 번째 색상
  값 세트를 둡니다.
</AiPrompt>

## 문제 해결

<AccordionGroup>
  <Accordion title="시스템이 브랜드와 비슷해 보이지 않습니다">
    설명하는 대신 소스를 직접 지정하세요. Drive 브랜드 폴더, Figma URL, 라이브 사이트,
    `DESIGN.md` 모두 입력으로 사용할 수 있습니다.
  </Accordion>

  <Accordion title="적용이 예상보다 오래 걸립니다">
    기존 작업에 시스템을 적용하면 스타일시트를 교체하는 것이 아니라 스타일링 레이어를
    다시 생성합니다. 시작 전에 표시되는 시간 및 크레딧 경고는 정상입니다.
  </Accordion>

  <Accordion title="새 편집이 예전 스타일로 되돌아갑니다">
    이후 편집에서도 계속 시스템을 사용해야 합니다. 되돌아가는 것을 발견하면 채팅에서
    알리고 해당 화면을 지정하세요.
  </Accordion>

  <Accordion title="다른 프로젝트에서 시스템을 재사용할 수 없습니다">
    먼저 저장하세요. 저장하지 않은 스타일 가이드는 생성된 프로젝트 안에만 남습니다.
  </Accordion>
</AccordionGroup>

## 관련 문서

<CardGroup cols={2}>
  <Card title="랜딩 페이지 디자인하기" href="/ko/use-cases/design-landing-page">
    저장한 시스템을 대기자 명단 또는 출시 페이지에 활용하세요.
  </Card>

  <Card title="기존 웹사이트 리디자인하기" href="/ko/use-cases/redesign-your-website">
    이미 가지고 있는 사이트에서 시스템을 추출하세요.
  </Card>
</CardGroup>