한 줄 요청으로시안 세 장받아 고르기

중급자용© AIKOREACLUB

alchaincyf/huashu-design

한 줄 요청으로 시안 세 장 받아 고르기

코딩 AI에게 한 줄로 부탁하면 디자인 방향 여섯 개를 작은 그림으로 먼저 그리고, 그중 서로 다른 세 개를 완성 시안으로 만들어 나란히 고르게 해 주는 디자인 스킬이에요. 웹 시안, 앱 원형, PPTX, 인포그래픽, 영상까지 만들어요

★ 28,557에이전트 스킬 · MIT확인 2026-11-03

깃허브에서 보기 ↗틀린 점 알리기

"강연 발표 자료 하나 만들어 줘"라고 하면 AI는 시안을 딱 한 장 내놔요. 마음에 안 들어 "다른 느낌으로"라고 해도 비슷한 게 또 나오고요. 디자이너라면 서너 방향을 펼쳐 보여 줬을 텐데 말이에요. 말로만 고르다 보면, 보지도 않은 스타일에 운을 거는 셈이에요.화슈 디자인(Huashu Design)은 코딩 AI에게 이 '방향 펼쳐 보이기'를 가르치는 스킬이에요. 서로 다른 세 가지 방식으로 후보 여섯 개를 뽑아 작은 그림으로 그리고, 가장 강하고 서로 다른 세 개를 완성 시안으로 만들어 눈으로 보고 고르게 해요. 중국의 AI 크리에이터 화슈가 만들었고, 5월에 MIT로 바뀌어 회사 일에도 무료로 쓸 수 있어요.

따로 보면 괜찮은데, 모아 보면 다 같은 얼굴

~/.huashu-design/ 외관 장부

프로젝트	바탕	제목	강조

SKILL.md가 꼽은 클로드의 기본 취향(미색 바탕, 대비 큰 세리프 제목, 테라코타 강조, 대문자 꼬리표, 01 02 03 번호)과 README의 외관 장부 설명을 보여 주려고 저희가 그린 예시예요. 프로젝트와 영어 제목은 지어낸 것이고, 실제로 무엇을 피할지는 쌓인 기록에 따라 달라져요.

한눈에

무엇인가요

화슈 디자인은 SKILL.md 한 장에 스크립트, 스타일 견본, 참고 문서 폴더가 딸린 스킬이에요. 클로드 코드나 코덱스 같은 코딩 AI가 이걸 읽고 HTML로 디자인한 뒤, 필요한 형식으로 내보내요.무엇을 만드나요. README 표 기준으로 눌러 볼 수 있는 앱·웹 원형(10~15분), 브라우저 발표용 HTML 슬라이드와 글상자가 살아 있는 PPTX(15~25분), MP4·GIF 애니메이션(8~12분), 인쇄용 인포그래픽(10분), 3:4 카드 묶음(10~15분), 다섯 항목 디자인 평가(3분)예요.방향 고르기가 핵심이에요. 요청이 모호하면 '최고의 디자이너라면', '같은 매체의 수상작 참고', '스타일 목록에서 무작위 뽑기' 세 방식으로 두 개씩, 모두 여섯 후보를 뽑아요. 바탕에는 웹 20, PPT 20, 인포그래픽 20, 앱 12, 동아시아 12, 카드 묶음 8가지, 모두 92가지 스타일 견본이 있어요.브랜드가 있으면 그 브랜드부터 찾아요. 특정 회사가 나오면 브랜드 자료가 있는지 묻고, 공식 브랜드 페이지에서 로고와 색을 내려받아 색 번호를 뽑은 뒤 brand-spec.md 로 고정해요. 기억에 의존해 브랜드 색을 짐작하지 않는 게 규칙이에요.

함께 쓰는 도구 · 클로드 코드 · 코덱스 · 커서 · 오픈클로 · 헤르메스

이런 분께

디자이너 없이 발표 자료, 상세 페이지, 앱 화면 시안을 직접 만들어야 하는 분
AI에게 디자인을 맡기면 늘 같은 느낌이라 여러 방향을 비교해 보고 싶은 분
결과를 HTML뿐 아니라 PPTX, 영상, 인포그래픽 파일로 바로 받아야 하는 분

어떻게 작동하나요

