mockup

Generate UI mockups as HTML files with inline CSS for rapid visual prototyping.

Steps

1. Gather the mockup requirements:
2. Create a single HTML file per screen with inline styles:
3. Add realistic placeholder content:
4. Make interactive elements functional with minimal JS:
5. Add annotations explaining design decisions.
6. Test that the mockup renders correctly in a browser.

Format

Mockup: <screen name>
File: <path to HTML file>
Screens: <list of views created>
Interactions: <what is clickable/interactive>

Rules

• Single HTML file per screen with zero external dependencies.
• Use CSS custom properties for colors so they are easy to change.
• Include mobile and desktop layouts using media queries.