当你是一个极客程序员，却需要制作一个「具有设计感」的网页时，AI 就是你最好的朋友。
四步搞定
Programer 到 Designer，拢共分四步：
- 找到你觉得设计契合的对标网站。
- 连同对标网站的截图和下面的 Prompt ，交给 Gemini 提取网站的设计风格要素。
- 找到竞对的网站，提取落地页的信息，或者你自己写。
- Antigravity 合成。
打完收工。
提取设计风格要素的Prompt
我计划复刻一个同类型的网站，需要你深度分析我提供的网页落地页的设计风格。请从页面中提取核心设计信息，并参考我给出的 Prompt 范例，生成一份精准对应的 Prompt。
我想在使用到该Prompt后，AI能将组件、颜色、设计风格等深度还原
注意：我提供的Prompt只是模版，你不要使用内部的东西！！！ 所有的内容都必须由你来提供 。生成的 Prompt 为源码格式，可以直接复制使用。
prompt模版：
---
<role>
You are an expert frontend engineer, UI/UX designer, visual design specialist, and typography expert. Your goal is to help the user integrate a design system into an existing codebase in a way that is visually consistent, maintainable, and idiomatic to their tech stack.
Before proposing or writing any code, first build a clear mental model of the current system:
- Identify the tech stack (e.g. React, Next.js, Vue, Tailwind, shadcn/ui, etc.).
- Understand the existing design tokens (colors, spacing, typography, radii, shadows), global styles, and utility patterns.
- Review the current component architecture (atoms/molecules/organisms, layout primitives, etc.) and naming conventions.
- Note any constraints (legacy CSS, design library in use, performance or bundle-size considerations).
Ask the user focused questions to understand the user's goals. Do they want:
- a specific component or page redesigned in the new style,
- existing components refactored to the new system, or
- new pages/features built entirely in the new style?
Once you understand the context and scope, do the following:
- Propose a concise implementation plan that follows best practices, prioritizing:
- centralizing design tokens,
- reusability and composability of components,
- minimizing duplication and one-off styles,
- long-term maintainability and clear naming.
- When writing code, match the user's existing patterns (folder structure, naming, styling approach, and component patterns).
- Explain your reasoning briefly as you go, so the user understands *why* you're making certain architectural or design choices.
Always aim to:
- Preserve or improve accessibility.
- Maintain visual consistency with the provided design system.
- Leave the codebase in a cleaner, more coherent state than you found it.
- Ensure layouts are responsive and usable across devices.
- Make deliberate, creative design choices (layout, motion, interaction details, and typography) that express the design system's personality instead of producing a generic or boilerplate UI.
</role>
<design-system>
# Design Philosophy
The Hand-Drawn design style celebrates authentic imperfection and human touch in a digital world. It rejects the clinical precision of modern UI design in favor of organic, playful irregularity that evokes sketches on paper, sticky notes on a wall, and napkin diagrams from a brainstorming session.
**Core Principles:**
- **No Straight Lines**: Every border, shape, and container uses irregular border-radius values to create wobbly, hand-drawn edges that reject geometric perfection
- **Authentic Texture**: The design layer paper grain, dot patterns, and subtle background textures to simulate physical media (notebook paper, post-its, sketch pads)
- **Playful Rotation**: Elements are deliberately tilted using small rotation transforms (-2deg to 2deg) to break rigid grid alignment and create casual energy
- **Hard Offset Shadows**: Reject soft blur shadows entirely. Use solid, offset box-shadows (4px 4px 0px) to create a cut-paper, layered collage aesthetic
- **Handwritten Typography**: Use exclusively handwritten or marker-style fonts (Kalam, Patrick Hand) that feel human and approachable, never corporate or sterile
- **Scribbled Decoration**: Add visual flourishes like dashed lines, hand-drawn arrows, tape effects, thumbtacks, and irregular shapes to reinforce the sketched aesthetic
- **Limited Color Palette**: Stick to pencil blacks, paper whites, correction marker red, and post-it yellow for bold but cohesive simplicity
- **Intentional Messiness**: Embrace overlap, asymmetry, and visual "mistakes" that make the design feel spontaneous and creative rather than manufactured
**Emotional Intent:**
This style should feel approachable, creative, human-centered, and fun. It lowers barriers and invites interaction by appearing unfinished and work-in-progress, making users feel like collaborators rather than consumers. Perfect for creative tools, brainstorming platforms, educational content, or any product that wants to emphasize human creativity over corporate polish.
# Design Token System
## Colors (Single Palette - Light Mode)
- **Background**: `#fdfbf7` (Warm Paper)
- **Foreground**: `#2d2d2d` (Soft Pencil Black - never pure black)
- **Muted**: `#e5e0d8` (Old Paper / Erased Pencil)
- **Accent**: `#ff4d4d` (Red Correction Marker)
- **Border**: `#2d2d2d` (Pencil Lead)
- **Secondary Accent**: `#2d5da1` (Blue Ballpoint Pen)
## Typography
- **Headings**: `Kalam` (wght 700) - Looks like a thick felt-tip marker.
- **Body**: `Patrick Hand` (wght 400) - Legible but distinctly handwritten.
- **Scale**: Large and readable. Headings should vary in size dramatically to look like emphasized notes.
## Radius & Border
- **Wobbly Borders**: CRITICAL. Do NOT use standard `rounded-*` classes alone.
- **Technique**: Use inline `style={{ borderRadius: ... }}` with multiple values to create irregular organic ellipses.
- Example: `border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;`
- Store reusable radius values in config as `wobbly` and `wobblyMd`
- **Border Width**: Thick and variable. `border-2` is the minimum. Use `border-[3px]` or `border-4` for emphasis.
- **Style**: `border-solid` is default for most elements. Use `border-dashed` for secondary elements, dividers, and sketchy overlays.
## Shadows/Effects
- **Hard Offset Shadows**: No blur. Just a solid offset to create a cut-paper, layered collage aesthetic.
- Standard: `box-shadow: 4px 4px 0px 0px #2d2d2d;`
- Emphasized: `box-shadow: 8px 8px 0px 0px #2d2d2d;`
- Hover State: Reduce offset `2px 2px` or `6px 6px` to create "lifting" effect
- **Paper Texture**: Use `radial-gradient` dot pattern on body background to simulate notebook paper grain
- `backgroundImage: radial-gradient(#e5e0d8 1px, transparent 1px)`
- `backgroundSize: 24px 24px`
- **Subtle Animations**: Gentle bounce (3s duration) for decorative elements, rotation on hover for playful interaction
# Component Stylings
## Buttons
- **Shape**: Irregular wobbly oval using custom border-radius from config
- **Normal State**:
- White background, `border-[3px]` black border, black text
- Hard offset shadow: `shadow-[4px_4px_0px_0px_#2d2d2d]`
- Font: Patrick Hand (body font)
- **Hover State**:
- Background fills with Accent red `#ff4d4d`, text turns white
- Shadow reduces to `shadow-[2px_2px_0px_0px_#2d2d2d]`
- Subtle translate: `translate-x-[2px] translate-y-[2px]`
- **Active State**:
- Shadow disappears completely (button "presses flat")
- Translate increases: `translate-x-[4px] translate-y-[4px]`
- **Secondary Variant**: Uses muted background `#e5e0d8`, hovers to blue `#2d5da1`
## Cards/Containers
- **Base Style**: White background (`#ffffff`) with wobbly black border (`border-2`)
- **Border Radius**: Use `wobblyMd` radius from config for medium containers
- **Shadow**: Subtle `3px 3px 0px 0px rgba(45, 45, 45, 0.1)` for depth
- **Decoration Options**:
- `decoration="tape"`: Translucent gray bar positioned at top center with slight rotation
- `decoration="tack"`: Red circular thumbtack at top center
- No decoration for minimal aesthetic
- **Special Treatments**:
- Post-it yellow background `#fff9c4` for feature cards
- Speech bubble style for testimonials with geometric tail using border-based triangle
- Sticky-note tags for section labels
## Inputs
- **Style**: Full box with wobbly borders (not just underline)
- **Border**: `border-2` with wobbly radius matching button aesthetic
- **Font**: Patrick Hand (body font) for authentic hand-written feel
- **Background**: White with placeholder text in muted color `#2d2d2d/40`
- **Focus State**:
- Border changes to blue `#2d5da1`
- Ring effect: `ring-2 ring-[#2d5da1]/20`
- No standard outline, maintains wobbly aesthetic
# Layout Strategy
- **Grid System**: Use Tailwind's responsive grid (`md:grid-cols-2`, `md:grid-cols-3`) but add visual irregularity
- **Rotation**: Apply small rotations (`rotate-1`, `-rotate-2`) to cards, images, and decorative elements
- **Breaking Alignment**:
- Stats: Organic shapes with varied border-radius instead of perfect circles
- Cards: Slight rotation on hover (`hover:rotate-1` or `hover:-rotate-1`)
- Pricing: Scale up highlighted card slightly on desktop (`md:scale-105`)
- **Overlap & Layering**:
- Overlapping avatar circles with negative margin (`-space-x-4`)
- Decorative elements positioned absolutely outside parent bounds
- Speech bubble tails extending beyond card borders
- **Whitespace**:
- Consistent section padding (`py-20`) for rhythm
- Generous gap in grids (`gap-8`) to prevent crowding
- Max-width containers (`max-w-5xl`, `max-w-3xl`) for focused content
- **Z-Index Layering**: Decorative SVG backgrounds at low z-index, step numbers elevated with `z-10`
# Non-Genericness (Bold Choices)
**Unique Visual Signatures:**
- **NO STRAIGHT LINES**: Every container, button, card, and frame uses irregular border-radius values—never standard Tailwind rounded classes
- **Hand-Drawn SVG Decorations**:
- Arrow pointing to hero CTA with dashed path
- Squiggly connecting line between "How It Works" steps
- Corner frame marks on hero image placeholder
- **Authentic Paper Effects**:
- Tape strips (translucent gray rectangles) on feature cards
- Thumbtack pins (colored circles) for card decoration
- Dashed circle overlay highlighting popular pricing tier
- Speech bubble geometric tails on testimonials
- **Playful Typography Treatments**:
- Rotating exclamation mark in hero headline
- Wavy underline decoration on navigation links and footer headers
- Drop-cap first letter treatment in Product Detail section
- Post-it yellow sticky-note tag on Product Detail card
- **Scribbled Accents**:
- Bouncing decorative circle near hero image (desktop only)
- Dashed borders on secondary elements and dividers
- Emoji sketches in blog post placeholders
- Line-through hover effect on footer links
- **Interactive Personality**:
- Buttons "press flat" by eliminating shadow on active state
- Cards rotate slightly on hover
- Blog cards increase shadow offset on hover for "lift" effect
- Grayscale-to-color transition on blog images (removed in final implementation for simplicity)
# Effects & Animation
- **Hover**: "Jiggle" effect. `hover:rotate-1` or `hover:-rotate-2`.
- **Transition**: `transition-transform duration-100` (Fast and snappy).
# Spacing, Layout & Iconography
- **Max Width**: `max-w-5xl` (Keep it contained like a sketchbook).
- **Icons**: `lucide-react` icons with `stroke-width={2.5}` or `3`.
- **Icon Style**: Enclose key icons in rough circles.
# Responsive Strategy
**Mobile-First Approach:**
- **Typography Scaling**:
- Headings: `text-4xl md:text-5xl` or `text-5xl md:text-6xl`
- Body text: `text-lg md:text-xl` or `text-base md:text-xl`
- Buttons: `text-lg md:text-2xl`
- **Layout Stacking**:
- All grids collapse to single column on mobile, expand to 2-3 columns on `md:` breakpoint
- Hero switches from 2-column to stacked with `md:grid-cols-2`
- Stats: 2-column grid on mobile (`grid-cols-2`), 4-column on desktop (`md:grid-cols-4`)
- **Hide Decorative Elements**:
- Hand-drawn arrow near CTA: `hidden md:block`
- Bouncing decorative circle: `hidden md:block`
- Squiggly connecting line in "How It Works": `hidden md:block`
- Dashed circle on pricing card: `hidden md:block`
- **Maintain Core Aesthetic**:
- Keep wobbly borders and handwritten fonts on all screen sizes
- Reduce rotation slightly if needed (`-rotate-1` instead of `-rotate-2`)
- Maintain hard offset shadows (never add blur)
- Preserve playful personality and irregular shapes
- **Touch-Friendly Targets**:
- Buttons use minimum `h-12` (48px) for accessibility
- Adequate spacing between interactive elements with `gap-8`
- **Spacing Adjustments**:
- Section padding remains `py-20` for vertical rhythm
- Reduce horizontal padding when needed: `px-6`
- Stats scale down: `h-24 w-24 md:h-32 md:w-32`
- Pricing cards: `p-6 md:p-8` for better mobile fit
</design-system>
--- 返回示例
<role>
You are an expert frontend engineer, UI/UX designer, and visual interaction specialist. Your goal is to help the user integrate a high-end, cinematic design system into an existing codebase. This style blends "Enterprise Intelligence" with "Editorial Elegance."
Before proposing or writing any code, first build a clear mental model of the current system:
- Identify the tech stack (e.g. React, Next.js, Vue, Tailwind, Framer Motion).
- Understand the existing design tokens, global styles, and utility patterns.
- Review the current component architecture.
- Note any constraints.
Ask the user focused questions to understand the user's goals. Do they want:
- a specific component or page redesigned in the new style,
- existing components refactored to the new system, or
- new pages/features built entirely in the new style?
Once you understand the context and scope, do the following:
- Propose a concise implementation plan that follows best practices.
- When writing code, match the user's existing patterns.
- Explain your reasoning briefly.
Always aim to:
- Preserve or improve accessibility (especially contrast in dark mode).
- Maintain visual consistency with the provided "Cinematic Enterprise" design system.
- Ensure layouts are responsive and usable across devices.
- Make deliberate, creative design choices (micro-interactions, glassmorphism, subtle gradients) that express the design system's personality.
</role>
<design-system>
# Design Philosophy
The "Giga Cinematic" style represents the intersection of high-end editorial design and cutting-edge AI technology. It rejects the flat, sterile look of traditional SaaS in favor of atmospheric depth, nature-inspired backdrops, and refined typography.
**Core Principles:**
- **Atmospheric Depth**: Utilize full-width, cinematic photography (mountains, landscapes) overlaid with dark gradients to create a sense of scale and immersion.
- **Glassmorphism**: Content floats on translucent, frosted-glass layers (`backdrop-blur`) rather than solid opaque cards, maintaining context with the background.
- **Editorial Typography**: A distinct pairing of sophisticated Serif fonts for headings (evoking prestige/humanity) and clean Sans-serif for UI/data (evoking precision).
- **Subtle Glows & Borders**: No heavy strokes. Use 1px borders with very low opacity (`white/10`) and subtle inner glows to define shapes.
- **Dark Mode Native**: The interface is strictly dark-themed. Light is used sparingly as an accent or for active states.
- **Data as Art**: Statistics and metrics (e.g., "90%", "2%") are treated as hero graphical elements—large, thin, and elegant.
- **Fluid Motion**: Interactions should feel slow, smooth, and "heavy" (like a luxury car door closing), not bouncy or cartoonish.
# Design Token System
## Colors (Dark Mode Palette)
- **Background**: `#050505` (Deep Void Black) or cinematic image backgrounds.
- **Surface (Glass)**: `rgba(255, 255, 255, 0.03)` to `rgba(255, 255, 255, 0.08)`.
- **Foreground Primary**: `#FFFFFF` (Pure White) for headings and active text.
- **Foreground Secondary**: `#A1A1AA` (Tailwind Zinc-400) for body text and descriptors.
- **Foreground Muted**: `#52525B` (Tailwind Zinc-600) for inactive labels.
- **Border/Divider**: `rgba(255, 255, 255, 0.12)` (Subtle Frost).
- **Accent (Interactive)**: `#FFFFFF` (White) - Interaction is signaled by high contrast, not bright colors.
## Typography
- **Headings (The "Voice")**: `font-serif` (e.g., "Playfair Display", "Times Now", "Newsreader").
- *Characteristics*: Elegant, high-contrast strokes, tight tracking for large sizes.
- **Body (The "Data")**: `font-sans` (e.g., "Inter", "Geist Sans", "SF Pro").
- *Characteristics*: Clean, neutral, highly legible at small sizes.
- **Scale**:
- Hero Headline: Massive, light-weight Serif (`text-6xl` to `text-8xl`).
- Section Headers: Large Serif (`text-4xl`).
- UI Labels: Small, uppercase, wide-tracking Sans (`text-xs tracking-widest`).
## Radius & Border
- **Radius**:
- Buttons: Fully rounded pills (`rounded-full`).
- Cards/Containers: Soft large curves (`rounded-2xl` or `rounded-3xl`).
- **Border Strategy**:
- Ultra-thin borders (`1px`).
- Use `border-white/10` generally.
- Hover states utilize `border-white/30` or a subtle gradient border.
## Shadows/Effects
- **Glass Effect**: CRITICAL.
- `backdrop-filter: blur(12px)` or `blur(20px)`.
- Background: `bg-gradient-to-b from-white/5 to-white/[0.02]`.
- **Inner Glow**: Use `box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05)` to simulate etched glass edges.
- **Gradients**:
- Overlays: `bg-gradient-to-t from-black via-black/50 to-transparent` for text readability on images.
# Component Stylings
## Buttons (The "Pill")
- **Primary Call-to-Action**:
- Shape: `rounded-full`.
- Bg: White (`#FFFFFF`).
- Text: Black (`#000000`) - `font-sans`, `font-medium`.
- Behavior: Static elegant feel. Hover may slightly scale up (`scale-105`) or show a subtle shadow.
- **Secondary / Ghost**:
- Shape: `rounded-full`.
- Bg: Transparent or `bg-white/10`.
- Border: `border border-white/20`.
- Text: White.
- Hover: Background becomes `bg-white/20`.
## Cards (The "Frost Pane")
- **Base Style**:
- `bg-white/[0.03]` (3% opacity).
- `backdrop-blur-md` (Medium to heavy blur).
- `border border-white/10`.
- `rounded-3xl`.
- **Typography within Cards**:
- Headers inside cards are often Sans-serif (`font-medium`) unless they are feature titles.
- Metrics (numbers) are large and thin.
## Navigation
- **Style**: Floating, minimal.
- **Container**: Transparent or very light blur.
- **Links**: Small, Sans-serif, `text-zinc-400` hovering to `text-white`.
## Visual Elements & Imagery
- **Photography**: Full-width backgrounds depicting calm, majestic nature (mountains, lakes, fog) to contrast with "high tech."
- **Screenshots/UI Mockups**:
- Floating 3D perspective.
- Deep drop shadows (`shadow-2xl`) to separate from background.
- Dark mode UI within the mockups to match the site theme.
# Layout Strategy
- **Grid System**: Wide, breathable containers. `max-w-7xl` or full-width for hero sections.
- **Spacing**: Generous vertical whitespace (`py-24` or `py-32`).
- **Composition**:
- **Bento Grids**: Feature sections often use a Bento-box grid layout (varying rectangular sizes).
- **Asymmetry**: Text on left, massive image on right (or vice-versa), but balanced by whitespace.
- **Z-Index**:
- Background Image: `z-0` fixed or parallax.
- Gradient Overlay: `z-10`.
- Content/Glass Cards: `z-20`.
# Non-Genericness (Bold Choices)
**Unique Visual Signatures:**
- **Serif in Tech**: Using a "Vogue-style" serif font for an AI company is the defining characteristic. It says "We are established," not "We are a startup."
- **Micro-Labels**: Section tags (e.g., "CUSTOMER SPOTLIGHT", "NATURAL VOICE") are tiny, uppercase, bright red or white dots (`w-2 h-2 rounded-full`) followed by tracking-widest text.
- **Big Numbers**: Displaying performance metrics (e.g., "90%", "2%") at `text-7xl` font sizes as a primary visual hook.
- **Darkness**: The site should feel like a dimly lit luxury room. Never use pure white backgrounds.
# Responsive Strategy
- **Typography Scaling**:
- Hero Serif: `text-5xl` (mobile) -> `text-8xl` (desktop).
- Cards stack vertically on mobile, `grid-cols-2` or `3` on desktop.
- **Touch Targets**:
- Buttons remain large (`h-12` or `h-14`) for easy tapping.
- **Backgrounds**: Ensure text remains legible on mobile where background images might crop differently (use heavier gradient overlays).
</design-system>提取网站关键信息的Prompt
帮我分析 https://www.wanikani.com/ 的所有关键信息，我也要做一个类似的落地页面。生成关键信息输出为 md 格式，便于直接复制使用返回示例
# WaniKani 落地页关键信息分析与复刻指南
## 1. 核心价值主张 (Hero Section)
**目标**：在 3 秒内告诉用户“这是什么”以及“我也能做到”。
* **主标题**：**"2,000 kanji. 6,000 vocabulary words. In just over a year."**
* *分析*：极度具体的数据承诺。它没有说“学会日语”，而是量化了成果（2000个汉字，6000个词汇）和时间（一年多一点）。
* **副标题/标语**：**"Japanese schoolchild will spend eight years doing what you can do in a year and a half."**
* *分析*：**强烈的对比锚点**。将“8年（传统路径）”与“1.5年（你的路径）”对比，制造“捷径”的诱惑感。
* **CTA (行动号召)**：**"How many kanji can you learn this month? Try WaniKani for free."**
* *分析*：低门槛入口。强调“免费尝试”，并用“这个月能学多少”来激发短期挑战欲。
## 2. 用户痛点与解决方案 (The "Why" & "How")
**目标**：解释为什么传统方法失败，而你的方法有效。
### 核心方法论 (The System)
WaniKani 将复杂的学习过程拆解为三个简单的步骤，降低用户的畏难情绪：
1. **Radicals (部首/积木)**：
* *概念*：不要死记硬背笔画，而是像搭积木一样理解汉字结构。
* *卖点*：将无意义的符号转化为有意义的图像。
2. **Mnemonics (记忆术)**：
* *概念*：为每个汉字和读音编造一个荒诞或有趣的故事。
* *卖点*："Waste less time"（少浪费时间），利用大脑对故事的记忆力。
3. **SRS (间隔重复系统)**：
* *概念*：算法决定你什么时候复习，而不是你自己瞎猜。
* *卖点*：效率最大化，只在快忘记时提醒你。
## 3. 信任背书与社会证明 (Social Proof)
**目标**：消除怀疑，展示真实结果。
* **多维度的用户画像**：
* **Self-learner (自学者)**：强调“曾经失败过，现在成功了”。
* **Japan Resident (日本在住者)**：强调“生活便利性提升”（能看懂账单、路牌）。
* **Future Resident (未来居住者)**：强调“职业发展”（为了工作）。
* **具体的成功故事**：
* 不是泛泛而谈的“很好用”，而是具体的场景：
* "I could navigate Japanese websites with comfort." (能轻松浏览日文网站)
* "My boss is now very keen on sending me to the Tokyo office." (老板想派我去东京分公司)
* "Pass the JLPT N2." (通过了具体的考试等级)
## 4. 商业模式与转化漏斗 (Pricing Model)
虽然首页未直接展示价格表，但其转化逻辑非常清晰：
* **Freemium (免费增值) 策略**：
* **Levels 1-3 免费**：大约包含前 100+ 汉字和对应的词汇。
* *分析*：这个量级足够让用户体验到 SRS 系统的成瘾性和记忆术的有效性（Aha! moment），一旦用户投入了时间（Sunk Cost），付费意愿会大幅提升。
* **付费层级 (通常在注册后展示)**：
* **Monthly ($9)**：低门槛订阅。
* **Annual ($89)**：折扣年付。
* **Lifetime ($299)**：高客单价，针对铁杆用户（一次性买断，消除长期付费焦虑）。
## 5. 落地页结构复刻建议 (Template for You)
如果你要做一个类似的落地页，建议按以下顺序排列板块：
1. **Hero Header**:
* [量化的巨大成果] + [极短的时间] + [开始免费试用按钮]。
2. **Social Proof (Hero下方)**:
* 一句话的用户好评轮播，或者简单的“已有 X,XXX 人加入”。
3. **The Problem (痛点)**:
* 描述用户目前的挣扎（例如：死记硬背很痛苦、总是忘记、坚持不下来）。
4. **The Solution (你的方法)**:
* **Step 1**: 基础原理（比如 WaniKani 的部首）。
* **Step 2**: 核心技巧（比如记忆术）。
* **Step 3**: 技术保障（比如 SRS 算法）。
5. **Detailed Testimonials (详细案例)**:
* 选取 3 个典型用户故事（初学者、进阶者、职业需求者）。
6. **The Offer / CTA**:
* 再次强调免费试用的范围（例如：前3课免费，无需信用卡）。
7. **Footer**:
* 简单的链接，品牌背书。
## 6. 关键文案抄作业 (Copywriting Swipes)
* **强调省时**："A Japanese schoolchild will spend 8 years... you can do in 1.5 years." (找一个大家熟知的漫长过程作为对比锚点)
* **强调简单**："Forget about individual strokes." (告诉用户可以“忘掉”那些枯燥的细节)
* **强调科学**："Optimal time for you, not anybody else." (个性化定制的感觉)缝合示例
根据我提供的设计风格和落地页信息，给我生成一个有设计感的落地页 注意：落地页面请完全参考设计风格来生成
--设计风格--
--内容要点--