I want to build a [PAGE TYPE] for [AUDIENCE]. The one action a visitor should take is [ACTION].\n\nBefore writing any code, give me:\n1. The sections in order, with one sentence on what each must accomplish.\n2. Which section carries the primary call to action and why it sits there.\n3. The single most important thing visible without scrolling, on a phone.\n4. What you are deliberately leaving out, and why.\n\nThen stop. Do not write HTML until I approve this structure.
Build a complete landing page as a single HTML file with inline CSS and no external dependencies.\n\nProduct: [PASTE]\nAudience: [PASTE]\nPrimary action: [PASTE]\nBrand colours: [PASTE OR SAY NONE]\n\nRequirements:\n- Mobile first, with a 16px side gutter and no horizontal scroll at 320px\n- A type scale with no more than 4 sizes\n- Dark mode via prefers-color-scheme, with an explicit background on body\n- Semantic HTML: header, main, section, footer\n- Every interactive element reachable by keyboard\n\nNo lorem ipsum. Write real copy based on the product described.
This layout works on desktop and breaks on phones.\n\nCode: [PASTE]\nWhat breaks: [DESCRIBE, OR PASTE THE VIEWPORT WIDTH]\n\nDo this in order:\n1. Name the exact rule causing the break and explain the mechanism.\n2. Give the minimal fix, as a diff, not a rewrite.\n3. Say what else that change affects.\n4. List any other rules in this code that will break at a different width.\n\nPrefer fixing the root cause over adding a media query.
Build one reusable component from this description.\n\nComponent: [DESCRIBE]\nStates needed: [DEFAULT, HOVER, FOCUS, DISABLED, LOADING, ERROR - PICK]\n\nDeliver:\n- The markup\n- The CSS, using custom properties for every colour and spacing value\n- Every state styled, including focus-visible\n- A short usage example\n\nDo not use a framework. Do not add states I did not ask for.
Audit this page for accessibility problems.\n\nCode: [PASTE]\n\nReport as a table: issue, WCAG criterion, severity, the exact line, and the fix.\n\nCheck at minimum: colour contrast against the actual values in the code, heading order, alt text, form labels, focus visibility, keyboard traps, touch target size, and whether anything relies on colour alone.\n\nRank by how many users it blocks, not by how easy it is to fix. Say clearly which issues would fail an audit and which are improvements.
This page is slow. Find out why from the code alone.\n\nCode: [PASTE]\n\nList every performance problem you can see, ordered by likely impact on Largest Contentful Paint. For each: the problem, the mechanism, the fix, and the rough saving.\n\nPay attention to render-blocking resources, uncompressed or unsized images, layout shift from missing dimensions, fonts loading without a fallback, and anything running on the main thread before first paint.\n\nSay which problems you cannot diagnose without a real measurement.
I have a layout and need copy that fits its constraints.\n\nLayout: [DESCRIBE OR PASTE]\nProduct: [PASTE]\nAudience: [PASTE]\n\nFor each text slot, write copy within the character limit implied by the design and state the count. Where the limit is tight, give a short and a long option.\n\nRules: no superlatives without a fact behind them, no sentence longer than 20 words in a heading slot, and the value proposition stated in concrete terms rather than adjectives.
Act as a first-time visitor who has never heard of this product and has 8 seconds.\n\nPage: [PASTE CODE OR DESCRIBE WHAT IS VISIBLE]\n\nAnswer in this order, honestly:\n1. What do you think this is, from the first screen alone?\n2. What are you supposed to do next?\n3. What question do you have that the page does not answer?\n4. What would make you leave?\n\nThen switch roles and list the three changes that would fix the biggest problem you found.
Add dark mode to this page without restructuring it.\n\nCode: [PASTE]\n\nApproach:\n1. Extract every hardcoded colour into a custom property on root.\n2. Redefine those properties under a prefers-color-scheme dark media query.\n3. Give body an explicit background in both modes.\n4. Check contrast in the dark palette and report any pair that fails.\n\nDeliver the diff, not the whole file. Flag any colour where the dark equivalent is a judgement call rather than a direct mapping.
Turn this finished page into a template I can reuse.\n\nCode: [PASTE]\n\n1. Identify everything that is content versus everything that is structure.\n2. Replace content with clearly named placeholders.\n3. Pull all design decisions into custom properties at the top.\n4. Document every placeholder in a comment block: what it is, the expected length, and whether it is required.\n\nThe result should be editable by someone who does not write CSS.