The brief changed.
The engine had few ways to follow.
Different audience and goal → different content. Yet one font, three palettes and partly ineffective layout controls constrained the result.
DWG-003 · DESIGN ENGINEERING · AI WORKFLOW · 2026
Truvit
AI makes proposals.
The designer makes the calls.
A working creative workflow that carries a brief into editable, multi-format drafts—with four deliberate moments for human judgment.
MY ROLEProduct framing · Interaction · System design
BUILT WITHFigma · AI-assisted implementation
STATUSLive AI prototype · Technical QA complete
Actual rendered drafts from different briefs and iterations, using supplied prototype imagery. Moreno Bath is the example brand. These are workflow demonstrations, not launched campaigns.
SEC 01
The working experience工作原型
Keep the person
inside the process.
For a designer turning brand material into a campaign, generating an image is only one step. The harder work is checking assumptions, choosing a direction and keeping later revisions consistent with that choice.
I shaped Truvit around those decisions: understand → choose → develop → review. The prototype saves sources, files and decisions together, so the work can resume from the same checkpoint.
Read the walkthrough transcript
- Frame the work. Add the audience, objective, constraints and source material.
- Confirm the understanding. Compare sourced statements with working assumptions before proceeding.
- Choose a direction. Review three proposals and their tradeoffs; only the selected direction moves into production.
- Direct the master. Adjust composition, typography and color, or directly edit the copy. A change creates a new version that needs review.
- Keep the reasoning. Skill runs, earlier drafts and decisions remain attached to the project.
- Review the package. The separate cobalt technical run produced master, 4:5 and 9:16 files with a verified export. Technical approval is not campaign approval.
MY CONTRIBUTION
I led the problem framing, workflow structure, interaction direction and iteration priorities, and recruited the original three exploratory participants. Codex provided substantial implementation, debugging, technical testing and documentation support under my direction. The code was developed with AI assistance.
SEC 02
Designing the handoffs决策与交接
Six capabilities.
Four human decisions.
I split the workflow into bounded capabilities so each step has a clear input, output and stopping point. A model can propose a revision route; application logic controls what can execute and which version is current.
- 01 / UNDERSTAND
Brief + sources
Separate supplied facts, assumptions and questions.
H1 · Confirm understanding - 02 / EXPLORE
Three directions
Compare a message, visual approach and tradeoff.
H2 · Choose a direction - 03 + 04 / DEVELOP
Copy + master
Compose supplied imagery into an editable draft.
H3 · Accept the master - 05 + 06 / COMPLETE
Adapt + evaluate
Recompose for 4:5 and 9:16; review the actual files.
H4 · Approve the package
WORKFLOW AGENT
Proposes a permitted skill for the requested change.
CONTROLLER
Enforces versions, permissions, checkpoints and export conditions.
REVIEWER
A separate model call inspects the actual images. Its findings remain advisory.
EXPLORE THE DEPENDENCIES
What should a change reopen?
A diagram of the implemented rules. It does not run the AI.
- Understanding Kept
- Direction Kept
- Master New version + review
- Formats Regenerate
- Package Review again
Changing copy preserves the chosen direction, but the master and its adaptations need a new review. Earlier files remain in history.
Implementation and boundaries
React and TypeScript front end; a deterministic controller; OpenAI model calls; persistent project records and file storage; an SVG-to-PNG composition engine. Each skill returns a structured result that is checked before being accepted. The prototype has one bounded workflow agent and a separate reviewer call, not a swarm of autonomous agents.
The engine arranges supplied photos; it does not generate product photography. Memory stays within a project. Live ad publishing, performance analytics and arbitrary video generation are outside this prototype.
SEC 03
When the outputs felt the same关键迭代
A richer prompt needs
a renderer that can respond.
I challenged the prototype with a different audience and objective. The live model changed the copy, photo and palette, but the visual vocabulary remained narrow. Investigation found two layout names producing identical files, and split-layout parameters that did not affect the image.
The response was to expand the engine and expose art direction as a direct control. Five distinct compositions, three typographic voices, custom colors and format-specific geometry now give a direction something concrete to change.
The brief changed.
The selected voice
changes the actual composition.
Graphic condensed type and editorial serif now produce visibly different compositions. These are illustrative runs, not a controlled preference study.
Distinct layout geometry18 controlled renders checked five families and parameter effects.
The model sees the sourcesDirection and master calls receive the actual reference images.
Edits remain reviewableDirect controls create a new file, retain history and reopen approval.
SEC 04
From a master to a package真实交付
Export the work.
Keep its context.
A complete live technical run produced a master and two format adaptations. The 9:16 canvas gets its own arrangement while retaining the chosen photo and copy. Export includes real PNG and SVG files, fonts, copy and a manifest that connects the package to its sources and decisions.
CHECK THE FILES16 files.
16 files.
One traceable package.
Dimensions, text boundaries, contrast and source-image use were checked. Exported file hashes matched the verified artifacts.
Download actual export · 11.6 MB ↗Approval in this run was explicitly recorded as agent-operated technical verification. It does not establish audience preference, advertising effectiveness or owner approval for launch.
SEC 05
What the evidence supports验证与边界
Navigation worked.
Understanding was uneven.
Three participants—a semiconductor professional, a design student and a finance professional—completed the fixed click-through without prompts, based on my retrospective session reports.
One read the opening for longer; one reported incomplete understanding; one questioned the name Moreno. I clarified the example brand and opening task. That wording revision has not been retested.
Technical behavior verified.
Designer experience still to test.
Real model calls, saved state, targeted revisions, file generation and export were exercised. Controlled tests covered distinct rendering, invalid inputs and approval invalidation.
These checks establish working behavior for the tested cases. They do not establish better design quality or time savings. The next study asks designers to revise a brief, explain what remains approved and judge the resulting files.
WHAT I TAKE FORWARD
The design of an AI tool includes the parts around generation: what the model can see, what it can change, when a person must decide, and what becomes invalid after that decision changes.
Independent portfolio prototype using supplied Moreno Bath example assets; no client commission or commercial relationship is claimed. The live AI app remains private. The walkthrough and exported examples here can be viewed independently.