Generate a new design based on this screen using your own content.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
# Design from Reference: OpenAI Playground Chat
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** OpenAI
- **Category:** Chat
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad58186f1bee9c3650975_6acad4fac910b3adf9e4eb83_cms-8ac1e9af540d20c9963ebaa0.webp
Analyze the screenshot first. If inaccessible, request it rather than guessing.
## Content
{{content.instructions}}
{{content.data}}
Preserve essential messaging and factual accuracy. Adapt structure and copy length for visual balance; never invent product claims.
## Visual Design
Use this context to reproduce the reference's visual language: layout, typography, colors, spacing, borders, radii, and distinctive elements. The screenshot takes priority if descriptions conflict.
## Direction
{{preferences.fidelityInstructions}}
## Output
{{output.instructions}}
Deliver a polished, cohesive design with precise alignment, hierarchy, and spacing. Produce the requested visual artifact, not just a description. If unsupported, explain the limitation.
This is OpenAI's Assistants Playground, and the first thing that hits you is how clean the split-panel layout is. Left sidebar for configuration, right panel for the conversation thread. No clutter. Everything has a job and stays in its lane.
Smart Use of Restraint
The color palette is almost entirely white and gray with just those teal toggles and green "Add" buttons pulling your eye exactly where interactions happen. Typography is system-level clean. The numbered list in the response area uses soft gray circles that feel intentional without being heavy. Thread ID and assistant ID are shown in monospace, which is a small detail that signals "this is a dev tool" without beating you over the head.
What Makes It Work
The left panel stacks Name, Instructions, Model, and Tools in a clear hierarchy. Those toggles for Code Interpreter and Retrieval are satisfying. The instruction textarea with its resize handle is practical. Bottom "FILES" section stays out of the way until needed. It's a dense tool that somehow still breathes.