What this prompt does
This prompt generates a complete, component-by-component UI specification for AI/chatbot platforms — covering the chat container, input controls, conversation sidebar, context panel, and model selector in a single pass. What makes it work is the embedded design ruleset: the template explicitly bans the visual clichés that plague AI products (glowing brains, purple gradients, robot avatars) and instead pushes toward the spacious, neutral aesthetic that actually holds up across a multi-hour session.
The [framework] variable locks the output to runnable code rather than abstract suggestions. When you specify React or Vue, the streaming text effect section becomes real implementation — not pseudocode. The instruction to expose token counts and context window usage to power users is deliberately structural, not decorative. It forces the output to treat information density as a first-class UX concern.
The "optimize for long-session comfort" instruction at the end reweights the entire generation. Spacing, scroll behavior, and message contrast all shift when the AI knows the user will sit with this interface for hours, not seconds.
When to use it
- Building a white-label ChatGPT-style interface for an enterprise SaaS product where your brand must feel native, not bolted on.
- Prototyping a developer tool with inline code execution, multi-model comparison, and raw API response views.
- Designing a customer support chatbot console where agents need full conversation context alongside the live chat window.
- Creating a document-grounded assistant UI where the context panel shows which source chunks are in play.
- Scaffolding the front-end for an AI playground targeting ML engineers who need latency, temperature, and token controls visible at all times.
- Redesigning an existing chatbot UI that has outgrown its original single-page layout and needs a proper sidebar and history system.
Example output
For platform_type = "internal knowledge base assistant", features = "streaming responses, folder-based conversation history, system prompt editor, PDF source citations", target_users = "legal ops teams", framework = "React + Tailwind":
// ChatMessage.tsx — streaming text with source citation chips
export function ChatMessage({ message, isStreaming }: Props) {
return (
<div className="flex gap-3 px-4 py-3 group">
<RoleIndicator role={message.role} />
<div className="flex-1 space-y-2">
<StreamingText content={message.content} active={isStreaming} />
{message.citations?.length > 0 && (
<div className="flex flex-wrap gap-1 pt-1">
{message.citations.map(c => (
<CitationChip key={c.id} source={c.filename} page={c.page} />
))}
</div>
)}
</div>
<TokenCount tokens={message.usage?.total_tokens} className="opacity-0 group-hover:opacity-60" />
</div>
);
}
The prompt also specifies the skeleton loader for "thinking" state and the auto-growing textarea as separate components, with mobile drawer behavior for the sidebar.
Pro tips
- Name the platform type precisely.
"internal knowledge base assistant"yields a tighter spec than"AI chatbot"— the more context you give[platform_type], the more the anti-patterns list gets applied correctly to your actual product. - Use
[features]as a forcing function. If you list "multi-model comparison" here, the prompt will generate a split-pane layout you would not get otherwise. Be deliberate about what you include. - Pair with a design token prompt first. Run a color/typography system prompt for your brand before this one, then paste those tokens into the output. The neutral-background rule leaves intentional space for your brand accent — fill it deliberately.
- Specify
[framework]as a stack, not just a library."React + Tailwind + Zustand"produces state management patterns for the streaming buffer;"React"alone produces generic component shapes. - The anti-pattern list is your QA checklist. After generation, scan the output against it manually. If any component description mentions a gradient or an avatar icon that looks like a bot, that is a prompt drift signal — add a negative constraint to your next iteration.
