Loading pattern preview
TemplatesReal-world Examples
Brand Guidelines Image Generator
Brand Guidelines Image Generator
Paste a website URL to extract brand signals with Firecrawl, generate a structured brand-standards brief, render manual-style spreads (color, typography, grid, photography, and more), and refine any image with edit instructions.
Loading pattern preview
Problems solved
Technical challenges this implementation handles out of the box.
- Turn a brand URL into brand-standards manual imagery
- Generate color, typography, grid, and photography spreads in parallel
- Summarize Firecrawl brand signals into a guidelines brief
- Refine any spread through a local edit flow
Use cases
Products and workflows this pattern is designed to support.
- Identity system decks from a live URL
- Design direction for color ramps and type specimens
- Brand standards look-and-feel exploration before handoff
- PDF-style guideline mockups for stakeholder review
Setup
Requirements, wiring steps, and what this pattern adds to your project.
Getting started
Pick how you want to pull this pattern in. Then wire env vars and routes the same way.
- 1
Download → Next.js app
Use Download → Next.js app in the preview toolbar. You get a zip scaffold (Pro downloads rewrite preview `/view/.../api/*` paths to `/api/*` automatically).
- 2
Extract the zip and install dependencies
Unzip the archive, then run `pnpm install` (or npm / yarn) in the project folder.
- 3
Fill .env.local
The download includes .env.local placeholders when needed. Add real values for: FIRECRAWL_API_KEY, AI_GATEWAY_API_KEY.
- 4
Customize the agent and tool files
Adapt prompts, tools, and stop conditions in the generated project for your product.
- 5
Run the app and open the pattern route
Run `pnpm dev`, open the setup/checklist page if present, then navigate to the generated pattern route and verify responses.
Environment variables
Capabilities
AI SDK APIs
generateTextOutput.objectgatewayProviders
Gemini
External services
FirecrawlUpstash
Files added
18 filesapp/page.tsxapp/layout.tsxapp/api/brand-guidelines/route.tsapp/create-image-action.tsxapp/edit-image-action.tsxcomponents/gemini-flash-image.tsxcomponents/block-header.tsxcomponents/countdown.tsxlib/brand-context.tslib/brand-mood-schema.tslib/brand-guidelines-schema.tslib/guidelines-scene-prompts.tslib/cached-brand-payloads.tslib/rate-limit.tslib/image-utils.tshooks/use-image-version.tshooks/image-version-context.tsxREADME.md
Dependencies
16 totalnpm packages
8@mendable/firecrawl-jsUpstashAISDKlucide-reactmotionNext.jsReactZod
Registry components
badgebuttoncardemptyinputseparatorskeletontextarea
Critical files
brand-guidelines/route.tsCore pipeline route: validates the URL, scrapes branding and markdown with Firecrawl, generates a schema-validated guidelines brief via generateText + Output.object, normalizes template scenes, and returns prompt-ready scene objects.
lib/brand-guidelines-schema.tsZod contract for guidelines scene variables, scene concepts, and the BrandGuidelinesBrief schema.
lib/guidelines-scene-prompts.tsDeterministic local prompt library for brand-standards manual spreads. The model chooses structured variables and template IDs, while final prompt composition stays in code via buildGuidelinesPrompt().
components/gemini-flash-image.tsxMain URL-first workbench UI. Handles extraction, structured brief hydration, parallel image generation for cards, per-card loading/error states, and click-to-edit routing into the selected image panel.
hooks/use-image-version.tsReducer-based workflow and editor state for the block. Separates gallery generation from the selected image's local edit history and comparison logic.
app/edit-image-action.tsxSelected-image edit action using Gemini flash image preview. Converts the current image to a data URL, sends multimodal edit instructions, and returns a new image version for local comparison.
Requirements
- Complexity
- Advanced
- Setup time
- ~12 minutes
- Node
- 24+
- Memory
- 512MB
Upstash Redis
