Content Factory — AI Sistem

Prompt

# 🚀 Master Prompt: BrandForge AI — The Autonomous Content Ecosystem

**Role:** You are a Principal Product Architect and AI Engineering Lead.
**Objective:** Build "BrandForge," a high-fidelity, client-side React application that acts as an end-to-end creative agency.

---

## 1. The Vision

We are building a tool that solves the biggest problem in Generative AI: **Consistency.** Most AI tools generate random images. BrandForge must generate *on-brand* marketing assets by strictly enforcing visual guidelines. It combines Text, Image, and Video generation into a single workflow.

---

## 2. Technical Foundation

- **AI Engine:** Google GenAI SDK (`@google/genai`)
  - **Logic/Copy:** Gemini 2.0 Flash (Fast reasoning)
  - **Image:** Gemini 3 Pro (High fidelity)
  - **Video:** Veo (Motion generation)
- **Architecture:** Strictly Client-Side (No Backend). Use `localStorage` to persist user changes.

---

## 3. Core Functional Requirements

### A. The "Brand Brain" (Hardcoded Default + User Override)

The app must not start as a blank slate. It must feature a "Hybrid" configuration system:

1. **The Default State:** Create a file (e.g., `brandConstants.ts`) with a robust, hardcoded `DEFAULT_BRAND_IDENTITY`.
   - *Example Default:* Name: "Lumina," Style: "Cyberpunk minimal, neon orange accents, cinematic lighting."
2. **The User Override:** On app load, populate a "Brand Settings" form with these hardcoded defaults.
3. **Editability:** The user must be able to open a settings panel, see the pre-filled default values, and edit them (e.g., change "Neon Orange" to "Forest Green").
4. **Application:** The app always uses the *current state* of this form (whether default or edited) to inject system instructions into every AI prompt.

### B. The "Magic Wand" Prompt Enhancer

Users write simple prompts; the AI must make them professional.

1. **Input:** User types `"Coffee cup."`
2. **Process:** A background call to Gemini 2.0 Flash rewrites this input using the **Brand Brain** data.
3. **Output:** `"A ceramic coffee cup with [Brand Color] glaze, sitting on a [Brand Texture] surface, lighting matching [Brand Mood]."`

### C. The Multi-Format Content Factory

The user selects a format, and the app orchestrates the generation:

- **Social Static:** 1:1 or 4:5 aspect ratios.
- **Carousel Builder (Consistency Engine):**
  - User defines a topic → App generates 3 sequential slides.
  - **Crucial Logic:** Generate Slide 1. Then, use Slide 1 as a `style_reference` (Image-to-Image) for Slides 2 & 3 to ensure character and lighting consistency.
- **Motion (Veo):** Allow users to select a generated image and "Animate" it using a text-based motion prompt generated by Gemini.

### D. The Copywriter Assistant

For every generated asset, the app must automatically generate:

- A **Caption** (matching the Brand Tone defined in settings)
- **Hashtags**
- A short **Alt Text** description

---

## 4. UX/UI Requirements — "The Digital Command Center"

- **Layout:** Sidebar (Navigation) + Main Canvas (Feed) + Right Panel (Brand Settings/Inspector)
- **Aesthetic:** Dark, premium, professional. Use Lucide-React or Heroicons.
- **Feedback:** The UI must communicate what the AI is doing (e.g., *"Consulting Brand Guidelines..."*, *"Rendering Pixels..."*, *"Applying Motion..."*)

---

## 5. Development Guidelines

- **State Management:** Use a global Context (`BrandContext`) to manage the merging of Hardcoded Defaults and User Inputs.
- **Mock Data:** If `process.env.GEMINI_API_KEY` is missing, the app should load in **"Demo Mode"** using the hardcoded brand data and placeholder images so the UI can be tested without an API key.
- **Modularity:** Keep the AI service logic separate from the UI components.

---

## 6. Deliverables

Produce the complete React codebase structure:

1. **Configuration:** `constants.ts` — The hardcoded defaults
2. **State:** `BrandContext.tsx` — Logic to handle default vs. user edits
3. **Services:** `gemini.ts` — The API layer
4. **UI:** `App.tsx`, `Layout.tsx`, `SettingsModal.tsx`, `Generator.tsx`

> **Constraint:** All logic runs in the browser.

Povezani resursi

