Frontend Building

AI Prompt Template

Generate a complete frontend page for a [website type].

## Page Info
- Site Name: [Name] | Page Type: Home/Products/Article/Contact
- Design Style: Minimal/Tech/Warm/Professional
- Primary Color: [Color] | Responsive: Yes

## Content Sections
- Header: logo, menu, CTA button
- Hero: headline, subtitle, CTA
- Features/Services: 3-4 cards
- Stats, Testimonials carousel, Contact form
- Footer: copyright, social links

## Technical Requirements
- HTML5 + CSS3 + Vanilla JS, BEM naming
- Flexbox/Grid, Font Awesome/SVG icons

Responsive Layout Checklist

• Test at 320px, 768px, 1024px, 1440px breakpoints
• Mobile nav: hamburger menu with smooth toggle
• Touch targets ≥ 44px
• Images use srcset for HiDPI screens
• Tables scroll horizontally on mobile
• Font sizes scale with viewport

The Core Tension in Frontend Architecture

Frontend development constantly pulls between two directions: developer efficiency and user experience. Framework choices involve learning curves and team capability. Rendering approaches balance initial load speed against ongoing maintenance.

There's no silver bullet — but there is a decision framework.

Three Approaches

Recommendation: Start with the simplest approach that meets your needs. If plain HTML works, don't introduce framework complexity for "what if" features.

Component Thinking

Even in plain HTML projects, organize code with a component mindset:

components/
├── header.html
├── hero.html
├── feature-grid.html
├── pricing-card.html
├── faq.html
└── footer.html

One file per component, with HTML comments marking start and end positions. While not a real component system, this approach makes redesigns and A/B testing much easier.

Performance Budget

Set a performance budget before launch to prevent gradual degradation:

Practical Tips

• System font stacks eliminate 80% of font-loading overhead
• Optimize images from day one: WebP + srcset
• Core content loading speed beats fancy animations every time — defer eye candy