landing-page

Landing Page

Overview

A specialized skill for designing high-conversion one-page landings based on shadcn/ui. It automatically selects a design system matching the user's 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 shadcn/ui-based landing page design (hero-CTA)
Next.js 15 + Tailwind CSS v4 + shadcn/ui stack
Simultaneous generation of Light/Dark modes based on OKLCH color tokens
Framer Motion interaction presets (fade-up, scroll reveal, parallax)
Landing for product/service launch, 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 obtain the following 3 pieces of information:

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

Place all of them 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 according to persona and product type.

3. 5 CTA types

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

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

4. Small experiments to 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 reader (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? (including 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:

components.json — shadcn CLI initialization settings
app/globals.css — OKLCH CSS variables :root + .dark
tailwind.config.ts — v4 token mapping
app/page.tsx — Section assembly
components/sections/*.tsx — Per-section components
components/ui/* — List of shadcn components used
(Optional) components/motion/*.tsx — Framer Motion wrapper
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 settings
app/globals.css — CSS variables
app/page.tsx — Main page
components/sections/*.tsx — Section components
README-setup.md — Installation guide

Precautions

Core rule: Copy integrity

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

Implement the original copy as-is
If text changes are needed, send it back to the copywriting phase
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 numbers, satisfaction, and award history must 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 conflict: Output based on the latest shadcn/ui CLI (shadcn@latest). For older-version projects, pnpm dlx shadcn@latest initmigrate with 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, character single integration) direct calls or Unsplash/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 focusing on the headline and CTA.

Related skills

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

When not to use this skill

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