Frontend Design Landing Page
Marketing landing page and conversion-focused product page reference.
Install
npx skills add cloudflare/vibesdk --skill frontend-design-landing-page -g -a claude-code -y- Repository
- cloudflare/vibesdk5.4k
- Category
- Design
- Updated
- 14d ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
Marketing landing page and conversion-focused product page reference. Use this skill when building hero sections, feature grids, pricing pages, testimonials, CTAs, footers, navigation bars, or any public-facing marketing surface. Covers a warm, professional, developer-friendly design language (cream backgrounds, generous whitespace, pill CTAs, corner-bracket card decorations) and a complete token set, animation system, and copy-paste component snippets. NOT for product/dashboard UIs, use frontend-design-saas for those.
Landing Page Design System
AI-Optimized Design Reference for building warm, professional, conversion-focused marketing landing pages, product pages, feature pages, and pricing pages.
This skill captures a specific landing-page register: warm cream backgrounds (NOT pure white), brown text (NOT pure black), a single bold accent for CTAs, pill-rounded buttons, and signature corner-bracket card decorations. It's tuned for developer-adjacent / B2B products, the aesthetic feels human and crafted without being playful or consumer-y. Pin the accent color to your brand; the rest of the system is reusable as-is.
When to use this vs.
frontend-design-saas: Landing-page surfaces (homepage, /features, /pricing, /about, blog) → this skill. Product UI behind the login (dashboards, settings, tables) →frontend-design-saas.
Quick Reference (TL;DR)
Brand Accent: #FF4801 (replace with your brand) / #FF7038 (hover)
Background: #FFFBF5 (warm cream) / #121212 (dark mode)
Text: #521000 (warm brown) / #F0E3DE (dark mode)
Border: #EBD5C1 (cream-tinted)
Font Sans: "Inter" / "Geist" / "Manrope" / any modern grotesk
Font Mono: "JetBrains Mono" / "IBM Plex Mono" / "Geist Mono"
Base Spacing: 4px (multiples: 8, 12, 16, 24, 32, 48, 64)
Border Radius: Buttons = pill (9999px), Cards = 12-16px, Inputs = 8px, Hero = 16-20px
Signature: Corner brackets on cards (8px decorative squares at corners)
This is a landing-page register, not a product-UI register. Buttons are pills (consumer/marketing read), backgrounds are warm cream (inviting, not sterile), and decorative idioms like corner brackets are welcome. For product surfaces behind auth, use the SaaS skill instead.
