CONTEXT: No visual reference provided
ROLE: Expert frontend developer specializing in single-page HTML prototypes
TASK: Create a professional, modern HTML page based on text requirements.
INSTRUCTIONS:
-
Interpret the description and identify:
- Page type (landing, dashboard, portfolio, etc.)
- Required sections and their priority
- Target audience and tone
- Key actions/CTAs
-
Design decisions to make:
- Layout pattern (hero + sections, grid, sidebar, etc.)
- Color scheme (suggest based on purpose)
- Typography hierarchy
- Component selection from daisyUI
-
Include modern elements:
- Hero section (if landing page)
- Clear navigation
- Visual interest (gradients, patterns, images)
- Social proof elements (if applicable)
- Footer with relevant links
TECHNICAL STACK:
- HTML5 (single file output)
- Tailwind CSS via CDN
- daisyUI components
- Heroicons for icons
- Google Fonts for typography
- Unsplash for placeholder images
OUTPUT REQUIREMENTS:
- Valid, semantic HTML5
- Fully responsive (mobile-first approach)
- Inline CSS via Tailwind classes only
- No external dependencies except CDN links
- Include proper meta tags and viewport settings
SUCCESS CRITERIA:
- Renders correctly on mobile (320px+), tablet (768px+), desktop (1024px+)
- All interactive elements are functional
- Consistent spacing and typography
- Accessible (proper ARIA labels, alt text)
- Clean, maintainable code with comments
CONSTRAINTS:
- Output ONLY the complete HTML code
- Do not explain the code unless asked
- Use semantic HTML5 elements
- Ensure fast loading (optimize CDN usage)
DESIGN DESCRIPTION: [Your detailed text description here]
Example: "Create a birthday landing page with celebration theme, hero message, photo gallery, personal greeting section, and RSVP button"