SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsmarketing-landing-page

marketing-landing-page

Marketing & growth

View repository

Updated 10-15 21:02

About this skill

Landing Page

Overview

A specialized skill for designing high-conversion one-page landings based on shadcn/ui. It automatically selects a design system suited to user intent through a Socratic theme interview, and designs and generates a conversion-optimized landing page from the hero to the final CTA.

Supported areas:

  • Full landing page design based on shadcn/ui (hero to CTA)
  • Next.js 15 + Tailwind CSS v4 + shadcn/ui stack
  • Simultaneous Light/Dark mode output based on OKLCH color tokens
  • Framer Motion interaction presets (fade-up, scroll reveal, parallax)
  • Landings for product/service launches, events, and lead collection

Trigger keywords

landing page, one-page, landing page, sales page, conversion rate, CTA, hero section, landing, shadcn landing, shadcn ui

Practical landing patterns (Korean market)

1. Above the Fold 3-second principle

Within 3 seconds after the page loads, the user must get the following 3 pieces of information:

[1] 이게 무엇인가? (1초)
[2] 나에게 좋은가? (1초)
[3] 어떻게 행동? (1초)

Place everything in the area visible without scrolling (Above the Fold).

2. 4 Hero types

Type Application Example
Promise type Clear result "English conversation in 30 days"
Question type Evoke pain "Why do we ~?"
Statistics/social proof Appeal to trust "Chosen by 10,000 people"
Image/video Visual impact Rich visuals

Decide based on persona and product type.

3. 5 CTA types

CTA Application Example
Immediate type Most safe "Start now"
Benefit-emphasis type Attractive price "At 30% off"
Deficiency-relief type Pain solution "Apply to my skin"
Trial-promise type Subscription/SaaS "30 days free"
Limited-quantity type Scarcity "Last 12"

Place in 3 locations: bottom, middle, and top of the page, separating primary and secondary.

4. Small experiments that increase conversion rate (growth)

Accumulating small A/B tests is more effective than a big renewal.

Variable Recommended experiment
Hero headline Promise vs question vs statistics
CTA 색 Brand color vs complementary color
CTA position Right vs center vs bottom
Price display Monthly vs annual priority
Social proof placement Top vs next to price
Number of form fields 3개 vs 5개 vs 7개

One experiment per week + record results.

5. Five-step data analysis for high-converting pages

[1] 진입 채널 분리 — 광고·검색·다이렉트별 전환율
[2] 이탈 지점 추적 — 스크롤 깊이·체류 시간
[3] CTA 클릭률 — 각 CTA 위치별 측정
[4] Form 전환율 — 각 필드별 이탈 분석
[5] 후속 행동 — 클릭 후 행동 (구매·이탈·다음 페이지)

Measure both quantitative and qualitative with tools like GA4 + Hotjar.

Workflow

Step 0: shadcn theme interview (HARD)

Must be performed immediately before producing code and design specs.

Q1: 베이스 팔레트 선택
- Neutral (기본)
- Zinc
- Stone
- Slate

Q2: 컬러 모드 선택
- System+Toggle (기본)
- Light
- Dark
- Auto

Q3: 모서리 반경 선택
- Balanced 0.5rem (기본)
- Sharp
- Soft
- Pill

Q4: 효과 선택 (복수)
- Fade-up
- Scroll Reveal
- Parallax
- Chart

When selecting a Chart, choose the Q5 chart library (Recharts/Chart.js/Tremor/ECharts)

Step 1: Identify purpose and target

  • Conversion goal: purchase / sign-up / download / inquiry / event registration
  • Target readers (pain points, needs, objections)
  • One core value proposition for the product/service

Step 2: Gather brand context

  • Brand voice anchors (3-5 adjectives)
  • Main colors (primary + accent)
  • Target reader level (elementary/high school/college/expert)
  • CTA strategy (1? 2? 3?)
  • Tone examples ("I like this feel" / "I don't like this")

Step 3: Section composition (shadcn block mapping)

[Hero]         → shadcn Hero 블록 + 히어로 이미지/Video
[Problem]      → Grid of Card (고통점 3~5)
[Solution]     → Feature list + Lucide 아이콘
[Social Proof] → Testimonial Card + Avatar + StarRating
[Features]     → Tabs or Accordion (Before/After)
[Pricing]      → shadcn Pricing 블록 (Most Popular 강조)
[FAQ]          → Accordion
[Final CTA]    → Button (size=lg) + Badge("14일 무료")

Step 4: Conversion rate optimization checklist

  • Does the headline convey value within 10 seconds?
  • Is the CTA button visible without scrolling? (Above the Fold)
  • Is it visually scannable without blocks of text?
  • Is the CTA clearly visible on mobile too?
  • Are the reviews specific? (Include numbers)
  • Does it preemptively address objections (FAQ)?

Step 5: Write copy

  • Write all copy (by section)
  • Provide 5 headline candidates
  • Provide 3 CTA button text candidates

Step 6: Generate code (shadcn stack)

