aidenybai/react-grab
项目介绍
直接从您的网站为编码智能体选择上下文
Select context for coding agents directly from your website
智能解读
原始标签
智能标签
使用场景
这个项目最适合需要将网页UI元素快速转换为代码上下文，以提升AI编程助手效率或加速开发调试的场景。
AI编程助手提速
在使用Cursor、Claude Code等AI编程助手时，需要手动查找和复制相关组件代码，过程繁琐且容易出错。
在浏览器中悬停目标UI元素，按⌘C/Ctrl+C即可一键复制文件路径、React组件和HTML源码，直接粘贴到AI助手提问框。
在Cursor中询问“如何修改这个按钮样式”，用React Grab复制按钮组件，AI能立即理解上下文并给出准确修改建议。
快速定位组件源码
在大型React项目中，从UI界面反向查找对应的源码文件需要手动搜索，效率低下。
直接点击页面元素，React Grab会显示组件文件名和路径，支持一键在编辑器中打开对应文件。
测试时发现某个表单组件有bug，用React Grab点击该表单，立即知道它来自`src/components/Form/ContactForm.tsx`。
团队代码审查辅助
代码审查时难以直观地将UI问题与具体代码关联，需要来回切换浏览器和代码库。
审查人员可直接在部署的网站上使用React Grab获取问题元素的完整代码上下文，精准定位问题代码位置。
QA报告“提交按钮在移动端布局错乱”，审查时用React Grab复制按钮组件，快速定位到需要修改的样式文件。
构建自定义开发工具
团队需要定制化的开发调试工具，但从头开发元素选择器和代码提取功能成本高。
利用React Grab提供的primitives（如getElementContext、freeze等）快速构建自己的代码检查或文档生成工具。
开发内部设计系统文档工具，用React Grab的primitives自动提取组件使用示例和源码，生成实时文档。
项目健康度
距上次更新 34 天
平台 Star TOP 32% · Forks 287
本周 +309 ⭐ · 本月 +1,324 ⭐
13 位贡献者 · 0 条平台评论
缺少 1 项内容
项目信息
赞赏支持
如果本站对你有帮助，欢迎打赏支持
微信
支付宝
Widget 徽章
相关项目推荐
freeCodeCamp/freeCodeCamp
freeCodeCamp.org开源代码库与课程体系，免费学习数学、编程与计算机科学
openclaw/openclaw
属于你个人的AI助手。全操作系统支持。全平台兼容。龙虾之道。🦞
kamranahmedse/developer-roadmap
提供交互式学习路线图、指南和其他教育内容，帮助开发者在职业生涯中成长。
vuejs/vue
此仓库为Vue 2版本。Vue 3版本请访问https://github.com/vuejs/core
microsoft/vscode
Visual Studio Code
n8n-io/n8n
具备原生AI能力的公平代码工作流自动化平台。支持可视化构建与自定义代码，可选自托管或云端部署，集成400多种服务。
加载评论中...