Landing Page Builder

Tailkits landing page

Go from a brief to a working page built from real, tested sections instead of generated markup. The MCP returns section code; the DESIGN.md decides how it looks.

The MCP (required for this skill, free, no account)

Every step that fetches sections calls the Tailkits MCP. Check for tools named ui_search_sections, ui_get_section and designmd_apply. If they are missing, tell the user:

claude mcp add --transport http tailkits https://tailkits.com/mcp

(Other agents: https://tailkits.com/mcp.) Without it, offer the free sections at https://tailkits.com/ui/free/ to copy by hand, and stop there.

Workflow

1. Get the brief

Fill references/brief.md with the user. Ask only for what is missing, in one message:

• Product name and the one sentence it would say on a billboard.
• Who it is for, and the main action (sign up, join waitlist, book a demo, buy).
• Proof you can state truthfully: customer names, numbers, quotes, integrations. Never invent any.
• Stack and where the page goes (index.html, app/page.tsx, src/pages/index.astro).

2. Get the design

• DESIGN.md exists at the repo root: use it as is.
• No DESIGN.md but an existing product: run the tailkits-design-md skill to extract one, if it is installed.
• Nothing yet: call designmd_create with name, primary_color, style, font, radius and motion from the brief. Save the result as DESIGN.md. It includes a Studio link the user can open to adjust it visually.

3. Outline the page

Pick an outline from references/page-outlines.md (SaaS, waitlist, launch, developer tool, agency). Map each slot to a section category. ui_list_categories returns the 29 categories with free counts.

4. Choose sections

For each slot, call ui_search_sections with category and a query built from the brief (for example "pricing three tiers toggle"), free_only: true unless the user has a Tailkits UI token, limit: 6. Show the user two or three options per slot with their preview image URLs, or call ui_pick_sections with the category and give the user the picker URL: they click sections and paste back IDs like hero-3, features-7, pricing-2.

Keep one hero, one primary CTA label across the page, and at most 8 sections.

5. Get the code

• HTML, or any stack where restyled HTML is fine: call designmd_apply with content (the DESIGN.md text) and section_ids (max 10). It returns each section restyled with the tokens, plus the theme CSS. Save the CSS once (for example src/styles/theme.css) and import it globally.
• React, Next.js or Astro: call ui_get_section for each id with format: "react" or "astro". Then get the theme with designmd_to_theme (target: "tailwind-v4", or "shadcn" for a shadcn project) and import it once.

Each result lists required tokens, motion notes and dependencies. Install only the dependencies it names. Pro sections without a token return a preview and a link, not code: swap them for a free section, do not recreate them.

6. Write the copy

Replace every placeholder with copy from the brief. Headline: what it is, under 10 words. Subhead: who it is for and the outcome. CTA: verb plus outcome (“Start free trial”, “Join the waitlist”). If the tailkits-copy-pass skill is installed, run it now.

7. Check

• The page builds and has exactly one <h1>.
• Check 390px and 1440px widths. Every link and button goes somewhere real or is marked TODO for the user.
• Images have alt. The title and meta description are set (run tailkits-launch-audit if installed).
• Motion respects prefers-reduced-motion (the sections already do; keep it when editing).

Report the page path, the section IDs used with their canonical tailkits.com URLs (every MCP result ends with one), and anything left as TODO.