ui-pro-forge-cli 2.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +99 -0
- package/assets/data/app-interface.csv +31 -0
- package/assets/data/charts.csv +26 -0
- package/assets/data/colors.csv +194 -0
- package/assets/data/google-fonts.csv +1924 -0
- package/assets/data/icons.csv +106 -0
- package/assets/data/landing.csv +35 -0
- package/assets/data/motion.csv +17 -0
- package/assets/data/products.csv +193 -0
- package/assets/data/react-performance.csv +45 -0
- package/assets/data/stacks/angular.csv +51 -0
- package/assets/data/stacks/astro.csv +54 -0
- package/assets/data/stacks/avalonia.csv +57 -0
- package/assets/data/stacks/flutter.csv +53 -0
- package/assets/data/stacks/html-tailwind.csv +56 -0
- package/assets/data/stacks/javafx.csv +76 -0
- package/assets/data/stacks/jetpack-compose.csv +53 -0
- package/assets/data/stacks/laravel.csv +51 -0
- package/assets/data/stacks/nextjs.csv +53 -0
- package/assets/data/stacks/nuxt-ui.csv +71 -0
- package/assets/data/stacks/nuxtjs.csv +59 -0
- package/assets/data/stacks/react-native.csv +52 -0
- package/assets/data/stacks/react.csv +54 -0
- package/assets/data/stacks/shadcn.csv +61 -0
- package/assets/data/stacks/solidjs.csv +21 -0
- package/assets/data/stacks/svelte.csv +54 -0
- package/assets/data/stacks/swiftui.csv +51 -0
- package/assets/data/stacks/threejs.csv +54 -0
- package/assets/data/stacks/uno.csv +60 -0
- package/assets/data/stacks/vue.csv +50 -0
- package/assets/data/stacks/winui.csv +60 -0
- package/assets/data/styles.csv +86 -0
- package/assets/data/typography.csv +75 -0
- package/assets/data/ui-reasoning.csv +162 -0
- package/assets/data/ux-guidelines.csv +100 -0
- package/assets/scripts/core.py +463 -0
- package/assets/scripts/design_system.py +1371 -0
- package/assets/scripts/search.py +162 -0
- package/assets/scripts/tests/test_core.py +134 -0
- package/assets/scripts/validate_data.py +114 -0
- package/assets/skills/banner-design/SKILL.md +196 -0
- package/assets/skills/banner-design/references/banner-sizes-and-styles.md +118 -0
- package/assets/skills/brand/SKILL.md +97 -0
- package/assets/skills/brand/references/approval-checklist.md +169 -0
- package/assets/skills/brand/references/asset-organization.md +157 -0
- package/assets/skills/brand/references/brand-guideline-template.md +140 -0
- package/assets/skills/brand/references/color-palette-management.md +186 -0
- package/assets/skills/brand/references/consistency-checklist.md +94 -0
- package/assets/skills/brand/references/logo-usage-rules.md +185 -0
- package/assets/skills/brand/references/messaging-framework.md +85 -0
- package/assets/skills/brand/references/typography-specifications.md +214 -0
- package/assets/skills/brand/references/update.md +118 -0
- package/assets/skills/brand/references/visual-identity.md +96 -0
- package/assets/skills/brand/references/voice-framework.md +88 -0
- package/assets/skills/brand/scripts/extract-colors.cjs +341 -0
- package/assets/skills/brand/scripts/inject-brand-context.cjs +349 -0
- package/assets/skills/brand/scripts/sync-brand-to-tokens.cjs +248 -0
- package/assets/skills/brand/scripts/tests/test_sync_brand_to_tokens.py +52 -0
- package/assets/skills/brand/scripts/validate-asset.cjs +387 -0
- package/assets/skills/brand/templates/brand-guidelines-starter.md +275 -0
- package/assets/skills/design/SKILL.md +313 -0
- package/assets/skills/design/data/cip/deliverables.csv +51 -0
- package/assets/skills/design/data/cip/industries.csv +21 -0
- package/assets/skills/design/data/cip/mockup-contexts.csv +21 -0
- package/assets/skills/design/data/cip/styles.csv +21 -0
- package/assets/skills/design/data/icon/styles.csv +16 -0
- package/assets/skills/design/data/logo/colors.csv +56 -0
- package/assets/skills/design/data/logo/industries.csv +56 -0
- package/assets/skills/design/data/logo/styles.csv +56 -0
- package/assets/skills/design/references/banner-sizes-and-styles.md +118 -0
- package/assets/skills/design/references/cip-deliverable-guide.md +95 -0
- package/assets/skills/design/references/cip-design.md +121 -0
- package/assets/skills/design/references/cip-prompt-engineering.md +84 -0
- package/assets/skills/design/references/cip-style-guide.md +68 -0
- package/assets/skills/design/references/design-routing.md +207 -0
- package/assets/skills/design/references/icon-design.md +122 -0
- package/assets/skills/design/references/logo-color-psychology.md +101 -0
- package/assets/skills/design/references/logo-design.md +92 -0
- package/assets/skills/design/references/logo-prompt-engineering.md +158 -0
- package/assets/skills/design/references/logo-style-guide.md +109 -0
- package/assets/skills/design/references/slides-copywriting-formulas.md +84 -0
- package/assets/skills/design/references/slides-create.md +4 -0
- package/assets/skills/design/references/slides-html-template.md +295 -0
- package/assets/skills/design/references/slides-layout-patterns.md +137 -0
- package/assets/skills/design/references/slides-strategies.md +94 -0
- package/assets/skills/design/references/slides.md +42 -0
- package/assets/skills/design/references/social-photos-design.md +329 -0
- package/assets/skills/design/scripts/cip/core.py +215 -0
- package/assets/skills/design/scripts/cip/generate.py +484 -0
- package/assets/skills/design/scripts/cip/render-html.py +424 -0
- package/assets/skills/design/scripts/cip/search.py +127 -0
- package/assets/skills/design/scripts/icon/generate.py +487 -0
- package/assets/skills/design/scripts/logo/core.py +175 -0
- package/assets/skills/design/scripts/logo/generate.py +362 -0
- package/assets/skills/design/scripts/logo/search.py +114 -0
- package/assets/skills/design-system/SKILL.md +244 -0
- package/assets/skills/design-system/data/slide-backgrounds.csv +11 -0
- package/assets/skills/design-system/data/slide-charts.csv +26 -0
- package/assets/skills/design-system/data/slide-color-logic.csv +14 -0
- package/assets/skills/design-system/data/slide-copy.csv +26 -0
- package/assets/skills/design-system/data/slide-layout-logic.csv +16 -0
- package/assets/skills/design-system/data/slide-layouts.csv +26 -0
- package/assets/skills/design-system/data/slide-strategies.csv +16 -0
- package/assets/skills/design-system/data/slide-typography.csv +15 -0
- package/assets/skills/design-system/references/component-specs.md +236 -0
- package/assets/skills/design-system/references/component-tokens.md +214 -0
- package/assets/skills/design-system/references/primitive-tokens.md +203 -0
- package/assets/skills/design-system/references/semantic-tokens.md +215 -0
- package/assets/skills/design-system/references/states-and-variants.md +241 -0
- package/assets/skills/design-system/references/tailwind-integration.md +251 -0
- package/assets/skills/design-system/references/token-architecture.md +224 -0
- package/assets/skills/design-system/scripts/embed-tokens.cjs +99 -0
- package/assets/skills/design-system/scripts/fetch-background.py +317 -0
- package/assets/skills/design-system/scripts/generate-slide.py +770 -0
- package/assets/skills/design-system/scripts/generate-tokens.cjs +205 -0
- package/assets/skills/design-system/scripts/html-token-validator.py +327 -0
- package/assets/skills/design-system/scripts/search-slides.py +218 -0
- package/assets/skills/design-system/scripts/slide-token-validator.py +35 -0
- package/assets/skills/design-system/scripts/slide_search_core.py +453 -0
- package/assets/skills/design-system/scripts/tests/test_validate_tokens.py +48 -0
- package/assets/skills/design-system/scripts/validate-tokens.cjs +246 -0
- package/assets/skills/design-system/templates/design-tokens-starter.json +143 -0
- package/assets/skills/slides/SKILL.md +40 -0
- package/assets/skills/slides/references/copywriting-formulas.md +84 -0
- package/assets/skills/slides/references/create.md +4 -0
- package/assets/skills/slides/references/html-template.md +295 -0
- package/assets/skills/slides/references/layout-patterns.md +137 -0
- package/assets/skills/slides/references/slide-strategies.md +94 -0
- package/assets/skills/ui-styling/LICENSE.txt +202 -0
- package/assets/skills/ui-styling/SKILL.md +324 -0
- package/assets/skills/ui-styling/references/canvas-design-system.md +320 -0
- package/assets/skills/ui-styling/references/shadcn-accessibility.md +471 -0
- package/assets/skills/ui-styling/references/shadcn-components.md +424 -0
- package/assets/skills/ui-styling/references/shadcn-theming.md +373 -0
- package/assets/skills/ui-styling/references/tailwind-customization.md +483 -0
- package/assets/skills/ui-styling/references/tailwind-responsive.md +382 -0
- package/assets/skills/ui-styling/references/tailwind-utilities.md +455 -0
- package/assets/skills/ui-styling/scripts/requirements.txt +17 -0
- package/assets/skills/ui-styling/scripts/shadcn_add.py +308 -0
- package/assets/skills/ui-styling/scripts/tailwind_config_gen.py +473 -0
- package/assets/skills/ui-styling/scripts/tests/coverage-ui.json +1 -0
- package/assets/skills/ui-styling/scripts/tests/requirements.txt +3 -0
- package/assets/skills/ui-styling/scripts/tests/test_shadcn_add.py +266 -0
- package/assets/skills/ui-styling/scripts/tests/test_tailwind_config_gen.py +394 -0
- package/assets/templates/base/quick-reference.md +297 -0
- package/assets/templates/base/skill-content.md +384 -0
- package/assets/templates/platforms/agent.json +21 -0
- package/assets/templates/platforms/augment.json +18 -0
- package/assets/templates/platforms/claude.json +21 -0
- package/assets/templates/platforms/codebuddy.json +21 -0
- package/assets/templates/platforms/codewhale.json +21 -0
- package/assets/templates/platforms/codex.json +21 -0
- package/assets/templates/platforms/continue.json +21 -0
- package/assets/templates/platforms/copilot.json +21 -0
- package/assets/templates/platforms/cursor.json +21 -0
- package/assets/templates/platforms/droid.json +21 -0
- package/assets/templates/platforms/gemini.json +21 -0
- package/assets/templates/platforms/kilocode.json +21 -0
- package/assets/templates/platforms/kiro.json +21 -0
- package/assets/templates/platforms/opencode.json +21 -0
- package/assets/templates/platforms/qoder.json +21 -0
- package/assets/templates/platforms/roocode.json +21 -0
- package/assets/templates/platforms/trae.json +21 -0
- package/assets/templates/platforms/warp.json +18 -0
- package/assets/templates/platforms/windsurf.json +21 -0
- package/dist/commands/init.d.ts +11 -0
- package/dist/commands/init.js +165 -0
- package/dist/commands/uninstall.d.ts +7 -0
- package/dist/commands/uninstall.js +131 -0
- package/dist/commands/update.d.ts +7 -0
- package/dist/commands/update.js +73 -0
- package/dist/commands/versions.d.ts +5 -0
- package/dist/commands/versions.js +36 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +78 -0
- package/dist/types/index.d.ts +40 -0
- package/dist/types/index.js +25 -0
- package/dist/utils/detect.d.ts +8 -0
- package/dist/utils/detect.js +115 -0
- package/dist/utils/extract.d.ts +15 -0
- package/dist/utils/extract.js +125 -0
- package/dist/utils/github.d.ts +12 -0
- package/dist/utils/github.js +97 -0
- package/dist/utils/logger.d.ts +8 -0
- package/dist/utils/logger.js +9 -0
- package/dist/utils/template.d.ts +50 -0
- package/dist/utils/template.js +249 -0
- package/package.json +65 -0
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
# CIP Mockup Prompt Engineering
|
|
2
|
+
|
|
3
|
+
## Base Prompt Structure
|
|
4
|
+
|
|
5
|
+
```
|
|
6
|
+
Professional corporate identity mockup photograph showing [DELIVERABLE] for brand '[BRAND_NAME]', [STYLE] design style, using colors [COLORS], [TYPOGRAPHY] typography, logo placement: [PLACEMENT], [MATERIALS] materials with [FINISHES] finish, [CONTEXT] setting, [MOOD] mood, photorealistic product photography, soft natural lighting, high quality professional shot, 8k resolution detailed
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
## Deliverable-Specific Modifiers
|
|
10
|
+
|
|
11
|
+
### Business Card
|
|
12
|
+
```
|
|
13
|
+
business card on marble surface, stack of cards, premium paper texture, soft shadows, 45 degree angle
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
### Letterhead
|
|
17
|
+
```
|
|
18
|
+
letterhead flat lay with envelope and pen, velvet fabric background, brand stationery set, overhead view
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
### Office Signage
|
|
22
|
+
```
|
|
23
|
+
3D logo signage on office wall, modern lobby interior, backlit LED, brushed metal finish, architectural photography
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### Vehicle Branding
|
|
27
|
+
```
|
|
28
|
+
branded vehicle on urban street, 3/4 front angle view, professional car wrap, motion blur background optional
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### Apparel (Polo/T-Shirt)
|
|
32
|
+
```
|
|
33
|
+
folded polo shirt on clean background, embroidered logo on chest, premium fabric texture, product photography
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Style Modifiers
|
|
37
|
+
|
|
38
|
+
### Corporate Minimal
|
|
39
|
+
```
|
|
40
|
+
clean minimal aesthetic, white space, subtle shadows, matte finish, professional
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Luxury Premium
|
|
44
|
+
```
|
|
45
|
+
dark background, dramatic rim lighting, gold accents, premium materials, sophisticated
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### Modern Tech
|
|
49
|
+
```
|
|
50
|
+
gradient colors, geometric elements, clean surfaces, futuristic, innovative
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### Warm Organic
|
|
54
|
+
```
|
|
55
|
+
natural materials, kraft paper texture, warm lighting, authentic, artisan
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Lighting Modifiers
|
|
59
|
+
|
|
60
|
+
- **Studio:** `professional studio lighting, even illumination`
|
|
61
|
+
- **Natural:** `soft natural daylight, window light`
|
|
62
|
+
- **Dramatic:** `dramatic rim light, dark background, high contrast`
|
|
63
|
+
- **Warm:** `warm golden hour lighting, cozy atmosphere`
|
|
64
|
+
|
|
65
|
+
## Context Modifiers
|
|
66
|
+
|
|
67
|
+
- **Marble desk:** `white marble surface, soft shadows, luxury`
|
|
68
|
+
- **Wooden table:** `warm wood grain, natural, artisan`
|
|
69
|
+
- **Office interior:** `modern office environment, architectural`
|
|
70
|
+
- **Flat lay:** `overhead view, organized arrangement`
|
|
71
|
+
- **Lifestyle:** `in-use context, human element`
|
|
72
|
+
|
|
73
|
+
## Quality Modifiers
|
|
74
|
+
|
|
75
|
+
Always include:
|
|
76
|
+
```
|
|
77
|
+
photorealistic, professional photography, high quality, 8k resolution, detailed, sharp focus
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## Negative Prompts (what to avoid)
|
|
81
|
+
|
|
82
|
+
```
|
|
83
|
+
blurry, low quality, distorted text, misspelled, amateur, clipart, cartoon, illustration, watermark
|
|
84
|
+
```
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
# CIP Design Style Guide
|
|
2
|
+
|
|
3
|
+
## Corporate Minimal
|
|
4
|
+
**Industries:** Finance, Legal, Consulting, Tech
|
|
5
|
+
**Colors:** Navy (#0F172A), White (#FFFFFF), Blue accents
|
|
6
|
+
**Typography:** Clean sans-serif (Inter, Helvetica)
|
|
7
|
+
**Materials:** Premium matte paper, subtle textures
|
|
8
|
+
**Finishes:** Matte, spot UV on logo
|
|
9
|
+
|
|
10
|
+
## Modern Tech
|
|
11
|
+
**Industries:** Tech, SaaS, Startups, AI
|
|
12
|
+
**Colors:** Purple (#6366F1), Cyan (#0EA5E9), Green (#10B981)
|
|
13
|
+
**Typography:** Geometric sans (Outfit, Poppins)
|
|
14
|
+
**Materials:** Smooth surfaces, gradient prints
|
|
15
|
+
**Finishes:** Gloss, metallic accents
|
|
16
|
+
|
|
17
|
+
## Luxury Premium
|
|
18
|
+
**Industries:** Fashion, Jewelry, Hotels, Fine Dining
|
|
19
|
+
**Colors:** Black (#1C1917), Gold (#D4AF37), White
|
|
20
|
+
**Typography:** Elegant serif (Playfair), thin sans
|
|
21
|
+
**Materials:** Heavy cotton paper, leather, metal
|
|
22
|
+
**Finishes:** Gold foil, emboss, deboss, soft-touch
|
|
23
|
+
|
|
24
|
+
## Classic Traditional
|
|
25
|
+
**Industries:** Law Firms, Heritage Brands, Finance
|
|
26
|
+
**Colors:** Navy, Burgundy, Gold
|
|
27
|
+
**Typography:** Traditional serif (Times, Garamond)
|
|
28
|
+
**Materials:** Quality laid paper, wood
|
|
29
|
+
**Finishes:** Letterpress, gold emboss
|
|
30
|
+
|
|
31
|
+
## Warm Organic
|
|
32
|
+
**Industries:** Food, Organic, Wellness, Craft
|
|
33
|
+
**Colors:** Brown (#8B4513), Green (#228B22), Cream
|
|
34
|
+
**Typography:** Friendly serif, organic script
|
|
35
|
+
**Materials:** Kraft paper, recycled materials
|
|
36
|
+
**Finishes:** Uncoated, natural textures
|
|
37
|
+
|
|
38
|
+
## Bold Dynamic
|
|
39
|
+
**Industries:** Sports, Entertainment, Gaming
|
|
40
|
+
**Colors:** Red (#DC2626), Orange (#F97316), Black
|
|
41
|
+
**Typography:** Bold condensed sans
|
|
42
|
+
**Materials:** High-contrast, metallic
|
|
43
|
+
**Finishes:** Gloss, vibrant colors
|
|
44
|
+
|
|
45
|
+
## Fresh Modern
|
|
46
|
+
**Industries:** Healthcare, Wellness, Fintech
|
|
47
|
+
**Colors:** Mint (#10B981), Sky (#0EA5E9), White
|
|
48
|
+
**Typography:** Modern rounded sans
|
|
49
|
+
**Materials:** Light, clean surfaces
|
|
50
|
+
**Finishes:** Matte, clean minimal
|
|
51
|
+
|
|
52
|
+
## Soft Elegant
|
|
53
|
+
**Industries:** Beauty, Wedding, Spa, Fashion
|
|
54
|
+
**Colors:** Pink (#F472B6), Gold, White
|
|
55
|
+
**Typography:** Elegant script, thin sans
|
|
56
|
+
**Materials:** Soft-touch, quality paper
|
|
57
|
+
**Finishes:** Rose gold foil, emboss
|
|
58
|
+
|
|
59
|
+
## Color Psychology
|
|
60
|
+
|
|
61
|
+
| Color | Meaning | Best Use |
|
|
62
|
+
|-------|---------|----------|
|
|
63
|
+
| Blue | Trust, stability | Finance, Tech, Healthcare |
|
|
64
|
+
| Green | Growth, nature | Eco, Wellness, Organic |
|
|
65
|
+
| Gold | Luxury, prestige | Premium, Jewelry |
|
|
66
|
+
| Red | Energy, passion | Food, Sports |
|
|
67
|
+
| Black | Sophistication | Luxury, Fashion |
|
|
68
|
+
| White | Clean, minimal | Tech, Healthcare |
|
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
# Design Routing Guide
|
|
2
|
+
|
|
3
|
+
When to use each design sub-skill.
|
|
4
|
+
|
|
5
|
+
## Skill Overview
|
|
6
|
+
|
|
7
|
+
| Skill | Purpose | Key Files |
|
|
8
|
+
|-------|---------|-----------|
|
|
9
|
+
| brand | Brand identity, voice, assets | SKILL.md + 10 references + 3 scripts |
|
|
10
|
+
| design-system | Token architecture, specs | SKILL.md + 7 references + 2 scripts |
|
|
11
|
+
| ui-styling | Component implementation | SKILL.md + 7 references + 2 scripts |
|
|
12
|
+
| logo-design | AI logo generation (55 styles, 30 palettes) | SKILL.md + 4 references + 2 scripts |
|
|
13
|
+
| cip-design | Corporate Identity Program (50 deliverables) | SKILL.md + 3 references + 3 scripts |
|
|
14
|
+
| slides | HTML presentations with Chart.js | SKILL.md + 4 references |
|
|
15
|
+
| banner-design | Banners for social, ads, web, print (22 styles) | SKILL.md + 1 reference |
|
|
16
|
+
| icon-design | SVG icon generation (15 styles, Gemini 3.1 Pro) | SKILL.md + 1 reference + 1 script |
|
|
17
|
+
|
|
18
|
+
## Routing by Task Type
|
|
19
|
+
|
|
20
|
+
### Brand Identity Tasks
|
|
21
|
+
**→ brand**
|
|
22
|
+
|
|
23
|
+
- Define brand colors and typography
|
|
24
|
+
- Create logo usage guidelines
|
|
25
|
+
- Establish brand voice and tone
|
|
26
|
+
- Organize and validate assets
|
|
27
|
+
- Create messaging frameworks
|
|
28
|
+
- Audit brand consistency
|
|
29
|
+
|
|
30
|
+
### Token System Tasks
|
|
31
|
+
**→ design-system**
|
|
32
|
+
|
|
33
|
+
- Create design tokens JSON
|
|
34
|
+
- Generate CSS variables
|
|
35
|
+
- Define component specifications
|
|
36
|
+
- Map tokens to Tailwind config
|
|
37
|
+
- Validate token usage in code
|
|
38
|
+
- Document state and variants
|
|
39
|
+
|
|
40
|
+
### Implementation Tasks
|
|
41
|
+
**→ ui-styling**
|
|
42
|
+
|
|
43
|
+
- Add shadcn/ui components
|
|
44
|
+
- Style with Tailwind classes
|
|
45
|
+
- Implement dark mode
|
|
46
|
+
- Create responsive layouts
|
|
47
|
+
- Build accessible components
|
|
48
|
+
|
|
49
|
+
### Logo Design Tasks
|
|
50
|
+
**→ logo-design**
|
|
51
|
+
|
|
52
|
+
- Create logos with AI (Gemini Nano Banana)
|
|
53
|
+
- Search logo styles, color palettes, industry guidelines
|
|
54
|
+
- Generate design briefs
|
|
55
|
+
- Explore 55+ styles (minimalist, vintage, luxury, geometric, etc.)
|
|
56
|
+
|
|
57
|
+
### Corporate Identity Program Tasks
|
|
58
|
+
**→ cip-design**
|
|
59
|
+
|
|
60
|
+
- Generate CIP deliverables (business cards, letterheads, signage, vehicles, apparel)
|
|
61
|
+
- Create CIP briefs with industry/style analysis
|
|
62
|
+
- Generate mockups with/without logo (Gemini Flash/Pro)
|
|
63
|
+
- Render HTML presentations from CIP mockups
|
|
64
|
+
|
|
65
|
+
### Presentation Tasks
|
|
66
|
+
**→ slides**
|
|
67
|
+
|
|
68
|
+
- Create strategic HTML presentations
|
|
69
|
+
- Data visualization with Chart.js
|
|
70
|
+
- Apply copywriting formulas to slide content
|
|
71
|
+
- Use layout patterns and design tokens
|
|
72
|
+
|
|
73
|
+
### Banner Design Tasks
|
|
74
|
+
**→ banner-design**
|
|
75
|
+
|
|
76
|
+
- Design banners for social media (Facebook, Twitter, LinkedIn, YouTube, Instagram)
|
|
77
|
+
- Create ad banners (Google Ads, Meta Ads)
|
|
78
|
+
- Website hero banners and headers
|
|
79
|
+
- Print banners and covers
|
|
80
|
+
- 22 art direction styles (minimalist, bold typography, gradient, glassmorphism, etc.)
|
|
81
|
+
|
|
82
|
+
### Icon Design Tasks
|
|
83
|
+
**→ icon-design**
|
|
84
|
+
|
|
85
|
+
- Generate SVG icons with AI (Gemini 3.1 Pro Preview)
|
|
86
|
+
- Batch icon variations in multiple styles
|
|
87
|
+
- Multi-size export (16px, 24px, 32px, 48px)
|
|
88
|
+
- 15 styles: outlined, filled, duotone, rounded, sharp, gradient, etc.
|
|
89
|
+
- 12 categories: navigation, action, communication, media, commerce, data
|
|
90
|
+
|
|
91
|
+
## Routing by Question Type
|
|
92
|
+
|
|
93
|
+
| Question | Skill |
|
|
94
|
+
|----------|-------|
|
|
95
|
+
| "What color should this be?" | brand |
|
|
96
|
+
| "How do I create a token for X?" | design-system |
|
|
97
|
+
| "How do I build a button component?" | ui-styling |
|
|
98
|
+
| "Is this on-brand?" | brand |
|
|
99
|
+
| "Should I use a CSS variable here?" | design-system |
|
|
100
|
+
| "How do I add dark mode?" | ui-styling |
|
|
101
|
+
| "Create a logo for my brand" | logo-design |
|
|
102
|
+
| "Generate business card mockups" | cip-design |
|
|
103
|
+
| "Create a pitch deck" | slides |
|
|
104
|
+
| "Design brand identity package" | cip-design |
|
|
105
|
+
| "What logo style fits my industry?" | logo-design |
|
|
106
|
+
| "Design a Facebook cover" | banner-design |
|
|
107
|
+
| "Create ad banners for Google" | banner-design |
|
|
108
|
+
| "Make a website hero banner" | banner-design |
|
|
109
|
+
| "Generate a settings icon" | icon-design |
|
|
110
|
+
| "Create SVG icons for my app" | icon-design |
|
|
111
|
+
| "Design an icon set" | icon-design |
|
|
112
|
+
|
|
113
|
+
## Multi-Skill Workflows
|
|
114
|
+
|
|
115
|
+
### New Project Setup
|
|
116
|
+
|
|
117
|
+
```
|
|
118
|
+
1. brand → Define identity
|
|
119
|
+
- Colors, typography, voice
|
|
120
|
+
|
|
121
|
+
2. design-system → Create tokens
|
|
122
|
+
- Primitive, semantic, component
|
|
123
|
+
|
|
124
|
+
3. ui-styling → Implement
|
|
125
|
+
- Configure Tailwind, add components
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
### Design System Migration
|
|
129
|
+
|
|
130
|
+
```
|
|
131
|
+
1. brand → Audit existing
|
|
132
|
+
- Extract brand colors, fonts
|
|
133
|
+
|
|
134
|
+
2. design-system → Formalize tokens
|
|
135
|
+
- Create three-layer architecture
|
|
136
|
+
|
|
137
|
+
3. ui-styling → Update code
|
|
138
|
+
- Replace hardcoded values
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
### Component Creation
|
|
142
|
+
|
|
143
|
+
```
|
|
144
|
+
1. design-system → Reference specs
|
|
145
|
+
- Button states, sizes, variants
|
|
146
|
+
|
|
147
|
+
2. ui-styling → Implement
|
|
148
|
+
- Build with shadcn/ui + Tailwind
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
## Skill Dependencies
|
|
152
|
+
|
|
153
|
+
```
|
|
154
|
+
brand
|
|
155
|
+
↓ (colors, typography)
|
|
156
|
+
design-system
|
|
157
|
+
↓ (tokens, specs)
|
|
158
|
+
ui-styling
|
|
159
|
+
↓ (components)
|
|
160
|
+
Application Code
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
## Quick Commands
|
|
164
|
+
|
|
165
|
+
**Brand:**
|
|
166
|
+
```bash
|
|
167
|
+
node .claude/skills/brand/scripts/inject-brand-context.cjs
|
|
168
|
+
node .claude/skills/brand/scripts/validate-asset.cjs <path>
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
**Tokens:**
|
|
172
|
+
```bash
|
|
173
|
+
node .claude/skills/design-system/scripts/generate-tokens.cjs -c tokens.json
|
|
174
|
+
node .claude/skills/design-system/scripts/validate-tokens.cjs -d src/
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
**Components:**
|
|
178
|
+
```bash
|
|
179
|
+
npx shadcn@latest add button card input
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
## When to Use Multiple Skills
|
|
183
|
+
|
|
184
|
+
Use **all eight** when:
|
|
185
|
+
- Complete brand package from scratch (logo → CIP → presentation)
|
|
186
|
+
|
|
187
|
+
Use **brand + design-system + ui-styling** when:
|
|
188
|
+
- Design system setup and implementation
|
|
189
|
+
|
|
190
|
+
Use **logo-design + cip-design** when:
|
|
191
|
+
- Complete brand identity package with deliverable mockups
|
|
192
|
+
|
|
193
|
+
Use **logo-design + cip-design + slides** when:
|
|
194
|
+
- Brand pitch: generate logo, create CIP mockups, build pitch deck
|
|
195
|
+
|
|
196
|
+
Use **banner-design + brand** when:
|
|
197
|
+
- Social media presence: branded banners across all platforms
|
|
198
|
+
|
|
199
|
+
Use **icon-design + design-system** when:
|
|
200
|
+
- Custom icon set matching design tokens and component specs
|
|
201
|
+
|
|
202
|
+
Use **brand + design-system** when:
|
|
203
|
+
- Defining design language without implementation
|
|
204
|
+
|
|
205
|
+
Use **design-system + ui-styling** when:
|
|
206
|
+
- Implementing existing brand in code
|
|
207
|
+
- Building component library
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
# Icon Design Reference
|
|
2
|
+
|
|
3
|
+
AI-powered SVG icon generation using Gemini 3.1 Pro Preview. 15 styles, 12 categories, multi-size export.
|
|
4
|
+
|
|
5
|
+
## Scripts
|
|
6
|
+
|
|
7
|
+
| Script | Purpose |
|
|
8
|
+
|--------|---------|
|
|
9
|
+
| `scripts/icon/generate.py` | Generate SVG icons with Gemini 3.1 Pro Preview |
|
|
10
|
+
|
|
11
|
+
## Commands
|
|
12
|
+
|
|
13
|
+
### Generate Single Icon
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "settings gear" --style outlined
|
|
17
|
+
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"
|
|
18
|
+
python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
### Generate Batch Variations
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons
|
|
25
|
+
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "notification bell" --batch 6 --style outlined --output-dir ./icons
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### Generate Multiple Sizes
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### List Styles/Categories
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
python3 ~/.claude/skills/design/scripts/icon/generate.py --list-styles
|
|
38
|
+
python3 ~/.claude/skills/design/scripts/icon/generate.py --list-categories
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## CLI Options
|
|
42
|
+
|
|
43
|
+
| Option | Description | Default |
|
|
44
|
+
|--------|-------------|---------|
|
|
45
|
+
| `--prompt, -p` | Icon description | required |
|
|
46
|
+
| `--name, -n` | Icon name (for filename) | - |
|
|
47
|
+
| `--style, -s` | Icon style (15 options) | - |
|
|
48
|
+
| `--category, -c` | Icon category for context | - |
|
|
49
|
+
| `--color` | Primary hex color | currentColor |
|
|
50
|
+
| `--size` | Display size in px | 24 |
|
|
51
|
+
| `--viewbox` | SVG viewBox size | 24 |
|
|
52
|
+
| `--output, -o` | Output file path | auto |
|
|
53
|
+
| `--output-dir` | Output directory (batch) | ./icons |
|
|
54
|
+
| `--batch` | Number of variations | - |
|
|
55
|
+
| `--sizes` | Comma-separated sizes | - |
|
|
56
|
+
|
|
57
|
+
## Available Styles
|
|
58
|
+
|
|
59
|
+
| Style | Stroke | Fill | Best For |
|
|
60
|
+
|-------|--------|------|----------|
|
|
61
|
+
| outlined | 2px | none | UI interfaces, web apps |
|
|
62
|
+
| filled | 0 | solid | Mobile apps, nav bars |
|
|
63
|
+
| duotone | 0 | dual | Marketing, landing pages |
|
|
64
|
+
| thin | 1-1.5px | none | Luxury brands, editorial |
|
|
65
|
+
| bold | 3px | none | Headers, hero sections |
|
|
66
|
+
| rounded | 2px | none | Friendly apps, health |
|
|
67
|
+
| sharp | 2px | none | Tech, fintech, enterprise |
|
|
68
|
+
| flat | 0 | solid | Material design, Google-style |
|
|
69
|
+
| gradient | 0 | gradient | Modern brands, SaaS |
|
|
70
|
+
| glassmorphism | 1px | semi | Modern UI, overlays |
|
|
71
|
+
| pixel | 0 | solid | Gaming, retro |
|
|
72
|
+
| hand-drawn | varies | none | Artisan, creative |
|
|
73
|
+
| isometric | 1-2px | partial | Tech docs, infographics |
|
|
74
|
+
| glyph | 0 | solid | System UI, compact |
|
|
75
|
+
| animated-ready | 2px | varies | Interactive UI, onboarding |
|
|
76
|
+
|
|
77
|
+
## Icon Categories
|
|
78
|
+
|
|
79
|
+
| Category | Icons |
|
|
80
|
+
|----------|-------|
|
|
81
|
+
| navigation | arrows, menus, home, chevrons |
|
|
82
|
+
| action | edit, delete, save, download, upload |
|
|
83
|
+
| communication | email, chat, phone, notification |
|
|
84
|
+
| media | play, pause, volume, camera |
|
|
85
|
+
| file | document, folder, archive, cloud |
|
|
86
|
+
| user | person, group, profile, settings |
|
|
87
|
+
| commerce | cart, bag, wallet, credit card |
|
|
88
|
+
| data | chart, graph, analytics, dashboard |
|
|
89
|
+
| development | code, terminal, bug, git, API |
|
|
90
|
+
| social | heart, star, bookmark, trophy |
|
|
91
|
+
| weather | sun, moon, cloud, rain |
|
|
92
|
+
| map | pin, location, compass, globe |
|
|
93
|
+
|
|
94
|
+
## SVG Best Practices
|
|
95
|
+
|
|
96
|
+
- **ViewBox**: Use `0 0 24 24` (standard) or `0 0 16 16` (compact)
|
|
97
|
+
- **Colors**: Use `currentColor` for CSS inheritance, avoid hardcoded colors
|
|
98
|
+
- **Accessibility**: Always include `<title>` element
|
|
99
|
+
- **Optimization**: Minimal path nodes, no embedded fonts or raster images
|
|
100
|
+
- **Sizing**: Design at 24px, test at 16px and 48px for clarity
|
|
101
|
+
- **Stroke**: Use `stroke-linecap="round"` and `stroke-linejoin="round"` for outlined styles
|
|
102
|
+
|
|
103
|
+
## Model
|
|
104
|
+
|
|
105
|
+
- **gemini-3.1-pro-preview**: Best thinking, token efficiency, factual consistency
|
|
106
|
+
- Text-only output (SVG is XML text) — no image generation API needed
|
|
107
|
+
- Supports structured output for consistent SVG formatting
|
|
108
|
+
|
|
109
|
+
## Workflow
|
|
110
|
+
|
|
111
|
+
1. Describe icon → `--prompt "settings gear"`
|
|
112
|
+
2. Choose style → `--style outlined`
|
|
113
|
+
3. Generate → script outputs .svg file
|
|
114
|
+
4. Optionally batch → `--batch 4` for variations
|
|
115
|
+
5. Multi-size export → `--sizes "16,24,32,48"`
|
|
116
|
+
|
|
117
|
+
## Setup
|
|
118
|
+
|
|
119
|
+
```bash
|
|
120
|
+
export GEMINI_API_KEY="your-key"
|
|
121
|
+
pip install google-genai
|
|
122
|
+
```
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
# Logo Color Psychology
|
|
2
|
+
|
|
3
|
+
## Primary Color Meanings
|
|
4
|
+
|
|
5
|
+
### Blue
|
|
6
|
+
- **Psychology:** Trust, stability, professionalism, calm
|
|
7
|
+
- **Industries:** Finance, healthcare, tech, corporate
|
|
8
|
+
- **Hex Examples:** Navy #003366, Royal #0055A4, Sky #0EA5E9
|
|
9
|
+
- **Pairings:** White, gold, light gray
|
|
10
|
+
|
|
11
|
+
### Red
|
|
12
|
+
- **Psychology:** Energy, passion, urgency, excitement
|
|
13
|
+
- **Industries:** Food, sports, entertainment, sales
|
|
14
|
+
- **Hex Examples:** Crimson #DC2626, Scarlet #EF4444, Burgundy #9F1239
|
|
15
|
+
- **Pairings:** White, black, gold
|
|
16
|
+
- **Caution:** Avoid for healthcare (blood connotation)
|
|
17
|
+
|
|
18
|
+
### Green
|
|
19
|
+
- **Psychology:** Growth, nature, health, sustainability
|
|
20
|
+
- **Industries:** Eco, wellness, organic, finance (growth)
|
|
21
|
+
- **Hex Examples:** Forest #228B22, Sage #2E8B57, Mint #10B981
|
|
22
|
+
- **Pairings:** White, brown, blue
|
|
23
|
+
|
|
24
|
+
### Yellow/Gold
|
|
25
|
+
- **Psychology:** Optimism, warmth, luxury, attention
|
|
26
|
+
- **Industries:** Food, children, luxury (gold), energy
|
|
27
|
+
- **Hex Examples:** Gold #D4AF37, Amber #F59E0B, Lemon #FACC15
|
|
28
|
+
- **Pairings:** Black, navy, dark brown
|
|
29
|
+
|
|
30
|
+
### Purple
|
|
31
|
+
- **Psychology:** Creativity, wisdom, luxury, mystery
|
|
32
|
+
- **Industries:** Beauty, creative, spiritual, premium
|
|
33
|
+
- **Hex Examples:** Royal #7C3AED, Lavender #A78BFA, Deep #581C87
|
|
34
|
+
- **Pairings:** Gold, white, pink
|
|
35
|
+
|
|
36
|
+
### Orange
|
|
37
|
+
- **Psychology:** Friendly, energetic, confident, youthful
|
|
38
|
+
- **Industries:** Food, sports, entertainment, retail
|
|
39
|
+
- **Hex Examples:** Tangerine #F97316, Coral #FB923C, Burnt #EA580C
|
|
40
|
+
- **Pairings:** White, navy, dark gray
|
|
41
|
+
|
|
42
|
+
### Black
|
|
43
|
+
- **Psychology:** Sophistication, power, elegance, authority
|
|
44
|
+
- **Industries:** Luxury, fashion, tech, premium
|
|
45
|
+
- **Pairings:** White, gold, silver
|
|
46
|
+
- **Note:** Use for high-end positioning
|
|
47
|
+
|
|
48
|
+
### White
|
|
49
|
+
- **Psychology:** Purity, simplicity, cleanliness, modern
|
|
50
|
+
- **Use:** Backgrounds, negative space, contrast
|
|
51
|
+
- **Pairings:** Any color (universal neutral)
|
|
52
|
+
|
|
53
|
+
## Color Combinations by Industry
|
|
54
|
+
|
|
55
|
+
| Industry | Primary | Secondary | Accent | Avoid |
|
|
56
|
+
|----------|---------|-----------|--------|-------|
|
|
57
|
+
| Tech | Blue, Purple | Gray, White | Teal, Green | Brown, Beige |
|
|
58
|
+
| Healthcare | Blue, Green | Teal, White | Light Purple | Red, Black |
|
|
59
|
+
| Finance | Navy, Blue | Gold, Gray | Green | Bright colors |
|
|
60
|
+
| Food | Red, Orange | Yellow, Brown | Green | Blue (appetite suppressant) |
|
|
61
|
+
| Fashion | Black, White | Gold, Blush | Navy | Neon (unless intentional) |
|
|
62
|
+
| Eco | Green, Brown | Beige, Blue | Yellow | Neon, Black |
|
|
63
|
+
| Children | Multi-color | Pastels | Bright accents | Dark, muted |
|
|
64
|
+
|
|
65
|
+
## Color Harmony Types
|
|
66
|
+
|
|
67
|
+
### Monochromatic
|
|
68
|
+
Single color with tints/shades. Safe, cohesive.
|
|
69
|
+
|
|
70
|
+
### Complementary
|
|
71
|
+
Opposite colors (blue-orange). High contrast, vibrant.
|
|
72
|
+
|
|
73
|
+
### Analogous
|
|
74
|
+
Adjacent colors (blue-teal-green). Harmonious, natural.
|
|
75
|
+
|
|
76
|
+
### Triadic
|
|
77
|
+
Three evenly spaced colors. Balanced, dynamic.
|
|
78
|
+
|
|
79
|
+
## Accessibility Considerations
|
|
80
|
+
|
|
81
|
+
- Minimum contrast ratio: 4.5:1 (WCAG AA)
|
|
82
|
+
- Avoid red-green only indicators
|
|
83
|
+
- Test in grayscale for clarity
|
|
84
|
+
- Consider colorblind users (~8% of males)
|
|
85
|
+
|
|
86
|
+
## Quick Reference Palettes
|
|
87
|
+
|
|
88
|
+
**Tech Professional:**
|
|
89
|
+
Primary: #6366F1 | Secondary: #8B5CF6 | Accent: #06B6D4
|
|
90
|
+
|
|
91
|
+
**Eco Sustainable:**
|
|
92
|
+
Primary: #228B22 | Secondary: #2E8B57 | Accent: #DEB887
|
|
93
|
+
|
|
94
|
+
**Luxury Premium:**
|
|
95
|
+
Primary: #1C1917 | Secondary: #D4AF37 | Accent: #FFFFFF
|
|
96
|
+
|
|
97
|
+
**Healthcare Trust:**
|
|
98
|
+
Primary: #0077B6 | Secondary: #00A896 | Accent: #FFFFFF
|
|
99
|
+
|
|
100
|
+
**Food Warm:**
|
|
101
|
+
Primary: #DC2626 | Secondary: #F97316 | Accent: #CA8A04
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
# Logo Design Reference
|
|
2
|
+
|
|
3
|
+
AI-powered logo design with 55+ styles, 30 color palettes, 25 industry guides. Uses Gemini Nano Banana models.
|
|
4
|
+
|
|
5
|
+
## Scripts
|
|
6
|
+
|
|
7
|
+
| Script | Purpose |
|
|
8
|
+
|--------|---------|
|
|
9
|
+
| `scripts/logo/search.py` | Search styles, colors, industries; generate design briefs |
|
|
10
|
+
| `scripts/logo/generate.py` | Generate logos with Gemini Nano Banana |
|
|
11
|
+
| `scripts/logo/core.py` | BM25 search engine for logo data |
|
|
12
|
+
|
|
13
|
+
## Commands
|
|
14
|
+
|
|
15
|
+
### Design Brief (Start Here)
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
python3 ~/.claude/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
### Search Domains
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
# Styles
|
|
25
|
+
python3 ~/.claude/skills/design/scripts/logo/search.py "minimalist clean" --domain style
|
|
26
|
+
|
|
27
|
+
# Color palettes
|
|
28
|
+
python3 ~/.claude/skills/design/scripts/logo/search.py "tech professional" --domain color
|
|
29
|
+
|
|
30
|
+
# Industry guidelines
|
|
31
|
+
python3 ~/.claude/skills/design/scripts/logo/search.py "healthcare medical" --domain industry
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### Generate Logo
|
|
35
|
+
|
|
36
|
+
**ALWAYS** use white background for output logos.
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
python3 ~/.claude/skills/design/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
|
|
40
|
+
python3 ~/.claude/skills/design/scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintage
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
Options: `--style`, `--industry`, `--prompt`
|
|
44
|
+
|
|
45
|
+
## Available Styles
|
|
46
|
+
|
|
47
|
+
| Category | Styles |
|
|
48
|
+
|----------|--------|
|
|
49
|
+
| General | Minimalist, Wordmark, Lettermark, Pictorial Mark, Abstract Mark, Mascot, Emblem, Combination Mark |
|
|
50
|
+
| Aesthetic | Vintage/Retro, Art Deco, Luxury, Playful, Corporate, Organic, Neon, Grunge, Watercolor |
|
|
51
|
+
| Modern | Gradient, Flat Design, 3D/Isometric, Geometric, Line Art, Duotone, Motion-Ready |
|
|
52
|
+
| Clever | Negative Space, Monoline, Split/Fragmented, Responsive/Adaptive |
|
|
53
|
+
|
|
54
|
+
## Color Psychology
|
|
55
|
+
|
|
56
|
+
| Color | Psychology | Best For |
|
|
57
|
+
|-------|------------|----------|
|
|
58
|
+
| Blue | Trust, stability | Finance, tech, healthcare |
|
|
59
|
+
| Green | Growth, natural | Eco, wellness, organic |
|
|
60
|
+
| Red | Energy, passion | Food, sports, entertainment |
|
|
61
|
+
| Gold | Luxury, premium | Fashion, jewelry, hotels |
|
|
62
|
+
| Purple | Creative, innovative | Beauty, creative, tech |
|
|
63
|
+
|
|
64
|
+
## Industry Defaults
|
|
65
|
+
|
|
66
|
+
| Industry | Style | Colors | Typography |
|
|
67
|
+
|----------|-------|--------|------------|
|
|
68
|
+
| Tech | Minimalist, Abstract | Blues, purples, gradients | Geometric sans |
|
|
69
|
+
| Healthcare | Professional, Line Art | Blues, greens, teals | Clean sans |
|
|
70
|
+
| Finance | Corporate, Emblem | Navy, gold | Serif or clean sans |
|
|
71
|
+
| Food | Vintage Badge, Mascot | Warm reds, oranges | Friendly, script |
|
|
72
|
+
| Fashion | Wordmark, Luxury | Black, gold, white | Elegant serif |
|
|
73
|
+
|
|
74
|
+
## Workflow
|
|
75
|
+
|
|
76
|
+
1. Generate design brief → `scripts/logo/search.py --design-brief`
|
|
77
|
+
2. Generate logo variations → `scripts/logo/generate.py --brand --style --industry`
|
|
78
|
+
3. Ask user about HTML preview → `AskUserQuestion` tool
|
|
79
|
+
4. If yes, invoke `/ui-pro-forge` for HTML gallery
|
|
80
|
+
|
|
81
|
+
## Detailed References
|
|
82
|
+
|
|
83
|
+
- `references/logo-style-guide.md` - Detailed style descriptions
|
|
84
|
+
- `references/logo-color-psychology.md` - Color meanings and combinations
|
|
85
|
+
- `references/logo-prompt-engineering.md` - AI generation prompts
|
|
86
|
+
|
|
87
|
+
## Setup
|
|
88
|
+
|
|
89
|
+
```bash
|
|
90
|
+
export GEMINI_API_KEY="your-key"
|
|
91
|
+
pip install google-genai
|
|
92
|
+
```
|