How to

개발을 몰라도 괜찮습니다. Claude ChatGPT 데스크탑 앱에 아래 블록을 붙여넣기만 하면, 이 디자인 언어의 톤으로 결과물을 만들 수 있습니다.

이렇게 씁니다

  1. STEP 1

    아래 브랜드 컨텍스트 블록을 복사합니다.

  2. STEP 2

    Claude 또는 ChatGPT 새 대화에 붙여넣습니다.

  3. STEP 3

    원하는 작업 프롬프트를 이어서 입력합니다.

1. 브랜드 컨텍스트 (한 번 붙여넣기)

새 대화의 맨 처음에 한 번만 붙여넣으면, 이후 요청이 이 규칙을 유지합니다.

너는 지금부터 actibooky 디자인 시스템에 맞춰 결과물을 만든다. 다음 규칙을 지켜라.
- 미감: 절제. 거의 흰 배경 위 짙은 잉크가 제목·본문·CTA·보더를 끌고 간다. 큰 면을 색으로 채우지 않는다.
- 색: 유일한 액센트는 브랜드 인디고(#473a8c 계열). 링크·포커스·핵심 CTA에만 쓴다. 본문은 순수 검정 대신 짙은 회색. 라이트/다크 모두 지원.
- 타이포: 기본 Pretendard(한글 가독성 우선). 제목은 볼드 + 타이트한 자간, 본문 16px 이상. 금액·숫자는 tabular-nums.
- 형태: 라운드는 과하지 않게(약 6px). 면 분리는 그림자가 아니라 1px 얇은 보더로. 그림자는 최후의 수단.
- 접근성: 대비 AA 이상. 색만으로 정보를 전달하지 말고 텍스트·아이콘을 함께 쓴다.
- 참고: 웹 접근이 되는 앱이라면 https://design.actibooky.com/DESIGN_RULES.md 를 읽고 그대로 따르라.
이 규칙을 유지한 채, 다음 요청을 처리하라:

2. 작업 프롬프트 예시

컨텍스트를 붙여넣은 뒤, 아래 중 하나를 이어서 보내세요. 상황에 맞게 문구를 바꿔 써도 됩니다.

화면·페이지 HTML 목업
위 규칙을 지켜서, 고객 온보딩 첫 화면을 단일 HTML 파일로 만들어줘. 스타일은 인라인 CSS로, 라이트·다크 둘 다 되게. 구성은 히어로(제목 + 한 줄 설명) + 3단계 안내 + 핵심 CTA 버튼 하나.
마케팅 카피·문구
위 브랜드 톤으로, 신규 기능 출시를 알리는 이메일 제목 5개와 본문 한 단락을 써줘. 과장 없이 담백하게, 핵심 가치를 먼저 말하도록.
색·토큰 리디자인 제안
첨부한 화면을 우리 브랜드 규칙(절제 · 인디고 액센트 · 1px 보더 · AA 대비)에 맞게 어떻게 고치면 좋을지 제안해줘. 바꿀 색·간격·폰트·버튼 스타일을 항목별로 구체적으로.
레지스트리 설치 (개발자)
actibooky 디자인 시스템을 shadcn 레지스트리로 쓰고 싶어. `npx shadcn add @actibooky/theme` 부터 시작하는 설치 절차와, 버튼·카드를 쓰는 예시 코드를 알려줘.

개발자는 레지스트리로 바로 설치할 수 있습니다 → Registry 가이드

  • · 웹 링크를 읽을 수 있는 앱이라면, 컨텍스트 대신(또는 함께) https://design.actibooky.com/DESIGN_RULES.md 를 붙여넣어도 됩니다.
  • · 이미지 첨부가 되는 앱이면 참고 스크린샷을 함께 주면 결과가 더 정확합니다.
  • · 결과가 밋밋하면 “액센트는 인디고 한 곳에만, 나머지는 절제”라고 다시 강조하세요.