一个类似Cursor的可视化编辑器小玩具

最近我开发了一个类似于Cursor的可视化编辑器，它能够直接在浏览器中为Claude Code和Codex提供编辑功能。这个编辑器已经整合到了GitHub上，如果你感兴趣的话，可以给我点个小星星支持一下：GitHub - hangwin/mcp-chrome。

要开启这个编辑器，你可以通过右键菜单选择「chrome mcp server」然后切换到网页编辑模式，或者使用快捷键「cmd/ctrl + shift + o」。

这个编辑器提供了交互式尺寸与排版调整功能，你可以在画布上拖拽元素边缘来调整宽度和高度，以及字体大小。所有的视觉调整都会自动转换为代码变更建议，由Agent应用到源码中，实现设计与代码的实时同步。你可以通过这个视频了解更多。

此外，它还有一个可视化属性面板，允许你直接管理CSS属性，支持一键调整Flex/Grid布局、内外边距及样式细节。这非常适合快速原型设计或UI微调，可以大幅减少CSS编写时间。更多详情可以查看这个视频。

这个编辑器还支持直接调试Vue/React组件的状态，你可以实时查看和修改组件的props，而无需离开当前视图。这让你能够测试组件在不同状态下的渲染表现。更多内容可以在这个视频中找到。

最后，它还具备点选并提示功能，你可以选中任意页面元素，直接向Claude Code或者Codex发送修改指令。工具会自动提取选中组件的结构与上下文信息发送给AI，从而实现比全局对话更精准、更低延迟的代码修改。例如，你可以选择某个元素然后说「把这个变大一些」，让Claude Code在几秒内帮你实现精准修改并实时生效。更多关于这个功能的介绍可以在这个视频中了解。