시안 세 장이 나오는 길.
1. 질문은 한 번에 모아 한 번만 물어요. 이름, 로고, 브랜드 색, 좋아하는 참고 사이트 같은 거예요
2. 내용에 꼭 필요한 실제 사진(공공 영역, 저작권 없는 것)을 먼저 구해요
3. 세 방식으로 두 개씩, 후보 여섯 개를 작은 그림 한 장에 그려요
4. 혼자서도 좋고, 서로 다르고, 최근 내 프로젝트와 겹치지 않는 세 개를 완성 시안으로 만들어요
5. 시안을 펼쳐 놓고 멈춰요. 남은 세 개도 후보로 함께 줘요쓸수록 나를 알아요. 외관 장부는 매번 낸 결과의 바탕색, 색 묶음, 글꼴, 뼈대를 적어 두고 다음 프로젝트에서 피해 가요. README 예시에서는 최근 결과 6개 중 5개가 고딕 계열 제목이라, 다음엔 다른 제목 글꼴을 골랐다고 해요. "너무 밋밋해요" 같은 내 취향 말도 기억해 다음 일에 꺼내요.디자인 검사는 사실만 재요. 깨진 그림, 읽기 힘들 만큼 작은 글자, 약한 대비, 오류는 빨간불, 습관처럼 붙인 장식은 노란불이에요. 예쁜지는 판정하지 않아요.이 기록은 모두 내 컴퓨터의 ~/.huashu-design/ 에만 남고, 폴더를 지우면 다 잊어요.

할 수 있는 일

디자인 방향 비교후보 여섯 개를 작은 그림으로 그리고, 서로 다른 세 개를 완성 시안으로 나란히 보여 줘요

앱·웹 원형아이폰 틀 안에서 눌러 볼 수 있는 HTML 원형을 만들고, 자동으로 눌러 보며 확인해요

발표 자료HTML 슬라이드로 만들고 글상자가 살아 있는 PPTX로 내보내요

애니메이션시간표에 맞춰 움직이는 장면을 MP4와 GIF로, 배경 음악까지 붙여 내보내요

인포그래픽·카드 묶음인쇄용 인포그래픽(PDF·PNG·SVG)과 3:4 카드 묶음을 만들어요

디자인 평가철학 일관성, 시각 위계, 세부 완성도, 기능성, 새로움을 0~10점으로 매기고 지킬 것·고칠 것을 나눠요

바로 쓸 수 있나요

도구 연결 필요

필요한 것스킬을 쓰는 코딩 AI(클로드 코드, 코덱스, 커서 등)와 Node. 영상 내보내기에는 ffmpeg 같은 도구가 더 필요할 수 있어요

비용저장소는 무료(MIT, 상업적 사용 가능). 코딩 AI 요금은 따로이고, 음성 같은 클라우드 기능은 내 API 키로 따로 결제해요

시작하기

스킬 설치
클로드 코드, 코덱스, 커서 등 스킬을 쓰는 코딩 AI에 넣어요. Node(npx)가 필요해요.
```
npx skills add alchaincyf/huashu-design
```
설치 확인
설치된 폴더(예: ~/.claude/skills/huashu-design/)에 SKILL.md만 있고 references, assets, scripts, demos 폴더가 없으면 skills 도구가 옛 버전이에요. 올리고 다시 설치해요.
```
npm i -g skills@latest
```
그래도 안 되면 직접 받기
README가 알려 주는 마지막 방법이에요.
```
git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design
```
대화창에서 한 줄 요청
버튼이나 패널은 없어요. 코딩 AI 대화창에 만들고 싶은 걸 말하면 돼요.

처음 해 볼 한마디

AI 심리학 강연 발표 자료를 만들어 줘. 스타일 방향 3개를 추천해서 고르게 해 줘

README 예시 "Make a keynote for AI psychology. Give me 3 style directions to pick from."을 우리말로 옮겼어요. 우리말 요청에도 우리말로 답하는지는 README에 따로 적혀 있지 않아요.

한 줄 요청에서 시안 세 장, 그리고 파일까지

최고의 디자이너라면두 사람의 방식

같은 매체 수상작 참고ref_board.py

무작위 뽑기date +%S 00

A안 · 어두운 전시장

