Inspiration

As both of us teammates are designers, we constantly watch brilliant founders struggle with the same problem: The Gap between Vision and Visuals.

We realized that while non-designers have clarity on what their business does (the mission, the vision, the strategy), they often are misled when trying to show it to the world. They rely on generic presentation templates that never quite fit their brand identity. A "tech" template feels too cold for a health startup; a "creative" template feels too messy for a fintech firm. The result is inconsistent brandkit and a brand that looks fragmented from Day 1.

We built Prism to solve these issues. We wanted to build a tool that acts as a design partner, one that understands what a brand needs, and automates that translation instantly.

What it does

Prism refracts ideas into identity. Our add-on takes a simple text input or themes of your business idea and splits it into a comprehensive brand system and functional documents.

  1. The Persona Engine: Users input their Brand Name, Industry, and abstract "Vibe" tags. Prism analyzes these to generate a semantic design system choosing the perfect color palette, typography, and voice. It gives visual guidelines on how to use assets and how to design.
  2. Instant Documentation: It builds the assets you need to do business. With one click, it generates 5-slide Pitch Decks () or 3-page Business Proposals ( format) with the copy already written and the design system applied.
  3. Apply brandkit instantly: User can use generated color palettes and font button to apply those to actual elements.
  4. Local to Global: We included a Translation feature that instantly localizes headlines (e.g., to Hindi, Tamil, Telugu) while preserving the typography, helping brands scale regionally.
  5. Asset Generation: Missing a logo? Prism’s integrated AI generates vector-style logos and icons that match the brand’s aesthetic, ready to drag and drop.

How we built it

We architected Prism as a full-stack Adobe Express Add-on using AI integrated tools and with the help of Cursor and Adobe's MCP integrated server. The system is divided into three distinct layers:

1. The Experience (Frontend & UI)

We built the frontend using React within the Adobe Add-on SDK. Instead of overwhelming the user with tools, we built a simple form that captures the soul of the brand : Company Name, Industry, Vision, Mission, and Competitors and prepares it for backend processing.

2. The Brain (Backend & AI)

The intelligence of Prism lives in our Express.js + TypeScript server.

  • AI Agnostic Architecture: We built our llmService.ts to be flexible, supporting multiple providers like Groq, OpenAI, Claude, and Gemini via environment configuration. (mainly Groq works using generated API key)
  • The "Identity" Endpoint: When a user hits generate, the /api/brand/identity endpoint uses our "Persona Mapping" logic to translate text descriptions into concrete design tokens:

  • Asset Generation: Simultaneously, the /api/logo/generate endpoint creates vector-style SVG logos on the fly to match the generated aesthetic using huggins face - pollinations api.

3. The Execution (Sandbox & Document SDK)

Once the brand data is generated, it is sent to the Sandbox (code.ts) where we interact directly with the Adobe Express Document SDK.

  • Dynamic Page Creation: We use doc.pages.addPage({ width, height }) to dynamically generate the correct format based on the user's choice.
  • Programmatic Design: We don't just paste an image. We programmatically build the document element-by-element. We use editor.createRectangle() to build background layouts and color blocks, and editor.createText() to insert the AI-written copy (Vision/Mission) directly onto the canvas with the correct font styles applied.

The Data Flow: User Form → (Input) → API → (LLM Analysis) → Brand JSON → (Sandbox) → Native Adobe Express Document

Challenges we ran into

  • Subjectivity vs. Code: Design is subjective. Teaching code what "Sophisticated" looks like was a challenge. We had to iterate effectively on our "Persona Engine" to ensure that the generated palettes didn't just look good, but looked right for the specific industry.

  • Canvas Coordination: Managing the z-index and alignment of multiple generated elements (text, background shapes, logos) simultaneously on the Adobe Express canvas requires precise layout generation to ensure the user didn't have to spend time "fixing" the output. This still needs to be fixed effectively.

Accomplishments that we're proud of

  • Versatility: We are incredibly proud of the versatility. It can change the brand assets according the tone and theme of brand instantly.
  • Human-Centric UI: We managed to hide the complexity of design systems behind a simple, conversational interface. The user never selects a font size or a hex code they just tell us who they are, and we handle the rest.
  • Business Efficiency: We didn't just make pretty pictures; we made functional business docs. Generating a full pitch deck with content in seconds is a massive time-saver for founders.

What we learned

  • Design is Systemic: We learned that great design isn't about individual artistic choices, but about systems. By systematizing "Vibes" into code, we could scale design quality.
  • The Power of Context: Generic AI is okay, but Contextual AI is powerful. Giving the LLM specific constraints (Competitors, Vision, Mission) resulted in copy that felt human and tailored, rather than robotic placeholders.

What's next for Prism

We are just scratching the surface of Generative Branding.

  • Image Library: Currently, we generate colors and logos. Next, we want to use this brand identity to generate relevant stock images to drag and drop into presentation and documents directly from addon. It can also include background patterns and vector textures.
  • Fix Alignment Issues: Right now the brandkit when applied on the document is not aligned properly plus the presentation elements are not placed correctly. We can fix this in the future versions.

Built With

Share this project:

Updates