joeseesun/qiaomu-design

해결하는 문제

AI로 생성된 사용자 인터페이스는 일반적으로 '기본 AI 스타일'을 띠며, 일반적인 보라색 그라데이션, 중앙에 위치한 헤로 섹션, 반복되는 템플릿 등으로 특징지어집니다. qiaomu-design은 이러한 패턴에서 벗어나고, 특히 중국어 문자를 위한 전문적인 엔지니어링 및 타이포그래피 기준을 충족하는 최종 출력을 보장하는 명확한 워크플로우를 제공합니다.

작동 방식

Codex나 Claude Code와 같은 호환 가능한 클라이언트용 에이전트 스킬로 작동하며, 세 단계의 폐쇄형 루프 프로세스를 구현합니다.

1. 진단: 에이전트는 요구사항을 분석하고, 작업 유형에 따라 변동성, 움직임, 밀도 등의 '다이얼'을 조정합니다.
2. 스타일 피팅룸: 하나의 결과가 아니라, 실제 HTML 모크업으로 생성된 4개의 서로 다른 시각적 방향을 제시합니다. 사용자는 로컬 프리뷰 서버를 통해 선호하는 방향을 선택합니다.
3. 실행: 선택된 디자인을 엄격한 규칙을 기반으로 구현합니다. 이에는 AI의 획일적 스타일을 금지하는 '안티슬롭' 규정, Stripe, Linear, Apple 등 58개의 실제 사이트 디자인 시스템 라이브러리, 접근성 및 엔지니어링 품질을 위한 프리플라이트 체크리스트가 포함됩니다.

대상 사용자

AI 에이전트를 사용해 웹 인터페이스를 구축하는 개발자 및 디자이너 중, AI가 생성한 것처럼 보이지 않는 고정밀도 전문 수준의 결과를 원하는 사람.

주요 특징

• 스타일 피팅룸: 전체 구현 전에 4개의 실제 미니 모크업을 생성하여 시각적 선택을 가능하게 합니다.
• AI 미학 반대: 보라색 그라데이션, 특정 폰트 등 일반적인 AI 디자인의 획일적 스타일을 명시적으로 금지하여 창의성을 유도합니다.
• 전문 타이포그래피: 중국어 타이포그래피(중국어/한자/일본어(CJK) 간격, 시스템 폰트 스택)에 특화된 규칙을 포함합니다.
• 디자인 시스템 라이브러리: 58개의 최상위 웹사이트의 디자인 시스템을 요약한 라이브러리로 스타일 참고 자료를 제공합니다.
• 엔지니어링 엄격성: Vercel 스타일의 엔지니어링 체크리스트와 Emil Kowalski의 모션 시스템을 도입해 고품질 애니메이션을 구현합니다.
• 자기 진화: 사용자 피드백을 자동으로 추상화해 개인의 선호 사항 레지스트리로 변환합니다.