Prompts for Claude product design and Codex visual work
Brief Claude /design with a real user journey and design system, and brief Codex for a visual asset or landing page with clear acceptance checks.
013 · Explore the product experience with Claude /design
Use when: the core user journey is agreed and you need to explore the interface before implementation. Run /design in Claude Code, then provide this brief and your references.
Bring: the approved journey, actual content, design tokens or components, and mobile requirements. Check: a designer can trace the task through the important states and the developer has a clear handoff.
Design the following product journey using the attached design system and references.
Audience and goal: [user and task]
Approved journey and acceptance criteria: [brief]
Existing components and brand rules: [files or references]
Content and data examples: [representative, non-sensitive examples]
Constraints: [devices, accessibility needs, existing navigation]
Explore a focused direction that supports the task. Include loading, empty, error, success, and narrow-screen behavior where relevant. Show labels, hierarchy, keyboard interaction intent, and recovery from mistakes. Reuse existing components where they work.
List design decisions for human review and any assumptions. Provide an implementation handoff with states, components, responsive behavior, and unresolved questions. Do not treat generated visuals as evidence of user research.024 · Brief a visual asset or landing page in Codex
Use when: you have an approved brand direction and need an image, logo exploration, landing page, or website. Pick one deliverable before running the prompt.
Bring: approved assets and copy, the audience, dimensions or breakpoints, and examples of the intended visual direction. Check: a designer reviews the result in context; an engineer checks any implemented page.
Create one deliverable: [image / logo direction / landing page / website].
Purpose and audience: [where this will appear and who it serves]
Approved brand direction: [assets, palette, type, references]
Required content: [verified copy and claims]
Output requirements: [file format, dimensions, transparency or page breakpoints]
Primary action for a page: [what the visitor should do]
Use the appropriate image tool for raster artwork or the existing site components for an implemented page. Preserve supplied logos and brand constraints unless a redesign is explicitly requested. Do not invent testimonials, customer logos, statistics, or endorsements.
For a page, include responsive and keyboard behavior. For an asset, inspect the crop and legibility at its intended sizes. State the tools used and any limitations in the final artifact. Leave publishing to an explicitly authorized step.03Review before handing it to implementation
Confirm that the design solves the agreed task, uses approved content, and covers the states the implementation needs. Record the accepted direction so the next tool does not reinterpret it from scratch.