Instrument x Seth Akkerman
Projects AI Brand Layout Generator

AI Brand Layout Generator

A web tool that generates on-brand marketing layouts with built-in contrast analysis and AI-powered brand compliance checking — built specifically for Nordstrom's creative workflow.

Brand consistency at scale is one of those problems that sounds simple until you’re managing dozens of layout variations across a retail creative team. This tool tackles it head-on — a full-stack layout generator that lets users compose marketing banners, export production-ready HTML and CSS, and get real-time feedback on whether the output actually meets brand standards.

How it works

The frontend is a React app that presents a form-driven layout composer. You pick a layout type (horizontal banner, and others), drop in your main text, upload an image, and select color palettes. A live preview renders at scale in real time using layout definitions that output both preview styles and export-ready HTML/CSS simultaneously. An Express backend handles image processing and export generation, deployed on DigitalOcean, while the frontend lives on Netlify.

What makes it more than a template tool is the AI layer. A Flask microservice wraps OpenAI’s GPT-4o Vision API to analyze uploaded imagery against Nordstrom’s brand guidelines — evaluating subjects, lighting, color palette, composition, and mood, then returning a 0–1 brand alignment score with a detailed breakdown. An earlier iteration used AWS Rekognition to generate image labels before passing them to GPT-4 for evaluation, which is a useful fallback for teams without Vision API access.

The contrast analysis layer

Below the preview, a contrast analysis panel breaks down text legibility against the background — a small but meaningful addition that catches accessibility issues before anything goes to production. It’s the kind of check that usually gets skipped when a designer is moving fast, so baking it into the export flow makes it impossible to miss.

Why it matters

This is a pattern worth paying attention to: brand guardrails embedded directly into the creation tool, not bolted on afterward as a review step. The same architecture could power: creative ops workflows — where junior designers get instant feedback without needing a senior review; multi-brand platforms — swap the guidelines object and the AI evaluates against an entirely different brand identity; content moderation pipelines — where visual brand compliance needs to scale beyond what a human team can review. The real insight is that AI-assisted brand checking works best when it’s friction-free and in-context, not a separate audit tool someone has to remember to use.

Role
Design Engineer
Tools
React Express Flask OpenAI GPT-4o AWS Rekognition Netlify DigitalOcean TailwindCSS
Video thumbnail for AI Brand Layout Generator