사진 한 장을 주인공으로, 글은 아래 가는 줄로

B안 · 데이터 포스터

점 격자 위에 숫자가 주인공글자가 너무 작아요습관 장식대비가 약해요

C안 · 두 색 큰 글자

노랑과 파랑을 반씩, 제목이 화면을 채움

deck.html브라우저에서 바로 발표

deck.pptx글상자가 살아 있는 PPTX

deck.pdf나눠 줄 인쇄본

teaser.mp4소개 영상, GIF로도

README의 방향 고르기 순서(세 방식 두 개씩, 여섯 후보, 세 장 완성)와 디자인 검사 설명을 따라 저희가 그린 예시예요. 시안 그림은 도형으로만 그린 것이고, 실제 시안과 검사 결과는 요청과 쓰는 코딩 AI에 따라 달라져요.

비슷한 도구

화슈 디자인은 웹·앱·PPTX·영상까지 넓게 다루며 방향을 비교하게 하고, PPT Master는 파워포인트 하나를 깊게, 할마크는 웹페이지 하나를 다뤄요(각 README 기준).

AI가 만든 발표 자료, 파워포인트에서 고쳐지나요발표 자료 하나에 집중해, 데이터가 든 차트와 슬라이드 마스터까지 진짜 파워포인트로 만들어요hugohe3/ppt-master

브랜드 규칙, AI에게 한 번만 가르치기시안을 펼치기보다, 정해 둔 회사 색과 글꼴을 모든 자료에 똑같이 입히는 쪽이에요anthropics/skills

AI 티 안 나는 웹페이지 만들기웹페이지만 다루고, 정해 둔 테마 50개 중 셋을 내밀어 고르게 해요Nutlope/hallmark

주의할 점

기본 README와 SKILL.md(AI가 읽는 지침)가 중국어로 쓰여 있어요. 영어 README가 따로 있고, 한국어 번역판(ktkarchive/ktk-design)도 README에 소개돼 있지만 2026-04-24 이후 갱신이 없고 라이선스 표시가 없어요(11/3 확인).
라이선스는 2026-05-14부터 MIT로 바뀌었어요. 그 전 버전은 '개인 무료, 회사 사용은 허락 필요' 조건이었으니 예전에 받아 둔 사본이면 새로 받으세요. 카드 묶음 견본 속 스티커(_kit/stickers)만 PolyForm Shield 조건이라, 내 결과물에는 내 그림으로 바꿔야 해요.
README가 스스로 밝힌 한계예요. 3D, 물리 효과, 입자 효과 같은 복잡한 움직임은 못 하고, 브랜드 자료가 전혀 없는 상태에서 처음부터 그리면 품질이 떨어진다고 해요. '100점 제품이 아니라 80점짜리 스킬'이라는 표현을 써요.
작업 순서는 내 컴퓨터에서만 돌고 작가 서버로 보내는 기록은 없다고 해요. 다만 참고 작품을 캡처할 때는 그 사이트에 접속하고, 음성 같은 클라우드 기능은 처음 쓸 때 --yes 로 직접 허락해야 해요.
스타일 목록과 예시에 실제 디자이너 이름과 수상작이 나와요. 그 사람의 '방식'을 빌리는 것이니, 남의 로고나 작품을 그대로 가져다 쓰지 않게 결과를 확인하세요(저희 해석).

낯선 말

시안 · 디자인을 정하기 전에 보여 주는 견본 화면이에요
원형(프로토타입) · 진짜 앱처럼 눌러 볼 수 있게 만든 견본이에요. 실제 서버나 저장 기능은 없어요
외관 장부 · 지금까지 만든 결과의 색, 글꼴, 뼈대를 적어 둔 기록이에요. 다음엔 겹치지 않게 피해 가요
AI 슬롭 · AI가 고민 없이 만들어 티가 나는 뻔한 결과물을 낮춰 부르는 말이에요
스킬 · 코딩 AI가 특정 일을 할 때 꺼내 읽는 지침과 도구 묶음이에요

AI 답은 참고 자료예요. 법·세금·돈·건강처럼 삶에 큰 영향을 주는 일에서는 AI 답이 정답이 될 수 없어요. 최종 판단은 전문가나 공식 기관에서 확인하세요.