Update design and ui-ux-pro-max skills from install

This commit is contained in:
2026-04-16 18:35:24 +07:00
parent da5f964d9a
commit ba1bca244a
12 changed files with 67 additions and 67 deletions

BIN
.DS_Store vendored

Binary file not shown.

BIN
skills/.DS_Store vendored

Binary file not shown.

Binary file not shown.

View File

@@ -44,15 +44,15 @@ Unified design skill: brand, tokens, UI, logo, CIP, slides, banners, social phot
### Logo: Generate Design Brief ### Logo: Generate Design Brief
```bash ```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 ### Logo: Search Styles/Colors/Industries
```bash ```bash
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
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
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
``` ```
### Logo: Generate with AI ### 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. **ALWAYS** generate output logo images with white background.
```bash ```bash
python3 ~/.hermes/skills/website-creator/design/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech python3 ~/.claude/skills/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 --prompt "coffee shop vintage badge" --style vintage
``` ```
**IMPORTANT:** When scripts fail, try to fix them directly. **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 ### CIP: Generate Brief
```bash ```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 ### CIP: Search Domains
```bash ```bash
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
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
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
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
``` ```
### CIP: Generate Mockups ### CIP: Generate Mockups
```bash ```bash
# With logo (RECOMMENDED) # 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 # 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) # 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 # 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`) 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 ### CIP: Render HTML Presentation
```bash ```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. **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 ### Icon: Generate Single Icon
```bash ```bash
python3 ~/.hermes/skills/website-creator/design/scripts/icon/generate.py --prompt "settings gear" --style outlined python3 ~/.claude/skills/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 ~/.claude/skills/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 --name "dashboard" --category navigation --style duotone
``` ```
### Icon: Generate Batch Variations ### Icon: Generate Batch Variations
```bash ```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 ### Icon: Multi-size Export
```bash ```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 ### Icon: Top Styles

View File

@@ -16,49 +16,49 @@ Corporate Identity Program design with 50+ deliverables, 20 styles, 20 industrie
### CIP Brief (Start Here) ### CIP Brief (Start Here)
```bash ```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 ### Search Domains
```bash ```bash
# Deliverables # 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 # 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 # 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 # 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 ### Generate Mockups
```bash ```bash
# With logo (RECOMMENDED - uses image editing) # 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 # 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 # 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 # 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) # 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 ### Render HTML Presentation
```bash ```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
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 ./topgroup-cip --output presentation.html
``` ```
## Models ## Models

View File

@@ -170,8 +170,8 @@ node .claude/skills/brand/scripts/validate-asset.cjs <path>
**Tokens:** **Tokens:**
```bash ```bash
node ~/.hermes/skills/website-creator/design/scripts/generate-tokens.cjs -c tokens.json node .claude/skills/design-system/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/validate-tokens.cjs -d src/
``` ```
**Components:** **Components:**

View File

@@ -13,29 +13,29 @@ AI-powered SVG icon generation using Gemini 3.1 Pro Preview. 15 styles, 12 categ
### Generate Single Icon ### Generate Single Icon
```bash ```bash
python3 ~/.hermes/skills/website-creator/design/scripts/icon/generate.py --prompt "settings gear" --style outlined python3 ~/.claude/skills/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 ~/.claude/skills/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 --name "dashboard" --category navigation --style duotone
``` ```
### Generate Batch Variations ### Generate Batch Variations
```bash ```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
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 "notification bell" --batch 6 --style outlined --output-dir ./icons
``` ```
### Generate Multiple Sizes ### Generate Multiple Sizes
```bash ```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 ### List Styles/Categories
```bash ```bash
python3 ~/.hermes/skills/website-creator/design/scripts/icon/generate.py --list-styles python3 ~/.claude/skills/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-categories
``` ```
## CLI Options ## CLI Options

View File

