用途
该技能面向落地页的构建、评审与迭代，目标是产出高转化的营销或产品落地页。它既可以从零搭建新页面，也可以对已有页面执行审计并给出具体修复与 A/B 测试建议。
默认技术栈与规则
默认栈：React + Vite + TypeScript；Tailwind CSS（优先 v4）；shadcn/ui 组件（通过 CLI 添加后自定义）；Iconify 图标（不使用 lucide-react）。
规则：首屏最多一个主 CTA 和一个次 CTA；每页只用一个图标家族（最多两个）；使用 shadcn 组件保证可访问性与一致性，但不让其决定通用化布局。项目搭建命令见 references/shadcn-vite-setup.md。
页面解剖结构
默认顺序：导航（精简，弱化与主 CTA 竞争的链接）→ Hero（价值 + 方法 + 视觉）→ 社会证明（logo、证言、数字）→ 主 CTA 区块（若 Hero 信息密集则重复 CTA）→ 功能（价值证明、成果、差异化）→ CTA 重复 1 至 2 次（在关键说服节点后）→ 页脚（次级链接、法律、联系方式）。完整清单与标注示例见 references/landing-page-anatomy.md。
首屏清单
将“首屏”视为常见视口下滚动前可见的内容。需完成：定义价值（标题）、详述方法（副标题）、帮助用户想象（视觉）、建立可信度（社会证明）、简化下一步（行动号召）。实现规则：主 CTA 不可忽视；视觉要具体（产品 UI、前后对比、成果预览）而非装饰；用微文案降低摩擦（无需信用卡、60 秒、随时取消）。
首屏以下说服序列
展示清晰价值（功能）→ 激励行动（社会证明）→ 澄清疑问（FAQ）→ 重复行动号召（CTA）。仅当能消除疑虑时才添加区块（定价、安全、对比、案例研究、集成）。
输出模式
A) 新建落地页：提供页面目标、受众、offer 与主 CTA；映射到解剖结构的分节大纲；3 版 Hero 文案与 CTA 微文案；证明计划（展示什么、放在哪里）；实现：生产级 React 代码（shadcn + Tailwind + Iconify）。
B) 落地页审计：简短诊断（页面要求用户做什么、是否明显）；按首屏、首屏以下、CTA、证明、文案、设计/UX、性能分组的问题与修复；5 至 10 条按影响与成本排序的建议；3 个带明确假设的 A/B 测试想法。
shadcn 组件映射
导航：Button、Sheet（移动菜单）、Separator。Hero：Button、Badge、Card（用于框定视觉）、Input（仅当邮箱收集是 CTA 时）。社会证明：Card、Avatar（证言）、Badge（媒体或奖项）。功能：Card、Tabs（仅当对比关键时）。FAQ：Accordion。最终 CTA：Card、Button。只添加实际使用的组件。
图标（仅 Iconify）
默认图标来源：https://icon-sets.iconify.design/。选择规则：选定一个图标集前缀并保持一致（例如 lucide:* 用于干净描边风格）；用图标澄清层级而非装饰；可访问性：装饰性图标应 aria-hidden="true"，有意义的图标附近应有文字。
React 用法：
npm i @iconify/react
import { Icon } from '@iconify/react'
export function IconBullet() { return ( <span className="inline-flex items-center gap-2"> <Icon icon="lucide:check" aria-hidden="true" className="size-4" /> <span>Cancel anytime</span> </span> ) }
说明：@iconify/react 默认按需加载图标数据；仅在用户要求零网络依赖时使用离线方案。除非用户明确要求，否则不要添加 lucide-react。可选：创建 AppIcon 包装组件以统一尺寸与可访问性，见 references/iconify.md。
设计执行（独特、非通用）
写代码前先决定：目的（页面为谁解决什么问题）、基调（大胆方向：编辑风、粗野主义、奢华极简、复古实用、俏皮等）、约束（性能、可访问性、品牌规则）、差异化（一个令人记住的细节：布局转折、标志性动效时刻、独特母题）。然后精心执行。
排版：选择有性格的字体，避免通用默认；将一个展示字体（标题）与一个可读正文字体配对。
颜色与主题：使用协调的调色板，1 至 2 个主色与锐利点缀；优先使用 CSS 变量（shadcn 主题令牌）以保持设计一致。
动效：将动效作为引导而非装饰——分阶段揭示、CTA 强调、证明高亮；优先少量高冲击时刻而非大量微动画。
空间构图：使用有意的层级与留白；仅在提升清晰度时打破网格。快速预设见 references/aesthetic-directions.md。
实现要求
使用语义化 HTML 与可访问组件（标签、焦点状态、减少动效支持）；移动优先响应式布局；优化感知性能（避免沉重 Hero 媒体，首屏以下图片懒加载）；保持主 CTA 一致（标签、目标、承诺）。
附带的起始资源
若用户要求起始页面脚手架，使用：assets/vite-shadcn-iconify-landing/src/pages/LandingPage.tsx。这是一个与解剖结构匹配、使用 shadcn + Iconify 的分节模板。
参考文件
references/shadcn-vite-setup.md：为 Vite 安装与配置 shadcn/ui（Tailwind、别名、CLI）。 references/iconify.md：Iconify 规则 + AppIcon 包装组件。 references/section-templates.md：可复制粘贴的分节模板（Navbar、Hero、Proof、Features、FAQ、CTA、Footer）。 references/landing-page-anatomy.md：解剖结构、首屏/首屏以下清单、标注示例。 references/copy-templates.md：Hero 公式、CTA 微文案、FAQ 模板。 references/aesthetic-directions.md：可快速选择的大胆美学预设。
限制
资料未提供具体收费、价格、平台支持范围或效果保证等信息。