Codex·Claude Code를 위한 무료 UI 디자인 스킬

설치 후 첫 와이어프레임 만들기

ZIP을 내려받아 압축을 풀고, ai-ui-designer 폴더를 사용 중인 Codex 또는 Claude Code의 스킬 디렉터리에 넣으세요.

1. 1.스킬 파일 배치하기

   ai-ui-designer 폴더 바로 아래에 SKILL.md가 있어야 합니다. 설계 지침, 참고 자료, 보조 스크립트가 포함됩니다.

   Codex

   ~/.agents/skills/ai-ui-designer/

   Claude Code

   ~/.claude/skills/ai-ui-designer/

   압축 해제 과정에서 폴더가 한 단계 더 중첩되지 않았는지 확인하세요.

2. 2.페이지 목적과 주요 동작 전달하기

   도우미에서 스킬을 호출하고 대상 사용자와 필요한 내용을 설명하세요.

   Codex: $ai-ui-designer
   Claude Code: /ai-ui-designer
   
   가치 제안, 기능 소개, 가입 버튼이 있는 제품 홈페이지의 SVG 와이어프레임을 디자인해 주세요.

3. 3.SVG를 열고 수정 요청하기

   브라우저나 SVG 뷰어로 결과를 확인하고 제목 강조, 버튼 주변 여백 확대처럼 구체적으로 요청하세요.

   스킬이 보이지 않으면 경로와 SKILL.md를 확인하세요. Codex는 변경을 자동 감지하며, 계속 보이지 않으면 재시작하세요. Claude Code에서는 / 메뉴를 확인하세요.

코딩 도우미와 모델 접근 권한은 직접 준비해야 합니다. 로컬 장면 팩 보조 스크립트는 Python 3.9 이상이 필요하며, 사이트의 선택형 팩 다운로드에는 유효한 유료 구독이 필요합니다.

한 번에 하나씩 화면 설계 결정하기

무료 다운로드에 포함된 기능

시작 전 궁금한 점

구독하거나 장면 팩을 구매해야 하나요?

스킬은 무료로 다운로드하며 자체 요구사항으로 디자인할 수 있습니다. 이 사이트의 선택형 장면 팩을 다운로드할 때만 유효한 유료 구독이 필요합니다.

Codex와 Claude Code에서 어떻게 실행하나요?

위의 해당 디렉터리에 설치한 뒤 Codex에서는 $ai-ui-designer, Claude Code에서는 /ai-ui-designer을 사용하고 설계할 화면을 설명하세요.

실행 가능한 앱까지 만들어 주나요?

이 흐름은 정적 SVG 와이어프레임과 UI 시안을 만듭니다. 앱 코드, 백엔드 서비스와 실제 상호작용은 별도 구현이 필요합니다.

설치한 스킬을 찾을 수 없다면?

ai-ui-designer 폴더 바로 아래에 SKILL.md가 있고 경로가 맞는지 확인하세요. Codex는 재시작을 시도하고 Claude Code는 /ai-ui-designer 명령을 확인하세요.