도움말/에이전트 연동
자산 스펙(spec) 읽는 법
각 자산에는 프롬프트에 그대로 넣을 수 있는 실측 스펙이 붙어 있습니다.
AI에게 "이 템플릿처럼 만들어 줘"라고만 하면 결과가 매번 달라집니다. DesignSkill은 자산의 골격을 소스에서 기계적으로 추출해 spec 필드로 제공합니다. 사람이 쓴 감상이 아니라 실제 마크업에서 센 값이라, 프롬프트에 넣으면 재현성이 올라갑니다.
템플릿 spec
| 필드 | 내용 |
|---|---|
| sections / sections_en | 실제 섹션 순서 (헤더 → 히어로 → … → 푸터) |
| layout.header | sticky · overlay · static 중 하나 |
| layout.container | 골격 컨테이너 폭 (max-w-6xl 등) |
| layout.radius | 가장 많이 쓰인 라운딩 |
| layout.section_padding | 섹션 세로 여백 기조 |
| layout.grid_gap | 그리드 간격 기조 |
| layout.dark_sections | 다크 배경 사용 횟수 |
| layout.serif_headings | 제목에 세리프를 쓰는지 |
컴포넌트 spec
| 필드 | 내용 |
|---|---|
| variants | 한 파일에 든 변형 목록 (기본형·다크·성공 상태 등) |
| interactive | 스크립트 없이 도는 방식 (peer-checked · details · :has()) |
| script_free | Tailwind CDN 외 스크립트가 없는지 |
| radius | 이 컴포넌트의 라운딩 기조 |
디자인시스템 spec
추출 엔진이 실제 화면에서 센 라운딩·폰트·본문 크기대·간격·그림자 상위 값이 들어갑니다. 팔레트와 함께 쓰면 그 브랜드의 질감을 꽤 가깝게 재현할 수 있습니다.
디자인 프롬프트 빌더에서 자산을 고르면 이 값들이 프롬프트에 자동으로 들어갑니다. 직접 쓰고 싶다면 MCP asset_fetch로 manifest를 받아 spec을 꺼내세요.