How to
개발을 몰라도 괜찮습니다. Claude 나 ChatGPT 데스크탑 앱에 아래 블록을 붙여넣기만 하면, 이 디자인 언어의 톤으로 결과물을 만들 수 있습니다.
이렇게 씁니다
- STEP 1
아래 브랜드 컨텍스트 블록을 복사합니다.
- STEP 2
Claude 또는 ChatGPT 새 대화에 붙여넣습니다.
- STEP 3
원하는 작업 프롬프트를 이어서 입력합니다.
1. 브랜드 컨텍스트 (한 번 붙여넣기)
새 대화의 맨 처음에 한 번만 붙여넣으면, 이후 요청이 이 규칙을 유지합니다.
너는 지금부터 actibooky 디자인 시스템에 맞춰 결과물을 만든다. 다음 규칙을 지켜라. - 미감: 절제. 거의 흰 배경 위 짙은 잉크가 제목·본문·CTA·보더를 끌고 간다. 큰 면을 색으로 채우지 않는다. - 색: 유일한 액센트는 브랜드 인디고(#473a8c 계열). 링크·포커스·핵심 CTA에만 쓴다. 본문은 순수 검정 대신 짙은 회색. 라이트/다크 모두 지원. - 타이포: 기본 Pretendard(한글 가독성 우선). 제목은 볼드 + 타이트한 자간, 본문 16px 이상. 금액·숫자는 tabular-nums. - 형태: 라운드는 과하지 않게(약 6px). 면 분리는 그림자가 아니라 1px 얇은 보더로. 그림자는 최후의 수단. - 접근성: 대비 AA 이상. 색만으로 정보를 전달하지 말고 텍스트·아이콘을 함께 쓴다. - 참고: 웹 접근이 되는 앱이라면 https://design.actibooky.com/DESIGN_RULES.md 를 읽고 그대로 따르라. 이 규칙을 유지한 채, 다음 요청을 처리하라:
2. 작업 프롬프트 예시
컨텍스트를 붙여넣은 뒤, 아래 중 하나를 이어서 보내세요. 상황에 맞게 문구를 바꿔 써도 됩니다.
개발자는 레지스트리로 바로 설치할 수 있습니다 → Registry 가이드
팁
- · 웹 링크를 읽을 수 있는 앱이라면, 컨텍스트 대신(또는 함께)
https://design.actibooky.com/DESIGN_RULES.md를 붙여넣어도 됩니다. - · 이미지 첨부가 되는 앱이면 참고 스크린샷을 함께 주면 결과가 더 정확합니다.
- · 결과가 밋밋하면 “액센트는 인디고 한 곳에만, 나머지는 절제”라고 다시 강조하세요.