# Stitch Prompt Examples Library Comprehensive collection of effective Stitch prompts organized by use case and complexity level. ## Table of Contents 1. [Landing Pages](#landing-pages) 2. [Mobile Apps](#mobile-apps) 3. [Dashboards](#dashboards) 4. [E-commerce](#e-commerce) 5. [Forms & Authentication](#forms--authentication) 6. [Content Platforms](#content-platforms) 7. [SaaS Applications](#saas-applications) --- ## Landing Pages ### Startup Landing Page ``` Landing page for AI writing assistant startup Hero Section: - Bold headline: "Write Better, Faster with AI" - Subheadline explaining value proposition - Primary CTA button "Start Free Trial" - Secondary CTA "Watch Demo" - Hero illustration showing product interface Features Section: - 3-column grid with icons - Feature 1: AI-powered suggestions - Feature 2: Multi-language support - Feature 3: Team collaboration Social Proof: - Customer logos (6 companies) - Testimonial cards with photos and quotes Pricing: - 3-tier pricing table (Free, Pro, Enterprise) - Feature comparison - Annual/Monthly toggle Style: Modern, tech-forward, trustworthy Colors: Deep purple primary, cyan accents, white background Typography: Sans-serif, clean and readable Platform: Responsive web ``` ### Service Business Landing ``` Landing page for boutique yoga studio Above Fold: - Full-width hero image of studio space - Centered headline: "Find Your Balance" - Class schedule CTA button - Location and hours overlay Class Offerings: - Card grid (2x3) with class types - Each card: class name, duration, difficulty level, instructor photo - Hover effect reveals class description Instructor Profiles: - Horizontal scrolling carousel - Circular photos with names and specialties Testimonials: - Large quote format with student photos - 5-star ratings Call-to-Action: - "Book Your First Class Free" banner - Contact form with name, email, phone Style: Calm, organic, welcoming Colors: Sage green, warm beige, soft white Typography: Serif headings, sans-serif body Platform: Responsive web with mobile-first approach ``` --- ## Mobile Apps ### Fitness Tracking App ``` Fitness tracking app - Home screen (iOS) Top Section: - Greeting with user name and current date - Daily goal progress ring (calories, steps, active minutes) - Motivational message based on progress Quick Stats Cards: - Today's steps with trend arrow - Active calories burned - Distance covered - Active time Recent Workouts: - List of last 3 workouts with type, duration, calories - Thumbnail icons for workout type - Swipe actions for details/delete Bottom Section: - "Start Workout" prominent button - Quick access to workout types (Run, Cycle, Strength, Yoga) Bottom Navigation: - Home (active), Workouts, Progress, Profile Style: Energetic, motivating, data-focused Colors: Vibrant orange primary, dark mode background, neon accents Typography: Bold headings, clear metrics Platform: iOS mobile (375x812px) ``` ### Food Delivery App ``` Restaurant detail screen for food delivery app Header: - Restaurant cover photo - Back button and favorite icon - Restaurant name, rating (4.5 stars), delivery time (25-35 min) - Cuisine tags (Italian, Pizza, Pasta) Info Bar: - Delivery fee, minimum order, distance - Promo badge if applicable Menu Categories: - Sticky horizontal scroll tabs (Popular, Pizza, Pasta, Salads, Drinks) Menu Items: - Card layout with food photo, name, description, price - Add button with quantity selector - Dietary icons (vegetarian, spicy, etc.) Floating Cart: - Bottom sheet showing cart summary - Item count and total price - "View Cart" button Style: Appetite-appealing, easy to scan, vibrant Colors: Red primary (hunger-inducing), white background, food photography Typography: Friendly sans-serif Platform: Android mobile (360x800px) ``` --- ## Dashboards ### Analytics Dashboard ``` Web analytics dashboard for marketing team Top Bar: - Date range selector (last 7 days, 30 days, custom) - Export button - Notification bell - User profile dropdown Key Metrics Row: - 4 metric cards in a row - Card 1: Total visitors (with % change) - Card 2: Conversion rate (with trend sparkline) - Card 3: Bounce rate (with comparison to previous period) - Card 4: Average session duration Main Chart: - Line chart showing traffic over time - Multiple lines for different sources (Organic, Paid, Social, Direct) - Interactive legend to toggle lines - Hover tooltips with exact values Secondary Panels: - Left: Top pages table (page, views, avg time, bounce rate) - Right: Traffic sources pie chart with percentages Bottom Section: - Recent conversions table with user, source, value, timestamp Style: Clean, data-focused, professional Colors: Navy blue sidebar, white main area, colorful chart lines Typography: Monospace for numbers, sans-serif for labels Platform: Desktop web (1440px+) ``` ### Project Management Dashboard ``` Project management dashboard - Team view Sidebar: - Workspace selector dropdown - Navigation: Dashboard, Projects, Tasks, Team, Reports - Create new project button Header: - Project name and status badge - Team member avatars (max 5, then +N) - Search bar - View options (Board, List, Calendar) Kanban Board: - 4 columns: To Do, In Progress, Review, Done - Drag-and-drop cards - Each card shows: title, assignee avatar, due date, priority label, comment count - Add card button at bottom of each column Right Panel: - Task details when card is selected - Description, attachments, comments, activity log Quick Stats: - Progress bar showing completion percentage - Tasks by status mini chart - Upcoming deadlines list Style: Modern, organized, collaborative Colors: Purple primary, light gray background, status color coding Typography: Clear sans-serif, readable at all sizes Platform: Desktop web (1280px+) ``` --- ## E-commerce ### Product Detail Page ``` Product detail page for fashion e-commerce Image Gallery: - Main product image (large, zoomable) - Thumbnail strip below (5-6 images) - 360° view option - Video thumbnail if available Product Info: - Brand name - Product title - Star rating (4.8) with review count (234 reviews) - Price with original price struck through if on sale - Sale badge if applicable Options: - Size selector (XS, S, M, L, XL) with availability indicators - Color swatches with product image preview on hover - Quantity selector Actions: - Add to Cart button (prominent) - Add to Wishlist button (outline) - Size guide link - Shipping calculator Product Details: - Tabbed interface (Description, Specifications, Reviews, Shipping) - Expandable sections on mobile Recommendations: - "You May Also Like" carousel - "Complete the Look" suggestions Style: Clean, product-focused, trustworthy Colors: Black and white with brand accent color (burgundy) Typography: Elegant serif for headings, sans-serif for body Platform: Responsive web ``` ### Shopping Cart ``` Shopping cart page with checkout flow Cart Items: - List of products with thumbnail, name, size/color, price - Quantity adjuster (+/- buttons) - Remove item link - Save for later option Order Summary: - Sticky sidebar on desktop, bottom sheet on mobile - Subtotal - Shipping (calculated or "Free over $50") - Tax (estimated) - Discount code input field - Total (prominent) - Checkout button (large, primary color) Trust Signals: - Secure checkout badge - Free returns policy - Customer service contact Recommendations: - "Frequently Bought Together" section - Promotional banner for free shipping threshold Empty State: - Illustration - "Your cart is empty" message - "Continue Shopping" button - Recently viewed items Style: Clean, conversion-focused, reassuring Colors: Green for checkout CTA, neutral grays, trust badges Typography: Clear pricing, readable product names Platform: Responsive web ``` --- ## Forms & Authentication ### Multi-Step Signup Form ``` B2B SaaS signup flow - 3 steps Progress Indicator: - Step 1: Account (active) - Step 2: Company - Step 3: Team Step 1 - Account Details: - Email input with validation - Password input with strength indicator - Confirm password - Terms and conditions checkbox - "Continue" button - "Already have an account? Sign in" link Step 2 - Company Information: - Company name - Industry dropdown - Company size radio buttons (1-10, 11-50, 51-200, 201+) - Role/Title input - "Back" and "Continue" buttons Step 3 - Invite Team: - Email input fields (dynamic, add more) - Role selector for each invite - "Skip for now" option - "Finish Setup" button Success State: - Checkmark animation - "Welcome to [Product]!" message - "Go to Dashboard" button Style: Minimal, focused, low-friction Colors: Blue primary, white background, green success states Typography: Clear labels, helpful microcopy Platform: Responsive web, mobile-optimized ``` ### Login Page ``` Login page for enterprise software Left Panel (Desktop): - Brand logo - Hero image or illustration - Value proposition headline - Key benefits (3 bullet points) Right Panel (Form): - "Welcome back" heading - Email input field - Password input field with show/hide toggle - "Remember me" checkbox - "Forgot password?" link - "Sign In" button (full width) - Divider with "OR" - SSO options (Google, Microsoft, Okta) as buttons with logos - "Don't have an account? Sign up" link at bottom Security Indicators: - SSL badge - "Your data is secure" message Style: Professional, trustworthy, enterprise-grade Colors: Corporate blue, white, subtle grays Typography: Professional sans-serif Platform: Responsive (left panel hidden on mobile) ``` --- ## Content Platforms ### Blog Post Layout ``` Blog article page for tech publication Header: - Site navigation (logo, categories, search, subscribe) Article Header: - Category tag - Article title (large, bold) - Subtitle/excerpt - Author info (photo, name, bio link, publish date) - Social share buttons - Reading time estimate Article Body: - Readable column width (max 680px) - Paragraph text with proper line height - H2 and H3 subheadings - Pull quotes (styled distinctly) - Inline images with captions - Code blocks with syntax highlighting - Embedded videos - Table of contents (sticky sidebar on desktop) Article Footer: - Tags - Share buttons - Author card (expanded) - Related articles (3 cards) - Comments section Sidebar (Desktop): - Newsletter signup - Popular posts - Ad placement Style: Editorial, readable, content-first Colors: Black text on white, accent color for links Typography: Serif for body text, sans-serif for UI Platform: Responsive web ``` ### Video Platform Interface ``` Video streaming platform - Watch page Video Player: - Full-width video player with controls - Quality selector, playback speed, captions, fullscreen - Progress bar with thumbnail preview on hover Video Info: - Video title - View count and upload date - Like/Dislike buttons - Share button - Save to playlist button Channel Info: - Channel avatar and name - Subscriber count - Subscribe button (prominent if not subscribed) Description: - Expandable description text - Show more/less toggle - Hashtags and links Comments Section: - Sort options (Top, Newest) - Comment input with user avatar - Comment cards with avatar, name, timestamp, text - Like/Reply buttons - Nested replies (indented) Sidebar: - Up next autoplay preview - Recommended videos list (thumbnail, title, channel, views) Style: Dark mode, video-focused, minimal distractions Colors: Dark gray background, white text, red accent for CTAs Typography: Sans-serif, readable at distance Platform: Responsive web ``` --- ## SaaS Applications ### Email Client Interface ``` Email client - Inbox view Left Sidebar: - Compose button (prominent) - Folder list (Inbox, Sent, Drafts, Spam, Trash) - Labels/Tags with color coding - Storage usage indicator Email List (Center): - Search bar with filters - Sort and view options - Email rows showing: - Sender avatar/initial - Sender name (bold if unread) - Subject line - Preview text (truncated) - Timestamp - Attachment icon if present - Star/flag icons - Checkbox for bulk actions - Pagination or infinite scroll Email Detail (Right): - Email header (from, to, cc, timestamp) - Subject line - Email body with formatting preserved - Attachments section - Action buttons (Reply, Reply All, Forward, Archive, Delete) - Previous emails in thread (collapsed) Top Bar: - Refresh button - Settings icon - User profile dropdown Style: Clean, productivity-focused, organized Colors: Blue accents, white background, gray dividers Typography: Sans-serif, scannable Platform: Desktop web (1280px+) ``` ### CRM Contact Detail ``` CRM contact detail page Header: - Contact name and company - Contact photo/avatar - Status badge (Lead, Customer, Inactive) - Quick actions (Email, Call, Schedule Meeting, Edit) Info Tabs: - Overview (active), Activity, Deals, Notes, Files Overview Tab: - Contact information card (email, phone, address, social links) - Company information card - Tags and custom fields - Assigned to (team member) Activity Timeline: - Chronological list of interactions - Icons for type (email, call, meeting, note) - Timestamp and description - Filter by activity type Deals Section: - Active deals table (deal name, value, stage, close date) - Won/Lost deals summary Notes Section: - Add note input with rich text editor - Note cards with author, timestamp, content - Pin important notes Right Sidebar: - Next scheduled activity - Recent emails - Related contacts - Deal pipeline stage Style: Professional, data-rich, organized Colors: Navy blue, white, status color coding Typography: Clear hierarchy, readable data Platform: Desktop web (1440px+) ``` --- ## Tips for Using These Examples 1. **Customize for your needs** - Replace placeholder content with your specific requirements 2. **Combine elements** - Mix and match components from different examples 3. **Adjust complexity** - Simplify or expand based on your project scope 4. **Specify your brand** - Add your color palette, fonts, and visual style 5. **Consider platform** - Adapt layouts for your target device (mobile/desktop) 6. **Add context** - Include user personas or use cases for better results 7. **Iterate** - Start with a basic prompt, then refine with annotations Remember: These are starting points. Stitch works best when you provide specific details relevant to your unique project.