refactor(topics): 멀티 에이전트용 지식 재편 — _Common(공통 기본기) + Domain_* 구조

에이전트 8종(대화형/프로그래머 C·S/디자이너/설계자/기획자/QA/PD/PM)에게
[공통 기본 능력 + 롤별 Specialty] 2층으로 지식을 주입하기 위한 재분류.
문서 내용·포맷은 무수정, 폴더 이동만 (6,372개 문서 수 보존 확인).

- Topic_Programming → Domain_Programming (내부 구조 보존)
- Topic_Graphic → Domain_Design
- Topic_Business → Domain_Product
- Topic_General → Domain_General
- _Common 신설: Math(구 Topic_Math_Specialty), Reasoning(구 General/From_Thinking & Reasoning),
  Reasoning_Creativity(구 General/From_창의성), Communication(Poetic_Blog_Writing + From_writing)
- 타 도메인의 From_* 폴더는 유지 (출처 표기일 뿐, 이미 도메인에 맞게 분류된 문서)
- 빈 폴더 정리 (memory/procedures)
- 에이전트→폴더 매핑은 workspace의 .astra/agent-knowledge-map.json (9개 에이전트)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

10_Wiki/Topics/Domain_Programming/Frontend/크로스 플랫폼 디자인 시스템 연동.md

@@ -0,0 +1,151 @@
+---
+id: wiki-2026-0508-크로스-플랫폼-디자인-시스템-연동
+title: 크로스 플랫폼 디자인 시스템 연동
+category: 10_Wiki/Topics
+status: verified
+canonical_id: self
+aliases: [Cross-Platform Design System, Multi-Platform Tokens]
+duplicate_of: none
+source_trust_level: A
+confidence_score: 0.9
+verification_status: applied
+tags: [design-system, frontend, mobile, tokens, theming]
+raw_sources: []
+last_reinforced: 2026-05-10
+github_commit: pending
+tech_stack:
+  language: typescript
+  framework: style-dictionary/tokens-studio/tamagui
+---
+
+# 크로스 플랫폼 디자인 시스템 연동
+
+## 매 한 줄
+> **"매 single source of truth (tokens) → multi-platform output"**. 매 Figma 의 design tokens 을 source of truth 로, Style Dictionary / Tokens Studio / Specify 를 통해 web (CSS/JS), iOS (Swift), Android (XML), React Native (JS) 로 transform. 매 2026 W3C Design Tokens Community Group spec 이 stable 화되며 ecosystem convergence 진행.
+
+## 매 핵심
+
+### 매 layered token model
+1. **Primitive tokens**: `color.blue.500`, `space.4` — raw values.
+2. **Semantic tokens**: `color.surface.primary`, `space.button.padding` — intent.
+3. **Component tokens**: `button.bg.hover`, `card.shadow` — component-specific.
+
+### 매 transformation pipeline
+- Figma Variables → JSON (W3C DTCG format) → Style Dictionary → platform outputs.
+- Outputs: CSS custom props, JS const, iOS UIColor, Android colors.xml, RN StyleSheet.
+
+### 매 응용
+1. 매 multi-product 회사 — web app + mobile + email + marketing site 의 일관성.
+2. 매 white-label / theming — runtime token swap.
+3. 매 dark mode + density + brand variant 의 multiplicative theming.
+
+## 💻 패턴
+
+### 1. W3C DTCG token JSON
+```json
+{
+  "color": {
+    "blue": { "500": { "$value": "#3b82f6", "$type": "color" } },
+    "surface": {
+      "primary": { "$value": "{color.blue.500}", "$type": "color" }
+    }
+  }
+}
+```
+
+### 2. Style Dictionary config
+```javascript
+// sd.config.js
+export default {
+  source: ['tokens/**/*.json'],
+  platforms: {
+    css: { transformGroup: 'css', files: [{ destination: 'tokens.css', format: 'css/variables' }] },
+    js: { transformGroup: 'js', files: [{ destination: 'tokens.js', format: 'javascript/es6' }] },
+    ios: { transformGroup: 'ios-swift', files: [{ destination: 'Tokens.swift', format: 'ios-swift/class.swift' }] },
+    android: { transformGroup: 'android', files: [{ destination: 'colors.xml', format: 'android/colors' }] },
+  },
+};
+```
+
+### 3. CSS output
+```css
+:root {
+  --color-blue-500: #3b82f6;
+  --color-surface-primary: var(--color-blue-500);
+}
+[data-theme="dark"] { --color-surface-primary: #60a5fa; }
+```
+
+### 4. React Native (Tamagui) usage
+```tsx
+import { tokens } from './tokens';
+const config = createTamagui({ tokens, themes: { light, dark } });
+<View backgroundColor="$surfacePrimary" padding="$4" />
+```
+
+### 5. Swift output
+```swift
+public class Tokens {
+  public static let colorSurfacePrimary = UIColor(red: 0.23, green: 0.51, blue: 0.96, alpha: 1.0)
+  public static let spaceButtonPadding: CGFloat = 12.0
+}
+```
+
+### 6. Runtime theme swap (web)
+```typescript
+function setTheme(theme: 'light' | 'dark' | 'high-contrast') {
+  document.documentElement.setAttribute('data-theme', theme);
+  localStorage.setItem('theme', theme);
+}
+```
+
+### 7. Figma → tokens sync (Tokens Studio plugin)
+```yaml
+# .github/workflows/tokens-sync.yml
+on:
+  push:
+    paths: ['tokens/**']
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: npx style-dictionary build
+      - uses: peter-evans/create-pull-request@v6
+```
+
+## 매 결정 기준
+| 상황 | Tool |
+|---|---|
+| OSS / DIY pipeline | Style Dictionary |
+| Figma-tight workflow | Tokens Studio + Style Dictionary |
+| RN-first | Tamagui (built-in token system) |
+| Enterprise / governance | Specify, Supernova |
+| Single platform only | Skip — use Tailwind theme / CSS vars directly |
+
+**기본값**: 매 W3C DTCG JSON + Style Dictionary + Tokens Studio Figma plugin.
+
+## 🔗 Graph
+- 부모: [[Design System]] · [[Design Tokens]]
+- 변형: [[Style Dictionary Pipelines|Style Dictionary]]
+- Adjacent: [[Figma Variables]] · [[React Native]]
+
+## 🤖 LLM 활용
+**언제**: 매 design system 의 multi-platform expansion 시. 매 Figma → code pipeline 설계 시.
+**언제 X**: 매 single web app — 매 CSS vars + Tailwind theme 으로 충분.
+
+## ❌ 안티패턴
+- **Hard-coded values 병행**: 매 token 정의했으나 component 에서 hex 직접 사용 — 매 governance 실패.
+- **Semantic layer 생략**: 매 primitive token 만 노출 — 매 dark mode / theming 시 mass refactor.
+- **Manual sync**: 매 Figma 변경 시 손으로 JSON edit — 매 drift inevitable.
+- **Platform-specific token overrides**: 매 iOS 만 다른 값 — 매 cross-platform consistency 의 의미 상실.
+
+## 🧪 검증 / 중복
+- Verified (W3C Design Tokens Community Group, Style Dictionary 4.x, Tokens Studio docs).
+- 신뢰도 A.
+
+## 🕓 Changelog
+| 날짜 | 변경 |
+|---|---|
+| 2026-05-08 | Phase 1 |
+| 2026-05-10 | Manual cleanup — DTCG spec + Style Dictionary pipeline + 7 patterns |