# Frontend Design Landing Page

Marketing landing page and conversion-focused product page reference.

- Repository: https://github.com/cloudflare/vibesdk (5447 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-22
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add cloudflare/vibesdk --skill frontend-design-landing-page -g -a claude-code -y`
Codex: `npx skills add cloudflare/vibesdk --skill frontend-design-landing-page -g -a codex -y`
Cursor: `npx skills add cloudflare/vibesdk --skill frontend-design-landing-page -g -a cursor -y`
Gemini CLI: `npx skills add cloudflare/vibesdk --skill frontend-design-landing-page -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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.

---

## 1. Brand Foundation

### Design Philosophy

The rest: https://github.com/cloudflare/vibesdk/blob/HEAD/worker/agents/think/skills/frontend-design-landing-page/SKILL.md