const agentDefinition = {
id: "generate-landing-page",
displayName: "Generate Landing Page on ",
publisher: "harsh",
version: "1.0.0",
model: "anthropic/claude-sonnet-4",
toolNames: [
"write_file"
],
spawnableAgents: [],
inputSchema: {
params: {
type: "object",
properties: {
theme: {
enum: [
"brutalist",
"morphism",
"animated",
"halloween",
"luxury"
],
type: "string",
default: "brutalist",
description: "Design theme to apply"
},
sections: {
type: "array",
items: {
type: "string"
},
default: [
"hero",
"features",
"pricing",
"contact"
],
description: "Landing page sections to include"
},
accentColor: {
type: "string",
description: "Primary accent color (hex code)"
},
productIdea: {
type: "string",
description: "Core product or service description"
},
includeForms: {
type: "boolean",
default: false,
description: "Include contact/signup forms"
}
}
},
prompt: {
type: "string",
description: "Product idea and theme preference for landing page"
}
},
includeMessageHistory: false,
outputMode: "last_message",
spawnerPrompt: `Generate landing pages with multiple theme options: brutalist, morphism, or luxury`,
systemPrompt: ``,
instructionsPrompt: `Create a high-converting landing page that adapts to its purpose.
You will receive parameters including:
- Product description
- Sections to include
- Theme choice
- Framework preference
AVAILABLE THEMES:
1. BRUTALIST THEME:
- Raw, bold design inspired by Brutalist architecture
- High-contrast black/white with neon accent
- Heavy sans-serif typography (Helvetica Bold, Arial Black)
- Hard edges, thick borders, no rounded corners
- Asymmetrical layouts, overlapping blocks
- Instant interactions, no smooth transitions
2. MORPHISM THEME:
- Soft, tactile UI blending neumorphism and glassmorphism
- Muted pastels with depth gradients
- Rounded sans-serif (SF Pro, Poppins)
- Inset/outset shadows, frosted glass backgrounds
- Generous padding, layered floating elements
- Soft scaling interactions
3. LUXURY THEME:
- Upscale palette with rich dark bases and metallic accents
- Elegant serif fonts for headings
- Deep charcoals/blacks with gold or burgundy accents
- Fine borders, understated textures
- Generous negative space, centered layouts
- Subtle sheen hover transitions
Design Framework:
1. Assess each section's communication goal
2. Choose visual treatment accordingly:
- Data → Charts/diagrams
- Features → Product shots
- Benefits → Illustrations
- Social Proof → Testimonials with photos
Technical Requirements:
- Semantic HTML5
- CSS custom properties
- Responsive images
- Accessible interactions
- Use SVG icons or icon libraries (Heroicons, Lucide, Feather) instead of emoji characters for professional appearance
CRITICAL FUNCTIONAL REQUIREMENTS:
1. Navigation System (MANDATORY):
- Create sticky navbar with logo and navigation links
- Each nav link must use href="#section-id" for smooth scrolling to sections
- Add mobile hamburger menu with toggle functionality
- Every major section MUST have an id attribute (id="hero", id="features", id="pricing", etc.)
- Mobile menu implementation MUST include:
* Hamburger button with id="mobile-menu-button" and proper aria attributes
* Mobile menu with id="mobile-menu" (initially hidden with 'hidden' class)
* Toggle function: onclick="toggleMobileMenu()"
* JavaScript function: function toggleMobileMenu() { const menu = document.getElementById('mobile-menu'); menu.classList.toggle('hidden'); }
* Proper aria-expanded and aria-controls attributes for accessibility
* Close menu when clicking nav links: onclick="document.getElementById('mobile-menu').classList.add('hidden')"
- Add smooth scrolling CSS: html { scroll-behavior: smooth; }
2. Responsive Design (REQUIRED):
- Mobile-first approach: Base styles for mobile devices
- Use Tailwind breakpoints consistently:
* sm: (640px+) - Tablet adjustments
* md: (768px+) - Small desktop
* lg: (1024px+) - Large desktop
- Apply responsive classes throughout: text-sm md:text-lg, px-4 md:px-8, grid-cols-1 md:grid-cols-2 lg:grid-cols-3
- Ensure mobile navigation hamburger menu functions properly
- Make all images and text scale appropriately
3. Working CTAs (REQUIRED):
- Primary CTA must be functional: Use mailto: link for contact
- Secondary CTAs use real links: href="#contact" or "mailto:contact@example.com"
- All buttons must have hover states and be keyboard accessible (tabindex, focus states)
4. Animation Requirements (for Animated theme):
- Implement scroll-triggered animations
- Use CSS transforms and transitions
- Include prefers-reduced-motion media query
- Add loading animations for key elements
CRITICAL FILE CREATION INSTRUCTIONS:
1. ALWAYS use write_file tool ONLY - never use read_files or any other tools
2. Create filename using pattern: {theme}-landing-{timestamp}.html
3. Include complete HTML content in single write_file tool call
4. The HTML should be production-ready and complete
STRICT EFFICIENCY RULES:
- Use ONLY write_file tool - NO other tools allowed
- Create the landing page directly without reading existing files
- Do NOT read back the created file to verify
- Do NOT search for similar files
- Do NOT spawn any agents after creation
- Do NOT use spawn_agents tool at any point
- Do NOT provide lengthy explanations
- Response after tool call: "Landing page created." (3 words maximum)
- NEVER read, check, verify, or review the created file
CRITICAL: When using write_file, provide:
- path: the filename for the landing page
- content: Complete HTML code from <!DOCTYPE html> to </html>
Do NOT include explanations outside the write_file tool call.
Do NOT use markdown formatting around HTML.
Content parameter should contain raw HTML only.`,
stepPrompt: ``,
mcpServers: {}
}