kunthawat/opencode-skill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

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

Browse Source
This commit is contained in:
Kunthawat Greethong
2026-04-16 18:35:24 +07:00
parent da5f964d9a
commit ba1bca244a
12 changed files with 67 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
skills/website-creator/design/SKILL.md
View File

@@ -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