landing
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseLanding — Premium HTML Landing Page Generator
落地页生成器 — 高品质HTML落地页生成工具
Distinct from. That skill outputs Next.js TSX components optimized for conversion / lead-gen. THIS skill outputs a single self-containedproduct-team/skills/landing-page-generator/file optimized for premium visual experience with GSAP animations. Pick by use case..html
Generate a polished, self-contained landing page from a text prompt or brief. The output is ONE HTML file: all CSS inline in , all JS inline in , only external dependencies being Google Fonts + GSAP via CDN. The page is visually distinctive, animated, and production-quality.
.html<style><script>与不同。 该技能输出针对转化/获客优化的Next.js TSX组件，而本技能输出针对高品质视觉体验优化的独立product-team/skills/landing-page-generator/单文件，带有GSAP动画。请根据使用场景选择。.html
根据文本提示或简短描述生成精致、独立的落地页。输出为单个HTML文件：所有CSS内联在标签中，所有JS内联在标签中，仅依赖Google Fonts和GSAP的CDN资源。页面视觉独特、带有动画效果，达到生产级质量。
.html<style><script>Invocation Triggers
触发指令
- "create a landing page"
- "build a landing page"
- "make a landing page for X"
- "I need a web page for Y"
- "promotional page"
- "product page"
- "one-pager"
- "web presence"
- "sales page"
- "landing for X"
- "创建落地页"
- "搭建落地页"
- "为X制作落地页"
- "我需要一个Y的网页"
- "推广页"
- "产品页"
- "单页网站"
- "线上展示页"
- "销售页"
- "为X做落地页"
Delivery Mode
交付方式
In Claude Code CLI, write the file to disk at the specified path. In Claude.ai web, create an HTML artifact with the same content.
在Claude Code CLI中，将文件写入指定路径的磁盘。在Claude.ai网页端中，创建包含相同内容的HTML制品。
Phase 0: Grill-Me Intake (4 forcing questions, one at a time)
阶段0：强制信息收集（4个必问问题，逐一询问）
Dependency-ordered. Each question carries explicit "why I'm asking". Stop condition: max 4.
按依赖顺序提问，每个问题都明确说明“提问原因”。停止条件：最多4个问题。
Q1 (root) — Product / Service
Q1（核心）—— 产品/服务
What's the product or service? Give me the name + a 1–2 sentence elevator pitch — what does it do, and who's it for?Why I'm asking: The headline, subtext, and feature copy all derive from this. "App for productivity" produces generic boilerplate; "Async standup tool for remote engineering teams who hate Zoom" produces a landing page that converts.
Refuse mush. If user gives just a name with no pitch, push back once: "What does it do? Who's it for?" If still no pitch after push-back, deliver with explicit "generic positioning" caveat.
产品或服务是什么？请提供名称+1-2句话的电梯演讲——它能做什么，面向谁？提问原因： 标题、副标题和功能文案都源于此信息。“生产力应用”会生成通用模板；“面向讨厌Zoom的远程工程团队的异步站立会议工具”则会生成高转化的落地页。
拒绝模糊回答。如果用户仅提供名称而无演讲内容，需追问一次：“它能做什么？面向谁？”如果追问后仍无有效信息，生成时需明确标注“通用定位”说明。
Q2 (depends on Q1) — Audience Register
Q2（依赖Q1）—— 受众类型
Who's the audience? Pick one:
- Technical buyers (engineers, ops, security)
- Business buyers (PMs, execs, ops leaders)
- Consumers (general public, hobbyists)
- Internal (employees, partners — not for public sale)
Why I'm asking: Audience dictates copy register, jargon level, social-proof choices, and CTA framing. Technical buyers want specifics; consumers want benefits; internal pages can skip persuasion.
Forcing choice.
目标受众是哪一类？请选择一项：
- 技术买家（工程师、运维、安全人员）
- 商业买家（产品经理、高管、运维负责人）
- 普通消费者（大众、爱好者）
- 内部用户（员工、合作伙伴——非公开销售）
提问原因： 受众类型决定文案风格、术语难度、社交证明选择和CTA（号召性用语）框架。技术买家关注细节；消费者关注收益；内部页面可跳过说服性内容。
必须选择其一。
Q3 (always) — Brand Overrides
Q3（必问）—— 品牌自定义
Brand colors / fonts to override the default (dark navy + teal + Inter)? Provide as: primary HEX, accent HEX, optional bg HEX. Or say "default" if you want the polished default.Why I'm asking: The default is intentionally beautiful, but matching your brand makes the page feel native to your existing site. Even just a primary color override goes a long way.
Accept "default" or partial overrides (e.g., just primary). If only primary provided, derive accent algorithmically (lighten / darken).
是否需要覆盖默认品牌颜色/字体（深蓝+青绿色+Inter字体）？请提供：主色HEX值、强调色HEX值、可选背景色HEX值。若使用默认设置，请回复“default”。提问原因： 默认设置已足够美观，但匹配品牌风格能让页面与现有网站更协调。仅替换主色就能带来显著效果。
接受“default”或部分自定义（如仅提供主色）。若仅提供主色，将通过算法生成强调色（提亮/加深）。
Q4 (depends on Q1) — Tone
Q4（依赖Q1）—— 语气风格
Tone — pick one:
- Professional — confident, restrained, B2B-friendly
- Playful — warm, light, occasional humor
- Authoritative — expert, data-forward, trust-building
- Minimal — terse, design-led, low copy density
Why I'm asking: Tone affects every sentence — headlines, microcopy, button text, closing copy. Picking upfront prevents tonal whiplash across sections.
Forcing choice. Recommended default: professional if Q2 = technical/business; playful if Q2 = consumer; minimal if the product is design-led.
Stop condition: After Q4, commit and generate. No follow-up questions during generation.
语气风格——请选择一项：
- 专业正式——自信、克制，适合B2B场景
- 活泼有趣——热情、轻松，偶尔带有幽默
- 权威专业——专家视角、数据驱动，建立信任
- 极简风格——简洁、设计导向，文案密度低
提问原因： 语气风格影响每一句文案——标题、微文案、按钮文本、收尾文案。提前选定可避免跨板块的语气冲突。
必须选择其一。推荐默认： 若Q2选择技术/商业买家，默认专业正式；若为普通消费者，默认活泼有趣；若产品为设计导向，默认极简风格。
停止条件： 完成Q4后，开始生成页面。生成过程中不再提问。
Content Extraction (with Fallback Strategy)
内容提取（含 fallback 策略）
From Q1's elevator pitch, derive:
- Hero headline — punchy version of "what it does" (8–12 words)
- Hero subtext — version of "who it's for + payoff" (1–2 sentences)
- 3–6 feature bullets — distilled from pitch + audience (Q2) + tone (Q4)
- CTA text — action-oriented, matches tone
- Closing copy — short, emotive, matches tone
Fallback when input is sparse: invent compelling content from product-name semantics + audience register. Flag inferred content with a comment in the HTML source (). Don't stall waiting for more input.
<!-- inferred: ... -->从Q1的电梯演讲中提取：
- Hero标题——“核心功能”的精炼版本（8-12字）
- Hero副标题——“受众+价值”的说明（1-2句话）
- 3-6个功能要点——从演讲内容+受众类型（Q2）+语气风格（Q4）中提炼
- CTA文本——行动导向，匹配语气风格
- 收尾文案——简短、有感染力，匹配语气风格
输入信息不足时的 fallback： 根据产品名称语义+受众类型生成有吸引力的内容。在HTML源代码中添加注释标记推断内容（）。无需等待更多输入，直接生成。
<!-- inferred: ... -->Brand System Specification
品牌系统规范
Default Color Palette (Dark Navy + Teal)
默认调色板（深蓝+青绿色）
css
:root {
--navy: #0A1628;
--navy-mid: #0D1F38;
--teal: #00D4AA;
--teal-glow: rgba(0, 212, 170, 0.12);
--amber: #F5A623;
--off-white: #F7F7F2;
--text-muted: rgba(247, 247, 242, 0.68);
--card-bg: rgba(0, 212, 170, 0.06);
--card-border:rgba(0, 212, 170, 0.15);
}css
:root {
--navy: #0A1628;
--navy-mid: #0D1F38;
--teal: #00D4AA;
--teal-glow: rgba(0, 212, 170, 0.12);
--amber: #F5A623;
--off-white: #F7F7F2;
--text-muted: rgba(247, 247, 242, 0.68);
--card-bg: rgba(0, 212, 170, 0.06);
--card-border:rgba(0, 212, 170, 0.15);
}Override Pattern
自定义替换规则
When Q3 provides custom brand values, the skill substitutes them into the block:
:rootBrand override:
- primary: #FF6B35 → --navy / hero bg
- accent: #2EC4B6 → --teal / CTA / highlights
- bg: #011627 → --navy-mid / section bg
- text: #FDFFFC → --off-whiteIf only primary provided, derive accent algorithmically (lighten 15% for accent; darken 8% for navy-mid; convert to rgba at 0.12 alpha for glow). Use for the deterministic derivation.
scripts/brand_palette_validator.pySee for color theory + WCAG + algorithmic palette derivation canon.
references/brand_system_design.md当Q3提供自定义品牌值时，技能会将其替换到块中：
:root品牌自定义：
- primary: #FF6B35 → --navy / Hero背景
- accent: #2EC4B6 → --teal / CTA /高亮
- bg: #011627 → --navy-mid /板块背景
- text: #FDFFFC → --off-white若仅提供主色，将通过算法生成强调色（提亮15%作为强调色；加深8%作为navy-mid；转换为alpha值0.12的rgba作为glow）。使用进行确定性推导。
scripts/brand_palette_validator.py参考获取色彩理论、WCAG标准和算法调色板推导规范。
references/brand_system_design.mdTypography
排版规范
- Font family: Inter (via Google Fonts)
- Weight scale: 400 (body), 500 (eyebrow), 600 (links), 700 (subtitle), 800 (H1 + H2)
- Size scale:
- Hero H1: 68–82px
- Section H2: 52–62px
- Card titles: 22px
- Body: 17–19px
- Eyebrow: 13px (uppercase, letter-spaced)
- CTA button: 18px (500 weight)
- 字体家族： Inter（通过Google Fonts加载）
- 字重层级： 400（正文）、500（小标题）、600（链接）、700（副标题）、800（H1 + H2）
- 字号层级：
- Hero H1: 68–82px
- 板块H2: 52–62px
- 卡片标题: 22px
- 正文: 17–19px
- 小标题: 13px（大写，字间距）
- CTA按钮: 18px（500字重）
Components (Must Specify CSS)
组件规范（必须指定CSS）
- — CTA button with hover state (lift + brightness)
.btn-primary - — card with hover lift (translateY(-6px) + border-brighten)
.feature-card - — letter-spaced (0.2em) uppercase category label
.eyebrow
- — CTA按钮，带有悬停状态（上移+亮度变化）
.btn-primary - — 卡片，带有悬停上移效果（translateY(-6px) + 边框提亮）
.feature-card - — 字间距0.2em的大写分类标签
.eyebrow
Section 1: Hero
板块1：Hero区
- , flex-centered content
min-height: 100vh - Optional eyebrow label above H1
- H1 (68–82px, 800 weight)
- Subtitle (17–19px, 1–2 sentences)
- CTA button (.btn-primary)
- Scroll-down indicator (animated chevron, CSS bounce)
- Depth layers (mouse parallax):
- — large blurred circles, absolute-positioned, low opacity
.hero-shapes-back - — smaller shapes, sharper edges, higher opacity
.hero-shapes-mid - Content layer (H1 + subtitle) — moves subtly in same direction as mouse
- ，内容居中对齐
min-height: 100vh - H1上方可添加小标题标签
- H1（68–82px，800字重）
- 副标题（17–19px，1–2句话）
- CTA按钮（.btn-primary）
- 滚动向下指示器（动画箭头，CSS弹跳效果）
- 深度层级（鼠标视差）：
- — 大模糊圆形，绝对定位，低透明度
.hero-shapes-back - — 较小形状，边缘清晰，较高透明度
.hero-shapes-mid - 内容层（H1 + 副标题）——随鼠标方向轻微移动
Section 2: Features
板块2：功能区
- 3 columns default (grid)
repeat(3, 1fr) - Responsive:
- 2 columns at 900px breakpoint
- 1 column at 580px breakpoint
- Each card:
- SVG icon (28px, stroke=var(--teal), no fill)
- Title (22px, 700 weight)
- Description (15–16px, --text-muted)
- Hover state:
transform: translateY(-6px)- (brighten from --card-border)
border-color: var(--teal) transition: 0.3s ease
- 默认3列布局（网格）
repeat(3, 1fr) - 响应式适配：
- 900px断点 → 2列布局
- 580px断点 → 1列布局
- 每个卡片：
- SVG图标（28px，stroke=var(--teal)，无填充）
- 标题（22px，700字重）
- 描述（15–16px，--text-muted）
- 悬停状态：
transform: translateY(-6px)- （从--card-border提亮）
border-color: var(--teal) transition: 0.3s ease
Section 3: Closing CTA
板块3：收尾CTA区
- Full-width,
background: var(--navy-mid) - , text-align: center
padding: 120px 24px - Large closing headline (52–62px, 800 weight)
- Short subtext (--text-muted, 1–2 sentences)
- CTA button with ambient radial-gradient glow behind it:
css
background: radial-gradient(circle, var(--teal-glow) 0%, transparent 70%);
- 全屏宽度，
background: var(--navy-mid) - ，文本居中对齐
padding: 120px 24px - 大尺寸收尾标题（52–62px，800字重）
- 简短副标题（--text-muted，1–2句话）
- CTA按钮后方带有径向渐变发光效果：
css
background: radial-gradient(circle, var(--teal-glow) 0%, transparent 70%);
Animation Patterns
动画模式
See for the canon. Five patterns required:
references/gsap_animation_patterns.md参考获取规范。必须包含以下5种模式：
references/gsap_animation_patterns.md1. Hero Entrance (GSAP timeline)
1. Hero入场动画（GSAP时间线）
js
// MUST use gsap.set() FIRST to prevent FOUC
gsap.set([".eyebrow", ".hero h1", ".hero .subtitle", ".btn-primary", ".scroll-down"], {
opacity: 0,
y: 30
});
const tl = gsap.timeline({ defaults: { ease: "power3.out" } });
tl.to(".eyebrow", { opacity: 1, y: 0, duration: 0.6 })
.to(".hero h1", { opacity: 1, y: 0, duration: 0.8 }, "-=0.3")
.to(".hero .subtitle", { opacity: 1, y: 0, duration: 0.6 }, "-=0.5")
.to(".btn-primary", { opacity: 1, y: 0, duration: 0.5 }, "-=0.3")
.to(".scroll-down", { opacity: 1, y: 0, duration: 0.4 }, "-=0.2");js
// 必须先使用gsap.set()防止FOUC（无样式内容闪烁）
gsap.set([".eyebrow", ".hero h1", ".hero .subtitle", ".btn-primary", ".scroll-down"], {
opacity: 0,
y: 30
});
const tl = gsap.timeline({ defaults: { ease: "power3.out" } });
tl.to(".eyebrow", { opacity: 1, y: 0, duration: 0.6 })
.to(".hero h1", { opacity: 1, y: 0, duration: 0.8 }, "-=0.3")
.to(".hero .subtitle", { opacity: 1, y: 0, duration: 0.6 }, "-=0.5")
.to(".btn-primary", { opacity: 1, y: 0, duration: 0.5 }, "-=0.3")
.to(".scroll-down", { opacity: 1, y: 0, duration: 0.4 }, "-=0.2");2. Mouse Parallax
2. 鼠标视差
js
const hero = document.querySelector(".hero");
hero.addEventListener("mousemove", (e) => {
const x = (e.clientX / window.innerWidth - 0.5) * 2;
const y = (e.clientY / window.innerHeight - 0.5) * 2;
gsap.to(".hero-shapes-back", { x: x * 45, y: y * 22, duration: 0.8 });
gsap.to(".hero-shapes-mid", { x: x * 22, y: y * 11, duration: 0.8 });
gsap.to(".hero .container", { x: x * 8, y: y * 5, duration: 0.8 });
});js
const hero = document.querySelector(".hero");
hero.addEventListener("mousemove", (e) => {
const x = (e.clientX / window.innerWidth - 0.5) * 2;
const y = (e.clientY / window.innerHeight - 0.5) * 2;
gsap.to(".hero-shapes-back", { x: x * 45, y: y * 22, duration: 0.8 });
gsap.to(".hero-shapes-mid", { x: x * 22, y: y * 11, duration: 0.8 });
gsap.to(".hero .container", { x: x * 8, y: y * 5, duration: 0.8 });
});3. Scroll-Triggered Feature Cards
3. 滚动触发的功能卡片动画
js
gsap.set(".feature-card", { opacity: 0, y: 55, rotateX: 18 });
ScrollTrigger.batch(".feature-card", {
start: "top 80%",
onEnter: batch => gsap.to(batch, {
opacity: 1, y: 0, rotateX: 0,
duration: 0.8,
stagger: 0.11,
ease: "power2.out"
})
});js
gsap.set(".feature-card", { opacity: 0, y: 55, rotateX: 18 });
ScrollTrigger.batch(".feature-card", {
start: "top 80%",
onEnter: batch => gsap.to(batch, {
opacity: 1, y: 0, rotateX: 0,
duration: 0.8,
stagger: 0.11,
ease: "power2.out"
})
});4. Floating Decorative Shapes (CSS keyframes — NOT GSAP)
4. 浮动装饰形状（CSS关键帧 — 非GSAP）
CSS handles ambient continuous motion (smoother, cheaper than GSAP for indefinite animations):
css
@keyframes floatA {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(20px, -30px) rotate(8deg); }
}
@keyframes floatB { /* different duration + rotation */ }
@keyframes floatC { /* different duration + rotation */ }
.hero-shapes-back .shape-a { animation: floatA 12s ease-in-out infinite; }CSS处理持续的环境动画（比GSAP更流畅，适合无限循环动画）：
css
@keyframes floatA {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(20px, -30px) rotate(8deg); }
}
@keyframes floatB { /* 不同时长+旋转角度 */ }
@keyframes floatC { /* 不同时长+旋转角度 */ }
.hero-shapes-back .shape-a { animation: floatA 12s ease-in-out infinite; }5. Scroll Indicator (CSS bounce)
5. 滚动指示器（CSS弹跳）
css
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(8px); }
}
.scroll-down { animation: bounce 2s ease-in-out infinite; }css
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(8px); }
}
.scroll-down { animation: bounce 2s ease-in-out infinite; }Required CDN Dependencies
必需的CDN依赖
html
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>NO other external CSS or JS files. All custom CSS in , all custom JS in blocks within the same HTML file.
<style><script>See for the inline-only rationale.
references/single_file_html_discipline.mdhtml
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>禁止使用其他外部CSS或JS文件。所有自定义CSS必须放在标签中，所有自定义JS必须放在同一HTML文件的标签中。
<style><script>参考了解仅内联代码的原因。
references/single_file_html_discipline.mdLayout Rules
布局规则
- Container max-width: 1200px, centered
- Section padding: (vertical 120, horizontal 24, scales down on mobile)
120px 24px - Responsive breakpoints:
- 900px → features grid 3-col → 2-col
- 580px → all grids → 1-col; H1 scales down to ~52px
- Viewport meta:
<meta name="viewport" content="width=device-width, initial-scale=1">
- 容器最大宽度： 1200px，居中对齐
- 板块内边距： （垂直120px，水平24px，移动端自动缩放）
120px 24px - 响应式断点：
- 900px → 功能区网格从3列变为2列
- 580px → 所有网格变为1列；H1字号缩小至约52px
- 视口元标签：
<meta name="viewport" content="width=device-width, initial-scale=1">
Output Spec
输出规范
- Path:
${OUTPUT_DIR}/<product-name-kebab>.html - Default :
${OUTPUT_DIR}./landing-pages/ - Filename: lowercase kebab-case from product name ("Quill AI" → ). Use
quill-ai.htmlfor deterministic slug generation + duplicate detection.scripts/kebab_slug_generator.py - Self-contained: all CSS in , all JS in
<style>, only Google Fonts + GSAP CDN external.<script>
- 路径：
${OUTPUT_DIR}/<product-name-kebab>.html - 默认${OUTPUT_DIR}：
./landing-pages/ - 文件名： 产品名称转换为小写短横线格式（"Quill AI" → ）。使用
quill-ai.html进行确定性slug生成和重复检测。scripts/kebab_slug_generator.py - 独立性： 所有CSS内联在中，所有JS内联在
<style>中，仅依赖Google Fonts和GSAP的CDN资源。<script>
Validation (Post-Generation)
验证（生成后）
Run after generation. Checks:
scripts/html_validator.py --file ${OUTPUT_DIR}/<slug>.html- All 3 required sections present (,
.hero,.features).closing-cta - CDN deps present (Inter + GSAP + ScrollTrigger)
- initial states precede any
gsap.set()orgsap.timeline(FOUC prevention)gsap.to - Responsive breakpoints at 900px + 580px
- No external other than Google Fonts
<link rel="stylesheet"> - No external other than GSAP CDN
<script src=> - present
<meta name="viewport"> - All animated elements have initial-state declarations
生成后运行进行检查：
scripts/html_validator.py --file ${OUTPUT_DIR}/<slug>.html- 包含所有3个必需板块（,
.hero,.features）.closing-cta - 包含CDN依赖（Inter字体 + GSAP + ScrollTrigger）
- 初始状态在任何
gsap.set()或gsap.timeline之前（防止FOUC）gsap.to - 包含900px和580px的响应式断点
- 除Google Fonts外无其他外部
<link rel="stylesheet"> - 除GSAP CDN外无其他外部
<script src=> - 包含标签
<meta name="viewport"> - 所有动画元素都有初始状态声明
Error Handling
错误处理
| Situation | Behavior |
|---|---|
| Input is just a name with no context | Invent compelling content from name semantics + audience register; flag as |
| Input file is large or PDF | Read fully before generating; don't truncate |
| Brand colors insufficient (only 1 HEX provided) | Use as primary; derive secondary/accent algorithmically (lighten/darken via brand_palette_validator.py) |
| Features count not specified | Default to 4 |
| Output dir doesn't exist | Create it |
| Existing file at output path | Append timestamp suffix or ask user (kebab_slug_generator.py flags duplicates) |
| html_validator returns FAIL | Regenerate ONLY the failing sections in one targeted pass; do NOT abandon the file |
| 场景 | 处理方式 |
|---|---|
| 仅输入名称无上下文 | 根据名称语义+受众类型生成有吸引力的内容；在HTML源代码中添加 |
| 输入文件过大或为PDF | 完整读取后再生成；不截断内容 |
| 品牌颜色信息不足（仅提供1个HEX值） | 作为主色使用；通过brand_palette_validator.py算法生成次要/强调色 |
| 未指定功能要点数量 | 默认生成4个 |
| 输出目录不存在 | 创建该目录 |
| 输出路径已存在文件 | 添加时间戳后缀或询问用户（kebab_slug_generator.py会标记重复） |
| html_validator返回失败 | 仅针对性重新生成失败板块；不放弃整个文件 |
Portability
兼容性
- Claude Code CLI: Native — writes HTML file directly to filesystem.
- Claude.ai web: Native — produces HTML as an artifact instead of file.
- Claude Code CLI： 原生支持——直接将HTML文件写入文件系统。
- Claude.ai网页端： 原生支持——生成HTML制品而非文件。
Tooling
工具脚本
| Script | Role |
|---|---|
| Validates HEX format, checks WCAG AA contrast, generates derived palette from primary (algorithmic lighten/darken). |
| Product name → kebab-case filename + duplicate detection in output dir. |
| Post-generation structural check: 3 sections, CDN deps, gsap.set() initial states, responsive breakpoints, no external files. |
| 脚本 | 作用 |
|---|---|
| 验证HEX格式，检查WCAG AA对比度，通过主色算法生成衍生调色板（提亮/加深）。 |
| 将产品名称转换为短横线格式文件名，并检测输出目录中的重复文件。 |
| 生成后结构检查：3个板块、CDN依赖、gsap.set()初始状态、响应式断点、无外部文件。 |
References
参考文档
- — color theory + WCAG + algorithmic palette derivation (7+ sources)
references/brand_system_design.md - — entrance timeline + ScrollTrigger reveals + mouse parallax + CSS floats + scroll indicator (7+ sources)
references/gsap_animation_patterns.md - — why inline + CDN-only externals + accessibility minimums + no-build rationale (7+ sources)
references/single_file_html_discipline.md
- — 色彩理论 + WCAG标准 + 算法调色板推导（7+来源）
references/brand_system_design.md - — 入场时间线 + ScrollTrigger显示 + 鼠标视差 + CSS浮动 + 滚动指示器（7+来源）
references/gsap_animation_patterns.md - — 内联代码原因 + 仅CDN外部依赖 + 可访问性最低要求 + 无需构建的理由（7+来源）
references/single_file_html_discipline.md
Anti-Patterns To Reject
需避免的反模式
- Hardcoded absolute paths in output directory
- Single brand palette without override documentation
- Outlining before writing — write in one pass
- External CSS or JS files (must be inline; only Google Fonts + GSAP CDN allowed)
- Skipping initial states (causes FOUC)
gsap.set() - More than 6 features in default grid (becomes unscannable)
- Brand-specific content references in the skill itself
Version: 1.0.0
Source spec:
Build pattern: Path B (direct conversion). Distinct from .
megaprompts/04-landing-megaprompt.mdproduct-team/skills/landing-page-generator/- 输出目录使用硬编码绝对路径
- 单一品牌调色板且无自定义文档
- 先规划再编写——应一次性完成编写
- 使用外部CSS或JS文件（必须内联；仅允许Google Fonts + GSAP CDN）
- 跳过初始状态（导致FOUC）
gsap.set() - 默认网格中功能要点超过6个（难以扫描）
- 技能本身包含品牌特定内容引用
版本： 1.0.0
源规范：
构建模式： 路径B（直接转换）。与不同。
megaprompts/04-landing-megaprompt.mdproduct-team/skills/landing-page-generator/