This guide explains the architecture, design principles, and customization options for the Notion Website Developer prompt system.
- System Architecture
- Prompt Components
- How Prompts Work Together
- Customization Guide
- Best Practices
- Advanced Techniques
The Notion Website Developer uses a modular prompt architecture designed for:
- Separation of Concerns: Each prompt handles specific tasks
- Reusability: Shared context prevents duplication
- Flexibility: Works standalone or integrated
- Maintainability: Easy to update and extend
┌─────────────────────────────────────────┐
│ notion_website_developer.system.prompt │
│ (Shared Foundation) │
├─────────────────┬───────────────────────┤
│ │ │
▼ ▼ │
Template Content │
Generator ──────► Generator │
│ │
▼ │
Notion Website │
└─────────────────────────────────────────┘
- Single Source of Truth: Knowledge base schema defined once
- Progressive Enhancement: Start simple, add complexity
- Graceful Degradation: Works without all features
- User-Centric: Interactive discovery when needed
File: notion_website_developer.system.prompt.md
Purpose: Provides persistent context shared by all components
Key Sections:
- System overview and mission
- Knowledge base schema
- Tool requirements and fallbacks
- Design principles
- User interaction framework
When to Use: Always loaded as foundation
File: notion_website_template_generation.user.prompt.md
Purpose: Creates structured website templates
Key Features:
- 5-phase workflow (Setup → Analysis → Research → Design → Delivery)
- Research-backed best practices
- Platform-agnostic approach
- Interactive preference gathering
Outputs: Notion-compatible markdown template
File: notion_website_content_generation.user.prompt.md
Purpose: Populates templates with personalized content
Key Features:
- Content strategy framework
- SEO optimization
- Conversion focus
- Brand voice consistency
Outputs: Complete website content
graph LR
A[System Prompt] --> B[Template Generator]
A --> C[Content Generator]
B --> D[Template Output]
C --> E[Content Output]
D --> E
E --> F[Complete Website]
- System Prompt defines shared schema
- Template Generator creates structure using schema
- Content Generator fills structure with data
- Knowledge Base persists information between steps
1. Load system prompt
2. Run template generator
3. Save template output
4. Run content generator with template
5. Export complete website
1. Load system prompt
2. Run template generator
3. Export template for manual content
1. Load system prompt
2. Provide existing template
3. Run content generator
4. Export populated content
# In knowledge_base section, add:
custom_fields:
industry_specific:
healthcare:
- certifications
- compliance_training
finance:
- licenses
- regulatory_knowledge# Add new mode:
operating_modes:
expert_mode:
description: "Advanced features for power users"
features:
- custom_css
- api_integrations
- analytics_setup# Add to template generator:
industry_templates:
software_engineering:
sections: ["Technical Skills", "Open Source", "System Design"]
emphasis: "Code quality and scalability"
marketing:
sections: ["Campaigns", "Analytics", "Brand Strategy"]
emphasis: "ROI and growth metrics"# Define new section:
custom_sections:
testimonials_carousel:
structure: "Rotating quotes with attribution"
notion_blocks: ["Quote", "Divider", "Caption"]
mobile_friendly: true# Add tone options:
content_tones:
executive:
style: "Strategic and results-focused"
vocabulary: "Business impact terms"
technical:
style: "Detailed and precise"
vocabulary: "Industry-specific jargon"
creative:
style: "Engaging and narrative"
vocabulary: "Descriptive and emotive"# Achievement formula:
achievement_template: |
[Action Verb] [Specific Task] resulting in [Quantified Outcome]
by [Method/Approach], impacting [Business Metric]
# Example:
"Optimized cloud infrastructure resulting in 40% cost reduction
by implementing auto-scaling, impacting quarterly EBITDA"Use Specific Instructions:
# Good
"Create a hero section with name, title, and one-sentence value proposition"
# Better
"Create a hero section containing:
1. Full name (H1, 32px)
2. Professional title (H2, 24px)
3. Value proposition (max 15 words, outcome-focused)"Provide Examples:
# Include concrete examples
Example value propositions:
- "Scaling startups through data-driven growth strategies"
- "Building secure, compliant healthcare platforms"Structure for Reusability:
# Good structure
skills:
categories:
technical:
frontend: ["React", "TypeScript", "CSS"]
backend: ["Python", "Node.js", "PostgreSQL"]
soft:
leadership: ["Team Management", "Mentoring"]
communication: ["Public Speaking", "Writing"]Version Control:
metadata:
version: "1.2.0"
last_updated: "2024-01-15"
update_notes: "Added industry-specific fields"Graceful Fallbacks:
# In prompts:
"If web search is unavailable, use these default best practices:
- Mobile-first design
- Clear navigation
- Above-fold CTA
- Social proof section"Validation Steps:
# Add validation
"Before proceeding, verify:
□ All required fields have values
□ No placeholder text remains
□ Links are properly formatted
□ Email/phone are valid"Skill-Based Customization:
# Pseudo-logic in prompt
if skills include "AI/ML":
add_sections(["ML Projects", "Research Papers"])
emphasize("Innovation and technical depth")
elif skills include "Sales":
add_sections(["Client Wins", "Revenue Impact"])
emphasize("Relationship building and results")# Template structure
language_variants:
en:
hero_cta: "Let's Connect"
about_header: "About Me"
es:
hero_cta: "Conectemos"
about_header: "Acerca de Mí"# Define variants
template_variants:
variant_a:
section_order: ["Hero", "Skills", "Experience"]
cta_style: "Button"
variant_b:
section_order: ["Hero", "Experience", "Skills"]
cta_style: "Text link"External Data Sources:
# LinkedIn import
"If LinkedIn data is available:
1. Parse experience section
2. Extract skills endorsements
3. Import recommendations
4. Generate summary from about section"Analytics Setup:
# Add tracking
"Include analytics placeholders:
- Google Analytics ID field
- Conversion event markers
- Heatmap integration points"Lazy Loading:
# Structure for performance
"Organize content for lazy loading:
- Above fold: Hero, primary CTA
- First scroll: Key achievements
- Below: Detailed experience
- Footer: Complete contact info"Output Too Generic:
- Add more specific examples
- Include industry context
- Provide target audience details
Inconsistent Formatting:
- Define strict templates
- Include format examples
- Add validation steps
Missing Personalization:
- Ensure knowledge base is complete
- Add fallback questions
- Include discovery phase
Add to any prompt:
# Debug mode
"When debug=true:
1. Show reasoning for each decision
2. List all assumptions made
3. Highlight missing information
4. Provide confidence scores"- Visual Theme Engine: Color schemes and typography
- Component Library: Reusable Notion blocks
- SEO Analyzer: Built-in optimization scoring
- Portfolio Showcase: Work sample templates
- Multi-Platform Export: Beyond Notion
Ways to extend the system:
- Industry-specific templates
- Language translations
- Design variations
- Integration scripts
- Success stories
Ready to customize? Start with small modifications to test changes, then build your perfect system →