--- title: "AiSA Asset Generator App · Case Study" author: "Kamilla Gafurzianova" category: "Generative AI Systems & Brand Governance" kicker: "Full-Stack AI Application" headline: "From fragmented collateral to a locked-down brand engine." summary: "Built an internal React and Gemini 2.5 application embedding brand guardrails into the production surface, turning a single concept into 130KB of platform-ready marketing collateral." tools: - "React & TypeScript" - "Google Gemini 2.5 Flash API" - "Firebase Auth & Hosting" - "Cloudinary CDN" - "Tailwind CSS" - "Brand Guardrail Architecture" metrics: - label: "Production Turnaround" value: "Minutes" detail: "Eliminated weeks of manual design iterations across distributed channels." - label: "Brand Compliance" value: "100%" detail: "Hardcoded typography, palette, and layout guardrails prevent off-brand collateral." - label: "Pipeline Speedup" value: "10x" detail: "Single seed prompt converts directly into multi-channel campaign assets." - label: "Security & Access" value: "Role-Based" detail: "Firebase enterprise authentication with granular permission tiers." ogImage: "https://kamillek.com/og/og-case-study-aisa-generator-app.png" canonicalUrl: "https://kamillek.com/case-study-aisa-generator-app.html" contact: "https://kamillek.com/contact.html#inquiry-form" --- # From fragmented collateral to a locked-down brand engine. Built an internal React and Gemini 2.5 application embedding brand guardrails into the production surface, turning a single concept into 130KB of platform-ready marketing collateral. --- ## Strategic Frame - **Objective:** Eliminate manual bottlenecks, off-brand collateral, and multi-week turnaround times across international product launches. - **Role:** Systems Architect and Full-Stack AI Engineer. - **Target Stack:** React 19, TypeScript, Google Gemini 2.5 Flash API, Firebase Authentication, Cloudinary CDN, Tailwind CSS. - **Key Insight:** Brand governance works best when constraints live inside the tool itself rather than in passive documentation. --- ## The Operational Challenge: Brand Entropy When distributed teams produce marketing collateral across multiple regions and channels, brand consistency quickly deteriorates: 1. **Passive Style Guides Fail:** PDFs with brand guidelines are rarely consulted during rapid campaign launches, leading to rogue color codes, non-standard fonts, and distorted logos. 2. **Design Resource Saturation:** Central creative teams become massive bottlenecks for repetitive asset variations (e.g. social banners, event flyers, email headers). 3. **Inconsistent Positioning:** Messaging varies wildly across touchpoints when copywriters work without structured prompt parameters and tone controls. 4. **Slow Time-to-Market:** Multi-day review loops between marketing, design, and executive leadership delay product rollouts. --- ## Architectural Solution: The AiSA Engine Kamilla engineered the AiSA Asset Generator App to enforce institutional brand discipline directly at the point of creation. Rather than relying on human vigilance, the software encapsulates design and messaging rules into software primitives. ``` +-------------------------------------------------------------+ | Campaign Seed Input | | (Product Topic, Audience Segment, Primary Call-to-Action) | +------------------------------+------------------------------+ | v +-------------------------------------------------------------+ | Google Gemini 2.5 Flash Pipeline | | (Structured System Instruction, Tone Bounds, JSON Schema) | +------------------------------+------------------------------+ | v +-------------------------------------------------------------+ | Brand Guardrail Validation Layer | | - Font Binding: Inter & Literata Only | | - Palette Locking: Strict Hex Verification | | - Layout Boundaries: Non-Collapsing CSS Aspect Ratios | +------------------------------+------------------------------+ | v +-------------------------------------------------------------+ | Multi-Channel Asset Export | | (Instagram 1:1, Story 9:16, Web Banner, Email HTML) | +-------------------------------------------------------------+ ``` ### Core System Modules 1. **Format Presets Engine:** Hardcoded aspect ratio and layout definitions ensure output perfectly aligns with Instagram, LinkedIn, X, and web publishing specifications. 2. **Layout Component Library:** Pre-composed, responsive cards that enforce typographic hierarchies and whitespace standards. 3. **Structured Prompt Injection:** Injects immutable brand tone guidelines, core slogans, and required legal disclaimers into every LLM request. 4. **Granular Access Control:** Role-based Firebase authentication restricts template customization to authorized brand administrators. --- ## Technical Implementation ### Structured Gemini Prompt Pipeline ```typescript export interface BrandAssetRequest { campaignTheme: string; targetAudience: 'executive' | 'practitioner' | 'partner'; channelFormat: 'social_feed' | 'story' | 'banner'; } export interface GeneratedAssetPayload { headline: string; subheadline: string; bodyCopy: string; callToAction: string; paletteTheme: 'amethyst_night' | 'coral_dawn'; } export async function generateBrandAsset( params: BrandAssetRequest ): Promise { const prompt = ` You are the authoritative AiSA Brand Engine. Strict Invariants: 1. Tone: Confident, precise, institutional. No marketing hyperbole. 2. Length: Headline <= 8 words, Subheadline <= 14 words. 3. Output: Return pure JSON conforming strictly to GeneratedAssetPayload. Topic: ${params.campaignTheme} Audience: ${params.targetAudience} `; const response = await geminiClient.models.generateContent({ model: 'gemini-2.5-flash', contents: prompt, config: { responseMimeType: 'application/json', temperature: 0.2 } }); return JSON.parse(response.text()) as GeneratedAssetPayload; } ``` ### Firebase Role-Based Security Rules ```javascript rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /brand_templates/{templateId} { allow read: if request.auth != null; allow write: if request.auth != null && request.auth.token.role == 'brand_admin'; } match /generated_campaigns/{campaignId} { allow read, write: if request.auth != null && request.auth.uid == resource.data.createdBy; } } } ``` --- ## Operational Results & Institutional Impact - **Instant Production Cycle:** Asset creation dropped from multiple business days to under 3 minutes per campaign kit. - **100% Brand Conformance:** Zero off-brand collateral produced across all marketing initiatives. - **Zero Design Waste:** Core design talent transitioned from repetitive resizing tasks to high-value strategic creative projects. - **Enterprise Security:** API keys and sensitive customer prompts are protected through server-side secret management. --- ## Strategic Takeaways 1. **Code Over Guidance:** Software guardrails always outperform written documentation for preserving design integrity. 2. **Generative AI Demands Structure:** High-quality AI output requires deterministic prompt constraints, low temperature, and strict JSON schemas. 3. **Zero-Friction Tooling:** Tools that empower distributed contributors while locking down essential rules achieve widespread adoption. --- ## Author & Verification - **Architect:** Kamilla Gafurzianova - **Credentials:** Salesforce Certified Administrator, Salesforce Certified Business Analyst, PMI Member, Google AI Certified, Radical Product Thinking. - **Inquiries:** [kamillek.com/contact.html#inquiry-form](https://kamillek.com/contact.html#inquiry-form) - **Interactive Folio:** [AiSA Asset Generator App](https://kamillek.com/case-study-aisa-generator-app.html) --- ## Omnidirectional Navigation (GLBL-PRTCL-036 §3.4) * [← Previous Case: IT & B2B Converter (Course Funnel Architecture) Case Study](case-study-aisa-course-funnel.md) * [All 25 Production Case Folios](work.md) * [Next Case: AI Start Academy Master Operations Plan Case Study →](case-study-aisa-master-ops-plan.md) * [Root Discovery Index](index.md)