Deliverable composition:

  1. components.json — shadcn CLI initialization setup
  2. app/globals.css — OKLCH CSS variables :root + .dark
  3. tailwind.config.ts — v4 token mapping
  4. app/page.tsx — Section assembly
  5. components/sections/*.tsx — Per-section components
  6. components/ui/* — List of shadcn components used
  7. (Optional) components/motion/*.tsx — Framer Motion wrapper
  8. README-setup.md — Installation command

Usage example

  • "Build a SaaS product landing page"
  • "Create an event registration landing page"
  • "Plan a sales page to drive free trials"
  • "Write copy for an app download landing page"
  • "Design a B2B service lead capture landing page"
  • "Create a clean one-page site in shadcn style"

Output format

Copy JSON structure

{
  "page_type": "landing",
  "theme": {
    "system": "shadcn/ui",
    "base": "neutral",
    "mode": "system+toggle",
    "radius": "0.5rem",
    "effects": ["fade-up", "scroll-reveal"],
    "chart_lib": null
  },
  "sections": [
    {
      "id": "hero",
      "shadcn_block": "hero-01",
      "headline": "헤드라인",
      "subheadline": "서브헤드라인",
      "cta_primary": "CTA 텍스트",
      "cta_secondary": null,
      "visual_direction": "제품 사용 장면 이미지"
    },
    {
      "id": "problem",
      "shadcn_block": "feature-grid",
      "headline": "고통점 섹션 제목",
      "body": "고통점 설명",
      "items": ["고통점1", "고통점2", "고통점3"]
    }
  ],
  "metadata": {
    "tone_profile": "신뢰+권위",
    "reading_level": "고교",
    "word_count": 0,
    "cta_count": 0
  }
}

Code deliverables

  • components.json — shadcn setup
  • app/globals.css — CSS variables
  • app/page.tsx — Main page
  • components/sections/*.tsx — Section components
  • README-setup.md — Installation guide

Notes

Core rule: copy integrity

Do not modify copy text during the design/development stage.

  • Implement the original copy as-is
  • If text changes are needed, send it back to the copywriting stage
  • Only line breaks, emphasis, and order changes are allowed (content changes prohibited)

Caution with AI-generated content

Use AI-generated landing page copy only after fact-checking. Empirical claims such as user counts, satisfaction levels, and award history must always be verified against data.

Troubleshooting

  • Platform specification changes: The UI and features of no-code tools (Webflow, Framer, Wix) change frequently. Use the implementation direction for reference only.
  • shadcn version conflicts: Output based on the latest shadcn/ui CLI (shadcn@latest). For older-version projects, pnpm dlx shadcn@latest initmigrate with this and then apply.
  • No brand guide provided: Apply the shadcn base palette as-is, show the result, and if the user requests refinement, add only the --primary override.
  • Image generation failure: This skill provides text copy and design direction. For actual images, use Higgsfield MCP(Soul, cinematic images, and characters in a single unified call) directly, or use Unsplash or Pexels.
  • A/B testing needed: The optimal version of AI-generated landing page copy can only be confirmed through actual traffic testing. Run A/B tests focused on the headline and CTA.

Related skills

  • moai-seller:commerce-product-detail — Product detail page (e-commerce)
  • moai-marketer:content-sns-content — Social media content
  • moai-marketer:content-copywriting — Standalone ad copywriting
  • moai-marketer:content-blog — SEO blog posting

When not to use this skill

  • Blog posting: Use the moai-marketer:content-blog skill
  • SNS posting: Use the moai-marketer:content-sns-content skill
  • Email newsletter: Use the moai-marketer:content-newsletter skill
  • Product detail page: Use the moai-seller:commerce-product-detail skill
  • Data dashboard: Use the moai-analyst:data-visualizer skill
  • Multi-page website: Requires a separate web agent

Korean copy quality gate (required)

Korean text produced by this skill passes a mandatory gate before distribution:

  1. moai-coworker:ai-slop-reviewer — First-pass general AI slop review (banned words, structural patterns, rhythm)
  2. moai-writer:korean-humanize — Second-pass precise Korean editing (40+ pattern SSOT, meaning unchanged)

The two gates catch dash contrast headlines, particles, noun-ending fragments, and the "from A to B" transition formula S1 pattern. Outputs are not distributed immediately without passing the gate.

References

File Load condition
references/landing-page/shadcn-theme-interview.md During the Stage 0 shadcn theme interview — AskUserQuestion interview design and implementation contract details
references/landing-page/brand-context-template.md During Stage 2 brand context collection — brand voice, color, and tone collection template
references/landing-page/design-principles.md When producing code/design specs — Design Spec output contract (YAML) format
references/landing-page/copywriting-rules.md When writing Step 5 copy — AI copy anti-pattern (HARD FAIL) rules
references/landing-page/ab-testing-guide.md When designing conversion rate A/B tests — priority test items and number of candidates
references/landing-page/evaluation-checklist.md When reviewing deliverables — landing evaluation checklist such as copy integrity