@lebtiga/sonic-agent 1.0.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.
Files changed (62) hide show
  1. package/LICENSE.txt +223 -0
  2. package/README.md +61 -0
  3. package/bin/sonic.js +304 -0
  4. package/lib/index.js +20 -0
  5. package/lib/installer.js +156 -0
  6. package/lib/license.js +48 -0
  7. package/package.json +46 -0
  8. package/plugin/.claude-plugin/plugin.json +13 -0
  9. package/plugin/README.md +100 -0
  10. package/plugin/agents/sonic.md +80 -0
  11. package/plugin/commands/sonic-build.md +145 -0
  12. package/plugin/commands/sonic-help.md +71 -0
  13. package/plugin/skills/accessibility-qa/SKILL.md +160 -0
  14. package/plugin/skills/accessibility-qa/templates/accessibility-qa-report-template.md +123 -0
  15. package/plugin/skills/accessibility-qa/templates/wcag-compliance-statement.md +70 -0
  16. package/plugin/skills/aka-wireframe-wp/SKILL.md +149 -0
  17. package/plugin/skills/aka-wireframe-wp/assets/aka-framework-theme/README.md +190 -0
  18. package/plugin/skills/aka-wireframe-wp/assets/aka-framework-theme/footer.php +49 -0
  19. package/plugin/skills/aka-wireframe-wp/assets/aka-framework-theme/functions.php +395 -0
  20. package/plugin/skills/aka-wireframe-wp/assets/aka-framework-theme/header.php +58 -0
  21. package/plugin/skills/aka-wireframe-wp/assets/aka-framework-theme/index.php +39 -0
  22. package/plugin/skills/aka-wireframe-wp/assets/aka-framework-theme/page-answer.php +62 -0
  23. package/plugin/skills/aka-wireframe-wp/assets/aka-framework-theme/page-authority-hub.php +122 -0
  24. package/plugin/skills/aka-wireframe-wp/assets/aka-framework-theme/page-knowledge.php +58 -0
  25. package/plugin/skills/aka-wireframe-wp/assets/aka-framework-theme/style.css +633 -0
  26. package/plugin/skills/aka-wireframe-wp/references/content-generator.md +371 -0
  27. package/plugin/skills/aka-wireframe-wp/references/internal-linker.md +430 -0
  28. package/plugin/skills/aka-wireframe-wp/references/orchestrator.md +269 -0
  29. package/plugin/skills/aka-wireframe-wp/references/prompts-library.md +880 -0
  30. package/plugin/skills/aka-wireframe-wp/references/seo-optimizer.md +433 -0
  31. package/plugin/skills/aka-wireframe-wp/references/strategy-planner.md +317 -0
  32. package/plugin/skills/aka-wireframe-wp/references/wordpress-deployer.md +545 -0
  33. package/plugin/skills/authority-site-builder/SKILL.md +138 -0
  34. package/plugin/skills/brand-philosophy/SKILL.md +77 -0
  35. package/plugin/skills/freepik-spaces/SKILL.md +122 -0
  36. package/plugin/skills/freepik-spaces/docs/automation-guide.md +233 -0
  37. package/plugin/skills/freepik-spaces/docs/research-notes.md +264 -0
  38. package/plugin/skills/freepik-spaces/plans/naseberry-demo-plan.md +320 -0
  39. package/plugin/skills/freepik-spaces/templates/naseberry-demo.json +302 -0
  40. package/plugin/skills/freepik-spaces/templates/saas-demo.json +212 -0
  41. package/plugin/skills/frontend-design/LICENSE.txt +177 -0
  42. package/plugin/skills/frontend-design/SKILL.md +77 -0
  43. package/plugin/skills/programmatic-seo/SKILL.md +236 -0
  44. package/plugin/skills/programmatic-seo/references/playbooks.md +293 -0
  45. package/plugin/skills/seo-qa/SKILL.md +132 -0
  46. package/plugin/skills/seo-qa/templates/schema-localbusiness.json +49 -0
  47. package/plugin/skills/seo-qa/templates/schema-service.json +36 -0
  48. package/plugin/skills/seo-qa/templates/seo-qa-report-template.md +90 -0
  49. package/plugin/skills/visual-identity/SKILL.md +109 -0
  50. package/plugin/skills/visual-identity/templates/style-guide-template.md +108 -0
  51. package/plugin/skills/website-image-gen/SKILL.md +82 -0
  52. package/plugin/skills/website-image-gen/templates/blog-featured.md +56 -0
  53. package/plugin/skills/website-image-gen/templates/hero-service-photo.md +56 -0
  54. package/plugin/skills/wordpress-pro/SKILL.md +105 -0
  55. package/plugin/skills/wordpress-pro/references/gutenberg-blocks.md +870 -0
  56. package/plugin/skills/wordpress-pro/references/hooks-filters.md +845 -0
  57. package/plugin/skills/wordpress-pro/references/performance-security.md +1012 -0
  58. package/plugin/skills/wordpress-pro/references/plugin-architecture.md +1041 -0
  59. package/plugin/skills/wordpress-pro/references/theme-development.md +858 -0
  60. package/plugin/sops/SOP-Sonic 777/authority-site-sop.html +1100 -0
  61. package/plugin/sops/SOP-WORDPRESS-330-PAGE-SITES.md +926 -0
  62. package/scripts/postinstall.js +109 -0
