별칭 60여 개를 실제 발화 그대로 수집해 정식 명칭과 일대일로 매핑했고, 105개 전 항목이 그림이 아니라 동작하는 자가완결 HTML이다. 요청 문장이 항목마다 붙어 있어 설치 즉시 팀의 UI 커뮤니케이션 비용을 줄인다. 의존성 0, 접근성 최소선 포함을 코드 전수로 확인했다.
실물부터, 설치 전에 전부 만져보세요
아래는 이미지가 아니라 이 스킬이 담고 있는 진짜 HTML입니다. 눌러 보세요.
UI 메뉴판 · 131가지
「접었다 폈다 되는 거」에는 이름이 있어요
말로 설명하던 UI에 이름을 붙여 주는 사전이에요. 11개 코스 131개 항목이 전부 그림이 아니라 실제로 동작하는 HTML이고, 항목마다 AI에게 그대로 쓰는 요청 문장이 붙어 있어요.
②아코디언"접었다 폈다 되는 거"②탭"위에 눌러서 화면 바뀌는 거"⑥모달"화면 가운데 뜨는 창"
FAQ를 아코디언 5개로 만들어줘. 처음엔 다 접혀 있고, 하나 열면 나머지 닫히게.
카드의 「문장」은 요청 문장을, 「프롬프트」는 문장 · 견본 코드 · 적용 지침을 한 번에, 「코드」는 HTML 을, 「#」은 그 항목 주소를 복사해요.
AI한테 시키는 공식
이 순서로만 말하면 한 번에 통해요
이름을 아는 순간 수정 요청이 한 번에 통합니다. 아래 사전에서 이름을 찾고, 문장을 복사해 쓰세요.
[어디에][컴포넌트 이름][개수][세부 조건]
✕
FAQ 만들어줘
○
푸터 위 섹션에 아코디언 5개. 처음엔 다 접혀 있고, 하나 열면 나머지 닫히게
이름 찾기
이런 말엔 이런 이름을 써요
왼쪽이 사람들이 실제로 하는 말, 오른쪽이 AI가 알아듣는 이름이에요. 헷갈리는 짝은 구분 기준까지 붙어 있어요.
사전 정본은 menu.json 하나다. 8개 코스(페이지 뼈대·이동/탐색·내용 표시·입력·버튼·알림·작은 표시·상태) 아래 105개 항목이 있고, 항목마다 한/영 정식 명칭, 사람이 실제로 하는 말(별칭), 한 줄 정의, AI에게 그대로 붙여넣는 요청 문장이 붙는다. 데모는 마커로 구분된 프래그먼트 파일에서 생성되는데, 빌드 한 번에 자가완결 HTML 105개·갤러리·llms.txt가 전부 나온다. 빌드 의존성은 0이다.
설치하면 스킬은 네 가지로 동작한다. 통역("위에 눌러서 화면 바뀌는 거"라고 하면 탭 Tabs라는 이름과 다음부터 쓸 요청 문장을 준다), 요청 다듬기([어디에]+[컴포넌트 이름]+[개수]+[세부 조건] 공식으로 두루뭉술한 요청을 재작성한다), 구현(검증된 레퍼런스를 기존 코드 스타일에 맞춰 이식한다), 제안(상황에 맞는 컴포넌트를 근거와 함께 2개 이내로 고른다). "팝업"처럼 헷갈리는 말은 모달·토스트·팝오버의 차이를 비교해 고르게 한다.
하이라이트
가장 값이 나가는 데이터는 별칭 60여 개다. 상상해서 쓴 게 아니라 실제 발화를 수집해 정식 명칭과 일대일로 매핑했다. 데모 105개는 전부 시맨틱 요소 우선으로 짜였다. 모달·드로어·라이트박스는 dialog, 아코디언은 details의 name 속성, 스위치는 checkbox다. focus-visible과 prefers-reduced-motion 같은 접근성 최소선도 전 항목에 들어 있다.
에이전트 채널이 따로 있다. llms.txt(사전)·llms-full.txt(코드 포함)를 URL 하나로 주면 설치 없이도 어떤 AI든 이 사전을 쓴다.
실측
항목 105 · 코스 8 · 데모 105(자가완결·의존성 0) · 라이선스 MIT. 검수 기준 버전 0.3.0, 2026-09-12. 0.3.0에서 헷갈리는 쌍 29곳에 구분 기준 한 줄이 붙었다(독자 피드백 반영, "스르륵 나오는 메뉴"는 드로어·바텀 시트가 겹친다). 자체 제작 스킬이라 저장소 실측(커밋·기여자)은 표기하지 않는다.
가져올 것과 주의
설치가 부담이면 llms.txt만 시스템 프롬프트에 물려도 통역 기능은 동작한다. 주의: 데모는 최소 구현 레퍼런스라 프로덕션에서는 각자의 디자인 토큰으로 이식하는 것이 전제다. 그대로 복붙하는 라이브러리가 아니다.
