An agent at work · Graphic designer
Brand-exact,layer by layer.
The Graphic designer is one of the roles in Zaela. It builds ads and designs in code, with HTML, CSS and SVG, instead of generating a whole ad in one go. An image model may supply the background. The logo, the type and the shapes it sets itself, exactly as your brand is stored in memory.
The film
Graphic designer
The method
This is how the Graphic designer works.
-
01Brand from memory
Nothing about your brand is guessed.
It first reads your brand space in shared memory: colours as hex codes, logos, fonts, tone, do's and don'ts. It looks at the files themselves and researches the brand online. No brand font on file? It looks up the real typography, chooses a pairing on purpose and names its source. Then it asks one open question: what do you want to make?
-
02Strategy
The angle comes before the image.
It thinks like an ad agency: one hook, one message, one psychological lever, such as social proof, scarcity or curiosity. It explains why the ad will work, and runs the 0.4 second feed test: what stops a scrolling thumb?
-
03Background
Reused or generated, by choice.
Fitting brand photos usually come first, because real images build trust. For a more conceptual image it may generate a background plate. The prompt then always asks for no text and no logos, and for calm, empty zones exactly where the headline, the button and the logo will go.
-
04Layers in code
Every element is its own layer.
On top of the background it places the layers: image, logo, headline, shapes, icons. Brand colours become variables, the real logo file becomes a layer, brand fonts load via @font-face. SVG handles precise geometry and icons. The source file is the master: moving a headline or changing a colour is one line and a new render.
-
05Its own critic
At least two full rounds of looking and fixing.
It looks at every render like a strict art director who wants to find mistakes: margins, spacing, alignment, hierarchy, cut-off text, contrast, the exact brand colours and a sharp logo. Each round names what works, concrete criticism and the one fix that matters most. It is finished only when a full round finds nothing new.
-
06Save and hand over
Saved, explained, ready for Figma.
Every finished design goes into shared memory: the editable source and a preview, annotated with formats, colours, fonts and where each image came from. Where it helps, you get two to four variants, each with why it works. Want to adjust it yourself? You get a link to a new Figma file, the SVG to drag onto it and three simple steps.
This page is based on the agent's instructions and knowledge in Zaela. The drawings are illustrations.
What it pays attention to
What it pays attention to.
- 01
Code for precision
Logos and typography are never left to an image model. It sets them in code, from the real files in memory.
- 02
Brand-exact beats pretty
The real hex codes, fonts and logo, never an approximation by eye.
- 03
Strategy before generation
The image is not the reason for the ad. The angle is.
- 04
Radical transparency
Every generated image is reported with model, prompt and a cost indication. Every reused file and every web image with its source.
- 05
Design, don't trace
Existing work by another designer is context, not a template. It copies a style only when you ask for that.
- 06
Several directions
It may propose and make variants on its own: your photo against a generated background, or another angle, each with the reason you would pick it.
Teamwork
Who it works with.
Creative generator
When you want a fully generated image or a video instead of a layered design.
Logo designer
As soon as you ask for a logo, because that has its own process.
Content writer
For still visuals and infographics in a blog post.
Presentation builder
For diagrams and visuals that a deck needs as a sharp image.
Tools it uses
- HTML, CSS and SVG
- Headless browser rendering (PNG, PDF)
- Image generation via Replicate (backgrounds only)
- Shared memory: colours, logos, fonts, assets
- Web search
- Figma (handoff as SVG)
What it never does.
- Let an image model draw a logo or a headline.
- Guess a brand colour, font or logo. What is missing in memory it looks up or asks for.
- Call a design finished before two critical rounds with its own eyes, and before it is saved.
- Make video unless you ask. That is the Creative generator's work.
- Delete or archive anything without your explicit agreement.
- Promise a Figma link with the design already inside. It gives you a new file and the SVG to drag in.
What you get
What you get.
design.html · design.svgThe editable source
Every layer separate and movable, with the brand values as variables at the top.
design.png · design.pdfThe render
In the exact format, for example 1080 by 1350 for a 4:5 feed ad.
2 to 4 variantsDifferent directions
Where it makes sense, with a short note on why each one works and when you would choose it.
figma.new + SVGFigma handoff
A link to a new Figma file, the file to drag in and three steps. Every element becomes its own editable layer.
transparency noteWhat it used
Which colours, fonts and logo came from memory, and where each image came from: generated, reused or the web.
Curious what it could do for your organisation?
Agents at work
All agents
Report builder
Builds your recurring marketing report in a fixed format, read-only and open about every number.
See how it works Film · 1:10Content writer
Researches, writes and illustrates a complete blog post, with an SEO package and a cover that moves.
See how it works Film · 1:12AI visibility analyst
Measures how often, where and how you are named in AI answers, and which websites the AI relies on.
See how it works Film · 1:04
Stay informed
Curious what Zaela could become for you?
Leave your details and we’ll get in touch to tell you more about Zaela.
Thank you.
We’ll be in touch soon.