All Templates
📋
Guides & Tools
24. Ready-to-Use Prompt Template
A structured fill-in-the-blank prompt template that covers every critical dimension — visual style, interactivity, layout, responsiveness, and technical requirements. Start every project with this framework for consistently excellent results.
Visual Preview
READY-TO-USE TEMPLATE
Design a [type] with [style]
Fill in each section for a comprehensive, opinionated prompt
Visual Style
[Color palette specifics]
[Typography choices]
[Spacing/layout approach]
Output: [What you expect as final deliverable]
When to Use
Starting any new design project — from landing pages to full SaaS dashboards. Fill in the blanks for a comprehensive, opinionated prompt every time.
Key Vocabulary
Visual StyleInteractive ElementsStructureResponsive BehaviorTechnical Requirements
Template Structure
Design a [type of page/component] with [aesthetic style]: Visual Style: - [Color palette specifics] - [Typography choices] - [Spacing/layout approach] Interactive Elements: - [Hover states] - [Transitions and animations] - [Loading/error states] Structure: - [Layout grid system] - [Component hierarchy] - [Navigation pattern] Responsive Behavior: - Desktop: [specifics] - Tablet: [specifics] - Mobile: [specifics] Technical Requirements: - [Framework/libraries] - [Data structure] - [Key features] Output: [What you expect as final deliverable]
Filled Example — dot2.solutions
Build a bold, disruptive website for "dot2.solutions" — a Swiss automation consultancy that eliminates 30–60% of repetitive support work for Intercom and Zendesk users. Visual style inspired by Intercom's homepage: cinematic illustrated hero, massive stacked headlines, premium navbar, floating product mockup. Not a dark SaaS — a confident, illustrated, editorial B2B site. ═══════════════════════════════ HERO VISUAL STYLE (Intercom-inspired) ═══════════════════════════════ - Full-viewport hero with deep blue illustrated background: painted-style sky, soft clouds, tree silhouettes, abstract buildings - CSS film-grain noise overlay for texture - Pure white hero text, no gradient treatment - Navbar: transparent on load, dark bg after scroll - Logo "dot2.solutions" — dot in brand blue (#4F9EF8) - Massive 3-line headline: "AUTOMATE 60% / OF YOUR SUPPORT. / SHIP THE REST." - Floating product mockup: realistic inbox showing automated ticket routing ═══════════════════════════════ COLOR SYSTEM ═══════════════════════════════ - Hero: deep painted blue (layered CSS/SVG) - Brand accent: #4F9EF8 - Sections: white / slate-50 alternating - Text: slate-900 primary, slate-500 muted ═══════════════════════════════ PAGE STRUCTURE ═══════════════════════════════ 1. Illustrated hero + floating product mockup 2. Social proof bar (Intercom, Zendesk, Slack, n8n) 3. Problem → Solution (✗/✓ two-column) 4. How it works (4 steps with arrows) 5. Case Studies (3 cards with stats) 6. ROI Calculator (interactive sliders) 7. Pricing (3 CHF tiers) 8. Trust signals 9. Contact form 10. Footer (Swiss legal) ═══════════════════════════════ INTERACTIVE ELEMENTS ═══════════════════════════════ - Hero mockup: parallax on scroll - ROI calculator: live reactive output - Pricing: hover shadow + border - Scroll-triggered fade-in - Mobile: sticky CTA pill Output: A React single-page app with Intercom's visual DNA applied to a Swiss B2B automation consultancy — illustrated hero, editorial headlines, clean white sections, full conversion funnel.
Pro Tip
"Fill in this template before starting any project for consistently excellent results. The more specific and opinionated you are in each section, the better the output."