Step 1 of 9
Define the coffee shop website structure
Establish the full page structure, content sections, and functional scope before building.
This prevents the builder from generating only a stylish hero page with missing business sections.
Create a complete coffee shop website structure for a local cafe. Include these sections: header navigation, hero, about/story, featured drinks, full menu with categories, hours, location, contact form, and footer. Use realistic coffee shop sample content, not lorem ipsum. Set up real section IDs for navigation. Make sure the content hierarchy is clear and suitable for mobile and desktop.
Expected after this step
A complete site skeleton exists with all major sections and realistic starter content.
Should not happen
- ✕AI generates a pretty landing page with no real content depth beyond the hero section
- ✕Form UI is created but submission, validation, or feedback states do not actually work
- ✕Navigation links point to missing sections or dead anchors
- ✕Menu cards look good visually but contain repetitive placeholder items
Verify before continuing
Do not move on until every check is true. The complete button stays locked until then.
Do not continue if…
- !AI generates a pretty landing page with no real content depth beyond the hero section
- !Form UI is created but submission, validation, or feedback states do not actually work
- !Navigation links point to missing sections or dead anchors
- !Menu cards look good visually but contain repetitive placeholder items
- !Responsive layout breaks on small screens or overlapping text appears
If the AI messes this up
Use this when the AI fakes progress or breaks the feature. It forces a real fix.
You created an incomplete landing page. Expand it into a full coffee shop website with these real sections: header, hero, about, menu, hours, location, contact form, and footer. Replace placeholder content with realistic cafe content and ensure every nav link points to an actual section ID.