YOUR IDEA. YOUR WORDS.
Make a prompt your own.
Start with a solid foundation. Add your project, audience, and must-haves. Get a complete website brief you can copy into your coding assistant.
Your website brief
LIVE PREVIEWBuild a complete, responsive saas website for [PROJECT NAME]. PROJECT BRIEF A sharp product launch site that turns curious visitors into your next customers. Audience: [TARGET AUDIENCE — describe their needs and primary goal]. Technology: Use the existing project stack Start by inspecting the existing project and reuse its routing, components, and conventions. State any assumptions. Ask only for missing decisions that block implementation. PAGES & NAVIGATION 1. Home 2. Features 3. Pricing 4. Contact Give each page a real route, descriptive title, appropriate metadata, active navigation, and a useful not-found state. VISUAL DIRECTION Use a pale sage canvas, oversized charcoal typography, thin borders, lime calls to action, and a layered product UI preview. Keep pricing and feature claims clearly marked as examples. Treat the preview as visual direction, not a screenshot to reproduce. Create consistent spacing, typography, color tokens, and reusable components. Adapt the layout from 360px mobile to large desktop without horizontal overflow. REQUIRED FUNCTIONALITY - Monthly/yearly pricing toggle with clearly stated billing totals - Feature comparison and expandable FAQs - Validated demo request form with explicit submission status - Every visible control must work. Include loading, empty, validation, error, and success states where applicable. - Use realistic seed content, clearly distinguish demo data, and avoid fabricated metrics or endorsements. QUALITY & ACCESSIBILITY - Use semantic landmarks, one clear page heading, associated form labels, visible focus, keyboard navigation, descriptive link text, and sufficient color contrast. - Respect prefers-reduced-motion. Provide text alternatives for meaningful visuals. - Validate inputs at trust boundaries. Keep secrets server-side. Never render untrusted HTML. - Use an actual backend for shared data, authentication, or transactions when needed. If credentials are missing, document the setup and make the limitation visible instead of faking success. - Optimize assets, reserve media dimensions, and keep dependencies and client bundles small. - Handle unavailable browser storage and clipboard access gracefully. ACCEPTANCE CHECKS Run the production build and relevant lint/type checks. Verify all page routes, mobile and desktop layouts, keyboard flows, filtering, forms, and persistence. Test invalid inputs and empty/error states. Report what was verified and any remaining integration requirements. DELIVERABLE Implement working code, not just a proposal. Include a concise README with setup, environment variable names (no secrets), demo-data behavior, and deployment steps.
This builder assembles your brief locally. It doesn't call an AI service or send your draft to a server. Replace any remaining [placeholders] before building.