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.
Save this prompt to your library
Organize, version, and access your best prompts across ChatGPT, Claude, and Cursor.
Related prompts
Forcing the agent to plan before acting prevents premature execution and wasted steps. Explicit dependency mapping enables parallel execution and catches logical gaps early.
Tool Selection AgentThe ReAct pattern (Reason + Act) creates an explicit reasoning trace that improves tool selection accuracy. The error-handling rule prevents infinite retry loops.
Prompt CompressorExplicitly requiring all functional requirements to be preserved prevents the model from over-compressing and losing critical instructions.
Memory Management AgentExplicit memory read/write instructions create agents that improve over time. Categorization keeps memories organized, and the deduplication rule prevents context bloat.