用途
该技能用于从视觉参考中分析与提取设计模式，并将其应用到指定的目标页面。典型场景是落地页重设计：用户给出一个参考网站或设计图片，技能拆解其设计系统，包括布局结构、配色方案、排版和布局原则，然后在代码库的目标文件中实现对应设计。
主要能力
技能在收到“基于参考重设计落地页”的请求后，按以下流程工作：
-
用户访谈：若初始请求未提供，则询问参考 URL 或图片（可为在线网站 URL 或图片 URL），以及目标页面是代码库中的哪个文件（例如 app/(tabs)/index.tsx、app/landing.tsx）。若初始请求已包含这些细节，则跳过此步。
-
捕获参考设计：使用 Playwright MCP 打开参考 URL，导航到页面并截取整页截图以理解结构，同时与网站交互（鼠标悬停、点击），对页面进行深入分析。分析内容包括：布局结构（页头、主视觉区、内容区块、页脚）、交互元素、配色方案、排版（字体、字号、字重）、间距与内边距模式、UI 组件（按钮、卡片、表单等）以及响应式设计模式。
-
实现设计：读取目标页面文件以理解当前结构，并按照以下原则实现设计：匹配布局（复刻区块结构、网格布局、flex 模式）、匹配交互（在关键元素上复刻鼠标与按钮交互，包括点击与悬停）、匹配颜色（提取并使用参考中的精确十六进制色值）、匹配排版（使用相似字体，调整到可用系统字体或建议导入字体）、匹配间距（复刻内边距、外边距与间隙）、匹配组件（为按钮、卡片、输入框等构建等效的 React Native 组件）、遵循项目模式（按 CLAUDE.md 指南使用 StyleSheet.create()）、移动优先（确保设计在移动端 Expo/React Native 上可用），并将实现写入目标文件。
-
对比实现：如果参考是线上网站，则截取实现页面的截图，使用 Playwright 查看实现效果，并从布局对齐与比例、颜色准确性、排版一致性、间距与内边距、组件样式细节等方面进行视觉对比，记录发现的差异。
-
迭代与打磨：基于对比结果识别具体差距（布局问题如对齐、尺寸、定位；颜色不匹配；排版差异；缺失组件或细节；间距不一致），并做针对性修改，重复第 4-5 步，直到设计在技术可行的范围内尽可能接近、所有主要视觉元素都被复刻、用户确认满意。建议至少进行 3-5 轮迭代以达到高还原度。
-
最终审查：向用户呈现最终实现，总结已匹配的内容以及任何有意的差异，并建议后续改进（如动画、悬停状态、响应式调整）。
使用方式
用户以自然语言提出重设计请求，例如“让我们的落地页看起来像 https://stripe.com/payments”。技能会先确认需要接收设计的目标文件（如 app/(tabs)/index.tsx），然后依次执行捕获、实现、对比、迭代流程。
最佳实践
- 注重细节：间距、颜色或排版的微小差异都可能破坏视觉一致性。
- 提取精确值：使用取色器和测量工具从截图中获取准确数值。
- 组件可复用：将重复出现的模式抽取为可复用组件。
- 维持项目标准：遵循 StyleSheet.create() 模式与既有架构。
- 记录权衡：如果 React Native 的限制导致无法精确复刻，需说明原因。
技术说明（资料提供）
React Native 相关注意事项：Web 字体可能需要通过 expo-font 或 Google Fonts 加载；某些 Web 专有效果（box-shadow）在 React Native 中有对应实现（shadowColor、shadowOffset）；使用 Dimensions API 实现响应式布局。
迭代目标建议：第一轮聚焦整体布局与结构；第二轮处理颜色与排版；第三轮细化间距与尺寸；第四轮及以后进行细节打磨。
适用场景
适用于需要参照已有网站或设计稿，在 React Native/Expo 项目中复刻落地页视觉与交互的场景，尤其适合移动优先的页面重构与视觉对齐工作。
限制
资料未说明该技能支持的参考类型是否仅限于网页与图片、是否支持其他框架目标、是否涉及收费或价格、以及具体的准确率或效果保证。目标文件路径、参考来源等关键信息在缺失时需要用户补充。部分 Web 专有效果在 React Native 中可能无法完全复刻，需记录权衡。