Back to Details

aesthetic-analysis

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Landing Page Redesign

着陆页重设计

Instructions

说明

When requested to redesign a landing page based on a reference:
当要求根据参考内容重设计着陆页时：

1. User Interview

1. 用户访谈

  • If not provided in the initial request, ask the user for:
    • Reference URL or Image: The landing page or design to replicate (can be a live website URL or an image URL)
    • Target Page: Which file in the codebase should receive the design (e.g., 
      app/(tabs)/index.tsx
      , 
      app/landing.tsx
      )
    • If details are provided in the initial request, skip to step 2
  • 如果初始请求中未提供，向用户询问：
    • 参考URL或图片：要复刻的着陆页或设计（可以是在线网站URL或图片URL）
    • 目标页面：代码库中哪个文件应应用该设计（例如：
      app/(tabs)/index.tsx
      、
      app/landing.tsx
      ）
    • 如果初始请求中已提供详细信息，直接跳至步骤2

2. Capture Reference Design

2. 捕获参考设计

  • Use Playwright MCP to open the reference URL:
    • Navigate to the page
    • Take a full-page screenshot to understand structure
    • Interact with the website, mouse hover, click around
    • Analyze the page deeply
    • Analyze the landing page/image for:
      • Layout structure (header, hero, sections, footer)
      • Interactive elements
      • Color palette
      • Typography (fonts, sizes, weights)
      • Spacing and padding patterns
      • UI components (buttons, cards, forms, etc.)
      • Responsive design patterns
  • 使用Playwright MCP打开参考URL：
    • 导航至该页面
    • 截取整页截图以了解结构
    • 与网站交互，包括鼠标悬停、点击操作
    • 深入分析页面
    • 分析着陆页/图片的以下内容：
      • 布局结构（页眉、英雄区、板块、页脚）
      • 交互元素
      • 调色板
      • 排版（字体、字号、字重）
      • 间距和内边距模式
      • UI组件（按钮、卡片、表单等）
      • 响应式设计模式

3. Implement the Design

3. 实现设计

  • Read the target page file to understand current structure
    • Implement the design following these principles:
      • Match the layout: Replicate section structure, grid layouts, flex patterns
      • Match the intractions: Replicate mouse and button interactions, whether clicks or hovers - on key elements
      • Match colors: Extract and use exact hex values from the reference
      • Match typography: Use similar fonts (adjust to available system fonts or suggest font imports)
      • Match spacing: Replicate padding, margins, and gaps
      • Match components: Build equivalent React Native components for buttons, cards, inputs, etc.
      • Follow project patterns: Use StyleSheet.create() as per CLAUDE.md guidelines
      • Mobile-first: Ensure the design works on mobile (Expo/React Native)
    • Write the implementation to the target file
  • 阅读目标页面文件以了解当前结构
    • 遵循以下原则实现设计：
      • 匹配布局：复刻板块结构、网格布局、Flex模式
      • 匹配交互：复刻鼠标和按钮交互，包括关键元素的点击或悬停效果
      • 匹配颜色：从参考中提取并使用精确的十六进制值
      • 匹配排版：使用相似字体（根据可用系统字体调整或建议导入字体）
      • 匹配间距：复刻内边距、外边距和间隙
      • 匹配组件：为按钮、卡片、输入框等构建等效的React Native组件
      • 遵循项目模式：按照CLAUDE.md指南使用StyleSheet.create()
      • 移动优先：确保设计在移动设备上正常运行（Expo/React Native）
    • 将实现代码写入目标文件

4. Compare Implementations

4. 对比实现效果

  • If the reference is a live website:
    • Take a screenshot of the implemented page
    • Use Playwright to view your implementation
    • Visually compare:
      • Layout alignment and proportions
      • Color accuracy
      • Typography consistency
      • Spacing and padding
      • Component styling details
    • Document differences found
  • 如果参考是在线网站：
    • 截取已实现页面的截图
    • 使用Playwright查看你的实现效果
    • 视觉对比以下内容：
      • 布局对齐和比例
      • 颜色准确性
      • 排版一致性
      • 间距和内边距
      • 组件样式细节
    • 记录发现的差异

5. Iterate and Refine

