Update design and ui-ux-pro-max skills from install
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -170,8 +170,8 @@ node .claude/skills/brand/scripts/validate-asset.cjs <path>
|
||||
|
||||
**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:**
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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`
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
```
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user