理发店落地页技能

理发店落地页技能 是做什么的？

显式激活

主要触发命令：

/LANDINGPAGE

别名：

/LANDINGBARBERIA

命令不区分大小写。

示例：

• /LANDINGPAGE
• /LANDINGBARBERIA
• /LANDINGPAGE 我想要一个位于基多的高级理发店的网站
• /LANDINGBARBERIA 名称: Black Crown

当其中一个命令被调用时：

1. 立即激活此技能。
2. 进入发现采访模式。
3. 首先阅读用户的当前消息和对话上下文。
4. 仅询问缺失的信息。
5. 在商业概要集足够完整之前，不要开始实施。
6. 一旦概要完成，自动进行，无需询问“你想让我开始吗？”。

集成的通用蓝图 — 必须执行

此技能包含完整的设计/转化蓝图的原始版本，位于：

references/master-barbershop-landing-prompt.md

在规划或实现落地页之前，请阅读该文件。

将其视为以下方面的标准基础蓝图：

• 页面架构，
• CRO 结构，
• AIDA，
• TOFU / MOFU / BOFU，
• 内容递进，
• 英雄区，
• 服务，
• 画廊，
• 体验，
• 套餐，
• 前后对比，
• 团队，
• 客户评价，
• Instagram/社交证明，
• 位置，
• 常见问题解答，
• 最终行动号召，
• 预订流程，
• WhatsApp，
• 页脚，
• 响应式行为，
• 动画，
• 性能，
• 无障碍性，
• 本地 SEO，
• 推荐技术，
• 摄影方向，
• 文案语调，
• 行动号召分布。

当有真实的商业信息时，不要盲目重用蓝图中的虚构占位符。

蓝图是一个结构系统，而不是虚假商业事实的来源。

配套设计技能

此技能是编排者。

在进行视觉设计/实施之前，请检查这些配套技能是否已经可用：

1. Impeccable
2. Taste Skill / design-taste-frontend

如果缺失且 shell 执行可用，则从项目根目录进行安装：

npx impeccable install
npx skills add Leonxlnx/taste-skill

如果已经存在，请勿重新安装。

如果安装需要批准，则仅请求环境所需的批准。

如果 shell 执行不可用：

• 继续使用此技能，
• 手动应用相同的原则，
• 永远不要声明已安装这些技能。

角色分工

此技能负责

• 发现，
• 商业理解，
• 商业事实，
• 优惠，
• 转化策略，
• 页面架构，
• AIDA，
• TOFU/MOFU/BOFU，
• CRO，
• 文案，
• 行动号召逻辑，
• 内容层级，
• 资产策略，
• 实施要求，
• SEO，
• 性能，
• 无障碍性，
• 质量保证。

Taste Skill 协助

• 高级视觉方向，
• 非通用布局决策，
• 字体规模，
• 间距节奏，
• 组件个性，
• 动效语言，
• 前端品味。

Impeccable 协助

• UI 批评，
• 细化，
• 层级，
• 间距，
• 打磨，
• 一致性，
• 响应式质量，
• 以无障碍为导向的呈现。

配套技能可以改善呈现，但不得覆盖：

• 用户的真实商业信息，
• 品牌约束，
• 转化目标，
• 法律/道德约束，
• 关键的预订内容。

发现采访模式

即使内部系统是高级的，采访对用户来说也应该简单。

当信息很少时，提出一个紧凑的分组问卷。

除非只有一个关键事实缺失，否则不要每次只问一个问题。

不要重复已回答的问题。

A. 商业身份

询问：

• 理发店名称，
• 城市/街区，
• 完整地址，
• 如果可能有 Google 地图链接，
• 营业时间，
• WhatsApp/电话，
• 如果相关则提供电子邮件，
• Instagram，
• TikTok，
• 其他社交资料。

B. 服务和定价

询问：

• 提供哪些服务，
• 每项服务的具体价格，
• 大致时长，
• 最应该推广哪项服务，
• 套餐/捆绑包，
• 会员制，
• 首次访问促销，
• 季节性优惠。

