/design-template

name: design-template
description: Generate a production-ready web page from a curated template category. Pick a category (landing-page, dashboard, pricing, auth, blog, ecommerce, portfolio, docs, saas, or onboarding) and get a fully-built, customized HTML/CSS template — brand colors, copy, and responsive layout included.
allowed-tools: ["Read", "Write", "Edit", "Bash", "Glob", "Grep", "mcp__*"]
arguments: "<category> [brand-color] [--style <style>] [--dark]"

/design-template $ARGUMENTS

Gallery Mode (No Arguments)

If `$ARGUMENTS` is empty, or the user has not specified a template category, or the message contains only discovery phrases ("show me templates", "what templates are available", "browse templates", "template list", "available templates", "what templates", "show templates") — output the following gallery and stop. Do not proceed to category generation.

📐 Design Template Gallery — 10 categories available

landing-page    Hero section, feature grid, social proof, CTA
                Best for: SaaS launches, product pages, waitlists
                Sections: Hero · Features · Testimonials · Pricing · CTA
                Try: /design-template landing-page --style minimal

dashboard       KPI cards, data tables, charts, sidebar nav
                Best for: Admin tools, analytics, monitoring dashboards
                Sections: Sidebar · Header · KPI Cards · Chart Area · Table
                Try: /design-template dashboard --style dark-tech

pricing         Pricing tiers, feature comparison table, FAQ, CTA
                Best for: SaaS plans, subscription products
                Sections: Hero · Tiers · Feature Table · FAQ · CTA
                Try: /design-template pricing --style corporate

auth            Sign-in, sign-up, forgot password, OTP flows
                Best for: Login screens, onboarding entry points
                Sections: Form · Social Auth · Error States · Recovery Flow
                Try: /design-template auth --style minimal

blog            Article layout, category nav, author bio, related posts
                Best for: Content sites, documentation blogs, newsletters
                Sections: Header · Article · Sidebar · Author · Related
                Try: /design-template blog --style bold

ecommerce       Product grid, filters, product detail, cart, checkout
                Best for: Shops, marketplaces, product catalogs
                Sections: Grid · Filters · Product Card · Cart · Checkout
                Try: /design-template ecommerce --style playful

portfolio       Work grid, case study, about, contact
                Best for: Designer/developer portfolios, agency sites
                Sections: Hero · Work Grid · Case Study · About · Contact
                Try: /design-template portfolio --style minimal

docs            Navigation sidebar, content area, search, code blocks
                Best for: Developer docs, API references, knowledge bases
                Sections: Sidebar Nav · Content · Search · Code Block · Footer
                Try: /design-template docs --style corporate

saas            Feature showcase, demo CTA, integrations, testimonials
                Best for: B2B SaaS marketing pages, product-led growth
                Sections: Hero · Features · Integrations · Social Proof · CTA
                Try: /design-template saas --style bold

onboarding      Welcome screen, progress steps, empty state, success
                Best for: New user flows, setup wizards, activation sequences
                Sections: Welcome · Steps · Progress · Empty State · Success
                Try: /design-template onboarding --style minimal

─────────────────────────────────────────────────────────────────────
Usage:  /design-template <category>
        /design-template <category> --style minimal|bold|corporate|playful|dark-tech
        /design-template <category> brand="Name" colors="#hex1,#hex2"

After outputting the gallery, ask: "Which category would you like to generate? You can also specify a style (e.g., `/design-template landing-page --style bold`) or brand colors."

You are activating the **Design Template Gallery**: UI Designer + Content Designer + Design System Lead.

---

Template Categories

| Category | What you get | Key sections | |----------|-------------|-------------| | `landing-page` | Marketing homepage | Hero, Features (3), Social Proof, CTA, Footer | | `dashboard` | Admin/analytics dashboard | Sidebar nav, KPI cards, Chart area, Data table | | `pricing` | Pricing page with toggle | Plan cards (3 tiers), Feature comparison, FAQ | | `auth` | Login + signup screens | Form, OAuth buttons, validation states | | `blog` | Blog/content layout | Article grid, Featured post, Category nav, Tags | | `ecommerce` | Product listing + detail | Product grid, Filters, Product detail, Cart | | `portfolio` | Personal/agency portfolio | Hero, Case studies grid, Skills, Contact | | `docs` | Documentation site | Sidebar nav, Article, Code blocks, Search | | `saas` | SaaS app page | Hero + demo, Integrations, Testimonials, Pricing CTA | | `onboarding` | User onboarding flow | Step progress, Task cards, Completion state |

---

Process

1. Parse the Request

Extract from `$ARGUMENTS`:

• **Category**: one of the 10 above (required)
• **Brand color**: hex code (e.g., `#6366f1`) — defaults to `#2563eb`
• **Style modifier** (`--style <name>`): minimal | bold | corporate | playful | dark-tech
• **Dark mode** (`--dark`): if present, generate dark-first design
• **Product name**: if mentioned in the task description

If category is unrecognized or missing, ask the user to choose from the list above.

---

2. Set the Design Direction

Before building, establish the design spec:

Template: [category]
Brand color: [hex]
Style: [minimal | bold | corporate | playful | dark-tech]
Background: [light | dark]
Typography: [font family choice]
Spacing: [compact | comfortable | spacious]

**Style guide:**

• `minimal