关于 Piny
在 IDE 中为 Astro、React、Next.js 和 Tailwind CSS 提供的可视化编辑器。
平台
浏览 305 , 收录与 2025-11-15 12:32:14
产品介绍
什么是Piny？
Piny 是一个强大的可视化编辑器，可直接在 Visual Studio Code、Cursor 和 Windsurf 中运行。它支持 Tailwind CSS、Astro、React 和 Next.js。所有编辑都直接在代码中进行，确保没有抽象层、没有云服务和锁定。这使得开发人员能够以可视化的方式编辑代码，导航组件，并在没有特殊库或额外设置的情况下简化样式。Piny 旨在提供速度和控制，可以与编码助手一起或独立使用，兼容任何 React 或 Next.js 项目。
如何使用 Piny？
要使用 Piny，请首先直接从您首选 IDE 的扩展市场（例如 VS Code Marketplace）安装 Piny 扩展。安装完成后，右键单击代码中的任意位置，选择 "在 Piny 中编辑"即可开始使用可视化工具进行样式编辑。Piny 适用于 Astro、React 或 Next.js 项目。
Piny 的核心功能
可视化 Tailwind 控件
Tailwind 类检查器
在任何地方编辑 Tailwind 类
组件导航
AI 驱动的拖放
可视化选择
同时编辑多个元素
浏览整个项目
导入自定义 Tailwind 主题
Piny 的使用案例
使用 Tailwind CSS 进行可视化样式设计
以有序的树状结构管理复杂的 Tailwind 样式
在字符串、变量和非 React/Astro 代码中编辑 Tailwind 类
快速跳转组件并关联相关的预览路由
使用 AI 辅助拖放可视化构建 UI
同时选择和样式化多个元素
在整个项目中探索和导航组件
使用自定义 Tailwind 配置自定义可视化控件
Piny 的价格
Piny Free
$0 /年
在无费用的情况下享受基本功能。包括可视化 Tailwind 控件、Tailwind 类检查器、浏览组件结构、在任何地方编辑 Tailwind 类、AI 驱动的拖放、社区支持。
Piny Pro (早期访问)
US$49.00 /年 + 税
60% 折扣，直到 2025 年 5 月 28 日。包括所有免费功能，加上可视化选择、同时编辑多个元素、浏览整个项目、导入自定义 Tailwind 主题、优先邮箱支持，并锁定折扣价格。
Piny Pro (常规)
US$120.00 /年 + 税
在早期访问结束后按标准费率提供完整功能集。包括所有免费功能，加上可视化选择、同时编辑多个元素、浏览整个项目、导入自定义 Tailwind 主题、优先邮箱支持。
相关产品
Road Trip Navigator
使用AI和Google Maps的自驾游规划工具。
PlanTrips
基于AI的旅行规划工具，提供个性化行程和优惠。
WALLE
一个具有多种功能的一体化AI助手浏览器扩展。
LlamaIndex
一个用于构建与企业数据连接的知识助手框架。
PC Builder AI
一款AI助手，为构建性价比高的电脑推荐最佳组件。
Planitly
AI旅行规划助手，提供个性化行程和旅行推荐。
Wibe
AI驱动的社区平台，帮助创作者建立、互动与变现。
Maket
一款生成式人工智能软件，可提供即时建筑平面图和设计探索。
Genval AI
AI驱动的平台，用于代码生成、重构和开发。
Wunderguide
基于AI的旅行应用，提供个性化城市探索和音频导览。
Saner.AI
由AI驱动的知识管理应用，特别适合ADHD人士，用于捕捉、组织和生成洞察。
My Driim
人工智能驱动的梦境分析和可视化工具。
Filo Mail
AI 驱动的邮件应用，转变收件箱为宁静、专注的待办事项列表。
SocialBu
社交媒体管理和自动化工具，具有发布、分析和人工智能辅助功能。
Remail
AI驱动的Gmail扩展，快速草拟高质量电子邮件回复。