Actions
이슈 #388
완료됨
JK
JK
이슈 #382: 디자인 시스템 구축을 위한 가이드라인 작성
Phase 5 — AI Consumption Layer 설계 및 변환 포맷 구축
이슈 #388:
Phase 5 — AI Consumption Layer 설계 및 변환 포맷 구축
설명
작업 내용¶
- AI 에이전트가 읽기 좋은 구조화 포맷(YAML/JSON/MDX) 설계
- Phase 1~4 산출물을 AI 참조용으로 변환·인덱싱하는 규칙 수립
- 프롬프트 주입용 컨텍스트 조각(snippet) 템플릿 정의
테스트환경 구축¶
alphea-test/
├── design-system/ Phase 1-3.5 artifacts (read-only source of truth)
│ ├── alphea-design-tokens.json
│ ├── tokens.css Compiled CSS variables
│ ├── utilities.css Typography utility classes
│ ├── components.css All 14 component styles
│ └── components/ Markdown specs for each component
├── phase5/ Phase 5 documents
│ ├── ir-schema.md IR contract
│ ├── system-prompt.md What we inject into the AI
│ └── renderer.md Renderer behavior spec
├── renderer/ Option B — deterministic IR-to-HTML
│ ├── src/
│ │ ├── index.js Entry point
│ │ ├── validator.js IR validation
│ │ ├── blocks.js Per-block rendering
│ │ ├── templates.js HTML document assembly
│ │ └── icons.js Lucide icon registry
│ └── examples/
│ ├── home.json 5-screen travel app (gold standard 1)
│ └── detail.json App with drill-down detail (gold standard 2)
└── ai-test/ Option A — AI generation → render
├── generate.js Calls Claude API, saves IR, invokes renderer
└── .env.example Template for API key
의존성 / 참고¶
- 부모 이슈: #382
- Phase 1~4 산출물 선행
Actions