5. 迭代与优化

  • Based on comparison, identify specific gaps:
    • Layout issues (alignment, sizing, positioning)
    • Color mismatches
    • Typography differences
    • Missing components or details
    • Spacing inconsistencies
    • Make targeted refinements to address each gap
    • Repeat steps 4-5 until:
      • The design matches as closely as technically possible
      • All major visual elements are replicated
      • User confirms satisfaction
    • Aim for 3-5 iterations minimum to achieve high fidelity
  • 根据对比结果，找出具体差距：
    • 布局问题（对齐、尺寸、定位）
    • 颜色不匹配
    • 排版差异
    • 缺失的组件或细节
    • 间距不一致
    • 进行针对性优化以解决每个差距
    • 重复步骤4-5，直到：
      • 设计在技术层面尽可能接近参考
      • 所有主要视觉元素都已复刻
      • 用户确认满意
    • 至少进行3-5次迭代以实现高保真度

6. Final Review

6. 最终审核

  • Present the final implementation to the user
    • Summarize what was matched and any intentional differences
    • Suggest any follow-up improvements (e.g., animations, hover states, responsive tweaks)
  • 向用户展示最终实现效果
    • 总结已匹配的内容以及任何有意保留的差异
    • 建议后续改进方向（例如：动画、悬停状态、响应式调整）

Best Practices

最佳实践

  • Be detail-oriented: Small differences in spacing, colors, or typography can break the visual consistency
  • Extract exact values: Use color pickers and measurement tools to get precise values from screenshots
  • Component reusability: Extract repeated patterns into reusable components
  • Maintain project standards: Follow the StyleSheet.create() pattern and existing architecture
  • Document trade-offs: If React Native limitations prevent exact replication, document why
  • 注重细节：间距、颜色或排版的细微差异可能会破坏视觉一致性
  • 提取精确值：使用取色器和测量工具从截图中获取精确值
  • 组件复用：将重复模式提取为可复用组件
  • 遵循项目标准：遵循StyleSheet.create()模式和现有架构
  • 记录权衡方案：如果React Native的限制导致无法精确复刻，记录原因

Example Flow

示例流程

User request: "Make our landing page look like https://stripe.com/payments"
  1. Interview: Ask "Which file should receive this design?" → User: "app/(tabs)/index.tsx"
  2. Capture:
    • Navigate to stripe.com/payments
    • Take full-page screenshot
    • Analyze deeply: Dark theme, gradient hero, feature grid, clean typography, button changes color upon hover/click
  3. Implement:
    • Read app/(tabs)/index.tsx
    • Build based on reference
  4. Compare:
    • Screenshot shows hero gradient is lighter than reference
    • Button border-radius is too sharp
    • Font weights don't match
    • Button doesn't change upon hover
  5. Iterate:
    • Adjust gradient colors to match
    • Reduce border-radius on buttons
    • Increase font weights
    • button changes upon hover/click
    • Re-compare
  6. Iterate again:
    • Fine-tune spacing between sections
    • Adjust icon sizes
    • Match exact color values
  7. Final review: Present to user with summary of matched elements
用户请求："让我们的着陆页看起来和https://stripe.com/payments一样"
  1. 访谈：询问"哪个文件应应用该设计？" → 用户："app/(tabs)/index.tsx"
  2. 捕获：
    • 导航至stripe.com/payments
    • 截取整页截图
    • 深入分析：深色主题、渐变英雄区、功能网格、简洁排版、按钮在悬停/点击时变色
  3. 实现：
    • 阅读app/(tabs)/index.tsx
    • 根据参考内容构建
  4. 对比：
    • 截图显示英雄区渐变比参考更浅
    • 按钮的边框半径过于尖锐
    • 字重不匹配
    • 按钮悬停时无变化
  5. 迭代：
    • 调整渐变颜色以匹配参考
    • 减小按钮的边框半径
    • 增加字重
    • 实现按钮悬停/点击时的变色效果
    • 再次对比
  6. 再次迭代：
    • 微调板块之间的间距
    • 调整图标尺寸
    • 匹配精确的颜色值
  7. 最终审核：向用户展示成果并总结已匹配的元素

Technical Notes

技术说明

  • React Native considerations:
    • Web fonts may need to be loaded via expo-font or google fonts
    • Some web-specific effects (box-shadow) have React Native equivalents (shadowColor, shadowOffset)
    • Use Dimensions API for responsive layouts
  • Iteration targets:
    • First iteration: Overall layout and structure
    • Second iteration: Colors and typography
    • Third iteration: Spacing and sizing refinement
    • Fourth+ iterations: Fine details and polish
  • React Native注意事项：
    • Web字体可能需要通过expo-font或谷歌字体加载
    • 一些Web特有的效果（box-shadow）有对应的React Native替代方案（shadowColor、shadowOffset）
    • 使用Dimensions API实现响应式布局
  • 迭代目标：
    • 第一次迭代：整体布局和结构
    • 第二次迭代：颜色和排版
    • 第三次迭代：间距和尺寸优化
    • 第四次及以后迭代：细节打磨

References

参考资料