Codex
Workflow, plugins and slides for designing interfaces with Codex.
THE AGENT DESIGN DIRECTORY
Your Coding Agent.
A Better Design
Workflow.
Workflow guides, setup notes and design resources for 22 coding agents, so the tool you already use can turn a brief into a considered interface.
22 agent guides, one workspace.
› Use the reference. Build the landing page.
Reading DESIGN.md · binding tokens…
Writing landing-page.html ✓
Your agentCodexClaude CodeOpenCode+19
A reference. Your agent. Something distinctly yours.
Illustrative workflow, not a product screenshot.
THE DESIGN WORKFLOW
Three Roles in a Coding Agent Design Workflow
A coding agent turns instructions into code. A design workflow adds the references, constraints and review that turn that code into a usable interface.
What a design agent is- 01Your Coding Agent
- Reads the project, makes changes and responds to feedback. Keep the tool you already use.
- 02OpenDesign
- The workspace for the brief, design resources and visual review. Each agent guide explains the setup.
- 03Your Judgment
- Choose the reference, define what must stay consistent and check the result on real screens.
CODING AGENT GUIDES
Design Workflow Guides for 22 Coding Agents
Start with the tool you already use. Each guide covers the agent’s role, what to prepare and the next step. The list is a directory, not a ranking.
22 guides
Claude Code
A frontend design workflow with Claude Code, from the first brief to the final review.
DeepSeek Harness
Harness setup, its role in the workflow and the design resources it can use.
OpenCode
A design workflow built around the tools and model providers you choose.
Grok
Grok Build
Setup, prerequisites and a first visual design task with Grok Build.
Cursor
Cursor Agent
How the Cursor editor and the design workflow fit together in one project.
DeepSeek
DeepSeek TUI
The DeepSeek TUI, its prerequisites and how it differs from DeepSeek Harness.
Hermes
Design resources, extension options and prerequisites for a Hermes workflow.
Antigravity
Setup first, then a frontend design and review workflow with Antigravity.
Kimi
Kimi CLI
Inputs, context and setup to prepare before a first design task with Kimi CLI.
Qwen
Qwen Code
How Qwen Code, the model provider and the design workflow connect.
Trae CLI
Trae CLI setup and a starting point for interface design.
Qoder
Qoder CLI
Qoder CLI setup and the design workflow that complements it.
Mistral Vibe
Mistral Vibe CLI
The Mistral Vibe CLI as a design tool, distinct from vibe design in general.
Gemini
Gemini CLI
A reference-led UI workflow with Gemini CLI, from setup to review.
Copilot
GitHub Copilot CLI
Repository context and review in an interface design workflow with GitHub Copilot CLI.
Kilo
Configuration, modes and a practical starting point for design with Kilo.
Aider
Start from existing code with Aider, make one considered change and review the difference.
Pi
Setup, extensions and design resources for Pi.
Kiro
Kiro CLI
Where requirements and interface decisions fit in a Kiro CLI workflow.
Devin
Devin for Terminal
Framing the task, defining the handoff and reviewing the interface with Devin for Terminal.
Reasonix
DeepSeek Reasonix
Understanding the project, its relationships and where to begin with DeepSeek Reasonix.
No Matching Guide
Try another name or return to all 22 guides.
A guide does not guarantee compatibility. Check the tool, authentication and platform requirements on its page before connecting.
DESKTOP APP
Download OpenDesign and Connect Your Coding Agent
Download OpenDesign, follow your agent’s setup guide and bring a reference to the first project.
- 01
Download OpenDesign
Choose the build for macOS or Windows and open the app.
- 02
Connect Your Agent
Check the prerequisites in its guide above and complete the setup it describes.
- 03
Start a First Task
Bring a reference, a short brief or a template from the resources below.
DESIGN RESOURCES
Design Resources for Coding Agents
Reusable workflows, brand tokens and starting points that an agent can bind into a task.
COMMON QUESTIONS
Coding Agents, Models and Skills Explained
You do not need a new coding agent for this workflow. These answers cover the terms and the related pages.
Do I Need to Switch Agents?
No. Begin with the guide for your current tool. The setup and available capabilities depend on that tool and version; the directory does not rank them.
Are Agents, Models and Skills the Same Thing?
No. A model powers the reasoning, an agent operates on the task, and a skill supplies a reusable way of working. The skills directory lists that last layer.
I Am Comparing Design Tools. Where Should I Go?
Use the tool comparisons for replacement and coexistence questions. These agent guides explain working with a tool you already use.
What Should My First Task Be?
Choose one small interface and bring a reference. Check its layout, one interaction and a narrow screen before expanding. A template can give you a starting point.
Get started
Start With the Coding Agent You Already Use
Download OpenDesign Setup notes
Desktop builds for macOS and Windows. On a phone, save the setup guide and continue on your desktop.
