aesthetic-analysis

着陆页重新设计

说明

如果用户要求基于参考设计重新设计着陆页：

1. 用户访谈

• 如果用户的初始请求中没有提供以下信息，请向用户询问：
  • 参考 URL 或图片：要复刻的着陆页或设计（可以是在线网站 URL 或图片 URL）
  • 目标页面：代码库中要应用此设计的文件（例如 app/(tabs)/index.tsx、app/landing.tsx）
• 如果用户的初始请求中已提供相关信息，则跳到第 2 步

2. 捕获参考设计

• 使用 Playwright MCP 打开参考 URL：
  • 导航到页面
  • 截取整页截图，以了解页面结构
  • 与网站互动：悬停鼠标、点击浏览
  • 深入分析页面
• 分析着陆页/图片中的以下内容：
  • 布局结构（页眉、主视觉区、各区块、页脚）
  • 交互元素
  • 配色方案
  • 字体排版（字体、字号、字重）
  • 间距和内边距模式
  • UI 组件（按钮、卡片、表单等）
  • 响应式设计模式

3. 实现设计

• 阅读目标页面文件，了解当前结构
• 遵循以下原则实现设计：
  • 匹配布局：复刻区块结构、网格布局、弹性布局模式
  • 匹配交互：复刻关键元素的鼠标和按钮交互，包括点击或悬停
  • 匹配颜色：从参考设计中提取并使用精确的十六进制值
  • 匹配字体排版：使用相似的字体（调整为可用的系统字体，或建议导入字体）
  • 匹配间距：复刻内边距、外边距和间隔
  • 匹配组件：构建等效的 React Native 组件，如按钮、卡片、输入框等
  • 遵循项目规范：按照 CLAUDE.md 中的指南使用 StyleSheet.create()
  • 移动端优先：确保设计适用于移动端（Expo/React Native）
• 将实现写入目标文件

4. 比较实现效果

• 如果参考页面是在线网站：
  • 截取实现页面的截图
  • 使用 Playwright 查看实现效果
• 进行视觉比较：
  • 布局对齐和比例
  • 颜色准确度
  • 字体排版一致性
  • 间距和内边距
  • 组件样式细节
• 记录发现的差异

5. 迭代优化

• 根据比较结果，找出具体差距：
  • 布局问题（对齐、尺寸、位置）
  • 颜色不匹配
  • 字体排版差异
  • 缺少的组件或细节
  • 间距不一致
• 针对每项差距进行调整
• 重复步骤 4-5，直到：
  • 设计在技术可行范围内尽可能贴近参考
  • 所有主要视觉元素均已复刻
  • 用户确认满意
• 至少进行 3-5 轮迭代，以达到较高的还原度

6. 最终审查

• 向用户展示最终实现
• 总结已匹配的内容和有意保留的差异
• 提出后续改进建议（例如动画、悬停状态、响应式调整）

最佳实践

• 注重细节：间距、颜色或字体排版上的细微差异都可能破坏视觉一致性
• 提取精确值：使用取色器和测量工具，从截图中获取精确数值
• 组件可复用：将重复模式提取为可复用组件
• 遵循项目标准：遵循 StyleSheet.create() 模式和现有架构
• 记录权衡：如果 React Native 的限制导致无法精确复刻，请说明原因

示例流程

用户请求：“让我们的落地页看起来像 https://stripe.com/payments”

1. 访谈：询问“应该将此设计应用到哪个文件？”→ 用户：“app/(tabs)/index.tsx”
2. 采集：
   • 访问 stripe.com/payments
   • 截取整页屏幕截图
   • 深入分析：深色主题、渐变主视觉区、功能网格、简洁的字体排版、按钮在悬停或点击时会变色
3. 实现：
   • 读取 app/(tabs)/index.tsx
   • 根据参考页面构建
4. 对比：
   • 屏幕截图显示主视觉区的渐变比参考页面更浅
   • 按钮的圆角过于尖锐
   • 字重不匹配
   • 按钮悬停时不会变化
5. 迭代：
   • 调整渐变颜色以匹配
   • 减小按钮的圆角
   • 增加字重
   • 让按钮在悬停或点击时发生变化
   • 再次对比
6. 再次迭代：
   • 微调各区块之间的间距
   • 调整图标尺寸
   • 匹配精确的颜色值
7. 最终审查：向用户展示结果，并总结匹配的元素

技术说明

• React Native 注意事项：

  • 网页字体可能需要通过 expo-font 或 Google Fonts 加载
  • 某些网页专属效果（box-shadow）在 React Native 中有对应实现（shadowColor、shadowOffset）
  • 使用 Dimensions API 实现响应式布局

• 迭代目标：

  • 第一次迭代：整体布局和结构
  • 第二次迭代：颜色和字体排版
  • 第三次迭代：优化间距和尺寸
  • 第四次及后续迭代：完善细节和润色

参考资料

• Playwright MCP 文档
• Expo 样式指南
• React Native StyleSheet