Communitygithub.com

Ayush-Mahadik/open-design-templates

> Generates a high-conversion single-page startup landing: hero, features, social proof, pricing, and CTA. The goal is to communicate value in 30 seconds and get the email.

Was ist open-design-templates?

open-design-templates is a Claude Code agent skill that > Generates a high-conversion single-page startup landing: hero, features, social proof, pricing, and CTA. The goal is to communicate value in 30 seconds and get the email.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Ayush-Mahadik/open-design-templates/tree/HEAD/skills/startup-landing

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Startup Landing Skill

Category: SaaS / Startup Generates a high-conversion single-page startup landing: hero, features, social proof, pricing, and CTA. The goal is to communicate value in 30 seconds and get the email.

Metadata

Name: startup-landing Description: Single-page startup landing page: hero, features, social proof, pricing, and CTA. Trigger Keywords: "startup landing", "marketing page", "product launch", "SaaS landing", "landing page"


Inputs & Parameters

ParameterTypeRequiredDefault
product_namestring✓—
taglinestring✓—
descriptionstring✓—
has_pricingboolean✓true
has_testimonialsboolean—true
proof_countinteger—4
pricing_tiersarray—[3 default tiers]
primary_colorstring—DESIGN.md accent

Pricing tier:

{ name: string; price: string; period: string; features: string[]; cta: string; highlighted?: boolean }

Required Sections (in order)

  1. Navigation — Logo + nav links + "Get Started" CTA button
  2. Hero — Product name, tagline, description, dual CTAs (primary: "Get Started Free", secondary: "See Demo"), optional product screenshot/mockup
  3. Social Proof Strip — Logo row (greyscale, max 6)
  4. Features — 3-column grid, icon + title + description each
  5. How It Works — 3-step horizontal flow with numbered steps
  6. Pricing — 3 tier cards (Starter / Pro / Enterprise)
  7. Testimonials — 2-3 quotes with name, role, company, avatar
  8. CTA Band — Dark section: headline + email input + button
  9. Footer — Links + copyright

Design Rules

  • Mobile-first responsive
  • All CTAs must have working href or form action
  • Pricing cards: highlighted card has distinct border + shadow
  • Testimonial avatars: use https://i.pravatar.cc/60?img=[n] for consistent placeholders
  • No external JS
  • All CSS inline in <style> block
  • No invented colors — use DESIGN.md tokens only

Output

Single file: index.html (self-contained)

Self-Check

  • No lorem ipsum anywhere
  • At least 4 features listed
  • Pricing tiers are consistent in height
  • All CTAs are clearly labeled and styled
  • Mobile: collapses to single column
  • Email input in CTA band has type="email" and required

Verwandte Skills