Chapter 2: Project Structure Essentials
Frontend Elements You Need to "Know Enough" About
Page Components
Every web page typically includes these elements that you should specify:
Header: The top section of your page
▼
- Logo placement and size
- Navigation menu items and organization
- Call-to-action buttons
- Login/account access (if applicable)
Hero Section: The main banner area
▼
- Headline text (specific wording)
- Subheadline text (specific wording)
- Background image or color
- Primary call-to-action button
Content Sections: The main information areas
▼
- Section headings and subheadings
- Text content organization (paragraphs, bullets)
- Image placement and content
- Interactive elements (buttons, sliders)
Footer: The bottom section
▼
- Contact information
- Secondary navigation
- Social media links
- Copyright and legal information
Forms: Data collection elements
▼
- Field types (text, dropdown, checkboxes)
- Required vs. optional fields
- Validation requirements (email format, password rules)
- Submission button text and appearance
Interactive Elements
Specify how users interact with your application:
Buttons: Actions users can take
▼
- Text labels (exact wording)
- Visual appearance (color, size, shape)
- Placement on page
- Action triggered when clicked
Navigation: How users move through the application
▼
- Menu structure and organization
- Breadcrumb trails for complex applications
- Progress indicators for multi-step processes
- Return/back functionality
User Input: How information is collected
▼
- Form fields and types
- Dropdowns and option lists
- File uploads
- Search functionality
Feedback Elements: How the system communicates with users
▼
- Success messages
- Error notifications
- Loading indicators
- Help/tooltip information
Key Takeaway
When creating your master prompt, be specific about the frontend elements and how users will interact with them. The more detail you provide about the visual and interactive components, the better results you'll get from AI agents.
