Claude Code가 만든 설정 화면에 검색한 팔레트와 크기 규칙을 입히는 법

검색한 팔레트와 크기로 화면을 짓는다

SaaS 관리자 콘솔의 팀 설정 화면을 스킬 없이 한 번, /ui-ux-pro-max를 붙여 한 번 Claude Code에 맡겼습니다. 화면에는 워크스페이스 이름, 멤버와 역할 목록, 초대 폼이 들어갑니다.

스킬 없이 만든 화면은 버튼과 입력 칸 높이가 31~41px로 제각각입니다. /ui-ux-pro-max를 붙이면 Claude가 코드를 쓰기 전에 검색 스크립트로 팔레트와 크기 규칙부터 찾습니다.

ui-ux-pro-max는 UI 스타일·팔레트·글꼴 조합·UX 지침을 CSV 파일로 담고 Python 스크립트로 검색하게 하는 스킬입니다. Claude Code 프롬프트에 두 줄을 차례로 보내면 플러그인으로 깔립니다. 검색을 돌리려면 Python 3가 있어야 합니다.

github.com↗

GitHub - nextlevelbuilder/ui-ux-pro-max-skill: An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.

An AI skill that provides design intelligence for building professional UI/UX across multiple platforms. - nextlevelbuilder/ui-ux-pro-max-skill

1/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
2/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

요청 앞에 스킬 이름을 붙여 보냅니다. 이름 없이 보낸 같은 요청에서는 스킬이 불리지 않았습니다.

1/ui-ux-pro-max Build a team settings page for a B2B SaaS admin console as a single index.html file in the current folder: workspace name, a member list with roles, and an invite form. Plain HTML/CSS/JS only, no external scripts.

규칙을 먼저 찾고 코드를 쓴다

/ui-ux-pro-max가 불러오는 SKILL.md는 접근성, 터치, 성능, 스타일 순으로 먼저 볼 것을 정합니다. 터치는 최소 44×44px, 본문 글자는 16px이 기준입니다. 새 화면이면 SKILL.md가 코드보다 검색을 먼저 돌리게 합니다.

검색은 플러그인 폴더의 CSV에서만 하고 네트워크로 나가지 않습니다. 이번 요청에서 Claude는 --design-system으로 검색했습니다. 디자인 시스템은 화면 전체에 쓸 색·글꼴·스타일을 한 벌로 묶은 규칙입니다.

1python3 search.py "B2B SaaS admin console settings" --design-system -p "Team Settings" --density 7 --motion 2

Claude는 검색이 권한 셋 중 팔레트만 가져왔습니다. Glassmorphism(배경을 흐리게 비치는 반투명 유리 효과)은 빽빽한 관리자 폼에 맞지 않는다며 뺐고, 글꼴도 Plus Jakarta Sans 대신 시스템 글꼴로 두었습니다.

이미 있는 화면은 한 갈래만 검색한다

버튼 크기 하나를 따질 때는 디자인 시스템 전체 대신 --domain으로 한 갈래만 찾습니다. 저장소를 받아 두면 Claude 없이도 같은 검색을 돌릴 수 있습니다.

1git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
2python3 ui-ux-pro-max-skill/.claude/skills/ui-ux-pro-max/scripts/search.py "touch target size" --domain ux -n 2

결과는 iOS·Android·웹 기준을 따로 나눕니다. 마우스로만 쓰는 관리자 화면이면 꼭 지킬 선은 웹 최소 기준인 24px이고, 44px은 손가락 터치까지 생각한 여유입니다. 스킬 없이 만든 31px 버튼도 이 선은 넘습니다.

1python3 ui-ux-pro-max-skill/.claude/skills/ui-ux-pro-max/scripts/search.py "B2B SaaS admin console settings" --design-system --persist -p "Team Settings" --page settings