UI from Screenshot
Asking for semantic HTML and responsive behavior by default produces production-quality output. Listing assumptions surfaces design decisions you might want to override.
Recreate the UI shown in the attached screenshot using {{framework}} and {{css_approach}}.\n\nScreenshot description (if no image attached):\n{{ui_description}}\n\nRequirements:\n- Match the layout, spacing, and visual hierarchy as closely as possible\n- Use semantic HTML elements\n- Make it fully responsive (mobile, tablet, desktop)\n- Use placeholder content where real content is not visible\n- Include hover and focus states for interactive elements\n\nReturn:\n1. The complete component code\n2. Any required CSS/Tailwind classes\n3. A list of assumptions made about responsive behavior
Variables to customize
Why this prompt works
Asking for semantic HTML and responsive behavior by default produces production-quality output. Listing assumptions surfaces design decisions you might want to override.
What you get when you save this prompt
Your workspace unlocks powerful tools to iterate and improve.
AI Optimization
One-click improvement with structure analysis and pattern suggestions.
Version History
Track every edit. Compare versions side-by-side with word-level diffs.
Folders & Tags
Organize your library with nested folders, tags, and drag-and-drop.
$ npm i -g @promptingbox/mcpUse Everywhere
Access prompts from Claude, Cursor, ChatGPT & more via MCP integration.
Your prompts, organized
Save, version, and access your best prompts across ChatGPT, Claude, Cursor, and more.