diff --git a/README.ko.md b/README.ko.md new file mode 100644 index 0000000..1d8579f --- /dev/null +++ b/README.ko.md @@ -0,0 +1,639 @@ +# [UI UX Pro Max](https://uupm.cc) + +

+ 🇰🇷 한국얎 | + 🇻🇳 Tiếng Việt | + 🇚🇳 简䜓䞭文 | + 🇺🇞 English +

+ +

+ GitHub 늎늬슀 + 추론 규칙 192개 + 검색 가능한 UI 슀타음 79개 + Python 3.x + 띌읎선슀 +

+ +

+ npm + npm 닀욎로드 수 + GitHub 슀타 수 + PayPal +

+ +여러 플랫폌곌 프레임워크에서 전묞적읞 UI/UX륌 구축할 수 있도록 디자읞 읞텔늬전슀륌 제공하는 AI 슀킬입니닀. + +

+ + UI UX Pro Max + +

+ +

+ 읎 프로젝튞가 유용하닀멎 후원을 고렀핎 죌섞요:

+ PayPal 후원 +

+ +

+ 닀륞 프로젝튞
+ NextLevelBuilder.io | GoClaw.sh | ClaudeKit.cc | TOSE.sh +

+ +## v2.0의 새로욎 Ʞ능 + +### 지능형 디자읞 시슀템 생성 + +v2.0의 핵심 Ʞ능은 **디자읞 시슀템 생성Ʞ**입니닀. AI êž°ë°˜ 추론 엔진읎 프로젝튞 요구 사항을 분석하고 몇 쎈 만에 완전한 맞춀형 디자읞 시슀템을 생성합니닀. + +``` ++----------------------------------------------------------------------------------------+ +| 대상: Serenity Spa - 권장 디자읞 시슀템 | ++----------------------------------------------------------------------------------------+ +| | +| 팹턮: 히얎로 쀑심 + 사회적 슝거 | +| 전환: 신뢰 요소륌 활용한 감성 쀑심 섀계 | +| CTA: 첫 화멎에 배치하고 후Ʞ 닀음에 반복 | +| 섹션: | +| 1. 히얎로 | +| 2. 서비슀 | +| 3. 고객 후Ʞ | +| 4. 예앜 | +| 5. 연띜처 | +| | +| 슀타음: Soft UI Evolution | +| 킀워드: 부드러욎 귞늌자, 은은한 깊읎, 펞안핚, 고꞉슀러움, 유Ʞ적 형태 | +| 추천 대상: 웰니슀, 뷰티, 띌읎프슀타음 뾌랜드, 프늬믞엄 서비슀 | +| 성능: cost:low | 접귌성: risk:conditional; 요구 사항 확읞 필요 | +| | +| 색상: | +| Ʞ볞: #E8B4B8 (연한 분홍색) | +| 볎조: #A8D5BA (섞읎지 귞늰) | +| CTA: #D4AF37 (ꞈ색) | +| 배겜: #FFF5F5 (따뜻한 흰색) | +| 텍슀튞: #2D3436 (찚윜) | +| ì°žê³ : 찚분한 팔레튞에 ꞈ색 포읞튞륌 더핮 고꞉슀러욎 분위Ʞ 연출 | +| | +| 타읎포귞래플: Cormorant Garamond / Montserrat | +| 분위Ʞ: ìš°ì•„í•š, 찚분핚, 섞렚됚 | +| 추천 대상: 명품 뾌랜드, 웰니슀, 뷰티, 에디토늬얌 | +| Google Fonts: https://fonts.google.com/share?selection.family=... | +| | +| 핵심 횚곌: | +| 부드러욎 귞늌자 + 맥띜에 맞는 전환 + 은은한 혞버 상태 | +| | +| 플핎알 할 요소(안티팚턎): | +| 밝은 넀옚 색상 + 곌한 애니메읎션 + 닀크 몚드 + AI 슀타음 볎띌/분홍 귞띌디얞튞 | +| | +| 전달 전 첎크늬슀튞: | +| [ ] 읎몚지륌 아읎윘윌로 사용하지 않음(SVG: Heroicons/Lucide 사용) | +| [ ] 큎늭 가능한 몚든 요소에 cursor-pointer 적용 | +| [ ] 플랫폌, 컎포넌튞, 사용자 환겜섀정에 맞는 상혞작용 타읎밍 적용 | +| [ ] 띌읎튞 몚드: 텍슀튞 명암비 최소 4.5:1 | +| [ ] 킀볎드 탐색 시 포컀슀 상태 표시 | +| [ ] prefers-reduced-motion 쀀수 | +| [ ] 텍슀튞, 칩, 배지가 잘늬거나 깚지지 않고 재배치 | +| [ ] 반응형: 375px, 768px, 1024px, 1440px | +| | ++----------------------------------------------------------------------------------------+ +``` + +### 디자읞 시슀템 생성 방식 + +``` +┌─────────────────────────────────────────────────────────────────┐ +│ 1. 사용자 요청 │ +│ "낮 뷰티 슀파의 랜딩 페읎지륌 만듀얎 쀘" │ +└─────────────────────────────────────────────────────────────────┘ + │ + â–Œ +┌─────────────────────────────────────────────────────────────────┐ +│ 2. 닀쀑 도메읞 검색(5개 병렬 검색) │ +│ • 제품 유형 맀칭(192개 분알) │ +│ • 슀타음 추천(검색 가능 79개, 활성 50개) │ +│ • 색상 팔레튾 선택(192개 팔레튾) │ +│ • 랜딩 페읎지 팹턮(34개 팹턮) │ +│ • 타읎포귞래플 조합(74개 Ꞁꌎ 조합) │ +└─────────────────────────────────────────────────────────────────┘ + │ + â–Œ +┌─────────────────────────────────────────────────────────────────┐ +│ 3. 추론 엔진 │ +│ • 제품 → UI 분알 규칙 맀칭 │ +│ • 슀타음 우선순위 적용(BM25 순위) │ +│ • 산업별 안티팚턎 필터링 │ +│ • 의사결정 규칙 처늬(JSON 조걎) │ +└─────────────────────────────────────────────────────────────────┘ + │ + â–Œ +┌─────────────────────────────────────────────────────────────────┐ +│ 4. 완전한 디자읞 시슀템 출력 │ +│ 팹턮 + 슀타음 + 색상 + 타읎포귞래플 + 횚곌 │ +│ + 플핎알 할 안티팚턎 + 전달 전 첎크늬슀튞 │ +└─────────────────────────────────────────────────────────────────┘ +``` + +### 192개의 산업별 추론 규칙 + +추론 엔진에는 닀음 분알에 특화된 규칙읎 포핚되얎 있습니닀. + +| 분알 | 예시 | +|------|------| +| **Ʞ술 및 SaaS** | SaaS, 마읎크로 SaaS, B2B 서비슀, 개발자 도구/IDE, AI/챗뎇 플랫폌, 사읎버 볎안 플랫폌 | +| **ꞈ융** | 핀테크/암혞화폐, 은행, 볎험, 개읞 재묎 추적Ʞ, 청구서 및 결제 도구 | +| **헬슀쌀얎** | 병원, 앜국, 치곌, 동묌병원, 정신 걎강, 복앜 알늌 | +| **전자상거래** | 음반, 명품, 마쌓플레읎슀(P2P), 구독 상자, 음식 배달 | +| **서비슀** | 뷰티/슀파, 레슀토랑, 혾텔, 법률, 홈 서비슀, 예앜 및 음정 ꎀ늬 | +| **크늬에읎티람** | 포튞폎늬였, 에읎전시, 사진, 게임, 음악 슀튞늬밍, 사진/동영상 펞집Ʞ | +| **띌읎프슀타음** | 습ꎀ 추적Ʞ, 요늬 및 레시플, 명상, 날씚, 음Ʞ, Ʞ분 추적Ʞ | +| **신Ʞ술** | Web3/NFT, 공간 컎퓚팅, 양자 컎퓚팅, 자윚 드론 핹대 | + +각 규칙에는 닀음 항목읎 포핚됩니닀. +- **권장 팹턮** - 랜딩 페읎지 구조 +- **슀타음 우선순위** - 가장 적합한 UI 슀타음 +- **색상 분위Ʞ** - 산업에 적합한 색상 팔레튾 +- **타읎포귞래플 분위Ʞ** - Ꞁꌎ의 개성 조합 +- **핵심 횚곌** - 애니메읎션 및 상혞작용 +- **안티팚턎** - 플핎알 할 요소(예: 은행 서비슀의 "AI 슀타음 볎띌색/분홍색 귞띌디얞튞") + +## Ʞ능 + +- **검색 가능한 UI 슀타음 79개(활성 50개)** - Ꞁ래슀몚플슘, 큎레읎몚플슘, 믞니멀늬슘, 람룚탈늬슘, 뉎몚플슘, 벀토 귞늬드, 닀크 몚드, AI 넀읎티람 UI 등 +- **색상 팔레튾 192개** - 192개 제품 유형곌 1:1로 정렬된 산업별 팔레튾 +- **Ꞁꌎ 조합 74개** - Google Fonts 가젞였Ʞ 윔드가 포핚된 엄선된 타읎포귞래플 조합 +- **찚튞 유형 25개** - 대시볎드 및 분석 화멎을 위한 권장 사항 +- **Ʞ술 슀택 22개** - React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, HTML+Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, Three.js, JavaFX, WPF, WinUI 3, UWP, Avalonia, Uno Platform +- **UX 가읎드띌읞 119개** - 몚범 사례, 안티팚턎, 접귌성 규칙, 유연한 텍슀튞 레읎아웃, 간결한 레읎랔, 췚소 가능한 상혞작용 +- **추론 규칙 192개** - 산업별 디자읞 시슀템 생성(v2.0의 새로욎 Ʞ능) + +### 유연한 텍슀튞와 컎팩튞 UI + +읎 가읎드는 제목, ꞎ 토큰, 칩, 배지, 쀑닚된 마읎크로 읞터랙션에서 흔히 발생하는 싀제 서비슀 묞제륌 닀룹니닀. + +- 제목의 균형 잡힌 쀄바꿈은 점진적 향상 Ʞ능음 뿐, 특정 ë‹šì–Žê°€ 마지막 쀄에 낚는닀는 볎장은 아닙니닀. 너비, Ꞁꌎ, 로쌀음에 따륞 자연슀러욎 쀄바꿈에서도 디자읞읎 정상적윌로 작동핎알 합니닀. +- 필수 텍슀튞는 좁은 화멎, 람띌우저 확대, 텍슀튞 크Ʞ 조정, 사용자 간격 섀정에서도 잘늬지 않고 재배치되얎알 합니닀. ꞎ URL곌 식별자는 안전하게 쀄바꿈할 수 있얎알 합니닀. +- 칩곌 태귞 몚음은 쀄바꿈되거나 조작 가능한 `+n` 펌치Ʞ Ʞ능을 사용핎알 합니닀. 간결한 레읎랔은 가능한 한 옚전하게 유지하고, 불가플하게 잘띌알 한닀멎 킀볎드·포읞터·터치 사용자가 전첎 값을 확읞할 수 있는 ì ‘ê·Œ 가능한 겜로륌 제공핎알 합니닀. +- 배지의 의믞륌 색상에만 의졎핎서는 안 됩니닀. 상혞작용 가능한 칩에는 넀읎티람 시맚틱, 명확한 포컀슀, 프로귞래밍 방식의 상태가 필요하며 싀시간 개수에는 의믞 있는 맥띜읎 필요합니닀. +- 빠륞 상혞작용은 애니메읎션을 췚소할 수 있지만, 최종 시맚틱 상태·포컀슀·윘텐잠는 정확핎알 합니닀. 타읎밍은 플랫폌곌 컎포넌튞에 맞게 선택하고 몚션 감소 환겜섀정을 졎쀑핎알 합니닀. + +### 슀타음 분류 첎계 + +칎탈로귞에는 안정적읞 ID와 별칭윌로 뒷받칚되는 **검색 가능한 슀타음 79개**가 포핚됩니닀. + +| 상태 | 개수 | 검색 동작 | +|------|-----:|-----------| +| 활성 | 50 | 음반 추천에 포핚되며 가러늬에 Ʞ볞 표시 | +| 볎조 | 29 | 정확하거나 명시적읞 변형/시슀템 의도음 때 반환되며 가러늬 상태 필터에서 사용 가능 | +| 사용 쀑닚 | 9 | 음반 순위에서 제왞되며 êž°ì¡Ž 읎늄은 표쀀 슀타음 또는 랜딩 팚턎윌로 연결 | + +활성 섞튞는 음반 시각 슀타음군 43개, 몚바음 전용 슀타음 2개, 공식 플랫폌/디자읞 시슀템 3개, 플랫폌 소재 1개, 핵심 분석 슀타음 1개륌 포핚합니닀. 현재 공식 시슀템에는 Fluent 2, Shopify Polaris, Adobe Spectrum읎 포핚됩니닀. Liquid Glass는 Apple 플랫폌 소재로 한정되고, Material 3 Expressive는 몚바음 Material 변형윌로 유지되며, Spectrum 2는 볎조 슀타음입니닀. 랜딩 페읎지 구조는 BM25 순위에서 시각 슀타음곌 겜쟁하지 않고 별도의 34개 팹턮 랜딩 데읎터셋에 포핚됩니닀. + +전첎 분류 첎계와 출처 읞식 메타데읎터는 [`styles.csv`](src/ui-ux-pro-max/data/styles.csv)륌 찞고하섞요. + +## 💎 Ʞ볞 버전곌 프늬믞엄 버전 비교 + +많은 사용자가 였픈 소슀 버전곌 프늬믞엄 버전의 찚읎륌 묻습니닀. 워크플로에 적합한 버전을 선택할 수 있도록 자섞히 비교했습니닀. + +### 🟢 Ʞ볞 버전(읎 저장소) +* **완전한 였픈 소슀:** 개읞 개발자, 췚믞 개발자, 음반 프로젝튞에 적합합니닀. +* **핵심 UI/UX 읞텔늬전슀:** 검색 가능한 UI 슀타음 79개(활성 50개), 제품 유형 192개, 색상 팔레튾, 엄선된 Ꞁꌎ 조합을 몚두 사용할 수 있습니닀. +* **슀마튞 추천:** 낎장 BM25 검색 엔진윌로 정확도 높은 디자읞 맀칭을 제공합니닀. +* **크로슀 플랫폌 지원:** 22개 죌요 프레임워크(React, Vue, Tailwind, iOS, Android 등)륌 위한 슀택별 가읎드띌읞을 제공합니닀. +* **디자읞 시슀템 생성:** CLI륌 통핎 맞춀형 UI 규칙, 팹턮, 로직을 슉시 생성합니닀. + +### 🟡 프늬믞엄 버전 +* **확장된 뾌랜드 디자읞 슀킬:** UI/UX륌 넘얎 뾌랜드 아읎덎티티 생성, 로고 디자읞, êž°ì—… 아읎덎티티 프로귞랚(CIP), 배너, 프레젠테읎션 슬띌읎드, 맞춀형 아읎윘 제작을 포핚합니닀. +* **고꞉ 에셋 생성:** AI êž°ë°˜ 읎믞지 생성곌 ꞎ밀하게 통합되얎 플레읎슀홀더가 아닌 싀제 시각 에셋을 만듭니닀. +* **엔터프띌읎슈 아킀텍처:** 대규몚 팀 배포륌 위한 더 포ꎄ적읎고 확장 가능한 디자읞 토큰 아킀텍처륌 제공합니닀. +* **우선 지원:** 쀑닚 없는 전첎 디자읞 워크플로가 필요한 팀곌 전묞가에게 전용 Ʞ술 지원을 제공합니닀. + +👉 *프늬믞엄 등꞉ 업귞레읎드에 ꎀ한 자섞한 낎용은 [uupm.cc](https://uupm.cc)륌 찞고하섞요.* + +## 섀치 + +### Claude Marketplace 사용(Claude Code) + +Claude Code에서 닀음 두 명령얎로 바로 섀치할 수 있습니닀. + +``` +/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill +/plugin install ui-ux-pro-max@ui-ux-pro-max-skill +``` + +### CLI 사용(권장) + +```bash +# CLI 전역 섀치 +npm install -g ui-ux-pro-max-cli + +# 프로젝튞로 읎동 +cd /path/to/your/project + +# 사용하는 AI 얎시슀턎튞용윌로 섀치 +uipro init --ai claude # Claude Code +uipro init --ai cursor # Cursor +uipro init --ai windsurf # Windsurf +uipro init --ai antigravity # Antigravity +uipro init --ai copilot # GitHub Copilot +uipro init --ai kiro # Kiro +uipro init --ai codex # Codex CLI +uipro init --ai qoder # Qoder +uipro init --ai roocode # Roo Code +uipro init --ai gemini # Gemini CLI +uipro init --ai trae # Trae +uipro init --ai opencode # OpenCode +uipro init --ai continue # Continue +uipro init --ai codebuddy # CodeBuddy +uipro init --ai droid # Droid (Factory) +uipro init --ai kilocode # KiloCode +uipro init --ai warp # Warp +uipro init --ai augment # Augment +uipro init --ai codewhale # CodeWhale +uipro init --ai openclaw # OpenClaw +uipro init --ai universal # Universal / Agent Standard (.agents/skills/) +uipro init --ai all # All assistants +``` + +npm 팚킀지명은 `ui-ux-pro-max-cli`읎며, 섀치되는 명령얎는 `uipro`입니닀. 읎전 `uipro-cli` 늎늬슀는 였래되었윌므로 현재 에셋곌 핚께 사용하지 마섞요. + +### 전역 섀치(몚든 프로젝튞에서 사용) + +```bash +uipro init --ai claude --global # Install to ~/.claude/skills/ +uipro init --ai cursor --global # Install to ~/.cursor/skills/ +uipro init --ai universal --global # Install to ~/.agents/skills/ +``` + +### Ʞ타 CLI 명령얎 + +```bash +uipro versions # List available versions +uipro update # Refresh skill files from installed CLI package +uipro update --global # Refresh global skill files from installed CLI package +uipro init --offline # Compatibility flag; installs bundled templates +uipro uninstall # Remove skill (auto-detect platform) +uipro uninstall --ai claude # Remove specific platform +uipro uninstall --global # Remove from global install +``` + +## 사전 요구 사항 + +검색 슀크늜튞륌 싀행하렀멎 Python 3.x가 필요합니닀. 표쀀 띌읎람러늬만 사용하며, 슀크늜튞는 아묎것도 섀치하지 않고 넀튞워크 요청도 볎낎지 않습니닀. + +Python 섀치 여부륌 확읞하섞요. + +```bash +python3 --version +``` + +섀치되얎 있지 않닀멎 [python.org](https://www.python.org/downloads/) 또는 욎영첎제의 팚킀지 ꎀ늬자(Homebrew, apt, winget)륌 사용핎 직접 섀치하섞요. 읎 섀치 닚계는 **사람읞 사용자**가 수행핎알 합니닀. 읎 슀킬을 사용하는 AI 에읎전튞는 사용자 컎퓚터에 소프튞웚얎륌 직접 섀치하지 않고, 사용자에게 섀치륌 요청하도록 지시되얎 있습니닀. + +## 사용법 + +### 슀킬 몚드(자동 활성화) + +**지원:** Claude Code, Cursor, Windsurf, Antigravity, Codex CLI, Continue, Gemini CLI, OpenCode, Qoder, CodeBuddy, Droid (Factory), KiloCode, Warp, Augment, CodeWhale + +UI/UX 작업을 요청하멎 슀킬읎 자동윌로 활성화됩니닀. 자연슀럜게 요청하섞요. + +``` +낮 SaaS 제품의 랜딩 페읎지륌 만듀얎 쀘 +``` + +> **Trae**: 뚌저 **SOLO** 몚드로 전환하섞요. UI/UX 요청 시 슀킬읎 활성화됩니닀. + +### 워크플로 몚드(슬래시 명령얎) + +**지원:** Kiro, GitHub Copilot, Roo Code, KiloCode + +슬래시 명령얎로 슀킬을 싀행하섞요. + +``` +/ui-ux-pro-max 낮 SaaS 제품의 랜딩 페읎지륌 만듀얎 쀘 +``` + +### 프롬프튞 예시 + +``` +낮 SaaS 제품의 랜딩 페읎지륌 만듀얎 쀘 + +헬슀쌀얎 분석 대시볎드륌 만듀얎 쀘 + +닀크 몚드 포튞폎늬였 웹사읎튞륌 디자읞핎 쀘 + +전자상거래 몚바음 앱 UI륌 만듀얎 쀘 + +얎두욎 테마의 핀테크 뱅킹 앱을 만듀얎 쀘 +``` + +### 작동 방식 + +1. **요청** - UI/UX 작업을 요청합니닀(구축, 디자읞, 생성, 구현, 검토, 수정, 개선). +2. **디자읞 시슀템 생성** - AI가 추론 엔진을 사용핎 완전한 디자읞 시슀템을 자동윌로 생성합니닀. +3. **슀마튞 추천** - 제품 유형곌 요구 사항에 따띌 가장 적합한 슀타음, 색상, 타읎포귞래플륌 찟습니닀. +4. **윔드 생성** - 적절한 색상, Ꞁꌎ, 간격, 몚범 사례륌 적용핎 UI륌 구현합니닀. +5. **전달 전 검사** - 음반적읞 UI/UX 안티팚턎을 Ʞ쀀윌로 검슝합니닀. + +### 지원 슀택 + +읎 슀킬은 닀음 슀택별 가읎드띌읞을 제공합니닀. + +| 분알 | 슀택 | +|------|------| +| **웹(HTML)** | HTML + Tailwind(Ʞ볞값) | +| **React 생태계** | React, Next.js, shadcn/ui | +| **Vue 생태계** | Vue, Nuxt.js, Nuxt UI | +| **Angular** | Angular | +| **PHP** | Laravel(Blade, Livewire, Inertia.js) | +| **Ʞ타 웹** | Svelte, Astro, Three.js | +| **데슀크톱** | JavaFX, WPF, WinUI 3, Avalonia, Uno Platform, UWP | +| **iOS** | SwiftUI | +| **Android** | Jetpack Compose | +| **크로슀 플랫폌** | React Native, Flutter | + +프롬프튞에서 원하는 슀택을 얞꞉하거나 Ʞ볞값읞 HTML + Tailwind륌 사용하섞요. + +## 디자읞 시슀템 명령얎(고꞉) + +디자읞 시슀템 생성Ʞ에 직접 접귌하렀멎 닀음 명령얎륌 사용하섞요. + +> ì°žê³ : Continue로 섀치했닀멎 아래 명령얎의 `.claude/skills/`륌 `.continue/skills/`로 바꟞섞요. Droid(Factory)는 `.factory/skills/`륌 사용합니닀. + +```bash +# ASCII 출력윌로 디자읞 시슀템 생성 +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa" + +# Markdown 출력윌로 생성 +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown + +# 도메읞별 검색 +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant serif" --domain typography +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "dashboard" --domain chart +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "error summary validation" --domain ux +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "decorative icon aria hidden" --domain icons +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "icon button accessible label" --domain icons +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "orphan heading line balance" --domain ux +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "badge chip label wraps to second line" --domain ux +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "rapid chip animation interrupted" --domain ux + +# 슀택별 가읎드띌읞 +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "responsive layout" --stack html-tailwind +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "chip badge overflow nowrap" --stack html-tailwind +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "tableview binding" --stack javafx +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "atlantafx primer enterprise theme" --stack javafx +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "enterprise tableview density permission" --stack javafx +``` + +웹 슀택 검색은 버전을 읞식합니닀. 읎전 메읎저 버전을 지정하지 않은 쿌늬는 현재 활성 가읎드띌읞을 반환합니닀. 명시적읞 레거시 용얎나 읎전 메읎저 버전(예: `Svelte 4`, `Next.js 15`)을 지정하멎 `Status`와 `Applies To`가 표시된 엄선된 레거시 행만 반환합니닀. 음치하는 레거시 가읎드띌읞읎 없닀멎 프레임워크 섞대륌 섞지 않고 결곌륌 반환하지 않습니닀. + +### 디자읞 시슀템 저장(마슀터 + 였버띌읎드 팹턮) + +ì„žì…˜ 간 **계잵적 검색**을 위핎 디자읞 시슀템을 파음로 저장하섞요. + +```bash +# 디자읞 시슀템을 생성하여 design-system/MASTER.md에 저장 +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" + +# 페읎지별 였버띌읎드 파음도 생성 +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" --page "dashboard" +``` + +닀음곌 같은 `design-system/` 폮더 구조가 생성됩니닀. + +``` +design-system/ +├── MASTER.md # 전역 닚음 정볎 출처(색상, 타읎포귞래플, 간격, 컎포넌튞) +└── pages/ + └── dashboard.md # 페읎지별 였버띌읎드(마슀터와 닀륞 낎용만 Ʞ록) +``` + +**계잵적 검색 방식:** +1. 특정 페읎지(예: "결제")륌 만듀 때 뚌저 `design-system/pages/checkout.md`륌 확읞합니닀. +2. 페읎지 파음읎 있윌멎 핎당 규칙읎 마슀터 파음을 **재정의**합니닀. +3. 없윌멎 `design-system/MASTER.md`만 사용합니닀. + +**컚텍슀튞 읞식 검색 프롬프튞:** +``` +[페읎지 읎늄] 페읎지륌 만듀고 있습니닀. design-system/MASTER.md륌 읜얎 죌섞요. +design-system/pages/[page-name].md 파음읎 있는지도 확읞핎 죌섞요. +페읎지 파음읎 있윌멎 핎당 규칙을 우선 적용하섞요. +없윌멎 마슀터 규칙만 사용하섞요. +읎제 윔드륌 생성핎 죌섞요... +``` + +## 아킀텍처 및 êž°ì—¬ + +### 사용자 안낎 + +윔드베읎슀는 **템플늿 êž°ë°˜ 생성 시슀템**을 사용하도록 재구성되었습니닀. 몚든 플랫폌별 파음(`.cursor/`, `.windsurf/`, `.kiro/`, `.factory/` 등)은 읎제 CLI에서 동적윌로 생성됩니닀. + +**항상 CLI륌 사용핎 섀치하섞요.** + +```bash +npm install -g ui-ux-pro-max-cli +uipro init --ai +``` + +읎 방법을 사용하멎 섀치된 CLI 팚킀지에 포핚된 최신 템플늿곌 AI 얎시슀턎튞에 맞는 올바륞 파음 구조륌 받을 수 있습니닀. 새 늎늬슀가 배포되멎 뚌저 npm 팚킀지륌 업데읎튞하섞요. + +### Ʞ여자 안낎 + +읎 프로젝튞에 Ʞ여하렀멎 닀음 절찚륌 따륎섞요. + +```bash +# 1. 저장소 복제 +git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git +cd ui-ux-pro-max-skill + +# 2. 구조 읎핎 +src/ui-ux-pro-max/ # 닚음 정볎 출처(데읎터, 슀크늜튞, 템플늿) +cli/ # CLI 섀치 도구(템플늿에서 파음 생성) +.claude/ # Claude Code 슀킬 로컬 개발/테슀튞 +.factory/ # Droid(Factory) 슀킬 로컬 개발/테슀튞 + +# 3. src/ui-ux-pro-max/에서 변겜 +# - data/*.csv → 데읎터베읎슀 파음 +# - scripts/*.py → 검색 엔진 및 디자읞 시슀템 +# - templates/ → 플랫폌별 템플늿 + +# 4. CLI에 동Ʞ화하고 로컬 테슀튞 +cd cli +npm run sync:assets +npm run check:assets +npm run verify:data +npm run typecheck + +# 5. CLI 빌드 및 테슀튞 +# `npm run build`는 Bun읎 있윌멎 사용하고, 없윌멎 `npm ci` 후 TypeScript 컎파음러 출력을 사용합니닀. +npm run build +node dist/index.js init --ai claude --offline # Test in a temp folder + +# 6. PR 생성(main에 직접 푞시하지 않음) +git checkout -b feat/your-feature +git commit -m "feat: description" +git push -u origin feat/your-feature +gh pr create +``` + +자섞한 개발 가읎드띌읞은 [CLAUDE.md](CLAUDE.md)륌 찞고하섞요. + +### 칎탈로귞 출처 및 갱신 + +컀밋된 칎탈로귞 요앜에는 현재 **승읞된 Google Fonts 1,934개**와 공식 띌읎선슀 메타데읎터가 음치하지 않아 반영되지 않은 **검토 제왞 항목 8개**가 Ʞ록되얎 있습니닀. 아읎윘 가읎드는 **엄선된 105개 행**(Phosphor 웹 직접 가젞였Ʞ 100개와 React Native/대첎 가읎드)윌로 유지됩니닀. 별도의 **1,512개 아읎윘읎 포핚된 업슀튞늌 Phosphor 맀니페슀튞**는 검색 결곌륌 업슀튞늌 팚킀지 전첎로 채우지 않윌멎서 읎늄, 두께, React/SSR 가젞였Ʞ륌 검슝합니닀. + +음반 개발 및 풀 늬퀘슀튞 CI는 넀튞워크에 의졎하지 않습니닀. 슀냅샷 핎시와 생성 개수 검슝을 포핚한 전첎 였프띌읞 게읎튞륌 싀행하렀멎 닀음 명령얎륌 사용하섞요. + +```bash +npm --prefix cli run verify:data +# 또는 생성된 칎탈로귞 요앜만 검사: +npm --prefix cli run validate:catalog-summary +``` + +갱신 정규화도 컀밋된 픜슀처륌 사용핎 완전히 였프띌읞윌로 싀행할 수 있습니닀. 출력은 임시 후볎 디렉터늬에 저장되며 표쀀 데읎터륌 대첎하지 않습니닀. + +```bash +candidate_dir="$(mktemp -d)" +python3 scripts/refresh-google-fonts.py \ + --api-input src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/google-api.json \ + --metadata-input src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/google-metadata.json \ + --existing-csv src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/google-existing.csv \ + --overrides src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/google-overrides.json \ + --output-csv "$candidate_dir/google-fonts.csv" \ + --license-output "$candidate_dir/google-font-licenses.json" \ + --metadata-revision fixture-catalogs-v1 \ + --verified-at 2026-08-13 --expected-count 2 --approve-changes +python3 scripts/refresh-icon-catalog.py \ + --input src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/phosphor-core.json \ + --package-json src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/phosphor-package.json \ + --react-package-json src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/phosphor-react-package.json \ + --react-exports-input src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/phosphor-react-exports.json \ + --curated-csv src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/icons-curated.csv \ + --output "$candidate_dir/phosphor-icons-upstream.json" \ + --verified-at 2026-08-13 --expected-count 2 +``` + +싀시간 업슀튞늌 갱신은 의도적윌로 `refresh-catalogs.yml` 워크플로에 격늬되얎 있윌며, 맀죌 월요음 03:17 UTC에 싀행되거나 필요할 때 수동윌로 싀행할 수 있습니닀. `GOOGLE_FONTS_API_KEY`륌 GitHub Actions 시크늿윌로 섀정한 닀음 워크플로륌 싀행하고 검토용 아티팩튞륌 닀욎로드하섞요. + +```bash +gh workflow run refresh-catalogs.yml +run_id="$(gh run list --workflow refresh-catalogs.yml --limit 1 --json databaseId --jq '.[0].databaseId')" +gh run watch "$run_id" +gh run download "$run_id" --name "catalog-refresh-review-$run_id" +``` + +읎 워크플로는 Google Fonts Developer API와 버전읎 고정된 공식 Phosphor 팚킀지륌 읜고, 후볎 파음곌 통합 diff륌 아티팩튞에 Ʞ록하며, 저장소 읜Ʞ 전용 권한만 가집니닀. 컀밋, í‘žì‹œ, PR 생성, 병합은 수행하지 않습니닀. 후볎 파음을 `src/ui-ux-pro-max/data/`에 수동윌로 반영하Ʞ 전에 변겜 볎고서, 제왞 항목, 띌읎선슀, ꎀ렚성 지표, 였프띌읞 게읎튞륌 검토하섞요. + + +## 자동 늎늬슀 + +읎 저장소는 Conventional Commits와 semantic-release륌 사용핎 GitHub 늎늬슀륌 자동윌로 생성합니닀. + +- `dev` 람랜치는 `2.6.0-beta.1`곌 같은 베타 GitHub 프늬늎늬슀륌 생성합니닀. +- `main` 람랜치는 `2.6.0`곌 같은 공식 안정 늎늬슀륌 생성합니닀. + +늎늬슀 녞튞와 `CHANGELOG.md`는 Conventional Commit 메시지에서 생성됩니닀. 늎늬슀 쀀비 쀑 `skill.json`, `.claude-plugin/plugin.json`, `.claude-plugin/marketplace.json`, `cli/package.json`, `cli/package-lock.json`의 버전 번혞가 동Ʞ화됩니닀. + +올바륞 버전 슝가륌 위핎 닀음 컀밋 유형을 사용하섞요. + +- `fix:` -> 팚치 늎늬슀 +- `feat:` -> 마읎너 늎늬슀 +- `feat!:` 또는 `BREAKING CHANGE:` -> 메읎저 늎늬슀 + +늎늬슀 워크플로는 GitHub 늎늬슀에 Ʞ볞 `GITHUB_TOKEN`을 사용하고, `ui-ux-pro-max-cli`륌 npm에 배포할 때 저장소의 `NPM_TOKEN` 시크늿을 사용합니닀. + +## 묞제 í•Žê²° + +### `uipro: unknown command 'uninstall'` 또는 `unknown command 'update'` + +섀치된 `ui-ux-pro-max-cli` 버전읎 였래되었습니닀. 업데읎튞한 후 닀시 시도하섞요. + +```bash +npm install -g ui-ux-pro-max-cli@latest +uipro uninstall +``` + +### `uipro uninstall` 싀행 시 "No installed AI skill directories detected"가 표시되는 겜우 + +명령얎륌 싀행한 디렉터늬가 슀킬을 섀치한 디렉터늬와 닀늅니닀. 닀음 쀑 하나륌 수행하섞요. + +```bash +# 방법 A — 처음 섀치한 프로젝튞 룚튞에서 싀행 +cd /path/to/your/project +uipro uninstall + +# 방법 B — 전역 섀치 제거 +uipro uninstall --global + +# 방법 C — 수동 제거 +rm -rf .claude/skills/ui-ux-pro-max # Claude Code +rm -rf .cursor/skills/ui-ux-pro-max # Cursor +rm -rf .windsurf/skills/ui-ux-pro-max # Windsurf +rm -rf .agents/skills/ui-ux-pro-max # Antigravity / Codex +``` + +### Claude.ai의 "Upload a skill" 대화상자에서 "Zip contains too many files (maximum 200)"가 표시되는 겜우 + +GitHub 저장소 전첎 ZIP을 업로드하지 마섞요. 읎 ZIP은 소슀 윔드, CLI 에셋, 묞서, 믞늬볎Ʞ, 여러 번듀 슀킬을 포핚한 개발용 첎크아웃읎므로 Claude의 파음 200개 업로드 제한을 쎈곌합니닀. Claude 슀킬 업로드용 아티팩튞가 아니며, 읎 프로젝튞는 현재 Claude.ai 수동 업로드용 ZIP을 별도로 배포하지 않습니닀. + +Claude Code에서는 Marketplace륌 통핎 섀치하섞요. + +```bash +/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill +/plugin install ui-ux-pro-max@ui-ux-pro-max-skill +``` + +또는 CLI 섀치 도구륌 사용하섞요. + +```bash +npx ui-ux-pro-max-cli init --ai claude +``` + +### Claude Marketplace 섀치가 "Zip file contains a symbolic link" 였류로 싀팚하는 겜우 + +v2.5.1 읎전 버전에서 알렀진 묞제입니닀. 저장소 낎부에서 음부 섀치 도구가 처늬할 수 없는 심볌늭 링크륌 사용했습니닀. **í•Žê²° 방법:** CLI 섀치 도구륌 사용하섞요. + +```bash +npm install -g ui-ux-pro-max-cli +uipro init --ai claude +``` + +또는 읎 묞제가 핎결된 닀음 늎늬슀륌 Ʞ닀늬섞요. + +### `npm install -g ui-ux-pro-max-cli` 명령읎 권한 였류로 싀팚하는 겜우 + +Node 버전 ꎀ늬자륌 사용하거나(권장) 전역 섀치륌 생략하섞요. + +```bash +# 전역 섀치 없읎 npx 사용 +npx ui-ux-pro-max-cli init --ai claude +``` + +### 디자읞 시슀템 명령얎 싀행 시 Python을 찟을 수 없는 겜우 + +검색 슀크늜튞에는 Python 3.x가 필요합니닀. [python.org](https://www.python.org/downloads/) 또는 욎영첎제의 팚킀지 ꎀ늬자(Homebrew, apt, winget)륌 사용핎 직접 섀치하섞요. AI 에읎전튞는 대신 섀치하지 않윌며 사용자에게 섀치륌 요청하도록 지시되얎 있습니닀. + +### 디자읞 시슀템 출력 또는 필드가 잘늬는 겜우 + +사람읎 읜Ʞ 쉬욎 출력에서는 ꞎ 필드가 300자로 잘늜니닀. 잘늬지 않은 전첎 데읎터륌 받윌렀멎 `--json`을 사용하섞요. + +```bash +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS" --domain style --json +``` + +--- + +## 슀타 Ʞ록 + +[![슀타 Ʞ록 찚튞](https://star-history.dera.page/svg?repos=nextlevelbuilder/ui-ux-pro-max-skill&type=Date)](https://star-history.dera.page/#nextlevelbuilder/ui-ux-pro-max-skill&Date) + +## 띌읎선슀 + +읎 프로젝튞는 [MIT 띌읎선슀](LICENSE)에 따띌 배포됩니닀. + +## 혾환 에읎전튞 + +읎 슀킬은 닀음 에읎전튞에서 사용할 수 있습니닀. +- [Claude Code](https://claude.com/product/claude-code) +- [AdaL](https://sylph.ai/) - 슀슀로 진화하는 AI 윔딩 에읎전튞([묞서](https://docs.sylph.ai/) | [GitHub](https://github.com/SylphAI-Inc/adal-cli)) diff --git a/README.md b/README.md index 6b71633..6a5a71f 100755 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@ # [UI UX Pro Max](https://uupm.cc)

+ 🇰🇷 한국얎 | 🇻🇳 Tiếng Việt | 🇚🇳 简䜓䞭文 | 🇺🇞 English diff --git a/README.vi.md b/README.vi.md index 2219c72..a37bd41 100644 --- a/README.vi.md +++ b/README.vi.md @@ -1,6 +1,7 @@ # [UI UX Pro Max](https://uupm.cc)

+ 🇰🇷 한국얎 | 🇻🇳 Tiếng Việt | 🇚🇳 简䜓䞭文 | 🇺🇞 English diff --git a/README.zh.md b/README.zh.md index be7c455..d2abd34 100644 --- a/README.zh.md +++ b/README.zh.md @@ -1,6 +1,7 @@ # [UI UX Pro Max](https://uupm.cc)

+ 🇰🇷 한국얎 | 🇻🇳 Tiếng Việt | 🇚🇳 简䜓䞭文 | 🇺🇞 English