Alati

Google AI Studio

Najbrži način za developere da pristupe Gemini 3 Pro modelu i grade prototipe.

Početni5.0

# 🚀 Master Prompt: BrandForge AI — The Autonomous Content Ecosystem **Role:** You are a Principal Product Architect and AI Engineering Lead. **Objective:** Build "BrandForge," a high-fidelity, client-side React application that acts as an end-to-end creative agency. --- ## 1. The Vision We are building a tool that solves the biggest problem in Generative AI: **Consistency.** Most AI tools generate random images. BrandForge must generate *on-brand* marketing assets by strictly enforcing visual guidelines. It combines Text, Image, and Video generation into a single workflow. --- ## 2. Technical Foundation - **AI Engine:** Google GenAI SDK (`@google/genai`) - **Logic/Copy:** Gemini 2.0 Flash (Fast reasoning) - **Image:** Gemini 3 Pro (High fidelity) - **Video:** Veo (Motion generation) - **Architecture:** Strictly Client-Side (No Backend). Use `localStorage` to persist user changes. --- ## 3. Core Functional Requirements ### A. The "Brand Brain" (Hardcoded Default + User Override) The app must not start as a blank slate. It must feature a "Hybrid" configuration system: 1. **The Default State:** Create a file (e.g., `brandConstants.ts`) with a robust, hardcoded `DEFAULT_BRAND_IDENTITY`. - *Example Default:* Name: "Lumina," Style: "Cyberpunk minimal, neon orange accents, cinematic lighting." 2. **The User Override:** On app load, populate a "Brand Settings" form with these hardcoded defaults. 3. **Editability:** The user must be able to open a settings panel, see the pre-filled default values, and edit them (e.g., change "Neon Orange" to "Forest Green"). 4. **Application:** The app always uses the *current state* of this form (whether default or edited) to inject system instructions into every AI prompt. ### B. The "Magic Wand" Prompt Enhancer Users write simple prompts; the AI must make them professional. 1. **Input:** User types `"Coffee cup."` 2. **Process:** A background call to Gemini 2.0 Flash rewrites this input using the **Brand Brain** data. 3. **Output:** `"A ceramic coffee cup with [Brand Color] glaze, sitting on a [Brand Texture] surface, lighting matching [Brand Mood]."` ### C. The Multi-Format Content Factory The user selects a format, and the app orchestrates the generation: - **Social Static:** 1:1 or 4:5 aspect ratios. - **Carousel Builder (Consistency Engine):** - User defines a topic → App generates 3 sequential slides. - **Crucial Logic:** Generate Slide 1. Then, use Slide 1 as a `style_reference` (Image-to-Image) for Slides 2 & 3 to ensure character and lighting consistency. - **Motion (Veo):** Allow users to select a generated image and "Animate" it using a text-based motion prompt generated by Gemini. ### D. The Copywriter Assistant For every generated asset, the app must automatically generate: - A **Caption** (matching the Brand Tone defined in settings) - **Hashtags** - A short **Alt Text** description --- ## 4. UX/UI Requirements — "The Digital Command Center" - **Layout:** Sidebar (Navigation) + Main Canvas (Feed) + Right Panel (Brand Settings/Inspector) - **Aesthetic:** Dark, premium, professional. Use Lucide-React or Heroicons. - **Feedback:** The UI must communicate what the AI is doing (e.g., *"Consulting Brand Guidelines..."*, *"Rendering Pixels..."*, *"Applying Motion..."*) --- ## 5. Development Guidelines - **State Management:** Use a global Context (`BrandContext`) to manage the merging of Hardcoded Defaults and User Inputs. - **Mock Data:** If `process.env.GEMINI_API_KEY` is missing, the app should load in **"Demo Mode"** using the hardcoded brand data and placeholder images so the UI can be tested without an API key. - **Modularity:** Keep the AI service logic separate from the UI components. --- ## 6. Deliverables Produce the complete React codebase structure: 1. **Configuration:** `constants.ts` — The hardcoded defaults 2. **State:** `BrandContext.tsx` — Logic to handle default vs. user edits 3. **Services:** `gemini.ts` — The API layer 4. **UI:** `App.tsx`, `Layout.tsx`, `SettingsModal.tsx`, `Generator.tsx` > **Constraint:** All logic runs in the browser.