关于 Piny
在 IDE 中为 Astro、React、Next.js 和 Tailwind CSS 提供的可视化编辑器。
平台
浏览 279 , 收录与 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 主题、优先邮箱支持。
相关产品
WALLE
一个具有多种功能的一体化AI助手浏览器扩展。
Wunderguide
基于AI的旅行应用，提供个性化城市探索和音频导览。
Wibe
AI驱动的社区平台，帮助创作者建立、互动与变现。
Filo Mail
AI 驱动的邮件应用，转变收件箱为宁静、专注的待办事项列表。
SocialBu
社交媒体管理和自动化工具，具有发布、分析和人工智能辅助功能。
SafeBase
SafeBase 通过 AI 驱动的信任中心自动化安全审查和问卷响应。
Airparser
LLM 驱动的数据提取工具，将文档转换为结构化数据以便实时导出。
Simple Metrics
一款用于自动化和增强生产力的AI驱动Google表格插件。
Houmify
AI驱动的房地产平台，为房主和买家提供见解、解决方案和帮助。
Remail
AI驱动的Gmail扩展，快速草拟高质量电子邮件回复。
ChatGPT Copilot from Yooz
免费的AI助手，用于写作和内容创作。
ChatGPT Extension
将 ChatGPT 与搜索引擎集成，提供即时聊天和增强浏览体验。
Olly Social
社交媒体互动的人工智能助手，评论生成和病毒传播评估。
My Glow Up AI
基于AI的移动应用，提供个性化自我提升和全面的转型指导。
GoProfiles
基于人工智能的员工平台，用于员工参与、目录和同伴认可。