Update design and ui-ux-pro-max skills from install
This commit is contained in:
BIN
skills/.DS_Store
vendored
BIN
skills/.DS_Store
vendored
Binary file not shown.
BIN
skills/website-creator/.DS_Store
vendored
BIN
skills/website-creator/.DS_Store
vendored
Binary file not shown.
@@ -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
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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:**
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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`
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|||||||
Reference in New Issue
Block a user