Repolode
제출하기
joeseesun

joeseesun/qiaomu-design

Claude Code 및 유사한 클라이언트에서 AI가 생성하는 UI가 흔한 템플릿에서 벗어나도록 돕는, 시각적 방향 선택 기능과 실제 사이트 디자인 시스템 레퍼런스 58개를 제공하는 주관이 뚜렷한 Agent Skill입니다.

GitHub에서 보기
스타
675
포크
50
열린 이슈
1
마지막 커밋
26일 전

어떤 프로젝트인가요?

qiaomu-design은 AI 코딩 어시스턴트에 디자인 워크플로를 추가하는 Agent Skill입니다. 인터페이스를 디자인하거나 다시 디자인해 달라는 요청을 받으면 먼저 요구사항을 파악한 뒤, 서로 확연히 다른 디자인 방향 4가지를 로컬 미리보기로 렌더링해 구현을 시작하기 전에 사용자가 하나를 고를 수 있게 합니다. 선택한 방향은 프로젝트 파일에 반영되며, 제출 전 체크리스트를 통해 접근성, 폼, 포커스 처리, 중국어 타이포그래피를 점검합니다.

이 Skill에는 보라색 그라데이션, Inter, 중앙 정렬 히어로 레이아웃을 금지하는 등 흔히 나타나는 AI 디자인 습관을 겨냥한 규칙이 포함되어 있습니다. 모션 디자인 레퍼런스 모음, Carbon 디자인 시스템 레퍼런스, Stripe, Linear, Apple 같은 공개 사이트를 바탕으로 정리한 DESIGN.md 파일 58개 라이브러리도 제공하며, "Linear처럼 만들어줘"와 같은 프롬프트로 참고할 수 있습니다. polish 모드는 기존 페이지를 전면 재작성하지 않고 감사, 비평, 개선 과정을 거쳐 다듬습니다.

`npx skills add joeseesun/qiaomu-design` 명령으로 설치할 수 있습니다. 이 Skill은 Agent-Skills 호환 클라이언트를 대상으로 하며, 결과물의 품질은 실행하는 에이전트와 프로젝트 맥락에 따라 달라집니다.

핵심 기능

  • 01구현 전에 서로 다른 스타일 방향 4가지를 인터랙티브 목업으로 생성합니다.
  • 02AI 특유의 보라색 그라데이션, Inter, 중앙 정렬 히어로 레이아웃 등을 금지하는 규칙으로 흔한 디자인을 방지합니다.
  • 03시스템 글꼴 스택과 CJK 간격 규칙을 포함한 중국어 타이포그래피 지침을 제공합니다.
  • 04실제 웹사이트에서 가져온 디자인 시스템 레퍼런스 DESIGN.md 파일 58개를 제공합니다.
  • 05기존 페이지를 다시 작성하지 않고 점검하고 다듬는 polish 모드를 제공합니다.
  • 06접근성, 폼, 파괴적 작업 방지 항목을 포함한 사전 점검 체크리스트를 실행합니다.

활용 사례

  • 새 제품 랜딩 페이지를 만들 때 코드를 작성하기 전에 여러 시각적 방향을 비교합니다.
  • 전면 재디자인 없이 평범해 보이는 기존 대시보드나 페이지를 개선합니다.
  • Linear나 Stripe 같은 잘 알려진 제품의 분위기를 따라 만들도록 AI 어시스턴트에 요청합니다.
  • 레퍼런스를 중심으로 개발자 도구의 디자인 시스템을 구축합니다.

빠른 시작

  1. 1

    npx로 스킬을 설치합니다

    npx skills add joeseesun/qiaomu-design
  2. 2

    지원되는 클라이언트(Codex 또는 Claude Code)에서 제품 랜딩 페이지 등을 디자인해 달라고 요청합니다

사용 전 알아둘 점

  • 이 스킬은 호환되는 클라이언트용 Agent Skill이며 독립 실행형 소프트웨어가 아닙니다. 따라서 결과는 실행 에이전트와 프로젝트 컨텍스트에 따라 달라집니다.
  • DESIGN.md 참조 라이브러리는 공개된 사이트를 바탕으로 핵심 내용을 정리한 것으로, 해당 기업의 추천이나 보증을 의미하지 않습니다.
  • 인터랙티브 미리보기에서 선택하려면 로컬 미리보기 서버가 필요합니다. 서버가 없으면 채팅으로 답변하는 방식으로 전환됩니다.

포함된 컬렉션

AI 코딩 에이전트용 UI 디자인 스킬Claude Code 도구·스킬·플러그인AI 에이전트 스킬 라이브러리

토픽

#agent-skill#claude-code#ui-design#frontend-design#design-system#chinese-typography

자주 묻는 질문

qiaomu-design은(는) 무엇인가요?
Claude Code 및 유사한 클라이언트에서 AI가 생성하는 UI가 흔한 템플릿에서 벗어나도록 돕는, 시각적 방향 선택 기능과 실제 사이트 디자인 시스템 레퍼런스 58개를 제공하는 주관이 뚜렷한 Agent Skill입니다. qiaomu-design은 AI 코딩 어시스턴트에 디자인 워크플로를 추가하는 Agent Skill입니다. 인터페이스를 디자인하거나 다시 디자인해 달라는 요청을 받으면 먼저 요구사항을 파악한 뒤, 서로 확연히 다른 디자인 방향 4가지를 로컬 미리보기로 렌더링해 구현을 시작하기 전에 사용자가 하나를 고를 수 있게 합니다. 선택한 방향은 프로젝트 파일에 반영되며, 제출 전 체크리스트를 통해 접근성, 폼, 포커스 처리, 중국어 타이포그래피를 점검합니다.
qiaomu-design은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
qiaomu-design은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
qiaomu-design은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. qiaomu-design의 마지막 커밋은 2026년 10월 13일입니다.
qiaomu-design은(는) 어디에 사용할 수 있나요?
새 제품 랜딩 페이지를 만들 때 코드를 작성하기 전에 여러 시각적 방향을 비교합니다. 전면 재디자인 없이 평범해 보이는 기존 대시보드나 페이지를 개선합니다. Linear나 Stripe 같은 잘 알려진 제품의 분위기를 따라 만들도록 AI 어시스턴트에 요청합니다. 레퍼런스를 중심으로 개발자 도구의 디자인 시스템을 구축합니다.
qiaomu-design는 어떻게 설치하나요?
npx로 스킬을 설치합니다: npx skills add joeseesun/qiaomu-design 지원되는 클라이언트(Codex 또는 Claude Code)에서 제품 랜딩 페이지 등을 디자인해 달라고 요청합니다
qiaomu-design은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/joeseesun/qiaomu-design

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트