词映 AI导航
工具库Skills 技能
我的收藏
词映 AI导航

Claude Code debug-visual：用截图诊断 React Native 显示问题

English

Claude Code 安装步骤

  1. 打开 GitHub 固定提交的 `.claude/skills/debug-visual/SKILL.md`，核对内容与使用条件。
  2. 在自己的项目中创建 `.claude/skills/debug-visual/`，把核对后的文件保存为 `.claude/skills/debug-visual/SKILL.md`。
  3. 在该项目根目录启动 Claude Code，在斜杠菜单中选择 `/debug-visual`。

中文摘要

将指定截图与组件代码一起核对，按布局、颜色、字号和小屏表现整理问题，再复查确认过的修订。

SKILL.md 中文导读

可复现示例

截图样例 issue-27 取自项目本地模拟器。卡片里的长标题“Workshop registration”在 320 px 宽的截图被裁切。

工作步骤

  1. 先从截图和目标组件定位问题的设备尺寸与显示状态。
  2. 列出核对证据和优先级，按同一场景验证有授权的调整。

验收方法

报告注明 {category: 'Typography', widthPx: 320, titleClipped: true}，对应卡片组件。确认修订后用相同宽度对照新截图。

GitHub 原文 · 更新日期

适用环境

在 Claude Code 中使用完整 ERNE React Native / Expo 工程，并保留已核对的 visual-debugger 项目代理。已有截图可以直接分析；自动获取截图需配套设备工具。

常见问题

必须先连接模拟器才能审查吗？

已有截图时可直接给出本地文件，结合组件代码排查。自动捕获或复拍时才需准备相应工具和模拟器。

相关指南

相关推荐