ui-ux-pro-max-cli 2.8.8
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/_sync_all.py +414 -0
- package/assets/data/app-interface.csv +31 -0
- package/assets/data/charts.csv +26 -0
- package/assets/data/colors.csv +162 -0
- package/assets/data/design.csv +1776 -0
- package/assets/data/draft.csv +1779 -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/products.csv +162 -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/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/svelte.csv +54 -0
- package/assets/data/stacks/swiftui.csv +51 -0
- package/assets/data/stacks/threejs.csv +54 -0
- package/assets/data/stacks/vue.csv +50 -0
- package/assets/data/styles.csv +85 -0
- package/assets/data/typography.csv +74 -0
- package/assets/data/ui-reasoning.csv +162 -0
- package/assets/data/ux-guidelines.csv +100 -0
- package/assets/scripts/core.py +263 -0
- package/assets/scripts/design_system.py +1157 -0
- package/assets/scripts/search.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 +266 -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/validate-tokens.cjs +251 -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 +336 -0
- package/assets/templates/base/quick-reference.md +297 -0
- package/assets/templates/base/skill-content.md +368 -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/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/index.js +10630 -0
- package/package.json +51 -0
|
@@ -0,0 +1,424 @@
|
|
|
1
|
+
#!/usr/bin/env python3
|
|
2
|
+
# -*- coding: utf-8 -*-
|
|
3
|
+
"""
|
|
4
|
+
CIP HTML Presentation Renderer
|
|
5
|
+
|
|
6
|
+
Generates a professional HTML presentation from CIP mockup images
|
|
7
|
+
with detailed descriptions, concepts, and brand guidelines.
|
|
8
|
+
"""
|
|
9
|
+
|
|
10
|
+
import argparse
|
|
11
|
+
import json
|
|
12
|
+
import os
|
|
13
|
+
import sys
|
|
14
|
+
import base64
|
|
15
|
+
from pathlib import Path
|
|
16
|
+
from datetime import datetime
|
|
17
|
+
|
|
18
|
+
# Add parent directory for imports
|
|
19
|
+
sys.path.insert(0, str(Path(__file__).parent))
|
|
20
|
+
from core import search, get_cip_brief
|
|
21
|
+
|
|
22
|
+
# Deliverable descriptions for presentation
|
|
23
|
+
DELIVERABLE_INFO = {
|
|
24
|
+
"business card": {
|
|
25
|
+
"title": "Business Card",
|
|
26
|
+
"concept": "First impression touchpoint for professional networking",
|
|
27
|
+
"purpose": "Creates memorable brand recall during business exchanges",
|
|
28
|
+
"specs": "Standard 3.5 x 2 inches, premium paper stock"
|
|
29
|
+
},
|
|
30
|
+
"letterhead": {
|
|
31
|
+
"title": "Letterhead",
|
|
32
|
+
"concept": "Official correspondence identity",
|
|
33
|
+
"purpose": "Establishes credibility and professionalism in written communications",
|
|
34
|
+
"specs": "A4/Letter size, digital and print versions"
|
|
35
|
+
},
|
|
36
|
+
"document template": {
|
|
37
|
+
"title": "Document Template",
|
|
38
|
+
"concept": "Branded document system for internal and external use",
|
|
39
|
+
"purpose": "Ensures consistent brand representation across all documents",
|
|
40
|
+
"specs": "Multiple formats: Word, PDF, Google Docs compatible"
|
|
41
|
+
},
|
|
42
|
+
"reception signage": {
|
|
43
|
+
"title": "Reception Signage",
|
|
44
|
+
"concept": "Brand presence in physical office environment",
|
|
45
|
+
"purpose": "Creates strong first impression for visitors and reinforces brand identity",
|
|
46
|
+
"specs": "3D dimensional letters, backlit LED options, premium materials"
|
|
47
|
+
},
|
|
48
|
+
"office signage": {
|
|
49
|
+
"title": "Office Signage",
|
|
50
|
+
"concept": "Wayfinding and brand presence system",
|
|
51
|
+
"purpose": "Guides visitors while maintaining consistent brand experience",
|
|
52
|
+
"specs": "Modular system with directional and informational signs"
|
|
53
|
+
},
|
|
54
|
+
"polo shirt": {
|
|
55
|
+
"title": "Polo Shirt",
|
|
56
|
+
"concept": "Professional team apparel",
|
|
57
|
+
"purpose": "Creates unified team identity and brand ambassadorship",
|
|
58
|
+
"specs": "Premium pique cotton, embroidered logo on left chest"
|
|
59
|
+
},
|
|
60
|
+
"t-shirt": {
|
|
61
|
+
"title": "T-Shirt",
|
|
62
|
+
"concept": "Casual brand apparel",
|
|
63
|
+
"purpose": "Extends brand reach through everyday wear and promotional events",
|
|
64
|
+
"specs": "High-quality cotton, screen print or embroidery options"
|
|
65
|
+
},
|
|
66
|
+
"vehicle": {
|
|
67
|
+
"title": "Vehicle Branding",
|
|
68
|
+
"concept": "Mobile brand advertising",
|
|
69
|
+
"purpose": "Transforms fleet into moving billboards for maximum visibility",
|
|
70
|
+
"specs": "Partial or full wrap, vinyl graphics, weather-resistant"
|
|
71
|
+
},
|
|
72
|
+
"van": {
|
|
73
|
+
"title": "Van Branding",
|
|
74
|
+
"concept": "Commercial vehicle identity",
|
|
75
|
+
"purpose": "Professional fleet presence for service and delivery operations",
|
|
76
|
+
"specs": "Full wrap design, high-visibility contact information"
|
|
77
|
+
},
|
|
78
|
+
"car": {
|
|
79
|
+
"title": "Car Branding",
|
|
80
|
+
"concept": "Executive vehicle identity",
|
|
81
|
+
"purpose": "Professional presence for corporate and sales teams",
|
|
82
|
+
"specs": "Subtle branding, door panels and rear window"
|
|
83
|
+
},
|
|
84
|
+
"envelope": {
|
|
85
|
+
"title": "Envelope",
|
|
86
|
+
"concept": "Branded mail correspondence",
|
|
87
|
+
"purpose": "Extends brand identity to all outgoing mail",
|
|
88
|
+
"specs": "DL, C4, C5 sizes with logo placement"
|
|
89
|
+
},
|
|
90
|
+
"folder": {
|
|
91
|
+
"title": "Presentation Folder",
|
|
92
|
+
"concept": "Document organization with brand identity",
|
|
93
|
+
"purpose": "Professional presentation of proposals and materials",
|
|
94
|
+
"specs": "A4/Letter pocket folder with die-cut design"
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
def get_image_base64(image_path):
|
|
100
|
+
"""Convert image to base64 for embedding in HTML"""
|
|
101
|
+
try:
|
|
102
|
+
with open(image_path, "rb") as f:
|
|
103
|
+
return base64.b64encode(f.read()).decode('utf-8')
|
|
104
|
+
except Exception as e:
|
|
105
|
+
print(f"Warning: Could not load image {image_path}: {e}")
|
|
106
|
+
return None
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
def get_deliverable_info(filename):
|
|
110
|
+
"""Extract deliverable type from filename and get info"""
|
|
111
|
+
filename_lower = filename.lower()
|
|
112
|
+
for key, info in DELIVERABLE_INFO.items():
|
|
113
|
+
if key.replace(" ", "-") in filename_lower or key.replace(" ", "_") in filename_lower:
|
|
114
|
+
return info
|
|
115
|
+
# Default info
|
|
116
|
+
return {
|
|
117
|
+
"title": filename.replace("-", " ").replace("_", " ").title(),
|
|
118
|
+
"concept": "Brand identity application",
|
|
119
|
+
"purpose": "Extends brand presence across touchpoints",
|
|
120
|
+
"specs": "Custom specifications"
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
def generate_html(brand_name, industry, images_dir, output_path=None, style=None):
|
|
125
|
+
"""Generate HTML presentation from CIP images"""
|
|
126
|
+
|
|
127
|
+
images_dir = Path(images_dir)
|
|
128
|
+
if not images_dir.exists():
|
|
129
|
+
print(f"Error: Directory not found: {images_dir}")
|
|
130
|
+
return None
|
|
131
|
+
|
|
132
|
+
# Get all PNG images
|
|
133
|
+
images = sorted(images_dir.glob("*.png"))
|
|
134
|
+
if not images:
|
|
135
|
+
print(f"Error: No PNG images found in {images_dir}")
|
|
136
|
+
return None
|
|
137
|
+
|
|
138
|
+
# Get CIP brief for brand info
|
|
139
|
+
brief = get_cip_brief(brand_name, industry, style)
|
|
140
|
+
style_info = brief.get("style", {})
|
|
141
|
+
industry_info = brief.get("industry", {})
|
|
142
|
+
|
|
143
|
+
# Build HTML
|
|
144
|
+
html_parts = [f'''<!DOCTYPE html>
|
|
145
|
+
<html lang="en">
|
|
146
|
+
<head>
|
|
147
|
+
<meta charset="UTF-8">
|
|
148
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
149
|
+
<title>{brand_name} - Corporate Identity Program</title>
|
|
150
|
+
<style>
|
|
151
|
+
* {{
|
|
152
|
+
margin: 0;
|
|
153
|
+
padding: 0;
|
|
154
|
+
box-sizing: border-box;
|
|
155
|
+
}}
|
|
156
|
+
body {{
|
|
157
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
|
158
|
+
background: #0a0a0a;
|
|
159
|
+
color: #ffffff;
|
|
160
|
+
line-height: 1.6;
|
|
161
|
+
}}
|
|
162
|
+
.hero {{
|
|
163
|
+
min-height: 100vh;
|
|
164
|
+
display: flex;
|
|
165
|
+
flex-direction: column;
|
|
166
|
+
justify-content: center;
|
|
167
|
+
align-items: center;
|
|
168
|
+
text-align: center;
|
|
169
|
+
padding: 4rem 2rem;
|
|
170
|
+
background: linear-gradient(135deg, #1a1a2e 0%, #0a0a0a 100%);
|
|
171
|
+
}}
|
|
172
|
+
.hero h1 {{
|
|
173
|
+
font-size: 4rem;
|
|
174
|
+
font-weight: 700;
|
|
175
|
+
letter-spacing: -0.02em;
|
|
176
|
+
margin-bottom: 1rem;
|
|
177
|
+
background: linear-gradient(135deg, #ffffff 0%, #888888 100%);
|
|
178
|
+
-webkit-background-clip: text;
|
|
179
|
+
-webkit-text-fill-color: transparent;
|
|
180
|
+
}}
|
|
181
|
+
.hero .subtitle {{
|
|
182
|
+
font-size: 1.5rem;
|
|
183
|
+
color: #888;
|
|
184
|
+
margin-bottom: 3rem;
|
|
185
|
+
}}
|
|
186
|
+
.hero .meta {{
|
|
187
|
+
display: flex;
|
|
188
|
+
gap: 3rem;
|
|
189
|
+
flex-wrap: wrap;
|
|
190
|
+
justify-content: center;
|
|
191
|
+
}}
|
|
192
|
+
.hero .meta-item {{
|
|
193
|
+
text-align: center;
|
|
194
|
+
}}
|
|
195
|
+
.hero .meta-label {{
|
|
196
|
+
font-size: 0.75rem;
|
|
197
|
+
text-transform: uppercase;
|
|
198
|
+
letter-spacing: 0.1em;
|
|
199
|
+
color: #666;
|
|
200
|
+
margin-bottom: 0.5rem;
|
|
201
|
+
}}
|
|
202
|
+
.hero .meta-value {{
|
|
203
|
+
font-size: 1rem;
|
|
204
|
+
color: #ccc;
|
|
205
|
+
}}
|
|
206
|
+
.section {{
|
|
207
|
+
padding: 6rem 2rem;
|
|
208
|
+
max-width: 1400px;
|
|
209
|
+
margin: 0 auto;
|
|
210
|
+
}}
|
|
211
|
+
.section-title {{
|
|
212
|
+
font-size: 2.5rem;
|
|
213
|
+
font-weight: 600;
|
|
214
|
+
margin-bottom: 1rem;
|
|
215
|
+
color: #fff;
|
|
216
|
+
}}
|
|
217
|
+
.section-subtitle {{
|
|
218
|
+
font-size: 1.1rem;
|
|
219
|
+
color: #888;
|
|
220
|
+
margin-bottom: 4rem;
|
|
221
|
+
max-width: 600px;
|
|
222
|
+
}}
|
|
223
|
+
.deliverable {{
|
|
224
|
+
display: grid;
|
|
225
|
+
grid-template-columns: 1fr 1fr;
|
|
226
|
+
gap: 4rem;
|
|
227
|
+
margin-bottom: 8rem;
|
|
228
|
+
align-items: center;
|
|
229
|
+
}}
|
|
230
|
+
.deliverable:nth-child(even) {{
|
|
231
|
+
direction: rtl;
|
|
232
|
+
}}
|
|
233
|
+
.deliverable:nth-child(even) > * {{
|
|
234
|
+
direction: ltr;
|
|
235
|
+
}}
|
|
236
|
+
.deliverable-image {{
|
|
237
|
+
position: relative;
|
|
238
|
+
border-radius: 16px;
|
|
239
|
+
overflow: hidden;
|
|
240
|
+
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
241
|
+
}}
|
|
242
|
+
.deliverable-image img {{
|
|
243
|
+
width: 100%;
|
|
244
|
+
height: auto;
|
|
245
|
+
display: block;
|
|
246
|
+
}}
|
|
247
|
+
.deliverable-content {{
|
|
248
|
+
padding: 2rem 0;
|
|
249
|
+
}}
|
|
250
|
+
.deliverable-title {{
|
|
251
|
+
font-size: 2rem;
|
|
252
|
+
font-weight: 600;
|
|
253
|
+
margin-bottom: 1rem;
|
|
254
|
+
color: #fff;
|
|
255
|
+
}}
|
|
256
|
+
.deliverable-concept {{
|
|
257
|
+
font-size: 1.1rem;
|
|
258
|
+
color: #aaa;
|
|
259
|
+
margin-bottom: 1.5rem;
|
|
260
|
+
font-style: italic;
|
|
261
|
+
}}
|
|
262
|
+
.deliverable-purpose {{
|
|
263
|
+
font-size: 1rem;
|
|
264
|
+
color: #888;
|
|
265
|
+
margin-bottom: 1.5rem;
|
|
266
|
+
line-height: 1.8;
|
|
267
|
+
}}
|
|
268
|
+
.deliverable-specs {{
|
|
269
|
+
display: inline-block;
|
|
270
|
+
padding: 0.5rem 1rem;
|
|
271
|
+
background: rgba(255, 255, 255, 0.05);
|
|
272
|
+
border-radius: 8px;
|
|
273
|
+
font-size: 0.85rem;
|
|
274
|
+
color: #666;
|
|
275
|
+
}}
|
|
276
|
+
.color-palette {{
|
|
277
|
+
display: flex;
|
|
278
|
+
gap: 1rem;
|
|
279
|
+
margin-top: 2rem;
|
|
280
|
+
}}
|
|
281
|
+
.color-swatch {{
|
|
282
|
+
width: 60px;
|
|
283
|
+
height: 60px;
|
|
284
|
+
border-radius: 12px;
|
|
285
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
286
|
+
}}
|
|
287
|
+
.footer {{
|
|
288
|
+
text-align: center;
|
|
289
|
+
padding: 4rem 2rem;
|
|
290
|
+
border-top: 1px solid #222;
|
|
291
|
+
color: #666;
|
|
292
|
+
}}
|
|
293
|
+
.footer p {{
|
|
294
|
+
margin-bottom: 0.5rem;
|
|
295
|
+
}}
|
|
296
|
+
@media (max-width: 900px) {{
|
|
297
|
+
.hero h1 {{
|
|
298
|
+
font-size: 2.5rem;
|
|
299
|
+
}}
|
|
300
|
+
.deliverable {{
|
|
301
|
+
grid-template-columns: 1fr;
|
|
302
|
+
gap: 2rem;
|
|
303
|
+
}}
|
|
304
|
+
.deliverable:nth-child(even) {{
|
|
305
|
+
direction: ltr;
|
|
306
|
+
}}
|
|
307
|
+
}}
|
|
308
|
+
</style>
|
|
309
|
+
</head>
|
|
310
|
+
<body>
|
|
311
|
+
<section class="hero">
|
|
312
|
+
<h1>{brand_name}</h1>
|
|
313
|
+
<p class="subtitle">Corporate Identity Program</p>
|
|
314
|
+
<div class="meta">
|
|
315
|
+
<div class="meta-item">
|
|
316
|
+
<div class="meta-label">Industry</div>
|
|
317
|
+
<div class="meta-value">{industry_info.get("Industry", industry.title())}</div>
|
|
318
|
+
</div>
|
|
319
|
+
<div class="meta-item">
|
|
320
|
+
<div class="meta-label">Style</div>
|
|
321
|
+
<div class="meta-value">{style_info.get("Style Name", "Corporate")}</div>
|
|
322
|
+
</div>
|
|
323
|
+
<div class="meta-item">
|
|
324
|
+
<div class="meta-label">Mood</div>
|
|
325
|
+
<div class="meta-value">{style_info.get("Mood", "Professional")}</div>
|
|
326
|
+
</div>
|
|
327
|
+
<div class="meta-item">
|
|
328
|
+
<div class="meta-label">Deliverables</div>
|
|
329
|
+
<div class="meta-value">{len(images)} Items</div>
|
|
330
|
+
</div>
|
|
331
|
+
</div>
|
|
332
|
+
</section>
|
|
333
|
+
|
|
334
|
+
<section class="section">
|
|
335
|
+
<h2 class="section-title">Brand Applications</h2>
|
|
336
|
+
<p class="section-subtitle">
|
|
337
|
+
Comprehensive identity system designed to maintain consistency
|
|
338
|
+
across all brand touchpoints and communications.
|
|
339
|
+
</p>
|
|
340
|
+
''']
|
|
341
|
+
|
|
342
|
+
# Add each deliverable
|
|
343
|
+
for i, image_path in enumerate(images):
|
|
344
|
+
info = get_deliverable_info(image_path.stem)
|
|
345
|
+
img_base64 = get_image_base64(image_path)
|
|
346
|
+
|
|
347
|
+
if img_base64:
|
|
348
|
+
img_src = f"data:image/png;base64,{img_base64}"
|
|
349
|
+
else:
|
|
350
|
+
img_src = str(image_path)
|
|
351
|
+
|
|
352
|
+
html_parts.append(f'''
|
|
353
|
+
<div class="deliverable">
|
|
354
|
+
<div class="deliverable-image">
|
|
355
|
+
<img src="{img_src}" alt="{info['title']}" loading="lazy">
|
|
356
|
+
</div>
|
|
357
|
+
<div class="deliverable-content">
|
|
358
|
+
<h3 class="deliverable-title">{info['title']}</h3>
|
|
359
|
+
<p class="deliverable-concept">{info['concept']}</p>
|
|
360
|
+
<p class="deliverable-purpose">{info['purpose']}</p>
|
|
361
|
+
<span class="deliverable-specs">{info['specs']}</span>
|
|
362
|
+
</div>
|
|
363
|
+
</div>
|
|
364
|
+
''')
|
|
365
|
+
|
|
366
|
+
# Close HTML
|
|
367
|
+
html_parts.append(f'''
|
|
368
|
+
</section>
|
|
369
|
+
|
|
370
|
+
<footer class="footer">
|
|
371
|
+
<p><strong>{brand_name}</strong> Corporate Identity Program</p>
|
|
372
|
+
<p>Generated on {datetime.now().strftime("%B %d, %Y")}</p>
|
|
373
|
+
<p style="margin-top: 1rem; font-size: 0.8rem;">Powered by CIP Design Skill</p>
|
|
374
|
+
</footer>
|
|
375
|
+
</body>
|
|
376
|
+
</html>
|
|
377
|
+
''')
|
|
378
|
+
|
|
379
|
+
html_content = "".join(html_parts)
|
|
380
|
+
|
|
381
|
+
# Save HTML
|
|
382
|
+
output_path = output_path or images_dir / f"{brand_name.lower().replace(' ', '-')}-cip-presentation.html"
|
|
383
|
+
output_path = Path(output_path)
|
|
384
|
+
|
|
385
|
+
with open(output_path, "w", encoding="utf-8") as f:
|
|
386
|
+
f.write(html_content)
|
|
387
|
+
|
|
388
|
+
print(f"✅ HTML presentation generated: {output_path}")
|
|
389
|
+
return str(output_path)
|
|
390
|
+
|
|
391
|
+
|
|
392
|
+
def main():
|
|
393
|
+
parser = argparse.ArgumentParser(
|
|
394
|
+
description="Generate HTML presentation from CIP mockups",
|
|
395
|
+
formatter_class=argparse.RawDescriptionHelpFormatter,
|
|
396
|
+
epilog="""
|
|
397
|
+
Examples:
|
|
398
|
+
# Generate HTML from CIP images directory
|
|
399
|
+
python render-html.py --brand "TopGroup" --industry "consulting" --images ./topgroup-cip
|
|
400
|
+
|
|
401
|
+
# Specify output path
|
|
402
|
+
python render-html.py --brand "TopGroup" --industry "consulting" --images ./cip --output presentation.html
|
|
403
|
+
"""
|
|
404
|
+
)
|
|
405
|
+
|
|
406
|
+
parser.add_argument("--brand", "-b", required=True, help="Brand name")
|
|
407
|
+
parser.add_argument("--industry", "-i", default="technology", help="Industry type")
|
|
408
|
+
parser.add_argument("--style", "-s", help="Design style")
|
|
409
|
+
parser.add_argument("--images", required=True, help="Directory containing CIP mockup images")
|
|
410
|
+
parser.add_argument("--output", "-o", help="Output HTML file path")
|
|
411
|
+
|
|
412
|
+
args = parser.parse_args()
|
|
413
|
+
|
|
414
|
+
generate_html(
|
|
415
|
+
brand_name=args.brand,
|
|
416
|
+
industry=args.industry,
|
|
417
|
+
images_dir=args.images,
|
|
418
|
+
output_path=args.output,
|
|
419
|
+
style=args.style
|
|
420
|
+
)
|
|
421
|
+
|
|
422
|
+
|
|
423
|
+
if __name__ == "__main__":
|
|
424
|
+
main()
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
#!/usr/bin/env python3
|
|
2
|
+
# -*- coding: utf-8 -*-
|
|
3
|
+
"""
|
|
4
|
+
CIP Design Search CLI - Search corporate identity design guidelines
|
|
5
|
+
"""
|
|
6
|
+
|
|
7
|
+
import argparse
|
|
8
|
+
import json
|
|
9
|
+
import sys
|
|
10
|
+
from pathlib import Path
|
|
11
|
+
|
|
12
|
+
# Add parent directory for imports
|
|
13
|
+
sys.path.insert(0, str(Path(__file__).parent))
|
|
14
|
+
from core import search, search_all, get_cip_brief, CSV_CONFIG
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
def format_results(results, domain):
|
|
18
|
+
"""Format search results for display"""
|
|
19
|
+
if not results:
|
|
20
|
+
return "No results found."
|
|
21
|
+
|
|
22
|
+
output = []
|
|
23
|
+
for i, item in enumerate(results, 1):
|
|
24
|
+
output.append(f"\n{'='*60}")
|
|
25
|
+
output.append(f"Result {i}:")
|
|
26
|
+
for key, value in item.items():
|
|
27
|
+
if value:
|
|
28
|
+
output.append(f" {key}: {value}")
|
|
29
|
+
return "\n".join(output)
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
def format_brief(brief):
|
|
33
|
+
"""Format CIP brief for display"""
|
|
34
|
+
output = []
|
|
35
|
+
output.append(f"\n{'='*60}")
|
|
36
|
+
output.append(f"CIP DESIGN BRIEF: {brief['brand_name']}")
|
|
37
|
+
output.append(f"{'='*60}")
|
|
38
|
+
|
|
39
|
+
if brief.get("industry"):
|
|
40
|
+
output.append(f"\n📊 INDUSTRY: {brief['industry'].get('Industry', 'N/A')}")
|
|
41
|
+
output.append(f" Style: {brief['industry'].get('CIP Style', 'N/A')}")
|
|
42
|
+
output.append(f" Mood: {brief['industry'].get('Mood', 'N/A')}")
|
|
43
|
+
|
|
44
|
+
if brief.get("style"):
|
|
45
|
+
output.append(f"\n🎨 DESIGN STYLE: {brief['style'].get('Style Name', 'N/A')}")
|
|
46
|
+
output.append(f" Description: {brief['style'].get('Description', 'N/A')}")
|
|
47
|
+
output.append(f" Materials: {brief['style'].get('Materials', 'N/A')}")
|
|
48
|
+
output.append(f" Finishes: {brief['style'].get('Finishes', 'N/A')}")
|
|
49
|
+
|
|
50
|
+
if brief.get("color_system"):
|
|
51
|
+
output.append(f"\n🎯 COLOR SYSTEM:")
|
|
52
|
+
output.append(f" Primary: {brief['color_system'].get('primary', 'N/A')}")
|
|
53
|
+
output.append(f" Secondary: {brief['color_system'].get('secondary', 'N/A')}")
|
|
54
|
+
|
|
55
|
+
output.append(f"\n✏️ TYPOGRAPHY: {brief.get('typography', 'N/A')}")
|
|
56
|
+
|
|
57
|
+
if brief.get("recommended_deliverables"):
|
|
58
|
+
output.append(f"\n📦 RECOMMENDED DELIVERABLES:")
|
|
59
|
+
for d in brief["recommended_deliverables"]:
|
|
60
|
+
output.append(f" • {d.get('Deliverable', 'N/A')}: {d.get('Description', '')[:60]}...")
|
|
61
|
+
|
|
62
|
+
return "\n".join(output)
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
def main():
|
|
66
|
+
parser = argparse.ArgumentParser(
|
|
67
|
+
description="Search CIP design guidelines",
|
|
68
|
+
formatter_class=argparse.RawDescriptionHelpFormatter,
|
|
69
|
+
epilog="""
|
|
70
|
+
Examples:
|
|
71
|
+
# Search deliverables
|
|
72
|
+
python search.py "business card"
|
|
73
|
+
|
|
74
|
+
# Search specific domain
|
|
75
|
+
python search.py "luxury elegant" --domain style
|
|
76
|
+
|
|
77
|
+
# Generate CIP brief
|
|
78
|
+
python search.py "tech startup" --cip-brief -b "TechFlow"
|
|
79
|
+
|
|
80
|
+
# Search all domains
|
|
81
|
+
python search.py "corporate professional" --all
|
|
82
|
+
|
|
83
|
+
# JSON output
|
|
84
|
+
python search.py "vehicle branding" --json
|
|
85
|
+
"""
|
|
86
|
+
)
|
|
87
|
+
|
|
88
|
+
parser.add_argument("query", help="Search query")
|
|
89
|
+
parser.add_argument("--domain", "-d", choices=list(CSV_CONFIG.keys()),
|
|
90
|
+
help="Search domain (auto-detected if not specified)")
|
|
91
|
+
parser.add_argument("--max", "-m", type=int, default=3, help="Max results (default: 3)")
|
|
92
|
+
parser.add_argument("--all", "-a", action="store_true", help="Search all domains")
|
|
93
|
+
parser.add_argument("--cip-brief", "-c", action="store_true", help="Generate CIP brief")
|
|
94
|
+
parser.add_argument("--brand", "-b", default="BrandName", help="Brand name for CIP brief")
|
|
95
|
+
parser.add_argument("--style", "-s", help="Style override for CIP brief")
|
|
96
|
+
parser.add_argument("--json", "-j", action="store_true", help="Output as JSON")
|
|
97
|
+
|
|
98
|
+
args = parser.parse_args()
|
|
99
|
+
|
|
100
|
+
if args.cip_brief:
|
|
101
|
+
brief = get_cip_brief(args.brand, args.query, args.style)
|
|
102
|
+
if args.json:
|
|
103
|
+
print(json.dumps(brief, indent=2))
|
|
104
|
+
else:
|
|
105
|
+
print(format_brief(brief))
|
|
106
|
+
elif args.all:
|
|
107
|
+
results = search_all(args.query, args.max)
|
|
108
|
+
if args.json:
|
|
109
|
+
print(json.dumps(results, indent=2))
|
|
110
|
+
else:
|
|
111
|
+
for domain, items in results.items():
|
|
112
|
+
print(f"\n{'#'*60}")
|
|
113
|
+
print(f"# {domain.upper()}")
|
|
114
|
+
print(format_results(items, domain))
|
|
115
|
+
else:
|
|
116
|
+
result = search(args.query, args.domain, args.max)
|
|
117
|
+
if args.json:
|
|
118
|
+
print(json.dumps(result, indent=2))
|
|
119
|
+
else:
|
|
120
|
+
print(f"\nDomain: {result['domain']}")
|
|
121
|
+
print(f"Query: {result['query']}")
|
|
122
|
+
print(f"Results: {result['count']}")
|
|
123
|
+
print(format_results(result.get("results", []), result["domain"]))
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
if __name__ == "__main__":
|
|
127
|
+
main()
|