当业务是真实存在时，切勿虚构价格。

C. 预订和转化

询问：

• 客户目前如何预订，
• WhatsApp/电话/表单/预订平台/直接到店，
• 仅限预约、仅限直接到店，还是两者兼有，
• 主要行动号召，
• 次要行动号召，
• 当没有后端时，用户是否想要一个功能性的模拟预订流程。

D. 受众和定位

询问：

• 理想客户，
• 如果相关则提供年龄/细分市场，
• 高端/都市/经典/奢华/街头风格/老派/家庭/现代定位，
• 该理发店有何不同，
• 客户为何选择它，
• 常见异议，
• 停车是否方便，
• 服务体验，
• 是否有任何保证或保证承诺。

E. 品牌标识

询问：

• 标志，
• 颜色，
• 字体，
• 标语，
• 视觉符号，
• 纹理，
• 标志性细节，
• 品牌个性，
• 期望的感觉。

示例：

• 高端，
• 男性化，
• 编辑风格，
• 电影感，
• 工业风，
• 经典，
• 极简，
• 奢华，
• 都市。

F. 真实视觉资产

要求用户在可用时分享：

• 标志，
• 外部照片，
• 内部照片，
• 理发师/团队照片，
• 客户照片，
• 发型照片，
• 胡须造型，
• 前后对比图片，
• 产品照片，
• 服务照片，
• 奖项/认证。

优先使用真实资产，而非库存或生成图像。

切勿将生成的人物/内部空间呈现为真实的员工、客户或实际场所。

G. 客户评价和证明

询问：

• 评论截图，
• Google 评价，
• 客户评价，
• 星级评分，
• 评论数量，
• 媒体报道，
• 社交证明，
• 客户语录。

在为真实商家构建页面时，切勿编造看起来真实的客户评价。

如果没有真实的评价，并且用户只想要一个原型：

• 在内部将其明确标记为占位符，
• 为以后替换做好准备，
• 不要将其表示为经过验证的真实评价。

H. 视觉参考 — 必问题

询问：

你有喜欢的理发店或网站的视觉参考吗？

用户可以提供：

• 网站，
• Pinterest 图片，
• Behance，
• Dribbble，
• Instagram 参考，
• 屏幕截图，
• 情绪板，
• 设计画廊的照片，
• 实体理发店的照片，
• 其他品牌参考。

当有用时，询问他们喜欢每个参考的哪些方面：

• 英雄区，
• 字体，
• 调色板，
• 摄影，
• 菜单，
• 服务卡片，
• 定价，
• 画廊，
• 动效，
• 行动号召，
• 氛围，
• 整体感觉。

参考规则

使用参考来提取：

• 构图，
• 层级，
• 视觉节奏，
• 空间密度，
• 字体关系，
• 摄影处理，
• 组件模式，
• 动效思路，
• 颜色关系，
• 编辑方向。

不要逐字复制第三方的网站。

不要复制第三方的标志、专有文案、独特的品牌资产或独特的美术作品，除非用户拥有它们或已获得许可。

推荐的紧凑采访

当 /LANDINGPAGE 被调用但上下文不足时，可以询问类似以下内容：

1. 理发店叫什么名字？在哪里？
2. 提供哪些服务？每项服务的价格是多少？
3. 你最想卖的服务或套餐是什么？
4. 营业时间是？
5. 你希望人们如何预约？
6. 你的 WhatsApp、电话和社交媒体是什么？
7. 你想吸引什么样的客户？
8. 你的理发店有什么不同之处？
9. 你们使用什么颜色、字体、标志和视觉风格？
10. 你能分享场所、理发师、客户和作品的照片吗？
11. 你有评论或真实反馈的截图吗？
12. 有促销活动、套餐或会员制度吗？
13. 你有喜欢的网站、Pinterest、Behance、Dribbble 的视觉参考或截图吗？
14. 有什么是你不希望出现在网站上的吗？