@@ -15,20 +15,20 @@ AI-powered logo design with 55+ styles, 30 color palettes, 25 industry guides. U
### Design Brief (Start Here) ### Design Brief (Start Here)
```bash ```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 ### Search Domains
```bash ```bash
# Styles # 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 # 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 # 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 ### Generate Logo
@@ -36,8 +36,8 @@ python3 ~/.hermes/skills/website-creator/design/scripts/logo/search.py "healthca
**ALWAYS** use white background for output logos. **ALWAYS** use white background for output logos.
```bash ```bash
python3 ~/.hermes/skills/website-creator/design/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech python3 ~/.claude/skills/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 --prompt "coffee shop vintage badge" --style vintage
``` ```
Options: `--style`, `--industry`, `--prompt` Options: `--style`, `--industry`, `--prompt`

View File

@@ -66,10 +66,10 @@
```bash ```bash
# Find formula for slide type # 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 # 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 ## Quick Reference

View File

@@ -113,10 +113,10 @@
```bash ```bash
# Find layout for specific use # 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 # 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 --context --position 4 --total 10
``` ```

View File

@@ -76,10 +76,10 @@ Pattern breaks at 1/3 and 2/3 positions create engagement peaks.
```bash ```bash
# Find strategy by goal # 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 # 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 ## Matching Strategy to Context

View File

@@ -363,7 +363,7 @@ Extract key information from user request:
**Always start with `--design-system`** to get comprehensive recommendations with reasoning: **Always start with `--design-system`** to get comprehensive recommendations with reasoning:
```bash ```bash
python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"] python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
``` ```
This command: This command:
@@ -374,7 +374,7 @@ This command:
**Example:** **Example:**
```bash ```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) ### 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`: To save the design system for **hierarchical retrieval across sessions**, add `--persist`:
```bash ```bash
python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
``` ```
This creates: This creates:
@@ -391,7 +391,7 @@ This creates:
**With page-specific override:** **With page-specific override:**
```bash ```bash
python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard" python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
``` ```
This also creates: This also creates:
@@ -416,7 +416,7 @@ Now, generate the code...
After getting the design system, use domain searches to get additional details: After getting the design system, use domain searches to get additional details:
```bash ```bash
python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>] python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
``` ```
**When to use detailed searches:** **When to use detailed searches:**
@@ -441,7 +441,7 @@ python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "<keywo
Get React Native implementation-specific best practices: Get React Native implementation-specific best practices:
```bash ```bash
python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "<keyword>" --stack react-native python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack react-native
``` ```
--- ---
@@ -485,7 +485,7 @@ python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "<keywo
### Step 2: Generate Design System (REQUIRED) ### Step 2: Generate Design System (REQUIRED)
```bash ```bash
python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "AI search tool modern minimal" --design-system -p "AI Search" python3 skills/ui-ux-pro-max/scripts/search.py "AI search tool modern minimal" --design-system -p "AI Search"
``` ```
**Output:** Complete design system with pattern, style, colors, typography, effects, and anti-patterns. **Output:** Complete design system with pattern, style, colors, typography, effects, and anti-patterns.
@@ -494,16 +494,16 @@ python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "AI sea
```bash ```bash
# Get style options for a modern tool product # Get style options for a modern tool product
python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "minimalism dark mode" --domain style python3 skills/ui-ux-pro-max/scripts/search.py "minimalism dark mode" --domain style
# Get UX best practices for search interaction and loading # Get UX best practices for search interaction and loading
python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "search loading animation" --domain ux python3 skills/ui-ux-pro-max/scripts/search.py "search loading animation" --domain ux
``` ```
### Step 4: Stack Guidelines ### Step 4: Stack Guidelines
```bash ```bash
python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "list performance navigation" --stack react-native python3 skills/ui-ux-pro-max/scripts/search.py "list performance navigation" --stack react-native
``` ```
**Then:** Synthesize design system + detailed searches and implement the design. **Then:** Synthesize design system + detailed searches and implement the design.
@@ -516,10 +516,10 @@ The `--design-system` flag supports two output formats:
```bash ```bash
# ASCII box (default) - best for terminal display # ASCII box (default) - best for terminal display
python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
# Markdown - best for documentation # Markdown - best for documentation
python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
``` ```
--- ---