技巧

用 Grok 截图转 React 组件:视觉反馈让还原度从 60% 提到 77%

精选理由

xAI 仓库里展示的截图转组件玩法,视觉反馈让还原度从 60% 提到 77%,写前端的朋友可以抄这套流程

这篇分享演示了 screenshot to React 组件的工作流:把界面截图丢给 Grok,由它生成 Tailwind 组件。之后页面再对生成结果截图,将两张图轮廓叠加对比后回传给 Grok 修正偏差。作者给出的单轮运行数据显示,还原度从 60% 提升到 77%。完整代码开在于 github.com/xai-org 下的仓库。

图片来源 · eric zakariasson
原文 · eric zakariasson

3. screenshot to react component drop in a screenshot and grok writes a tailwind component. then the page screenshots the result, overlays the outlines of both, and sends that back so grok can fix what doesn't line up. in this run it went from 60% to 77%. github.com/xai-org/xai-co… Your browser does not support the video tag. 🔗 View on Twitter 💬 1 🔄 0 ❤️ 2 👀 308 📊 1 ⚡