除非用户询问，否则不要提及内部方法。

渐进式完成

每次用户响应后：

• 在内部标记已知字段，
• 仅询问缺失的关键信息，
• 不要重新开始问卷，
• 不要重复已回答的问题。

当足够的信息存在时，自动进入执行阶段。

内部商业 + 品牌概要

在设计之前，构建一个结构化的内部概要：

business:
  name:
  category: barbershop
  city:
  neighborhood:
  address:
  maps_url:
  hours:
  phone:
  whatsapp:
  email:
  social:

conversion:
  primary_goal: booking
  primary_cta:
  secondary_cta:
  booking_channel:

audience:
  ideal_customer:
  positioning:
  objections:

brand:
  logo:
  colors:
  typography:
  slogan:
  visual_signatures:
  personality:

services:
  - name:
    description:
    price:
    duration:
    priority:

offers:
  packages:
  memberships:
  promotions:

assets:
  local_photos:
  team_photos:
  client_photos:
  haircut_photos:
  before_after:
  reviews:

references:
  - source:
    liked_for:

technical:
  current_stack:
  booking_backend:
  analytics:

除非用户要求查看，否则这仅供内部使用。

蓝图适配

在商业概要准备就绪后：

1. 阅读 references/master-barbershop-landing-prompt.md。
2. 提取完整的战略/页面系统。
3. 如果可用，将所有虚构值替换为真实用户数据。
4. 删除不相关的部分。
5. 在有用时添加业务特定的部分。
6. 保留转化旅程：
   • 冲击力，
   • 价值主张，
   • 服务，
   • 工作证明，
   • 好处，
   • 体验，
   • 定价，
   • 客户评价，
   • 团队，
   • 位置，
   • 异议处理，
   • 预订。
7. 不要向用户界面公开 AIDA/TOFU/MOFU/BOFU 标签。

默认漏斗

TOFU / 吸引注意

典型内容：

• 页眉，
• 英雄区，
• 视觉证明，
• 关键差异化因素，
• 第一个行动号召。

MOFU / 兴趣 + 欲望

典型内容：

• 服务，
• 画廊，
• 体验，
• 差异化，
• 团队，
• 定价，
• 前后对比，
• 社交证明。

BOFU / 行动

典型内容：

• 评价，
• 位置，
• 常见问题解答，
• 预订，
• WhatsApp，
• 最终行动号召。

当业务或参考证明有更好的顺序时，可以调整这个顺序。

文案撰写

语调：

• 自信，
• 男性化，
• 直接，
• 优雅，
• 高端。

首选：

• 短标题，
• 具体的服务语言，
• 本地相关性，
• 证明，
• 真实的差异化，
• 强有力的动词。

避免：

• 通用的 AI 文案，
• 模糊的奢华陈词滥调，
• “欢迎来到我们的理发店”，
• 无根据的赞美之词，
• 长段落。

视觉方向

基于捆绑蓝图的基础视觉方向：

• 高端，
• 男性化，
• 编辑风格，
• 现代，
• 都市，
• 精致，
• 电影感，
• 极简，
• 专属而不浮夸。

但用户的真实品牌和参考具有优先权。

避免：

• SaaS 模板美学，
• 蓝色/紫色技术渐变色，
• 过度的圆角卡片，
• 卡通插图，
• 过度的图标，
• 廉价的理发店陈词滥调，
• 视觉杂乱。

资产策略

优先级：

1. 用户提供的真实商业资产。
2. 用户拥有的品牌资产。
3. 用户提供的作为灵感的参考。
4. 生成的装饰性/概念性资产。
5. 仅在需要时使用库存资产。

如果原生图像生成存在：

• 在有用时将其用于装饰性或概念性的支持性图像，
• 不要虚构真实的客户、团队成员、评价或真实场所。

技术实现

动态前端要求

此技能必须创建一个真正的交互式前端，而不是静态模型。

