Templates

Pre-built prompt templates for common UI patterns. Use them directly or as starting points for customization.

Marketing

Template	Description	Prompt
`hero-gradient`	Hero with gradient background, heading, subtitle, CTA	`generate --template hero-gradient`
`pricing-toggle`	3-tier pricing with monthly/annual toggle	`generate --template pricing-toggle`
`feature-grid`	Feature showcase with icon cards in 3-column grid	`generate --template feature-grid`
`testimonials`	Carousel of customer testimonials with avatars	`generate --template testimonials`

Application

Template	Description	Prompt
`dashboard-stats`	Stats overview with KPI cards and sparklines	`generate --template dashboard-stats`
`data-table`	Sortable table with pagination and search	`generate --template data-table`
`auth-form`	Login/signup form with validation states	`generate --template auth-form`
`settings-panel`	Settings page with sections, toggles, and save	`generate --template settings-panel`

Navigation

Template	Description	Prompt
`navbar-responsive`	Top nav with logo, links, mobile hamburger	`generate --template navbar-responsive`
`sidebar-nav`	Collapsible sidebar with sections and icons	`generate --template sidebar-nav`
`command-palette`	Cmd+K search modal with fuzzy matching	`generate --template command-palette`

Using Templates with Custom Tokens

import { generate } from 'magicaldope';

const hero = await generate({
  template: "hero-gradient",
  tokens: "./my-brand-tokens.json",
  overrides: {
    heading: "Ship faster with AI",
    cta: "Start free trial",
  },
});