29 lines
1.7 KiB
Markdown
29 lines
1.7 KiB
Markdown
# Example: Prompt Enhancement
|
|
|
|
## User Input (Vague)
|
|
> "Make a landing page for my fitness app called 'Pulse'. Use red and black. It should have a place for features and a hero section."
|
|
|
|
---
|
|
|
|
## Enhanced Prompt (Stitch-Optimized)
|
|
**Overall Purpose**: A high-energy, modern landing page for 'Pulse', a fitness tracking application. The vibe is powerful, motivating, and high-performance.
|
|
|
|
**DESIGN SYSTEM (REQUIRED):**
|
|
- **Primary Color**: Racing Red (#e11d48) for CTA buttons and active states.
|
|
- **Secondary Color**: Deep Obsidian (#0f172a) for background and text containers.
|
|
- **Typography**: Bold, condensed sans-serif headings (e.g., Impact or Inter Tight) to convey speed and strength.
|
|
- **Style**: Hard edges with sharp, minimal borders; high contrast; dark mode by default.
|
|
|
|
**PAGE STRUCTURE:**
|
|
1. **Header**: Minimalist navigation with Pulse logo (left) and "Start Training" primary button (right).
|
|
2. **Hero Section**: Large, emotive fitness photography background. Headline: "Elevate Every Beat." Sub-headline: "Track, analyze, and crush your fitness goals with Pulse." Primary red CTA: "Get Started".
|
|
3. **Feature Grid**: Three-column layout highlighting:
|
|
- **Real-time Tracking**: Live stats from your wearable.
|
|
- **AI Coaching**: Personalized workouts based on your performance.
|
|
- **Community Challenges**: Compete with friends and stay motivated.
|
|
4. **Social Proof Section**: Subtle slider showing "Trusted by 500,000+ athletes".
|
|
5. **Footer**: Quick links (Training, Pricing, Support), social icons, and legal.
|
|
|
|
---
|
|
💡 **Tip**: Notice how the enhanced prompt adds specific hex codes, defines the typography "vibe", and breaks the page into a logical numbered structure. This gives Stitch much clearer instructions.
|