design

design skill

목적

/ait:design 한 번으로 미니앱 화면을 만들고 고친다. 화면이 하나도 없는 프로젝트에서 처음부터 그려 내고, 이미 있는 화면은 진단에서 멈추지 않고 하드 규칙 위반을 직접 해소한다. 등록용 이미지 자산 산출도 같은 명령이 맡는다.

화면 만들기·고치기 — 하드 규칙 위반 직접 수정, 품질 채점, 등록용 이미지 자산(Figma는 선택)

(이 skill을 한 줄로 소개할 때의 정본 문구다. README·hand-off는 이 문장을 그대로 쓰고, 영어판은 packages/agent-plugin/README.en.md에 있다.)

이 skill이 하는 일은 넷이다:

1. 화면을 그린다 — 요청을 화면 명세로 옮기고, 문서로 고정된 렌더 규칙 (references/render-rules.md)에 따라 프로젝트의 실제 화면 파일에 반영한다. 규칙은 3층이다: 1층 하드(차단 — 어기면 완료가 아니고 design이 직접 해소), 2층 권장(목록으로만), 3층 자유(제작자의 몫 — 판정하지 않는다).
2. 화면을 판정한다 — 브랜드 안전·컨테이너 적합성·토큰 일관성·화면 구조· 상태 완전성·카피·렌더 무결성·다크패턴을 화면별로 채점한다. 기준은 references/quality-bar.md에 항목별 등급(차단·권장)과 함께 고정돼 있고, 근거가 공식 문서에 있어야 하는 항목은 docs MCP로 조회해 확인한다.
3. 차단 항목을 해소한다 — 판정에 차단 등급이 남으면 진단 목록으로 넘기지 않고 렌더 단계로 돌아가 고친 뒤 같은 항목을 재판정한다.
4. 등록 이미지 자산을 정확한 규격으로 산출한다 — 콘솔 등록(console MCP miniapp_create)이 소비하는 ./assets/의 PNG들(logo·thumbnail·세로 스크린샷 등)을 등록이 검증하는 것과 동일한 규격에 맞춘다. 로고 등 이 자산은 번들 업로드·토스 앱 QR 테스트에는 필요 없고, 검토 요청 (출시) 전까지 채우면 된다(공식 문서 /guide/operation/console-workspace 4·5절). 자산이 없다고 /ait:test-on-device를 미루게 하지 않는다.

기본 토큰·타입 스케일은 중립 기본값이다. 토스 디자인 시스템(TDS) 호환이나 디자인 인증을 뜻하지 않으며, 프로젝트가 자체 값을 정했으면(Figma에서 읽어 온 토큰 포함) 그쪽이 우선한다. TDS를 모사·의존하도록 권하지도 않는다 — 디자인 자유도를 묶고, 실제 값을 모른 채 "TDS 호환"을 추측하게 만들기 때문이다.

이 skill은 harness의 디자인 station(station 8)이다. 완료되면 요청한 화면이 실제 파일로 있고 1층 하드 규칙 위반이 0이다. 화면별 판정(G0~G8)은 점검을 요청받았거나 사용자가 물었을 때 고정 형식으로 낸다. 규칙은 화면 코드를 쓸 때 조용히 적용하고, 사용자에게는 결과와 결정할 것만 말한다. 자산을 요청했으면 ./assets/의 PNG도 등록 규격에 맞아 곧바로 콘솔 등록·검토 요청으로 넘어갈 수 있다(실기기 확인 /ait:test-on-device은 자산 없이도 된다). 산출물과 안내에 과장·홍보성 문구를 넣지 않는다.

토스 브랜드·UI 모방 금지

미니앱은 토스 앱 WebView 안에서 실행되지만 토스가 아니다 — design이 산출하는 화면·자산이 토스 브랜드나 토스 앱 자체의 UI를 모방하면 품질 문제가 아니라 브랜드·IP 리스크다(2026-08-07 도그푸딩에서 "시키다 보니 토스 로그인 화면처럼 되어버림" 사례가 관측됐다).

금지 목록 (design이 산출하는 화면·자산 어디에도 적용):

• ❌ 토스 로고·워드마크(어떤 형태의 변형·재구성도 포함)를 미니앱 아이콘· 화면·등록 자산에 사용.
• ❌ 토스 브랜드 컬러(토스 블루 계열, 예: #0064FF)를 미니앱의 primary 색상으로 채택. 위 TDS 절처럼 사실 참조로 언급하는 것과, 실제 화면 색상값으로 그대로 채택하는 것은 다르다 — 후자를 금지한다.
• ❌ 토스 앱 자체의 화면 레이아웃·UI 패턴을 복제 — 특히 토스 로그인/인증 화면의 구성(문구·배치·인터랙션)을 그대로 흉내 내는 것. 미니앱에 로그인/인증 화면이 있어도(plan skill의 auth 도메인 참조) 토스 로그인 화면과 시각적으로 구별돼야 한다.
• ❌ "토스" 상호를 미니앱 이름·화면 타이틀·브랜딩 문구에 사용해 미니앱 자체를 토스의 공식 제품처럼 표방하는 것. (SDK가 실제로 제공하는 기능을 사실 그대로 안내하는 문구 — 예: "토스 로그인으로 시작하기" 버튼 라벨 — 는 이 금지에 해당하지 않는다.)
• ❌ 토스 전용 본문 서체(Toss Product Sans 계열)를 미니앱에 쓰는 것. font-family에 이름으로 지정하거나, 웹폰트로 불러오거나, 폰트 파일을 번들·자산에 넣지 않는다. 어딘가에서 파일을 구할 수 있더라도 쓰지 않는다 — 공개 배포되는 서체가 아니라는 것이 곧 사용 권한이 없다는 뜻이다. (이모지 서체 Tossface는 이 금지에 해당하지 않는다 — 아래 대안 참조. 본문 서체와 이모지 서체는 공개 여부가 다르다.)