最新

我曾经很喜欢《真实生活》杂志的美学和内容。但自2022年以来，它就沉寂了。你现在在读什么，能给你带来类似的体验呢？

嗨，我是Matjaz。 Piny是一个直接在Visual Studio Code、Cursor和Windsurf中运行的可视化编辑器。它支持Tailwind CSS、Astro、React和Next.js。 所有的编辑都直接在代码中进行，因此没有抽象层、没有云服务，也没有锁定。 Piny并不试图成为一个全能的可视化编辑器，涵盖布局创建、样式、数据、逻辑等内容……在AI编码代理的时代，这已经不再相关。 相反，Piny专注于两个可以真正增加价值的领域： # Tailwind样式 Piny让你可以轻松地使用可视化控件和类检查器（一个可编辑的类和状态树视图）来为JSX/HTML添加样式。这也适用于任何包含Tailwind类的字符串。 对于视觉任务（例如更改文本大小），直接更改视觉属性通常比与AI代理反复讨论要简单得多。 # 项目导航 通过在内置浏览器预览中直接选择元素来导航项目代码。只需在预览中点击标题、图像、图标、部分等，其源元素就会在Piny和代码中被选中。 此功能需要在布局中插入一个小的开发专用脚本。目前支持使用Vite的React项目以及任何Next.js和Astro项目。 Piny基于Pinegrow Web Editor，这是我们为静态HTML和WordPress开发的桌面可视化编辑器，我们已经积极开发了十多年。这使得Piny功能完善且稳健，并非一个最小可行产品（MVP）。 # Piny免费版和专业版 标准版完全免费。你甚至不需要注册。只需从扩展市场安装它，就可以开始使用。 Piny Pro增加了可视化选择（上述提到的项目导航）、自定义Tailwind主题导入和其他功能。我们正在进行一项早期访问优惠，享受60%的折扣，并且你可以永久保留。 # AI时代的可视化工具 网页开发发生了很大变化。当Pinegrow在11年前在HN上推出时，Bootstrap还是一个崭新的框架。 如今，可视化工具应该设计成补充AI辅助开发。这一原则在Piny中得到了体现： - 它在你的IDE中运行，你已经在这里工作 - 所有更改都发生在代码中 - 使用可视化工具处理可视化任务 - 帮助你跳转到代码中相关的组件/元素，以便你可以在可视化、代码或与AI的协作中进行编辑 - Piny在你需要时提供帮助，而在你不需要时则不打扰你 # 开始使用 要体验Piny，从扩展市场安装它，右键单击代码中的任意位置，选择“在Piny中编辑”。 如果你想尝试可视化选择，专业版试用版已包含在内。 如果你遇到任何问题，或者只是想联系我，请告诉我！