Stats
Actions
Tags
From site-craft-skills
Build and deploy polished landing pages and one-page websites to Vercel from a text description. Use this skill when a user wants any single-page web presence — landing pages, product pages, startup sites, business websites, portfolio sites, event pages, coming soon pages, or promotional pages. Triggers when someone describes a business, product, or service and wants a live website, even if they say "website" or "site." Common triggers: "build me a landing page," "I need a website for my business," "create a page for my product," "make a website for my startup," or any business description (like "I have a piano teaching business" or "I run a photography studio") paired with wanting a web presence. Generates a single self-contained HTML file with distinctive design, deployed to Vercel instantly — no auth required. Do NOT use for multi-page apps, e-commerce, dashboards, docs sites, blogs, or debugging existing code.
How this skill is triggered — by the user, by Claude, or both
Slash command
/site-craft-skills:landing-page-builderThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate a production-quality static landing page from a user's description and deploy it live to Vercel.
Generate a production-quality static landing page from a user's description and deploy it live to Vercel.
Extract from the user's description:
If the description is vague, ask one focused clarifying question. Do not over-interrogate.
Tell the user: "Designing your page…"
Analyze the product, target customers, and tone to recommend one design direction that best fits. Draw from this aesthetic spectrum:
Present your recommendation with:
If the user's prompt already implies a clear aesthetic (e.g., "brutalist page with earth tones" or "minimal black-and-white"), skip the confirmation and execute directly — repeating their own direction back to them wastes a round-trip. Only present and confirm when the aesthetic is genuinely ambiguous. If the user wants alternatives, propose 2–3 different directions to choose from.
Once the user confirms, commit to the direction fully and execute with conviction:
Typography: Choose distinctive, characterful fonts from Google Fonts. Never default to Inter, Roboto, Arial, or system fonts. Consider using a single font family cohesively (e.g., DM Sans + DM Mono, or a display weight paired with its regular weight) — this often produces more polished results than mixing two unrelated display fonts. Use tight letter-spacing on headings (-0.02em to -0.04em) for a modern editorial feel. Every landing page should use different fonts — never converge on the same choices. Watch font weight at hero scale — many serif and display fonts look elegant at body size but become visually heavy at 3rem+. For large hero headings, prefer lighter weights (300–500) or fonts designed with optical sizing (opsz). Test mentally: if the headline feels like it's shouting, dial the weight back.
Color: Commit to a cohesive palette. Define all tokens in a :root block at the top of your <style> tag before writing any other CSS. Every color and spacing value in the stylesheet must reference a token — no hardcoded hex values or magic pixel sizes outside :root.
:root {
/* Color tokens */
--color-bg: ...;
--color-surface: ...;
--color-text: ...;
--color-text-muted: ...;
--color-primary: ...;
--color-accent: ...;
--color-border: ...;
/* Scale tokens */
--radius: ...;
--space: ...; /* base unit; use calc(var(--space) * N) for multiples */
/* Typography tokens */
--font-display: ...;
--font-body: ...;
}
Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Light themes are underused and often more distinctive — warm off-whites, cream, and parchment backgrounds with bold primary colors (deep greens, navy, terracotta) feel fresh and confident. Don't default to dark themes; choose the theme that best serves the brand. A craft cocktail bar might warrant dark and moody, but a freelancer productivity tool might shine on a warm light background with earthy accents. Vary across generations.
Motion: Focus on physical, tactile feedback over flashy effects. Subtle scale(0.97) on button press feels more polished than a glowing box-shadow. One well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Scroll-triggered fade-ins via IntersectionObserver (starting from opacity: 0; transform: translateY(20px)) add life without being distracting. CSS-only solutions preferred. Critical: always include a no-JS fallback — add <noscript><style>.reveal{opacity:1!important;transform:none!important}</style></noscript> so content is visible if JavaScript fails to load. Never leave sections invisible by default.
Layout: Centered, focused layouts with controlled reading widths (max-width on headings and body text) often feel more editorial and intentional than split-column layouts. That said, when the product has a visual demo to show (a terminal, a dashboard, an app screenshot), a two-column hero with the demo alongside the headline is powerful — it tells the product story above the fold. Choose the layout that serves the content, not the one that fills the most space.
Visual texture: Gradient meshes, noise textures (SVG filter overlays at low opacity), geometric patterns, layered transparencies, decorative borders, grain overlays. Background texture should be felt more than seen — opacity: 0.03 to 0.07 is the sweet spot. Avoid empty decorative panels; every visual element should communicate something about the product.
Anti-slop rule: The goal is to avoid any aesthetic that reads as "AI-generated template." This includes:
#0a-#0f range backgrounds with #00D4xx accents) — this is the dark-mode equivalent of purple-on-whitergba(primary, 0.3) blur effects)Each page must feel like a human designer made it for this specific business. Ask yourself: "Would a freelance designer be proud to put this in their portfolio?"
Content realism: The copy and content should feel grounded and specific, not like marketing filler. Include:
Copy length: If the user provides specific copy or indicates a preferred length, use that. Otherwise, apply these defaults — they're calibrated to feel substantive without overwhelming:
| Section | Headline | Supporting text |
|---|---|---|
| Hero | 4–8 words | Subhead: 12–20 words |
| Features | 3–5 words per feature | 1–2 sentences each |
| Testimonials | — | 1–3 sentences per quote |
| Pricing | Plan name + price | 4–6 bullet points per tier |
| CTA | 4–8 words | Subhead: 10–15 words |
| Footer | — | Links + one-liner tagline |
Err on the side of concise. A landing page that breathes converts better than a wall of text.
Icons: Pick one icon library per page based on the design direction:
| Library | Best for | CDN | Usage |
|---|---|---|---|
| Lucide | Minimal, editorial, refined | <script src="https://unpkg.com/lucide@latest"></script> | <i data-lucide="icon-name"></i> + lucide.createIcons() |
| Phosphor Icons | Playful, bold, expressive | <script src="https://cdn.jsdelivr.net/npm/@phosphor-icons/[email protected]"></script> | <i class="ph ph-icon-name"></i> (weights: ph-thin, ph-light, ph, ph-bold, ph-fill, ph-duotone) |
| Tabler Icons | Feature-heavy, all-rounder (5,400+ icons) | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css"> | <i class="ti ti-icon-name"></i> |
Match the library to the page's aesthetic. Phosphor's weight variants are especially useful for matching typographic weight. Don't litter the page with icons — use them intentionally for feature lists, navigation, or CTAs. A page with 3 well-placed icons beats one with 20 generic ones.
Tell the user: "Building your page…"
Generate a single index.html file. All CSS and JS inline. The file must be self-contained and deployable with no build step. Keep the total file under 200KB — avoid base64-encoded images or large inline SVGs; use external URLs or CSS-generated textures instead.
Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="...">
<title>...</title>
<!-- SEO -->
<meta name="description" content="...">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=...&display=swap" rel="stylesheet">
<style>/* all CSS here */</style>
</head>
<body>
<!-- semantic HTML -->
<script>/* animations, interactions */</script>
</body>
</html>
Requirements:
<link> with font-display: swap<img> tags need explicit width/height and loading="lazy" below foldprefers-reduced-motion<header>, <main>, <section>, <footer>, <nav>aria-label on icon buttons, :focus-visible states, skip linkog:title, og:description, og:image, og:type) and Twitter Card (twitter:card, twitter:title, twitter:description) meta tags. Landing pages are shared — these ensure proper previews on social media and messaging apps.<script type="application/ld+json"> block in <head> with structured data matching the page content. Use Organization for company/startup pages, Product for product launches, LocalBusiness for local services, or another appropriate schema.org type. Template:
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Acme Co",
"description": "Short description of the business",
"url": ""
}
url empty — it's filled post-deploy. Add relevant properties for the chosen type (e.g., priceRange and address for LocalBusiness, offers for Product).references/web-design-guidelines.mdWrite the file to a temporary project directory.
Before deploying, do a quick sanity check on the generated file:
wc -c <project-directory>/index.html
Confirm:
family= parameter matches a real font)If any check fails, fix inline before proceeding.
Deploy immediately after generating the HTML.
Locate the deploy script once — it lives next to this skill:
DEPLOY_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]:-$0}")/.." 2>/dev/null && pwd || echo "skills")"
If that fails, fall back to find . -path "*/vercel-deploy/scripts/deploy.sh" -type f | head -1.
Option A — Vercel (default, no auth required):
bash "$DEPLOY_ROOT/vercel-deploy/scripts/deploy.sh" <project-directory>
Option B — AWS S3 + CloudFront (when user requests AWS hosting):
bash "$DEPLOY_ROOT/aws-deploy/scripts/deploy.sh" <project-directory> [--region us-east-1]
Requires AWS CLI and credentials. First deploy takes 3-5 minutes; subsequent deploys reuse the same stack.
Option C — Google Cloud / Firebase (when user requests GCP hosting):
bash "$DEPLOY_ROOT/gcp-deploy/scripts/deploy.sh" <project-directory> [project-id]
Requires Firebase CLI and local authentication. Firebase Hosting provides a free tier, SSL, and a global CDN.
Present results:
Your landing page is live!
Preview URL: https://...vercel.app
Claim URL: https://vercel.com/claim-deployment?code=...
Visit the Preview URL to see your page.
To transfer this deployment to your Vercel account, visit the Claim URL.
If deployment fails due to network restrictions, tell the user:
Deployment failed due to network restrictions. To fix this:
1. Go to https://claude.ai/settings/capabilities
2. Add *.vercel.com to the allowed domains
3. Try again
npx claudepluginhub cyranob/site-craft-skills --plugin gcp-deployGuides phased design of landing pages and marketing websites: discovery questions on goals/audience/brand, written brief, then layouts for conversion. Activates on 'design a landing page' requests.
Generates a single-file HTML landing page from a brief using Tailwind CSS CDN. Includes responsive design, dark mode, hero with CTA, features, testimonials, FAQ, footer, and OG meta tags.
Designs and builds high-converting landing pages for product launches with hero sections, SEO, waitlists, urgency mechanics, and developer-first patterns. Useful for launch, feature, signup, or marketing pages.