Design Helper AI

• 

  Design Helper UI

Inspiration

Creating consistent, on-brand content is one of the biggest pain points for small teams, student groups, and solo creators. Every time the brand kit updates with new hex codes, fonts, or messaging tone gets lost in emails or Slack threads. When Designers don't check before making a new post, they end up messy and off-brand.

We wanted to build a tool inside Adobe Express that removes this a smart assistant that keeps everyone on-brand with AI-powered rewriting and instant access. Designers can instantly see that their kit changed just by opening the add-on.

What it does

Design Helper is an Adobe Express add-on that: Lets you apply your saved brand colors directly to shapes and text. Allows users to add/delete colors with a smooth UI. Uses AI to rewrite captions in a clean and professional tone.

How we built it

Adobe Express Add-on SDK for embedding UI and connecting to the design canvas Document Sandbox SDK to directly manipulate selected elements (e.g. text, color fill) OpenRouter AI API for natural language rewriting JS + HTML/CSS for UI & interactions

Challenges we ran into

Handling both document and UI runtimes cleanly was tricky Prompting users with clean modal UI while staying within the SDK’s constraints took trial-and-error Setting up AI responses in a fast and cost-efficient way required testing multiple OpenRouter models

Accomplishments that we're proud of

Fully working brand color system with add/remove and UI preview Seamless integration with Adobe Express text elements Real-time caption rewriting using AI Clean, modern UI built entirely with custom CSS

What we learned

How to work with Adobe Express’ dual runtime environment Best practices for secure AI API use in a frontend sandbox That even simple tools can be powerful if they solve real problems cleanly

What's next for Design Helper

Using AI to detect whether the design seems on brand if you give the AI your previous posts. Brand kit syncing: Save and sync brand kits across teams with adobe sign ins. AI tone customization: Let users choose tone for rewrites (e.g. casual, professional, advertise.) Better analytics: Track how often people go off-brand

Built With

• adobe-express
• css
• html
• javascript