From ba1bca244a69cf09f123343b56546f2a78442e71 Mon Sep 17 00:00:00 2001 From: Kunthawat Greethong Date: Thu, 16 Apr 2026 18:35:24 +0700 Subject: [PATCH] Update design and ui-ux-pro-max skills from install --- .DS_Store | Bin 8196 -> 8196 bytes skills/.DS_Store | Bin 10244 -> 10244 bytes skills/website-creator/.DS_Store | Bin 6148 -> 6148 bytes skills/website-creator/design/SKILL.md | 42 +++++++++--------- .../design/references/cip-design.md | 24 +++++----- .../design/references/design-routing.md | 4 +- .../design/references/icon-design.md | 16 +++---- .../design/references/logo-design.md | 12 ++--- .../references/slides-copywriting-formulas.md | 4 +- .../references/slides-layout-patterns.md | 4 +- .../design/references/slides-strategies.md | 4 +- skills/website-creator/ui-ux-pro-max/SKILL.md | 24 +++++----- 12 files changed, 67 insertions(+), 67 deletions(-) diff --git a/.DS_Store b/.DS_Store index c0395df9d0759f918e6f16b8e1250b9dac8d4591..f8d2d7973cf6bbb5589ee6bc7f8dfff113cfb0d5 100644 GIT binary patch delta 14 VcmZp1XmQx^U4W5s^A7-1sDJT delta 14 VcmZp1XmQx^U4W5c^A7%1s4DS diff --git a/skills/.DS_Store b/skills/.DS_Store index 9ffc065e28c2e260ad9af6180ab3a42c5a057d3a..ac15d6ad21173b86aeea34ce87ea0b6ee966d2d1 100644 GIT binary patch delta 18 ZcmZn(XbIS`N|2Fpa)Y4K=Cgw4VgNvu208!$ delta 18 ZcmZn(XbIS`N|2FZa)Y4K=Cgw4VgNvk1~~u# diff --git a/skills/website-creator/.DS_Store b/skills/website-creator/.DS_Store index e0ba5ff8ddfff20400962c69a7f530175f7367bf..b95d26683e068e9330f299a62be0e5f2b64a40ee 100644 GIT binary patch delta 102 zcmZoMXfc=|#>B`mu~2NHo+2ab!~pBb0*nnnMo*~CJ*u~2NHo+2a5!~knXmdQMfrJJ`h2C+>(z_?{II|n}pP{rnrjNh3j T^NScVGEBDNk=`65vVs`^M@$j{ diff --git a/skills/website-creator/design/SKILL.md b/skills/website-creator/design/SKILL.md index 79bcd9b..1c4a37f 100644 --- a/skills/website-creator/design/SKILL.md +++ b/skills/website-creator/design/SKILL.md @@ -44,15 +44,15 @@ Unified design skill: brand, tokens, UI, logo, CIP, slides, banners, social phot ### Logo: Generate Design Brief ```bash -python3 ~/.hermes/skills/website-creator/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName" +python3 ~/.claude/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName" ``` ### Logo: Search Styles/Colors/Industries ```bash -python3 ~/.hermes/skills/website-creator/design/scripts/logo/search.py "minimalist clean" --domain style -python3 ~/.hermes/skills/website-creator/design/scripts/logo/search.py "tech professional" --domain color -python3 ~/.hermes/skills/website-creator/design/scripts/logo/search.py "healthcare medical" --domain industry +python3 ~/.claude/skills/design/scripts/logo/search.py "minimalist clean" --domain style +python3 ~/.claude/skills/design/scripts/logo/search.py "tech professional" --domain color +python3 ~/.claude/skills/design/scripts/logo/search.py "healthcare medical" --domain industry ``` ### Logo: Generate with AI @@ -60,8 +60,8 @@ python3 ~/.hermes/skills/website-creator/design/scripts/logo/search.py "healthca **ALWAYS** generate output logo images with white background. ```bash -python3 ~/.hermes/skills/website-creator/design/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech -python3 ~/.hermes/skills/website-creator/design/scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintage +python3 ~/.claude/skills/design/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech +python3 ~/.claude/skills/design/scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintage ``` **IMPORTANT:** When scripts fail, try to fix them directly. @@ -75,32 +75,32 @@ After generation, **ALWAYS** ask user about HTML preview via `AskUserQuestion`. ### CIP: Generate Brief ```bash -python3 ~/.hermes/skills/website-creator/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName" +python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName" ``` ### CIP: Search Domains ```bash -python3 ~/.hermes/skills/website-creator/design/scripts/cip/search.py "business card letterhead" --domain deliverable -python3 ~/.hermes/skills/website-creator/design/scripts/cip/search.py "luxury premium elegant" --domain style -python3 ~/.hermes/skills/website-creator/design/scripts/cip/search.py "hospitality hotel" --domain industry -python3 ~/.hermes/skills/website-creator/design/scripts/cip/search.py "office reception" --domain mockup +python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable +python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style +python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry +python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockup ``` ### CIP: Generate Mockups ```bash # With logo (RECOMMENDED) -python3 ~/.hermes/skills/website-creator/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting" +python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting" # Full CIP set -python3 ~/.hermes/skills/website-creator/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set +python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set # Pro model (4K text) -python3 ~/.hermes/skills/website-creator/design/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro +python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro # Without logo -python3 ~/.hermes/skills/website-creator/design/scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt +python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt ``` Models: `flash` (default, `gemini-2.5-flash-image`), `pro` (`gemini-3-pro-image-preview`) @@ -108,7 +108,7 @@ Models: `flash` (default, `gemini-2.5-flash-image`), `pro` (`gemini-3-pro-image- ### CIP: Render HTML Presentation ```bash -python3 ~/.hermes/skills/website-creator/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output +python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output ``` **Tip:** If no logo exists, use Logo Design section above first. @@ -183,21 +183,21 @@ Load `references/banner-sizes-and-styles.md` for complete sizes and styles refer ### Icon: Generate Single Icon ```bash -python3 ~/.hermes/skills/website-creator/design/scripts/icon/generate.py --prompt "settings gear" --style outlined -python3 ~/.hermes/skills/website-creator/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1" -python3 ~/.hermes/skills/website-creator/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone +python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "settings gear" --style outlined +python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1" +python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone ``` ### Icon: Generate Batch Variations ```bash -python3 ~/.hermes/skills/website-creator/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons +python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons ``` ### Icon: Multi-size Export ```bash -python3 ~/.hermes/skills/website-creator/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons +python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons ``` ### Icon: Top Styles diff --git a/skills/website-creator/design/references/cip-design.md b/skills/website-creator/design/references/cip-design.md index 243754f..81829ed 100644 --- a/skills/website-creator/design/references/cip-design.md +++ b/skills/website-creator/design/references/cip-design.md @@ -16,49 +16,49 @@ Corporate Identity Program design with 50+ deliverables, 20 styles, 20 industrie ### CIP Brief (Start Here) ```bash -python3 ~/.hermes/skills/website-creator/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName" +python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName" ``` ### Search Domains ```bash # Deliverables -python3 ~/.hermes/skills/website-creator/design/scripts/cip/search.py "business card letterhead" --domain deliverable +python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable # Design styles -python3 ~/.hermes/skills/website-creator/design/scripts/cip/search.py "luxury premium elegant" --domain style +python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style # Industry guidelines -python3 ~/.hermes/skills/website-creator/design/scripts/cip/search.py "hospitality hotel" --domain industry +python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry # Mockup contexts -python3 ~/.hermes/skills/website-creator/design/scripts/cip/search.py "office reception" --domain mockup +python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockup ``` ### Generate Mockups ```bash # With logo (RECOMMENDED - uses image editing) -python3 ~/.hermes/skills/website-creator/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting" +python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting" # Full CIP set with logo -python3 ~/.hermes/skills/website-creator/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set +python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set # Pro model for 4K text rendering -python3 ~/.hermes/skills/website-creator/design/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro +python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro # Custom deliverables with aspect ratio -python3 ~/.hermes/skills/website-creator/design/scripts/cip/generate.py --brand "GreenLeaf" --logo logo.png --industry "organic food" --deliverables "letterhead,packaging,vehicle" --ratio 16:9 +python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "GreenLeaf" --logo logo.png --industry "organic food" --deliverables "letterhead,packaging,vehicle" --ratio 16:9 # Without logo (AI generates interpretation) -python3 ~/.hermes/skills/website-creator/design/scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt +python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt ``` ### Render HTML Presentation ```bash -python3 ~/.hermes/skills/website-creator/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output -python3 ~/.hermes/skills/website-creator/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images ./topgroup-cip --output presentation.html +python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output +python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images ./topgroup-cip --output presentation.html ``` ## Models diff --git a/skills/website-creator/design/references/design-routing.md b/skills/website-creator/design/references/design-routing.md index 5e4dcf7..78f5587 100644 --- a/skills/website-creator/design/references/design-routing.md +++ b/skills/website-creator/design/references/design-routing.md @@ -170,8 +170,8 @@ node .claude/skills/brand/scripts/validate-asset.cjs **Tokens:** ```bash -node ~/.hermes/skills/website-creator/design/scripts/generate-tokens.cjs -c tokens.json -node ~/.hermes/skills/website-creator/design/scripts/validate-tokens.cjs -d src/ +node .claude/skills/design-system/scripts/generate-tokens.cjs -c tokens.json +node .claude/skills/design-system/scripts/validate-tokens.cjs -d src/ ``` **Components:** diff --git a/skills/website-creator/design/references/icon-design.md b/skills/website-creator/design/references/icon-design.md index 8dfacd4..db6db01 100644 --- a/skills/website-creator/design/references/icon-design.md +++ b/skills/website-creator/design/references/icon-design.md @@ -13,29 +13,29 @@ AI-powered SVG icon generation using Gemini 3.1 Pro Preview. 15 styles, 12 categ ### Generate Single Icon ```bash -python3 ~/.hermes/skills/website-creator/design/scripts/icon/generate.py --prompt "settings gear" --style outlined -python3 ~/.hermes/skills/website-creator/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1" -python3 ~/.hermes/skills/website-creator/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone +python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "settings gear" --style outlined +python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1" +python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone ``` ### Generate Batch Variations ```bash -python3 ~/.hermes/skills/website-creator/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons -python3 ~/.hermes/skills/website-creator/design/scripts/icon/generate.py --prompt "notification bell" --batch 6 --style outlined --output-dir ./icons +python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons +python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "notification bell" --batch 6 --style outlined --output-dir ./icons ``` ### Generate Multiple Sizes ```bash -python3 ~/.hermes/skills/website-creator/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons +python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons ``` ### List Styles/Categories ```bash -python3 ~/.hermes/skills/website-creator/design/scripts/icon/generate.py --list-styles -python3 ~/.hermes/skills/website-creator/design/scripts/icon/generate.py --list-categories +python3 ~/.claude/skills/design/scripts/icon/generate.py --list-styles +python3 ~/.claude/skills/design/scripts/icon/generate.py --list-categories ``` ## CLI Options diff --git a/skills/website-creator/design/references/logo-design.md b/skills/website-creator/design/references/logo-design.md index 4352c85..c10de1a 100644 --- a/skills/website-creator/design/references/logo-design.md +++ b/skills/website-creator/design/references/logo-design.md @@ -15,20 +15,20 @@ AI-powered logo design with 55+ styles, 30 color palettes, 25 industry guides. U ### Design Brief (Start Here) ```bash -python3 ~/.hermes/skills/website-creator/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName" +python3 ~/.claude/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName" ``` ### Search Domains ```bash # Styles -python3 ~/.hermes/skills/website-creator/design/scripts/logo/search.py "minimalist clean" --domain style +python3 ~/.claude/skills/design/scripts/logo/search.py "minimalist clean" --domain style # Color palettes -python3 ~/.hermes/skills/website-creator/design/scripts/logo/search.py "tech professional" --domain color +python3 ~/.claude/skills/design/scripts/logo/search.py "tech professional" --domain color # Industry guidelines -python3 ~/.hermes/skills/website-creator/design/scripts/logo/search.py "healthcare medical" --domain industry +python3 ~/.claude/skills/design/scripts/logo/search.py "healthcare medical" --domain industry ``` ### Generate Logo @@ -36,8 +36,8 @@ python3 ~/.hermes/skills/website-creator/design/scripts/logo/search.py "healthca **ALWAYS** use white background for output logos. ```bash -python3 ~/.hermes/skills/website-creator/design/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech -python3 ~/.hermes/skills/website-creator/design/scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintage +python3 ~/.claude/skills/design/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech +python3 ~/.claude/skills/design/scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintage ``` Options: `--style`, `--industry`, `--prompt` diff --git a/skills/website-creator/design/references/slides-copywriting-formulas.md b/skills/website-creator/design/references/slides-copywriting-formulas.md index 989b026..ecf2875 100644 --- a/skills/website-creator/design/references/slides-copywriting-formulas.md +++ b/skills/website-creator/design/references/slides-copywriting-formulas.md @@ -66,10 +66,10 @@ ```bash # Find formula for slide type -python ~/.hermes/skills/website-creator/design/scripts/search-slides.py "problem agitation" -d copy +python .claude/skills/design-system/scripts/search-slides.py "problem agitation" -d copy # Get emotion-appropriate formula -python ~/.hermes/skills/website-creator/design/scripts/search-slides.py "urgency cta" -d copy +python .claude/skills/design-system/scripts/search-slides.py "urgency cta" -d copy ``` ## Quick Reference diff --git a/skills/website-creator/design/references/slides-layout-patterns.md b/skills/website-creator/design/references/slides-layout-patterns.md index 90ed545..e2b3849 100644 --- a/skills/website-creator/design/references/slides-layout-patterns.md +++ b/skills/website-creator/design/references/slides-layout-patterns.md @@ -113,10 +113,10 @@ ```bash # Find layout for specific use -python ~/.hermes/skills/website-creator/design/scripts/search-slides.py "metrics dashboard" -d layout +python .claude/skills/design-system/scripts/search-slides.py "metrics dashboard" -d layout # Contextual recommendation -python ~/.hermes/skills/website-creator/design/scripts/search-slides.py "traction slide" \ +python .claude/skills/design-system/scripts/search-slides.py "traction slide" \ --context --position 4 --total 10 ``` diff --git a/skills/website-creator/design/references/slides-strategies.md b/skills/website-creator/design/references/slides-strategies.md index fd81c25..e004fe1 100644 --- a/skills/website-creator/design/references/slides-strategies.md +++ b/skills/website-creator/design/references/slides-strategies.md @@ -76,10 +76,10 @@ Pattern breaks at 1/3 and 2/3 positions create engagement peaks. ```bash # Find strategy by goal -python ~/.hermes/skills/website-creator/design/scripts/search-slides.py "investor pitch" -d strategy +python .claude/skills/design-system/scripts/search-slides.py "investor pitch" -d strategy # Get emotion arc -python ~/.hermes/skills/website-creator/design/scripts/search-slides.py "series a funding" -d strategy --json +python .claude/skills/design-system/scripts/search-slides.py "series a funding" -d strategy --json ``` ## Matching Strategy to Context diff --git a/skills/website-creator/ui-ux-pro-max/SKILL.md b/skills/website-creator/ui-ux-pro-max/SKILL.md index 6b2e0ea..a64d6c2 100644 --- a/skills/website-creator/ui-ux-pro-max/SKILL.md +++ b/skills/website-creator/ui-ux-pro-max/SKILL.md @@ -363,7 +363,7 @@ Extract key information from user request: **Always start with `--design-system`** to get comprehensive recommendations with reasoning: ```bash -python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py " " --design-system [-p "Project Name"] +python3 skills/ui-ux-pro-max/scripts/search.py " " --design-system [-p "Project Name"] ``` This command: @@ -374,7 +374,7 @@ This command: **Example:** ```bash -python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa" +python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa" ``` ### Step 2b: Persist Design System (Master + Overrides Pattern) @@ -382,7 +382,7 @@ python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "beauty To save the design system for **hierarchical retrieval across sessions**, add `--persist`: ```bash -python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "" --design-system --persist -p "Project Name" +python3 skills/ui-ux-pro-max/scripts/search.py "" --design-system --persist -p "Project Name" ``` This creates: @@ -391,7 +391,7 @@ This creates: **With page-specific override:** ```bash -python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "" --design-system --persist -p "Project Name" --page "dashboard" +python3 skills/ui-ux-pro-max/scripts/search.py "" --design-system --persist -p "Project Name" --page "dashboard" ``` This also creates: @@ -416,7 +416,7 @@ Now, generate the code... After getting the design system, use domain searches to get additional details: ```bash -python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "" --domain [-n ] +python3 skills/ui-ux-pro-max/scripts/search.py "" --domain [-n ] ``` **When to use detailed searches:** @@ -441,7 +441,7 @@ python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "" --stack react-native +python3 skills/ui-ux-pro-max/scripts/search.py "" --stack react-native ``` --- @@ -485,7 +485,7 @@ python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "