Loading source
Pulling the file list, source metadata, and syntax-aware rendering for this listing.
Source from repo
Expert UI design skill for Stitch MCP: enhances prompts, generates high-fidelity screens, and maintains design system consistency.
Files
Skill
Size
Entrypoint
Format
Open file
Syntax-highlighted preview of this file as included in the skill package.
examples/enhanced-prompt.md
1# Example: Prompt Enhancement23## User Input (Vague)4> "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."56---78## Enhanced Prompt (Stitch-Optimized)9**Overall Purpose**: A high-energy, modern landing page for 'Pulse', a fitness tracking application. The vibe is powerful, motivating, and high-performance.1011**DESIGN SYSTEM (REQUIRED):**12- **Primary Color**: Racing Red (#e11d48) for CTA buttons and active states.13- **Secondary Color**: Deep Obsidian (#0f172a) for background and text containers.14- **Typography**: Bold, condensed sans-serif headings (e.g., Impact or Inter Tight) to convey speed and strength.15- **Style**: Hard edges with sharp, minimal borders; high contrast; dark mode by default.1617**PAGE STRUCTURE:**181. **Header**: Minimalist navigation with Pulse logo (left) and "Start Training" primary button (right).192. **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".203. **Feature Grid**: Three-column layout highlighting:21- **Real-time Tracking**: Live stats from your wearable.22- **AI Coaching**: Personalized workouts based on your performance.23- **Community Challenges**: Compete with friends and stay motivated.244. **Social Proof Section**: Subtle slider showing "Trusted by 500,000+ athletes".255. **Footer**: Quick links (Training, Pricing, Support), social icons, and legal.2627---28💡 **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.29