Piny

Piny 面向当下常见的开发流程：AI 编程代理先搭建页面和逻辑，随后需要人工微调间距、字体和文案，而不必为每一个像素重新发提示词。Piny 以开发依赖和 Vite 插件的形式安装，在应用旁打开可视化编辑器，点击任意元素即可选中渲染它的 JSX。在这里你可以使用项目自身的主题，在各类断点和状态下调整 Tailwind 的间距、颜色、字体、flex 和 grid 控件，编辑文本、图片和链接，并查看元素及其父级的类名树。

由于 Piny 直接编辑源码而非生成覆盖层，这些改动就是普通的代码变更：你的代理可以识别，也不会有任何内容进入生产构建。如果你的代理在你用 Piny 编辑某文件的同时也修改了它，Piny 会检测到变化并避免覆盖。"Target this element" 功能会复制元素的组件、文件和行号，方便你在下一轮提示中把代理精准指向该位置。

Piny 出自 Pinegrow Web Editor 团队，但它是独立产品，拥有自己的授权体系。它提供真正可用的免费版，无需账号、没有时间限制——点击选中、组件树、内容编辑、多页面视图、撤销与重做。Pro 版增加 Tailwind 与 Grid 控件、类名检查器、结构与 props 编辑、用于页面文本和数据的 Content Workspace，以及可注册自有组件的组件库（带预览和预设）。目前支持的项目是基于 Vite 5.2 或更高版本的客户端渲染 React；Astro 支持正在开发，Next.js 尚不支持。