Guide prepared for a local, code-first creative workflow
Watch the full walkthrough
▶
Video link
START HERE
This is not a one-off prompt or a clone of another design canvas. It is a living studio: strategy, voice, visual identity, reusable components, approved assets, and every creation brief stay together in a local folder you own.
Brand guide for voice, imagery, composition, documents, social, and motion.
Tokens, reusable UI components, Storybook, and a safe visual Theme Editor.
A saved brief for every website, deck, document, campaign, logo, or motion asset.
Organized source projects and final exports, kept editable and easy to revisit.
1
FOLDER SETUP
Start a Codex project, and link it to the ‘codex-design-studio’ folder. The root instructions become the durable operating system for every later task.
CODEX-DESIGN-STUDIO/
AGENTS.md START_HERE.md PROJECT_INDEX.md assets/ brand-system/ briefs/ prompts/ projects/ outputs/
Download ‘codex-design-studio’ Folder
Keep AGENTS.md at the root. Codex reads it when work starts, so folder rules and source-of-truth protections persist across tasks.
2
ASSETS
Describe the purpose, audience, offer, positioning, personality, and feeling. References are optional; the guided workflow can build a direction from scratch, but approved assets and source content should live beside the brief.
assets / brand
Existing logos, fonts, guidelines, and approved assets.
assets / inspiration
Screenshots, moodboards, photography, and visual references.
assets / content
Copy, research, product information, and source documents.
3
DESIGN SYSTEM
Run the system-creation prompt in a fresh Codex task. Ask it to stop after proposing the visual direction, color roles, type hierarchy, spacing logic, imagery, voice, components, accessibility rules, and a file-by-file implementation plan.
APPROVAL CHECKPOINT
Review the proposal before implementation.
This is the inexpensive moment to change direction. Once approved, the guide lives in brand-system/BRAND_GUIDELINES.md and the coded system lives beside it in brand-system/design-system/.
4
THEME EDITOR
Use Storybook to review components and edge cases in isolation. Use the Theme Editor to tune semantic color, typography, spacing, corner radius, and shadows without directly overwriting approved source values.
Storybook
Review buttons, forms, states, cards, navigation, dialogs, tabs, responsive examples, accessibility behavior, and edge cases.
npm run storybook
Theme Editor
Experiment live, export tokens.json when approved, then apply the update through a separate protected Codex task.
npm run dev
These files are now in your project folder, but Codex will also provide links for you to access them.
To make changes use the ‘Theme Editor’ and export the new style reference, then attach it to codex and ask for an update to the design system.
5
BRAND MATERIAL
Use a new Codex task for each major asset while keeping the same parent project selected. The guided creation prompt asks one focused question at a time, saves the decisions, proposes a plan, creates a checkpoint, and only then produces the deliverable.
Start a new guided creation.
The brief should lock the output type, goal, audience, core message, required content, format, dimensions, call to action, source material, and editing requirements.
PRODUCTION REFERENCE
Each project should consume the approved guide, tokens, components, and assets. The output changes; the visual language and decision record stay stable.
Websites + prototypes
Import the system, build responsive layouts and working interactions, run accessibility checks, and keep final source in projects/.
Presentations
Approve a narrative outline first, generate an editable deck, and visually verify the rendered slides before delivery.
Documents + print
Choose editable SVG or DOCX when continued editing matters, and use PDF as an export—not the only source.
Social media
Specify the platform, dimensions, campaign goal, post count, captions, alt text, templates, and carousel narrative.
Logos
Create original geometric marks as editable SVG. Complex illustrative marks may still need manual vector refinement.
Animation + motion
Define the destination, rationale, duration, easing, reduced-motion behavior, and an editable source format.
MAINTENANCE
01 Use one Codex task per major deliverable, but keep the same parent project folder selected.
02 Save the approved brief and update PROJECT_INDEX.md so every asset has a decision trail.
03 Never let a normal asset task silently overwrite the brand guide or coded design system.
04 Treat token edits and structural system edits as separate, protected update tasks.
05 Open, render, and edit every deliverable in its real format before calling it finished.
KNOW BEFORE YOU START
The workflow does not reproduce a direct-manipulation design canvas. Initial setup takes longer than a single prompt, model limits vary, and generated marks or layouts may still need design judgment. Storybook is for coded interfaces, while the Theme Editor only changes the coded token system.
Codex ignores instructions
Confirm AGENTS.md is at the opened project root, restart the task, and ask Codex to summarize the instructions and source-of-truth files it loaded.
Storybook does not open
Verify dependencies, the Storybook script, and the exact command. Check whether another process is already using the port.
A website drifts from the system
Audit raw colors, arbitrary spacing, local shadows, and duplicated components. Product pages should consume semantic tokens and shared UI.
A generated file is flattened
Request the editable source before generation: SVG instead of PNG, editable PPTX instead of slide images, or DOCX instead of PDF-only output.
READY TO BUILD
The value is not only faster generation. It is continuity: every new asset begins from the latest approved brand, reusable system, saved decisions, and editable source files.
design review
Take your design to a whole new level with professional UI/UX.
Submit your project and Jad will write the custom prompts to upgrade it.
Submit your design
Code review
AI generated code can look fine and still hide security holes or performance problems. Luckily we have Taz on the team, he’s a software engineer who can review your code, so you know it is production ready before you launch.
Submit your code
Closing
On Youtube I share my latest guides and workflows using AI.
This is how you stay ahead of the market.
Check out the Youtube channel
▶
AI Tooltip
Developed by Jad · AI Tooltip