@@ -0,0 +1,320 @@
1
+ # Naseberry.ai Demo Video Plan
2
+ ## Complete Execution Guide for Freepik Spaces
3
+
4
+ ---
5
+
6
+ ## 🎬 THE STORY (30-45 second demo)
7
+
8
+ ### Narrative Arc
9
+ **Hook → Problem → Solution → Features → Result → CTA**
10
+
11
+ ```
12
+ SCENE 1: THE STRUGGLE (5 sec)
13
+ "You just recorded a killer product demo... but it's silent."
14
+
15
+ SCENE 2: THE OLD WAY (5 sec)
16
+ "Recording voiceover? Retakes. Ums. Hours wasted."
17
+
18
+ SCENE 3: ENTER NASEBERRY (5 sec)
19
+ "What if AI could narrate it for you — in your brand's voice?"
20
+
21
+ SCENE 4: THE MAGIC (10 sec)
22
+ "Upload. Connect your GitHub. Pick a voice. Done."
23
+
24
+ SCENE 5: THE RESULT (5 sec)
25
+ "Professional narration in 60 seconds. No mic needed."
26
+
27
+ SCENE 6: CTA (5 sec)
28
+ "Transform your demos at naseberry.ai"
29
+ ```
30
+
31
+ ---
32
+
33
+ ## 📸 SCREENSHOTS YOU NEED TO CAPTURE
34
+
35
+ Take these from the actual Naseberry.ai product:
36
+
37
+ | # | Screenshot | What to capture | Suggested name |
38
+ |---|------------|-----------------|----------------|
39
+ | 1 | Landing Hero | Homepage above the fold | `landing-hero.png` |
40
+ | 2 | Upload Interface | The video upload screen/drag-drop | `upload-screen.png` |
41
+ | 3 | GitHub Connect | GitHub integration setup | `github-connect.png` |
42
+ | 4 | Voice Selection | Voice picker with 30+ options | `voice-picker.png` |
43
+ | 5 | Processing | AI processing/generating view | `processing.png` |
44
+ | 6 | Result/Download | Final video ready to download | `result-done.png` |
45
+
46
+ **Tip:** Full-page screenshots at 1920x1080 work best for video.
47
+
48
+ ---
49
+
50
+ ## 🖼️ IMAGE GENERATION PROMPTS
51
+
52
+ All prompts optimized for **Google Nano Banana Pro** model.
53
+
54
+ ### A. PERSONA SHOTS (People using the product)
55
+
56
+ These create the human element for your demo video.
57
+
58
+ #### Persona 1: Solo Founder (The Hero)
59
+ ```
60
+ Confident solo tech founder, early 30s, casual hoodie, sitting at minimalist desk with large ultrawide monitor, modern home office with warm ambient lighting, focused expression while looking at screen, MacBook nearby, single plant on desk, cinematic lighting, shallow depth of field, professional photography, 4K
61
+ ```
62
+ **Aspect Ratio:** 16:9
63
+ **Use for:** Scene 1-2 (The Struggle)
64
+
65
+ #### Persona 2: DevRel Engineer
66
+ ```
67
+ Developer relations engineer, late 20s female, wearing company t-shirt, standing at standing desk presenting to camera, ring light reflection in glasses, professional streaming setup background, confident smile, tech company office environment, natural lighting, editorial photography style
68
+ ```
69
+ **Aspect Ratio:** 16:9
70
+ **Use for:** Scene 4 (The Magic) - showing who uses it
71
+
72
+ #### Persona 3: The Relieved Creator
73
+ ```
74
+ Content creator with expression of relief and satisfaction, looking at laptop screen showing completed video, cozy workspace with warm lighting, genuine smile, headphones around neck, coffee cup nearby, evening golden hour light through window, authentic moment captured, documentary photography style
75
+ ```
76
+ **Aspect Ratio:** 16:9
77
+ **Use for:** Scene 5 (The Result)
78
+
79
+ ---
80
+
81
+ ### B. SCENARIO SHOTS (Context scenes)
82
+
83
+ #### Scenario 1: The Frustration (Before)
84
+ ```
85
+ Frustrated tech professional staring at microphone and recording setup, messy desk with multiple takes written on notepad crossed out, dim frustrated lighting, cluttered audio equipment, expression of exhaustion, realistic office environment, moody cinematic lighting
86
+ ```
87
+ **Aspect Ratio:** 16:9
88
+ **Use for:** Scene 2 (The Old Way)
89
+
90
+ #### Scenario 2: The Transformation (After)
91
+ ```
92
+ Clean minimal workspace transformation, laptop on clean desk with Naseberry interface visible on screen, morning light streaming through window, minimalist aesthetic, calm productive atmosphere, no microphone needed, cup of coffee, peaceful organized environment, bright optimistic lighting
93
+ ```
94
+ **Aspect Ratio:** 16:9
95
+ **Use for:** Scene 3 (Enter Naseberry)
96
+
97
+ ---
98
+
99
+ ### C. HERO MARKETING SHOTS
100
+
101
+ #### Hero 1: Product Showcase
102
+ ```
103
+ Floating laptop mockup displaying Naseberry.ai dashboard, dark gradient background with subtle gold and cream light rays, audio waveform visualization floating around device, modern tech product photography, clean minimal composition, premium software aesthetic, 4K render quality
104
+ ```
105
+ **Aspect Ratio:** 16:9
106
+ **Use for:** Scene 3-4 transition
107
+
108
+ #### Hero 2: Speed Visualization
109
+ ```
110
+ Abstract visualization of speed and efficiency, flowing golden light streams forming waveform patterns, dark background with particles, sense of motion and transformation, audio waves morphing into speech bubbles, futuristic tech aesthetic, premium brand visual
111
+ ```
112
+ **Aspect Ratio:** 16:9
113
+ **Use for:** Scene 4 (60-second processing emphasis)
114
+
115
+ #### Hero 3: Global/Languages
116
+ ```
117
+ Abstract world map with 29 glowing connection points, each point showing different language text floating, dark background with gold accent lighting, global connectivity visualization, premium tech infographic style, clean modern design
118
+ ```
119
+ **Aspect Ratio:** 16:9
120
+ **Use for:** Feature highlight (29+ languages)
121
+
122
+ ---
123
+
124
+ ### D. CTA/ENDING SHOT
125
+
126
+ #### Final CTA Frame
127
+ ```
128
+ Premium dark gradient background, large elegant typography space for "naseberry.ai" text overlay, subtle golden light flare in corner, minimal abstract waveform pattern at bottom, clean space for logo placement, professional brand ending frame template
129
+ ```
130
+ **Aspect Ratio:** 16:9
131
+ **Use for:** Scene 6 (CTA)
132
+
133
+ ---
134
+
135
+ ## 🎥 VIDEO GENERATION PROMPTS
136
+
137
+ For each video segment, you need **Start Frame** and **End Frame** images.
138
+
139
+ ### Video 1: The Struggle → Solution (10 sec)
140
+
141
+ **Start Frame (generate with Image Generator):**
142
+ ```
143
+ Frustrated creator at desk with complex recording setup, microphone, pop filter, sound panels, multiple monitors showing audio editing software, overwhelmed expression, cluttered workspace, dim lighting, realistic office photography
144
+ ```
145
+
146
+ **End Frame (generate with Image Generator):**
147
+ ```
148
+ Same creator now relaxed at clean minimal desk, single laptop showing simple upload interface, bright natural lighting, peaceful expression, minimalist workspace, morning light, everything simplified
149
+ ```
150
+
151
+ **Video Prompt:**
152
+ ```
153
+ Smooth transition from cluttered chaotic workspace to clean minimal setup, person's expression changing from frustrated to relieved, lighting shifting from dim to bright and warm, camera slowly pushing in, professional cinematic movement
154
+ ```
155
+
156
+ ---
157
+
158
+ ### Video 2: Upload to Result (10 sec)
159
+
160
+ **Start Frame:** Use your actual `upload-screen.png` screenshot
161
+
162
+ **End Frame (generate with Image Generator):**
163
+ ```
164
+ Laptop screen showing completed video with play button, green checkmark indicating success, notification showing "Your narrated video is ready", clean interface, satisfying completion state, professional UI screenshot style
165
+ ```
166
+
167
+ **Video Prompt:**
168
+ ```
169
+ Screen recording style animation, progress bar filling up, waveform visualization appearing, processing animation, smooth transition to completed state, UI elements animating in, satisfying completion moment
170
+ ```
171
+
172
+ ---
173
+
174
+ ### Video 3: Final Hero Shot (5 sec)
175
+
176
+ **Start Frame (generate with Image Generator):**
177
+ ```
178
+ Naseberry logo emerging from audio waveform, dark background with golden particle effects, premium brand reveal moment, cinematic lighting, professional motion graphics style frame
179
+ ```
180
+
181
+ **End Frame (generate with Image Generator):**
182
+ ```
183
+ Clean Naseberry logo centered on dark gradient background, subtle golden glow behind logo, "Transform your demos" tagline below, professional brand ending frame, premium finish
184
+ ```
185
+
186
+ **Video Prompt:**
187
+ ```
188
+ Logo reveal animation, particles converging to form brand mark, subtle camera push, golden light rays emanating, professional brand video ending, smooth elegant motion
189
+ ```
190
+
191
+ ---
192
+
193
+ ## 📋 FREEPIK SPACES WORKFLOW
194
+
195
+ ### Node Setup (in order):
196
+
197
+ ```
198
+ ROW 1: INPUTS
199
+ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐
200
+ │ Upload #1 │ │ Upload #2 │ │ Upload #3 │
201
+ │ Screenshots │ │ Screenshots │ │ Screenshots │
202
+ │ (landing) │ │ (upload) │ │ (result) │
203
+ └─────────────┘ └─────────────┘ └─────────────┘
204
+
205
+ ROW 2: CONTEXT TEXT
206
+ ┌─────────────────────────────────────────────────┐
207
+ │ Text #1 │
208
+ │ (Product description + brand style guide) │
209
+ └─────────────────────────────────────────────────┘
210
+
211
+ ROW 3: IMAGE GENERATORS (Connect Text #1 to all)
212
+ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐
213
+ │ Persona 1 │ │ Persona 2 │ │ Scenario 1 │ │ Scenario 2 │
214
+ │ Founder │ │ DevRel │ │ Frustration │ │ Transform │
215
+ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘
216
+
217
+ ROW 4: MORE IMAGE GENERATORS
218
+ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐
219
+ │ Hero 1 │ │ Hero 2 │ │ Hero 3 │ │ CTA Frame │
220
+ │ Product │ │ Speed │ │ Global │ │ Ending │
221
+ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘
222
+
223
+ ROW 5: VIDEO GENERATORS (Connect start/end images)
224
+ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
225
+ │ Video #1 │ │ Video #2 │ │ Video #3 │
226
+ │ Struggle→Solve │ │ Upload→Result │ │ Hero/CTA │
227
+ └─────────────────┘ └─────────────────┘ └─────────────────┘
228
+
229
+ ROW 6: CONTAINER (Collect all outputs)
230
+ ┌─────────────────────────────────────────────────────────────┐
231
+ │ Final Container │
232
+ │ (All generated images + videos collected for download) │
233
+ └─────────────────────────────────────────────────────────────┘
234
+ ```
235
+
236
+ ---
237
+
238
+ ## ⚙️ SETTINGS FOR EACH NODE
239
+
240
+ ### All Image Generators:
241
+ - **Model:** Google Nano Banana Pro
242
+ - **Aspect Ratio:** 16:9 (for video) or 1:1 (for social)
243
+ - **Quantity:** x1 (increase if you want variations)
244
+
245
+ ### All Video Generators:
246
+ - **Model:** Kling (or whatever's available)
247
+ - **Duration:** 5-10 seconds per segment
248
+ - **Connect:** Start Image → Video → End Image
249
+
250
+ ### Text Node:
251
+ ```
252
+ NASEBERRY.AI - Brand Context
253
+
254
+ Product: AI-powered tool that transforms silent screen recordings into professionally narrated demos.
255
+
256
+ Brand Voice: Confident, developer-friendly, efficient, modern
257
+
258
+ Visual Style:
259
+ - Dark mode UI
260
+ - Gold/cream accents (#D4A574)
261
+ - Clean minimalist aesthetic
262
+ - Professional but approachable
263
+
264
+ Target Audience: Solo founders, indie hackers, DevRel engineers, product managers
265
+
266
+ Key Message: No mic. No retakes. Just upload and let AI do the talking.
267
+ ```
268
+
269
+ ---
270
+
271
+ ## 🚀 EXECUTION CHECKLIST
272
+
273
+ ### Phase 1: Preparation
274
+ - [ ] Capture 6 screenshots from Naseberry.ai
275
+ - [ ] Save all screenshots at 1920x1080 or higher
276
+ - [ ] Name files clearly (landing-hero.png, etc.)
277
+
278
+ ### Phase 2: Freepik Spaces Setup
279
+ - [ ] Create new Space: "Naseberry Demo Video"
280
+ - [ ] Add 3 Upload nodes → upload your screenshots
281
+ - [ ] Add Text node → paste brand context
282
+ - [ ] Add 8 Image Generator nodes (see prompts above)
283
+ - [ ] Set ALL to Google Nano Banana Pro
284
+ - [ ] Set ALL to 16:9 aspect ratio
285
+ - [ ] Connect Text node to all Image Generators
286
+
287
+ ### Phase 3: Generate Images
288
+ - [ ] Run all Image Generators
289
+ - [ ] Review outputs
290
+ - [ ] Regenerate any that don't match vision
291
+ - [ ] Select best versions
292
+
293
+ ### Phase 4: Video Generation
294
+ - [ ] Add 3 Video Generator nodes
295
+ - [ ] Connect start/end frames to each
296
+ - [ ] Set duration (5-10 sec each)
297
+ - [ ] Run video generators
298
+ - [ ] Review and regenerate if needed
299
+
300
+ ### Phase 5: Assembly
301
+ - [ ] Download all assets
302
+ - [ ] Arrange in video editor (or use Freepik's Container)
303
+ - [ ] Add text overlays for script
304
+ - [ ] Add music/sound effects
305
+ - [ ] Export final demo video
306
+
307
+ ---
308
+
309
+ ## 📝 NOTES
310
+
311
+ - **Run images first, videos second** — you need good frames before video gen
312
+ - **Iterate on prompts** — if output isn't right, adjust and regenerate
313
+ - **Use your real screenshots** as reference images in generators for consistency
314
+ - **Video gen is credit-heavy** — review image frames carefully before generating videos
315
+
316
+ ---
317
+
318
+ *Plan created for Naseberry.ai demo video*
319
+ *Model: Google Nano Banana Pro (all images)*
320
+ *Estimated outputs: 8 images + 3 videos*
@@ -0,0 +1,302 @@
1
+ {
2
+ "name": "Naseberry.ai Product Demo Template",
3
+ "description": "Generate marketing visuals for Naseberry.ai - AI-powered screen recording narration tool",
4
+ "version": "1.0.0",
5
+ "author": "Sonic",
6
+ "product": {
7
+ "name": "Naseberry.ai",
8
+ "tagline": "Transform Silent Screen Recordings into Narrated Demos",
9
+ "description": "AI-powered tool that adds professional voiceover to screen recordings automatically. Connects to GitHub to understand your product, learns your brand voice, and generates natural narration.",
10
+ "key_features": [
11
+ "Brand DNA - AI learns your website, audience, and voice",
12
+ "GitHub Integration - Reads your code to understand features",
13
+ "30+ Natural Voices - No 'ums', no retakes",
14
+ "29+ Languages - Go global without translators",
15
+ "60-Second Processing - Upload to download in under a minute"
16
+ ],
17
+ "target_audience": [
18
+ "Solo founders",
19
+ "Indie hackers",
20
+ "Startup teams",
21
+ "Developer advocates",
22
+ "Product managers"
23
+ ],
24
+ "use_cases": [
25
+ "Product demos for landing pages",
26
+ "Feature announcement videos",
27
+ "Tutorial walkthroughs",
28
+ "Investor pitch demos",
29
+ "Customer onboarding videos"
30
+ ],
31
+ "brand_style": {
32
+ "primary_color": "#D4A574",
33
+ "background": "#1A1A1A",
34
+ "accent": "#F5E6D3",
35
+ "tone": "Developer-friendly, confident, slightly playful",
36
+ "aesthetic": "Dark mode, modern, tech-forward"
37
+ }
38
+ },
39
+
40
+ "nodes": [
41
+ {
42
+ "id": "start",
43
+ "type": "text",
44
+ "label": "🚀 NASEBERRY DEMO WORKFLOW",
45
+ "content": "Naseberry.ai Marketing Visual Generator\n\nThis workflow creates:\n1. Product UI screenshots\n2. User persona images\n3. Use case scenarios\n4. Hero marketing shots\n\nEdit the inputs below to customize.",
46
+ "position": { "x": 0, "y": 0 },
47
+ "color": "#D4A574"
48
+ },
49
+
50
+ {
51
+ "id": "product-description",
52
+ "type": "text",
53
+ "label": "PRODUCT DESCRIPTION",
54
+ "content": "Naseberry.ai transforms silent screen recordings into professionally narrated demos.\n\nKey differentiator: Brand DNA technology that analyzes your website, GitHub, and content to generate narrations that sound like YOU wrote them.\n\nPowered by: ChatGPT, Gemini, ElevenLabs, GitHub\n\nStyle: Dark mode UI, gold/cream accents, developer-focused messaging",
55
+ "position": { "x": 200, "y": 0 }
56
+ },
57
+
58
+ {
59
+ "id": "ui-prompt-generator",
60
+ "type": "assistant",
61
+ "label": "UI PROMPT GENERATOR",
62
+ "prompt": "Based on this product description, create 4 detailed image prompts for SaaS dashboard UI screenshots. Each should show a different view: 1) Main recording upload interface, 2) Brand DNA configuration panel, 3) AI narration preview/editing, 4) Export/download screen. Use dark mode aesthetic with gold accents.",
63
+ "position": { "x": 400, "y": -100 }
64
+ },
65
+
66
+ {
67
+ "id": "ui-list",
68
+ "type": "list",
69
+ "label": "UI VIEWS LIST",
70
+ "items": [
71
+ "Dark mode SaaS dashboard showing video upload interface, drag-and-drop zone for screen recordings, progress indicator, file list with MP4 files, modern minimal design, gold accent buttons, tech startup aesthetic",
72
+ "Brand DNA configuration panel, settings interface showing website URL input, GitHub repo connection, brand voice analysis results with charts, dark background with cream/gold highlights, professional web app UI",
73
+ "AI narration editor interface, video timeline with waveform, generated transcript text, voice selection dropdown showing multiple AI voices, edit controls, dark theme with warm gold accents, sleek SaaS design",
74
+ "Export and download screen, video preview with play button, quality settings, download options, share buttons, success state with checkmark, dark mode interface with gold CTA buttons"
75
+ ],
76
+ "position": { "x": 600, "y": -100 }
77
+ },
78
+
79
+ {
80
+ "id": "ui-generator",
81
+ "type": "image-generator",
82
+ "label": "UI SCREENSHOTS",
83
+ "config": {
84
+ "model": "flux-kontext-pro",
85
+ "aspect_ratio": "16:9",
86
+ "num_images": 4
87
+ },
88
+ "prompt_template": "Professional SaaS web application screenshot, {{UI_VIEW}}, high fidelity mockup, 4K quality, realistic UI design, no text artifacts",
89
+ "position": { "x": 800, "y": -200 }
90
+ },
91
+
92
+ {
93
+ "id": "persona-description",
94
+ "type": "text",
95
+ "label": "TARGET PERSONAS",
96
+ "content": "Primary Users:\n\n1. Solo Founder - Building SaaS product, needs demo videos but hates recording voice, technical, time-strapped\n\n2. Indie Hacker - Ships fast, builds in public, wants polished demos without the hassle\n\n3. Developer Advocate - Creates tutorials and demos regularly, needs consistent quality at scale\n\n4. Product Manager - Non-technical, needs to create feature demos for stakeholders",
97
+ "position": { "x": 200, "y": 150 }
98
+ },
99
+
100
+ {
101
+ "id": "persona-list",
102
+ "type": "list",
103
+ "label": "PERSONA LIST",
104
+ "items": [
105
+ "Solo tech founder, late 20s male, casual hoodie, working at standing desk with multiple monitors showing code, modern home office, focused expression, natural lighting",
106
+ "Female indie hacker, early 30s, creative workspace with plants, laptop showing analytics dashboard, confident smile, coffee nearby, startup vibe",
107
+ "Developer advocate, mid 30s, professional but approachable, recording setup visible, ring light, microphone, enthusiastic expression, tech company office",
108
+ "Product manager, late 30s female, business casual, presenting on large screen in modern meeting room, collaborative atmosphere, bright office space"
109
+ ],
110
+ "position": { "x": 400, "y": 150 }
111
+ },
112
+
113
+ {
114
+ "id": "persona-generator",
115
+ "type": "image-generator",
116
+ "label": "USER PERSONA IMAGES",
117
+ "config": {
118
+ "model": "flux-kontext-pro",
119
+ "aspect_ratio": "3:4",
120
+ "num_images": 4
121
+ },
122
+ "prompt_template": "Professional lifestyle photography, {{PERSONA}}, authentic candid moment, shallow depth of field, editorial quality, warm natural tones",
123
+ "position": { "x": 600, "y": 150 }
124
+ },
125
+
126
+ {
127
+ "id": "usecase-description",
128
+ "type": "text",
129
+ "label": "USE CASE SCENARIOS",
130
+ "content": "Key Scenarios to Visualize:\n\n1. The 'Aha Moment' - Founder sees their first AI-narrated demo, impressed expression\n\n2. Shipping Fast - Developer confidently sharing demo link, satisfied with quick turnaround\n\n3. Team Collaboration - Product team reviewing AI-generated demo together\n\n4. Going Global - Showing multi-language demo versions on screen",
131
+ "position": { "x": 200, "y": 300 }
132
+ },
133
+
134
+ {
135
+ "id": "usecase-list",
136
+ "type": "list",
137
+ "label": "SCENARIO LIST",
138
+ "items": [
139
+ "Tech founder watching laptop screen with impressed expression, seeing AI narration for first time, 'aha moment' captured, soft lighting, home office background, emotional breakthrough",
140
+ "Developer clicking 'share' button on demo video, confident satisfied expression, multiple browser tabs showing social platforms, ready to ship, modern workspace",
141
+ "Small team gathered around large monitor watching demo video together, engaged expressions, pointing at screen, collaborative moment, startup office environment",
142
+ "Split screen showing same demo video in multiple languages, flags visible, global reach visualization, modern tech setup, international business concept"
143
+ ],
144
+ "position": { "x": 400, "y": 300 }
145
+ },
146
+
147
+ {
148
+ "id": "scenario-generator",
149
+ "type": "image-generator",
150
+ "label": "SCENARIO VISUALIZATIONS",
151
+ "config": {
152
+ "model": "flux-kontext-pro",
153
+ "aspect_ratio": "16:9",
154
+ "num_images": 4
155
+ },
156
+ "prompt_template": "Cinematic commercial photography, {{SCENARIO}}, advertising quality, professional lighting, authentic moment, tech startup atmosphere",
157
+ "position": { "x": 600, "y": 300 }
158
+ },
159
+
160
+ {
161
+ "id": "feature-highlight-list",
162
+ "type": "list",
163
+ "label": "FEATURE HIGHLIGHTS",
164
+ "items": [
165
+ "Brand DNA visualization - abstract neural network connecting website, GitHub logo, and voice waveform, dark background with golden glowing connections, tech futuristic style",
166
+ "Voice selection interface floating in 3D space, multiple avatar icons representing different AI voices, sound waves emanating, dark mode aesthetic with warm accents",
167
+ "60-second timer visualization, stopwatch concept with video processing icons, speed and efficiency concept, dynamic motion blur, tech graphic style",
168
+ "GitHub integration concept, code repository connecting to video icon, automated workflow visualization, developer-focused aesthetic, dark theme with gold highlights"
169
+ ],
170
+ "position": { "x": 400, "y": 450 }
171
+ },
172
+
173
+ {
174
+ "id": "feature-generator",
175
+ "type": "image-generator",
176
+ "label": "FEATURE CONCEPT ART",
177
+ "config": {
178
+ "model": "flux-kontext-pro",
179
+ "aspect_ratio": "1:1",
180
+ "num_images": 4
181
+ },
182
+ "prompt_template": "Abstract tech concept illustration, {{FEATURE}}, modern digital art style, clean composition, suitable for marketing materials",
183
+ "position": { "x": 600, "y": 450 }
184
+ },
185
+
186
+ {
187
+ "id": "composite-container",
188
+ "type": "container",
189
+ "label": "📦 ALL GENERATED ASSETS",
190
+ "description": "Collection of all generated visuals for review and selection",
191
+ "position": { "x": 900, "y": 150 }
192
+ },
193
+
194
+ {
195
+ "id": "hero-shot-prompts",
196
+ "type": "text",
197
+ "label": "HERO SHOT CONCEPTS",
198
+ "content": "Final Hero Marketing Images:\n\n1. Product Hero - Laptop showing Naseberry interface with AI waveform, dark dramatic lighting, premium tech product shot\n\n2. Founder Hero - Solo founder celebrating successful demo launch, laptop with Naseberry visible, triumphant moment\n\n3. Before/After - Split composition showing silent video transforming into narrated demo, visual metaphor\n\n4. Speed Concept - Motion blur conveying '60 seconds' speed, video icon transforming into professional demo",
199
+ "position": { "x": 1000, "y": -50 }
200
+ },
201
+
202
+ {
203
+ "id": "hero-generator",
204
+ "type": "image-generator",
205
+ "label": "🔥 HERO MARKETING SHOTS",
206
+ "config": {
207
+ "model": "nanobanana-pro",
208
+ "aspect_ratio": "16:9",
209
+ "num_images": 4
210
+ },
211
+ "prompt_template": "Premium advertising photography, hero marketing image for AI SaaS product, {{HERO_CONCEPT}}, dramatic lighting, magazine advertisement quality, dark moody atmosphere with gold accents, ultra high quality",
212
+ "position": { "x": 1200, "y": 0 }
213
+ },
214
+
215
+ {
216
+ "id": "social-generator",
217
+ "type": "image-generator",
218
+ "label": "📱 SOCIAL MEDIA ASSETS",
219
+ "config": {
220
+ "model": "flux-kontext-pro",
221
+ "aspect_ratio": "1:1",
222
+ "num_images": 4
223
+ },
224
+ "prompt_template": "Social media marketing graphic for tech SaaS, clean modern design, dark background with gold accents, bold typography space, professional tech product aesthetic, Instagram-ready",
225
+ "position": { "x": 1200, "y": 200 }
226
+ },
227
+
228
+ {
229
+ "id": "video-stills",
230
+ "type": "image-generator",
231
+ "label": "🎬 VIDEO THUMBNAIL STILLS",
232
+ "config": {
233
+ "model": "flux-kontext-pro",
234
+ "aspect_ratio": "16:9",
235
+ "num_images": 4
236
+ },
237
+ "prompt_template": "YouTube video thumbnail style image, person reacting with amazed expression to laptop screen, text overlay space, dramatic lighting, click-worthy composition, tech tutorial aesthetic",
238
+ "position": { "x": 1200, "y": 350 }
239
+ },
240
+
241
+ {
242
+ "id": "demo-video",
243
+ "type": "video-generator",
244
+ "label": "🎥 PROMO VIDEO CLIPS (Phase 2)",
245
+ "config": {
246
+ "model": "kling",
247
+ "duration": "5s",
248
+ "aspect_ratio": "16:9"
249
+ },
250
+ "prompt_template": "Smooth camera pan across modern SaaS dashboard interface, UI elements animating, professional product demo footage, dark mode interface with gold accents",
251
+ "position": { "x": 1400, "y": 150 },
252
+ "notes": "DO NOT RUN YET - Wait for image approval"
253
+ }
254
+ ],
255
+
256
+ "connections": [
257
+ { "from": "product-description", "to": "ui-prompt-generator" },
258
+ { "from": "ui-prompt-generator", "to": "ui-list" },
259
+ { "from": "ui-list", "to": "ui-generator" },
260
+ { "from": "persona-description", "to": "persona-list" },
261
+ { "from": "persona-list", "to": "persona-generator" },
262
+ { "from": "usecase-description", "to": "usecase-list" },
263
+ { "from": "usecase-list", "to": "scenario-generator" },
264
+ { "from": "feature-highlight-list", "to": "feature-generator" },
265
+ { "from": "ui-generator", "to": "composite-container" },
266
+ { "from": "persona-generator", "to": "composite-container" },
267
+ { "from": "scenario-generator", "to": "composite-container" },
268
+ { "from": "feature-generator", "to": "composite-container" },
269
+ { "from": "hero-shot-prompts", "to": "hero-generator" },
270
+ { "from": "composite-container", "to": "hero-generator" },
271
+ { "from": "composite-container", "to": "social-generator" },
272
+ { "from": "composite-container", "to": "video-stills" },
273
+ { "from": "hero-generator", "to": "demo-video" }
274
+ ],
275
+
276
+ "execution_plan": [
277
+ "Phase 1: Run text/input nodes (no generation needed)",
278
+ "Phase 2: Run ui-prompt-generator (Assistant) to refine prompts",
279
+ "Phase 3: Run all image generators in parallel:",
280
+ " - ui-generator (4 images)",
281
+ " - persona-generator (4 images)",
282
+ " - scenario-generator (4 images)",
283
+ " - feature-generator (4 images)",
284
+ "Phase 4: Review outputs in composite-container, select best",
285
+ "Phase 5: Run hero-generator with best inputs (4 images)",
286
+ "Phase 6: Run social-generator and video-stills (8 images)",
287
+ "Phase 7: [AFTER APPROVAL] Run demo-video (video generation)",
288
+ "",
289
+ "Total Images: ~28 images",
290
+ "Estimated Credits: Check Freepik pricing"
291
+ ],
292
+
293
+ "output_categories": {
294
+ "ui_screenshots": "Product interface mockups (16:9)",
295
+ "personas": "Target user portraits (3:4)",
296
+ "scenarios": "Use case visualizations (16:9)",
297
+ "features": "Abstract feature concepts (1:1)",
298
+ "hero_shots": "Premium marketing images (16:9)",
299
+ "social": "Instagram/social assets (1:1)",
300
+ "thumbnails": "Video thumbnail stills (16:9)"
301
+ }
302
+ }