디자인 및 코드 명명 일치화

요청하신 개념 **‘디자인 및 코드 명명 일치화’**에 대한 위키 노트를 모든 작성 원칙과 템플릿 구조 및 사용자 규칙(No-Ask Policy)에 맞춰 자율적으로 생성을 완료하였습니다.

작성된 위키 노트 정보

• 노트 파일 경로: llm-wiki/wiki/디자인 및 코드 명명 일치화.md
• 구분(type): workflow
• 태그(tags): llm, agent, design-system, figma, code, workflow, naming-convention

주요 포함 내용 요약

1. 한 줄 정의 및 핵심 요지:
   • 디자이너와 개발자 간 ‘명명 불일치(Naming divergence)‘로 인해 발생하는 번역 비용 및 전달(Handoff) 오류 제거.
   • 단일 명명 규칙 수립을 통한 디자인-개발 공동 소유권 및 파트너십 형성.
2. 상세 기술 내용:
   • 명명 불일치가 초래하는 디자인 검토 지연, 상태 오작동 버그, 조직적 파편화 문제 분석.
   • 슬래시 기반 계층 구조(Component / Type / Variant)와 코드 프롭(Prop)/타입 정의 간 1:1 매핑 원칙 정리.
   • 상위 20대 컴포넌트 전수 조사 및 표준 명명 규칙 합의 4단계 워크플로우 명시.
3. 구체적인 코드 예시 및 활용 시나리오:
   • TypeScript/React 인터페이스(ButtonProps)와 Figma 컴포넌트 변형 속성(Variant Properties) 간의 1:1 명명 매핑 코드/설정 구조 예시 포함.
   • LLM AI 에이전트(예: Antigravity Agent, Claude Code 등)가 Figma API 파싱 후 추가 프롬프트 매핑 없이 즉시 정교한 TSX 코드 컴포넌트를 생성하는 자동화 Handoff 시나리오 제시.
4. 출처 표기 및 관련 노트 연동:
   • 수치 및 소스 언급 문장에 (raw/10 Figma Component Structures Used by the World’s Best Design Teams.md) 표기 적용.
   • [[슬래시 기반 명명 규칙]], [[토큰 우선 원칙]], [[디자인 시스템 우선 접근 방식]], [[베이스 컴포넌트 및 배리언트 아키텍처]] 등 기존 지식 개념 4개 이상 상호 연동 완료.