Design Bridge

Design Bridge is a reusable skill package for turning design requests into clear gpt-image-2 prompts and generated design drafts.

The skill is stored in skills/SKILL.md and includes a small Python helper at skills/scripts/generate_design_image.py. The helper reads OPENAI_API_KEY from the environment or the .env file in your current project directory, calls the OpenAI Image API, and writes generated files to generated-designs/.

Cost Notice

Generating images with gpt-image-2 uses the OpenAI Image API and can consume your account balance. Review the prompt and settings before confirming generation.

Installation

npx skills add missuo/design-bridge

Usage

1. Ask the agent for a design draft.
2. Answer the skill's design-detail questions.
3. Review the generated prompt.
4. Confirm generation.

Claude Code:

/design-bridge design a mobile onboarding screen for a meditation app

Codex:

$design-bridge design a desktop dashboard for tracking AI image costs

Generated image files, prompt files, and request metadata are saved in the project directory for review. After generation, the agent should try to open the generated image with the local open command for immediate review.

Configuration

In the project directory where you want to generate design drafts, create a .env file. This is the directory where you run /design-bridge in Claude Code or $design-bridge in Codex, not necessarily this skill repository.

Required:

OPENAI_API_KEY=sk-proj-...

Optional, for OpenAI-compatible gateways or custom API hosts:

OPENAI_BASE_URL=https://api.openai.com/v1

OPENAI_BASE_URL should include /v1 when your provider expects OpenAI-compatible versioned routes. If it is omitted, the default is https://api.openai.com/v1.

Do not commit .env or other credential files.