IT-ABILITY · TREND / DESIGN SKILLS
“예쁘게 만들어줘” 다음에는
어떤 디자인 스킬을 써야 할까?
AI에게 홈페이지를 부탁했는데 다른 사이트와 너무 비슷하거나, 발표 자료마다 색과 글꼴이 달라 보인 적이 있을 것이다. 이럴 때는 요구를 더 구체적으로 쓰는 것과 함께 작업에 맞는 디자인 스킬을 활용해 볼 수 있다.
색·글꼴·배치 원칙과 작업 순서, 필요한 자료를 묶어 AI 에이전트가 디자인 업무에 활용하도록 만든다. 이미지 생성 서비스나 디자인 앱 자체와는 역할이 다르다. 스킬과 파일·도구 실행을 지원하는 환경에서 사용하며, 결과를 만들 실행 도구가 추가로 필요할 수 있다.
이번에는 방향 잡기 → 웹 화면 제작 → 포스터 제작 → 색·글꼴 통일 → 사용성 점검이라는 다섯 가지 고민으로 골랐다. 전부 설치하기보다 내가 만들 결과물에 맞춰 선택하면 된다. 포스터와 웹사이트는 만드는 방식이 다르기 때문이다.
공식 자료 확인: 2026년 10월 31일 · 순서는 작업별 소개 순서다. 다섯 스킬을 동일한 조건으로 실행해 매긴 성능 순위나 실제 사용 후기는 아니다. 아래 요청 문장은 활용 예시이며 카드 이미지는 기능을 설명하는 개념도다.
1. 색과 화면 구성을 어디서 시작할지 모르겠다 → UI/UX Pro Max
UI/UX Pro Max는 화면을 만들기 전에 디자인 방향을 정하는 데 활용할 수 있는 스킬이다. 제품과 사용 목적을 바탕으로 스타일, 색상, 글꼴, 화면 구성에 관한 참고 지침을 찾는다. 여러 화면에서 함께 쓸 기본 규칙, 즉 디자인 시스템을 잡을 때도 살펴볼 만하다.
디자인 방향부터 잡기. 실제 제품 화면이 아닌 AI 생성 개념 카드다.
예를 들어 동네 공방의 예약 페이지를 만든다면 “따뜻한 분위기”만 말하기보다 고객층, 예약 버튼의 역할, 휴대전화 사용 비중을 알려주는 식이다. 요구 설명 → 관련 디자인 지침 검색 → 방향 선택 → 화면에 적용할 기준 정리로 이어진다.
“도자기 공방 예약 페이지를 만들 거야. 처음 방문하는 사람이 모바일에서 수업과 예약 버튼을 쉽게 찾게 해줘. 색상·글꼴·정보 배치 방향부터 제안하고, 화면을 만들기 전에 내가 고를 수 있게 설명해줘.”
설치 예시 · Claude Code 기준
npx ui-ux-pro-max-cli init --ai claude공식 README의 CLI 경로다. 사용할 에이전트에 맞는 옵션을 선택해야 하며, Codex CLI 예시는 --ai codex다. 검색 스크립트에는 Python 3.x가 필요하다. 관련 데이터·스크립트까지 함께 준비하는 공식 설치 경로를 확인하자.
알아둘 점. 추천 결과는 디자인 판단을 돕는 자료다. 스킬을 설치했다고 기존 앱의 모든 화면이 바뀌거나, 내 서비스에 맞는 정답이 보장되지는 않는다. 이미 쓰는 색·글꼴 규칙이 있다면 먼저 함께 제공하는 것이 좋다.
공식 자료: NextLevelBuilder · UI/UX Pro Max · 설치 안내
2. AI가 만드는 웹 화면이 늘 비슷하다 → frontend-design
Anthropic의 frontend-design은 웹 화면의 개성을 정하고 구현할 때 참고하는 스킬이다. 누구를 위한 화면인지, 어떤 분위기와 정보가 중요한지부터 생각하고 글꼴·색상·레이아웃을 의도적으로 선택하도록 안내한다.
우리다운 웹 화면 만들기. 실제 제품 화면이 아닌 AI 생성 개념 카드다.
예를 들어 공방 소개 페이지라면 실제 작품 사진, 수업 정보, 예약 행동을 중심으로 첫 화면을 구성할 수 있다. 디자인 의도 정리 → 화면 구조 검토 → 코드 구현 → 화면을 보며 수정하는 흐름이다. 웹사이트나 앱 화면을 에이전트와 함께 만드는 사람에게 어울린다.
“frontend-design을 활용해 도자기 공방 소개 페이지를 만들어줘. 작품 사진이 주인공이고 수업 예약이 목표야. 실제 소개 문구와 사진은 이 자료를 사용하고, PC와 모바일에서 각각 읽기 편하게 구성해줘.”
설치 예시
npx skills add anthropics/skills --skill frontend-design알아둘 점. 스킬이 Figma 파일을 직접 조작하거나 웹사이트를 곧바로 배포하는 도구는 아니다. 구현할 프로젝트와 실행 환경이 필요하며, 문구·사진·브랜드 조건을 구체적으로 줄수록 판단 기준이 분명해진다. 결과는 모바일 화면과 실제 버튼 동작까지 확인해야 한다.
공식 자료: Anthropic · frontend-design
3. 웹 화면보다 포스터 한 장이 필요하다 → canvas-design
Anthropic의 canvas-design은 포스터나 정적인 시각 작품을 만드는 데 쓰는 스킬이다. 표현할 분위기와 조형 원칙을 먼저 정하고, 이를 PNG 또는 PDF 결과물로 옮기는 과정을 안내한다.
한 장의 포스터로 표현. 실제 제품 화면이 아닌 AI 생성 개념 카드다.
예를 들어 공방 오픈 행사 포스터를 만들 때 행사명·날짜·장소와 원하는 인상을 전달할 수 있다. 디자인 의도 정리 → 색·형태·여백 구성 → 파일 제작 → 글자와 배치 확인의 흐름이다. 짧은 문구와 이미지 중심의 한 장짜리 작업에 잘 맞는다.
“canvas-design으로 공방 오픈 행사 포스터를 만들어줘. 제목·날짜·장소는 제공한 문구 그대로 넣고, 밝고 차분한 분위기로 구성해줘. SNS용 PNG로 저장하고 한글이 빠지거나 잘린 곳이 없는지 확인해줘.”
설치 예시
npx skills add anthropics/skills --skill canvas-design알아둘 점. 이름의 canvas는 Canva 서비스와 다르다. Canva 계정에 디자인을 올리거나 편집 가능한 Figma 레이어를 만드는 기능으로 소개하면 안 된다. 한글 글꼴과 출력에 필요한 도구를 준비하고, 날짜·장소·철자는 원문과 대조하자. 인쇄용이라면 크기와 해상도 등 인쇄소 조건도 별도로 확인해야 한다.
공식 자료: Anthropic · canvas-design
4. 자료마다 색과 글꼴이 제각각이다 → theme-factory
Anthropic의 theme-factory는 이미 만든 자료에 일관된 색상과 글꼴 조합을 적용할 때 활용한다. 슬라이드, 문서, HTML 자료 등에 사용할 테마를 제안하고, 선택한 스타일을 유지하도록 돕는 스킬이다.
색과 글꼴을 하나로. 실제 제품 화면이 아닌 AI 생성 개념 카드다.
예를 들어 공방 소개 자료와 수업 안내 자료의 인상이 서로 다르다면 하나의 테마로 맞춰볼 수 있다. 테마 미리보기 → 사용자 선택 → 색·글꼴 적용 → 대비와 가독성 확인 순서다. 적당한 테마가 없으면 원하는 분위기에 맞는 새 조합을 요청할 수도 있다.
“theme-factory로 이 공방 소개 자료에 맞는 테마를 보여줘. 차분한 분위기를 원하고 본문은 한글이야. 내가 테마를 고른 뒤 제목과 본문 글꼴, 강조색을 통일해줘. 내용은 바꾸지 마.”
설치 예시
npx skills add anthropics/skills --skill theme-factory알아둘 점. 색상과 글꼴의 일관성을 돕는다고 해서 모든 파일 형식을 직접 편집하는 기능까지 생기는 것은 아니다. 결과 파일을 다룰 도구가 함께 필요하며, 이 스킬만으로 내용이나 전체 레이아웃이 새로 설계되는 것도 아니다. 영문용 글꼴 조합은 한글 지원 여부를 확인하고, 회사의 기존 디자인 규칙이 있다면 우선 적용하자.
공식 자료: Anthropic · theme-factory
5. 보기에는 괜찮은데 쓰기 불편하다 → web-design-guidelines
Vercel의 web-design-guidelines는 웹 UI 코드를 기준과 대조해 문제를 찾는 점검용 스킬이다. 화면을 새로 꾸미는 역할보다는 입력란의 이름, 키보드 초점, 이미지 설명, 반응형 배치 같은 사용성 항목을 검토하는 데 가깝다.
보기 좋고 쓰기도 편하게. 실제 제품 화면이 아닌 AI 생성 개념 카드다.
예를 들어 예약 폼에서 어떤 값을 넣어야 하는지 모호하거나, 키보드로 버튼에 접근할 때 위치가 보이지 않는 문제를 살펴볼 수 있다. 검토할 파일 지정 → 최신 가이드 확인 → 코드 검토 → 파일과 위치가 포함된 수정 사항 정리의 흐름이다.
“web-design-guidelines로 이 예약 페이지의 파일을 검토해줘. 입력란 이름, 키보드 이동, 초점 표시와 모바일에서 잘리는 내용을 확인하고, 문제 위치와 수정 이유를 알려줘. 코드를 고치기 전에 발견한 문제부터 정리해줘.”
설치 예시
npx skills add vercel-labs/agent-skills --skill web-design-guidelines알아둘 점. 기본 사용 흐름은 소스 파일 검토다. 주소만 주면 로그인부터 모든 화면을 자동으로 시험하거나 접근성 적합성을 인증해 주는 스킬은 아니다. 수정 후에는 실제 브라우저에서 키보드 조작과 모바일 화면을 확인하는 과정이 필요하다.
공식 자료: Vercel · web-design-guidelines · 검토 기준 원문
6. 어떤 스킬부터 써보면 좋을까?
| 지금 필요한 일 | 먼저 볼 스킬 | 기대할 결과 | 마지막 확인 |
|---|---|---|---|
| 디자인 방향을 정하고 싶다 | UI/UX Pro Max | 스타일·색·글꼴·구성 지침 | 내 서비스와의 적합성 |
| 개성 있는 웹 화면이 필요하다 | frontend-design | 방향에 맞춘 웹 UI 구현 | 모바일·실제 동작 |
| 포스터 한 장이 필요하다 | canvas-design | PNG·PDF 시각 결과물 | 문구·한글·출력 크기 |
| 자료의 분위기를 통일하고 싶다 | theme-factory | 일관된 색상·글꼴 | 대비·한글 글꼴 |
| 웹 사용성을 점검하고 싶다 | web-design-guidelines | 코드의 문제 위치·수정 사항 | 실제 사용 흐름 |
웹페이지를 만든다면 방향을 정하는 스킬과 구현하는 스킬을 작업 단계에 맞춰 쓰고, 완성 후 점검 스킬로 검토할 수 있다. 두 스킬의 지시가 겹칠 때는 이미 정한 디자인 기준을 먼저 알려주자. 포스터 한 장이 목적이라면 canvas-design부터 시작하는 편이 이해하기 쉽다.
설치 전에 확인할 세 가지
- 내 에이전트가 해당 스킬을 지원하는가? 일반 채팅창에 이름을 쓰는 것만으로 설치되지는 않는다. 앱에 이미 비슷한 기능이 있다면 먼저 확인하자.
- 작업 폴더와 실행 환경이 준비됐는가?
npx skills add예시는 Vercel Skills CLI 경로이며 현재 Node.js 22.20 이상을 요구한다. 기본은 현재 프로젝트 설치이고, 설치 화면에서 사용할 에이전트를 선택한다. UI/UX Pro Max는 위에 안내한 자체 CLI 경로와 Python 조건을 따로 확인하자. - 실행 비용과 결과물 조건을 확인했는가? 공개된 스킬을 설치해도 모델·API 이용료가 없어지는 것은 아니다. 웹 실행, 이미지·문서 출력, 글꼴 등에는 별도 도구나 이용 조건이 적용될 수 있다.
설치 기준: Vercel Skills CLI README. Windows PowerShell에서 npx 실행 정책 오류가 나면 npx를 npx.cmd로 바꿔 실행할 수 있다.
AI에게는 대상 독자, 만들 결과물, 꼭 들어갈 내용, 유지할 규칙을 함께 주는 것이 좋다. “공방 홍보물 만들어줘”보다 “처음 방문할 고객을 위한 모바일 예약 페이지이며, 수업 시간과 예약 버튼을 먼저 보여줘”라는 요청이 구체적인 판단 기준을 준다.
스킬 이름보다 내가 받을 결과물이 먼저다. 웹 화면, 정적인 포스터, 스타일 통일, 코드 점검 중 지금 필요한 일을 정하고 하나씩 적용해 보자.