@portlogics/design-mcp
v0.2.2
Published
Portlogics Design System MCP 서버 — AI 에이전트가 디자인 토큰에 구조화된 방식으로 접근합니다
Readme
@portlogics/design-mcp
Portlogics Design System MCP 서버 — AI 에이전트가 디자인 토큰과 컴포넌트 스펙에 구조화된 방식으로 접근할 수 있게 합니다.
설치
claude mcp add portlogics-design -- npx @portlogics/design-mcp또는 다른 MCP 클라이언트에서:
npx @portlogics/design-mcp제공 도구
| 도구 | 설명 |
|------|------|
| get_design_system | DESIGN.md 전체 내용 반환 |
| get_color_palette | 색상 팔레트 토큰(Primary, Accent, Neutral, Semantic) 구조화 반환 |
| get_component_spec | 특정 컴포넌트 스타일링 스펙 반환 (Button, Input, Table, Card, Badge, Modal) |
| validate_color | 색상값이 팔레트 토큰인지 검증. oklch() 및 #hex 지원. 불일치 시 가장 가까운 토큰 3개 제안 |
| find_token | 의미(용도)로 토큰 검색. 한국어/영어 모두 지원 (예: 'error', '배경', 'hover') |
| audit_component | 컴포넌트 코드 감사 — 하드코딩 색상·비팔레트 oklch·px 폰트·누락 인터랙션 상태 탐지 |
사용 예시
# 에러 상태에 쓸 색상 토큰 찾기
find_token: "error"
# 임의 색상값 검증
validate_color: "#2878FF"
validate_color: "oklch(0.604 0.215 260.5)"
# 컴포넌트 코드 감사
audit_component: "<Button className='bg-[#FF0000]'>..." />라이선스
MIT © Portlogics