拜托了!请阅读这个
摘要
一位开发者描述了构建一个工具,该工具允许用户通过拖拽、调整大小和编辑元素来可视化地调整AI生成的网站,这会直接更新代码,并支持响应式设计预览和更改。
大家好,我是一名开发者,经常遇到这个问题:即使我给AI提供了足够的上下文,小修改也会变得很烦人。移动这个文本一点,让那个图像变小,调整间距... 有时它不理解我的意思,或者做出与我想要的不同的事情。然后就需要更多的解释、更多的提示、消耗更多的tokens。所以我开始构建这个。如果AI创建了网站,而我们自己只需调整那些小东西,会怎样?你在网站上点击某个元素,移动它、调整大小、编辑文本或更换图像,它就会直接将更改保存到你的代码中。无需翻找文件并调整边距和填充值来查看是否看起来正确。你还可以同时预览桌面、平板和移动设备,查看在不同设备上的效果。对于支持的更改,你可以选择仅更改该屏幕尺寸或应用于所有地方。这样在移动设备上调整内容就不会破坏你的桌面布局,这取决于你的选择。目前它包含:
- 拖拽、调整大小和文本编辑
- 图像和背景更改,包括从设备上传
- 可移动的设备预览,带画布缩放
- 用于选择整个容器或其中单个元素的控件
- 编辑历史和撤销/重做
- HTML支持,以及实验性的React和Next.js支持
它仍处于初始阶段,有许多需要修复和完善的地方,包括扩展哪些编辑可以为每个屏幕尺寸单独进行。老实说,我不知道其他人是否需要这个,但直接进行我想象中的更改而不是再次解释,对我来说感觉很有用。你会使用这样的工具吗?我应该开源它以便我们可以一起构建,还是你更愿意等到它更完善后再使用?另外,如果有任何添加想法,请随时提出。
相似文章
可编辑视觉设计
由视觉语言模型引导的编码代理通过合成视觉资源和优化HTML/CSS布局,生成可编辑的分层设计,实现具有精确控制的后编辑。
@DivyanshT91162: Claude Code 刚刚越界了。它现在可以对几乎任何网站的用户界面进行逆向工程。推出 AIDesi…
AIDesigner MCP v2 使 AI 编码代理能够对任何网站的用户界面进行逆向工程,提取品牌、资源与组件,自动重建完整的设计系统,从而实现对精英 SaaS 界面的快速克隆与重新设计。
@mikenevermiss: 这家伙刚刚录制了一份完整指南,教你如何用AI构建交互式动画网站。先收藏再…
一份免费的逐步指南,教你用AI构建交互式动画网站,展示真实工作流程。
DesignMD
DesignMD 是一款将任何网站转换为人工智能就绪的设计系统的工具,简化了从设计到开发的工作流程。
如何让AI像素级克隆网站(构建克隆工具的经验总结)
从构建AI网站克隆工具中获得的经验,重点介绍了截图和布局推理的陷阱,并引入了Copy-Anything,一个免费开源的像素级克隆工具。