---
name: buwang-design
description: 부왕(BUWANG) 디자인 시스템 — 정비소 웹(React+AntD), 정비사 앱(Flutter), 라이더 앱(Flutter V1/V2)의 토큰·공용 컴포넌트 가이드. 부왕 화면/컴포넌트를 만들거나 수정할 때, 색·간격·타이포 값을 정할 때, "부왕 스타일로" 라는 요청이 있을 때 자동으로 사용한다.
---

# BUWANG 디자인 시스템 스킬

이 스킬은 https://design.buwang.co.kr 의 기계용 데이터를 **매번 최신으로 fetch** 해서 쓴다. 값을 외우거나 추측하지 말 것 — 각 앱 코드에서 추출한 현재 값이 정본이다.

## 1. 먼저 플랫폼을 확정한다
- `web` — 정비소 웹 `apps/admin-web` (React 19, Vite, Ant Design, CSS 변수 `--color-*` + `src/styles/tokens.ts`)
- `mechanic` — 정비사 앱 `apps/mobile` (Flutter, `AppColors` / `AppTypography` / `AppSpacing`, 공용 위젯 `Bw*`)
- `rider` — 라이더 앱 `apps/rider` (Flutter, V1 `AppColors`·V2 `AppColorsV2` 공존 — 새 화면은 V2 우선)
요청에 플랫폼이 없으면 한 번 물어보거나, 파일 경로(`apps/…`)로 판단한다.

## 2. 데이터를 읽는다 (순서대로, 필요한 만큼만)
1. `https://design.buwang.co.kr/llms.txt` — 사용 규칙 + 플랫폼별 컴포넌트 색인. **항상 먼저 읽는다.**
2. `https://design.buwang.co.kr/data/components.json` — 컴포넌트별 `variants`, `props`, `tokens`, `sizes`(코드 규격), `file`(레포 경로), `usage_count`
3. `https://design.buwang.co.kr/data/tokens.json` — `platforms.web` / `platforms.mechanic` / `platforms.rider-v1` / `platforms.rider-v2` 의 `colors`·`typography`·`spacing`·`radii`
4. 더 필요하면 `https://design.buwang.co.kr/llms-full.txt` (전체 마크다운)

WebFetch 가 없거나 실패하면 레포에 체크아웃된 `apps/design-site/public/llms.txt` 와 `apps/design-site/public/data/*.json` 을 읽는다.

## 3. 만들 때 규칙
- **기존 컴포넌트 우선**: 색인에 같은 역할의 컴포넌트가 있으면 새로 만들지 말고 그것을 쓴다. `file` 경로를 열어 실제 시그니처를 확인한 뒤 import 한다(경로 추측 금지).
- **토큰 이름으로 참조**: hex·px 리터럴 대신 토큰 이름(`--color-primary`, `AppColors.brandPrimary`, `AppSpacing.md`, `AppTypographyV2.cardTitle` 등)을 쓴다. 토큰에 없는 값이 정말 필요하면 그 사실을 한 줄로 밝힌다.
- **플랫폼 값은 서로 다르다**: 웹 primary `#1E88E5`, 정비사 `#1F62C9`, 라이더 V1 `#005792` 처럼 앱마다 다르다. 다른 앱의 값을 섞지 않는다.
- **눌림·상태**: 정비사/라이더 앱은 `BwPressable` 등 공용 인터랙션 래퍼와 `BwConfirmDialog`·`BwPromptDialog` 규약을 따른다(components.json 의 `notes` 참고).
- **스코프**: 디자인 시스템 데이터는 참고용이다. 요청받지 않은 기존 컴포넌트 리팩터링·"통일" 작업을 끼워 넣지 않는다.

## 4. 답변에 남길 것
- 어떤 컴포넌트·토큰을 재사용했는지 이름과 파일 경로를 한 줄씩.
- 토큰에 없는 값을 새로 만들었으면 그 목록(사용자가 디자인 시스템에 추가할지 판단할 수 있게).