/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.