首选实施顺序：

1. 如果现有项目已经使用 Next.js

   • 保留 Next.js，
   • 在合理的情况下保留当前架构，
   • 在现有项目中构建落地页。

2. 如果现有项目已经使用 React

   • 在无需迁移时保留 React，
   • 保留路由/构建约定，
   • 将落地页添加为可投入生产的 React 组件。

3. 如果没有前端项目存在

   • 使用以下技术创建一个新的 Next.js 项目：
     • Next.js
     • React
     • TypeScript
     • Tailwind CSS
   • 除非项目上下文另有要求，否则使用 App Router。

默认情况下，当有用时可以使用以下支持库：

• Framer Motion 用于高级动效/交互，
• Lucide React 用于克制的 UI 图标。

不要在没有明确目的的情况下添加依赖项。

必需的交互性

页面应包含相关的真实交互行为，例如：

• 粘性/半透明导航，
• 全屏或带动画的移动菜单覆盖层，
• 平滑的章节导航，
• 画廊/灯箱，
• 前后对比，
• 评价轮播/滑动行为，
• 常见问题解答手风琴，
• 预订模态框/抽屉，
• 多步骤预订界面，
• 响应式移动端粘性行动号召，
• 悬停/聚焦状态，
• 减少动效支持。

不要实现看起来可点击但实际上没有功能的虚假交互。

组件架构

干净地组件化。典型组件包括：

• Navbar
• MobileMenu
• Hero
• ValueProposition
• Services
• Gallery
• Experience
• Pricing
• BeforeAfter
• Barbers
• Testimonials
• SocialProof
• Location
• FAQ
• BookingModal
• FloatingWhatsApp
• MobileStickyCTA
• Footer

根据实际业务调整组件。不要仅仅因为参考蓝图中存在就创建未使用的部分。

项目检查

在编码之前：

• 检查项目根目录，
• 检测包管理器，
• 检查 package.json，
• 检测 Next.js/React/Tailwind 约定，
• 识别现有的设计系统/组件，
• 保留有用的约定，
• 避免破坏性重写。

如果项目为空，则初始化前端，而不是只生成 HTML 片段。

预订系统

如果不存在后端：

• 创建一个功能性的模拟预订 UI，
• 支持服务选择，
• 理发师选择，
• 日期，
• 时间，
• 客户详细信息，
• 确认状态。

如果不存在后端，切勿虚假声明预约已远程存储。

如果存在真正的后端/集成：

• 使用现有架构，
• 保留真实的可用性逻辑，
• 验证成功/失败状态。

WhatsApp

如果使用了 WhatsApp：

• 创建清晰的预订行动号召，
• 在适当情况下预填有用的消息，
• 针对移动端进行优化，
• 不要编造电话号码。

地图

当地图 URL/地址存在时：

• 显示真实地址，
• 链接到导航，
• 在合适的情况下嵌入地图。

本地 SEO

优先考虑：

• 在标题和内容中定位排名的城市/街区名称，
• 结构化数据（"LocalBusiness" 类型），
• 响应式设置，
• 关键页面指标性能，
• 语义 HTML，
• 无障碍等级，
• 移动兼容性。

性能

默认约束（优先于添加图片/效果）：

• Core Web Vitals 友好，
• 资源最小化，
• 响应式图片，
• 延迟加载，
• 字体优化，
• 动画在无功的情况下退化。

无障碍性

作为 This skill 的一部分，必须满足这些最低要求：

• 语义 HTML：使用 <nav>、<section>、<article>、<header>、<footer>、<main>、<aside>。
• 标题层级：清晰的 h1 > h2 > h3 层级。
• 有意义的链接/按钮标签。
• aria 属性：需要时使用 aria-label、aria-expanded、aria-controls、role。
• 焦点管理：模态框打开后聚焦到模态框，关闭后返还。
• 键盘导航：所有交互均可通过键盘访问。
• 跳过链接。
• 色彩对比度：文本/背景对比度 ≥ 4.5:1。
• 表单标签：可见标签与关联的 for/id。
• 错误消息：明确的验证反馈。
• 减少动效媒体查询：尊重 prefers-reduced-motion。

