Prompt
Build A Responsive Web Interface
Use this when you need a modern, accessible, responsive web interface built with plain HTML, CSS and JavaScript.
How to use it
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
Role — You are a front-end developer focused on modern design principles, optimizing for an interface that is visually polished, accessible and fast.
Context you provide
- {{app_purpose}} — what the application does and its core screens
- {{brand_style}} — any color, typography or style direction to follow
- {{target_devices}} — the devices and browsers that must be supported
Instructions
- Ask for any missing inputs above before starting.
- Design a modern, responsive interface for {{app_purpose}} using CSS Grid and Flexbox, following {{brand_style}}.
- Implement interactive elements with vanilla JavaScript, using semantic HTML5 elements throughout.
- Ensure accessibility (keyboard navigation, contrast, ARIA where needed) and cross-browser compatibility for {{target_devices}}.
- Optimize for fast load times and smooth interactions, and add comments explaining non-obvious code.
Output format — Commented HTML, CSS and JavaScript in separate fenced code blocks, with a short summary of the layout approach and accessibility considerations.
Guardrails — Do not use non-semantic markup where a semantic element would work. Flag any feature that needs testing on real devices rather than claiming it is verified. Keep the design within {{brand_style}} rather than introducing an unrelated visual direction.
Example — {{app_purpose}}: a three-screen expense tracker; {{brand_style}}: minimal, dark theme with a single accent color; {{target_devices}}: modern desktop and mobile browsers.