<!-- SPDX-License-Identifier: MIT -->
<!-- SPDX-FileCopyrightText: 2025-2026 Marcus Quinn -->

# Design System: Playful Vibrant — Agent Prompt Guide

## Ready-to-Use Prompts

### Prompt 1 — Children's education landing page

> Build a landing page following DESIGN.md. Background #FAFAFA with a white navbar (68px, soft shadow). Hero section on #eef2ff with a 56px/800 heading in #1e1b4b, 18px body in #374151, and a gradient primary button (linear-gradient 135deg #6366f1 to #8b5cf6, 16px radius, coloured shadow). Feature section with 3 cards (white, 20px radius, soft shadow), each with a coloured top border (indigo, rose, amber) and a 48px icon in a 64px rounded-full circle with the matching subtle background colour. Achievement section on #fffbeb with gold (#f59e0b) star icons. All corners rounded 16–20px, spring easing on hover.

### Prompt 2 — Social app profile page

> Create a profile page following DESIGN.md. Bottom tab navigation with 5 items (home, search, create, messages, profile) — active tab in #6366f1, inactive in #9ca3af. Profile header: circular avatar (80px, border: 3px solid #6366f1), display name in 24px/700 #1e1b4b, handle in 14px #6b7280. Stats row: followers/following/posts in 20px/700 with labels in 12px/600. Bio in 16px/400. Post grid: 3-column with 4px gaps, 12px border-radius on images. Edit profile button: secondary style (white bg, #6366f1 border, 16px radius). Follow button: gradient primary. Rose (#f43f5e) heart icon for likes.

### Prompt 3 — Gamified dashboard

> Build a gamified learning dashboard following DESIGN.md. Background #FAFAFA. Welcome card (white, 20px radius) with user avatar and streak counter (amber #f59e0b flame icon, 32px/700 number). Progress section: course cards with gradient progress bars (#6366f1 → #8b5cf6), percentage in 24px/700, subject name in 18px/700. Achievement badges: circular (64px) with coloured backgrounds from the extended palette and white icons. Leaderboard: numbered list with avatar, name, and XP points (emerald #10b981 for level-ups). Daily challenge card: rose (#f43f5e) accent border, animated pulse on the "Start" button. All cards 20px radius with soft shadows, spring easing on hover.