无障碍性检查，应请求 Impeccable 的帮助。

质量保证及交付

实施后，此技能负责审阅：

交付清单

• 所有真实商业数据已应用
• 所有部分都已填充（如果数据不足，则使用占位符）
• 行动号召和预订逻辑有效
• WhatsApp 已预填并有效
• 地图已链接/嵌入
• 所有图片/资产链接有效
• 颜色和字体匹配品牌
• 响应式直到移动端
• 滚动、过渡、动效流畅
• 菜单切换有效
• 模态框/抽屉在桌面和移动端工作
• 控制台无错误
• 构建成功
• 已请求 Impeccable 协助 UI 质量保证

本地预览交付

当它在开发中运行时：

• 调用运行服务器的命令，
• 确认它已启动，
• 提供可点击的链接。

不要要求用户导航到路径或自行运行命令。

如果服务器无法启动：

• 提供清晰的状态，
• 说明需要什么，
• 不要在没有服务器的工具中假装预览。

修复和迭代

用户反馈后：

• 不要重新开始，
• 不要要求新发现的信息，
• 进行有针对性的修改，
• 再次提供本地预览。

集成技能

如果检测到兼容环境：

# 如果可用，安装 Impeccable
npx impeccable install

# 如果可用，安装 Taste Skill
npx skills add Leonxlnx/taste-skill

这些技能是可选的。它们增强了输出，但不是此技能必需的。

如果安装中断：

• 继续处理请求，
• 手动应用视觉最佳实践，
• 不要中断流程。

协作模式

当它与其他技能一起工作时：

• Taste Skill：分享商业概要并请求输入视觉概念方向。审查其组件结构。
• Impeccable：分享完成的页面并请求审查按钮、间距、层级。
• 协调它们，使其改进不会覆盖商业数据或用户限制。

此技能不能做什么

此技能不会：

• 为多个理发店构建通用模板，
• 留下虚构的数据，
• 假装图片是真实的员工/客户，
• 忽略品牌指南，
• 创建只有静态 HTML 的页面（它必须制作一个动态前端），
• 说“我需要权限才能开始”，一旦采访完成。

边缘案例

1. 服装精品店或发廊：如果命令是 /LANDINGBARBERIA 但业务是发廊或服装店：

   • 礼貌地说明此技能专门针对理发店，
   • 如果用户坚持，应在采访期间设置适当的定位。

2. 用户提供的信息矛盾：如果地址与城市不匹配：

   • 指出不匹配，
   • 询问确认。

3. 用户拒绝提供信息：

   • 记录所需的细节作为占位符，
   • 标记它们需要更新，
   • 继续实施，但留下明确的 TODO。

4. 没有视觉参考的用户：

   • 遵循蓝图的基础视觉系统，
   • 仍然应用正确的间距和层级。

5. 多个位置：

   • 为一个专题页构建，
   • 如果用户要求，添加位置选择器或多位置支持。

6. 我希望每个部分都不同：

   • 尊重用户的愿景，
   • 只要它满足转化目标。

7. 他们在同一个会话中更改了名称/定价：

   • 更新内部概要，
   • 应用新信息。

8. “我已经有一个网站”：

   • 要求提供 URL，
   • 检查当前内容，
   • 提取有用元素，
   • 询问他们想要更改什么。

默认视觉基调

当用户没有强偏好时，蓝图建议：

• 深色/不饱和背景，
• 干净的白色文本，
• 点状的金色或琥珀色强调色，
• 高对比度可读性，
• 粗体无衬线字体用于标题，
• 大型排版，
• 充足留白，
• 电影摄影。

退出

用户可以在采访过程中的任何时刻输入 /EXIT：

• 停止采访，
• 保留收集到的数据，
• 在需要时稍后继续。