Piny
Skill面向 React 和 Vite 项目的可视化编辑器，支持直接在浏览器页面中调整样式、结构及内容并将修改同步保存至源码。
- 月访问
- 5.8K
- 2026 年 9 月
- 公开收入
- 未公开
- 暂无公开收入证据
- 入门价
- $10/月
- 低于同类 66% 的产品同类中位数 $18/月
- 首次发布
- 18 个月前
- 2025-05-10 · 估算
访问
营销动作
发布、搜索与内容、引荐、促销在 Show HN 发布（8 分 · 5 评论）发布
Piny – Astro, React and Next Visual Editor for VSCode, Cursor, Windsurf — Hi, Matjaz here. Piny is a visual editor that runs directly in Visual Studio Code, Cursor and Windsurf. It supports Tailwind CSS, Astro, R…
2025 年 5 月 10 日 · 18 个月前发布页
第三方评测与案例拆解
获客渠道拆解、工程师评测与开源档案- 创作者原帖摘录：
- Hi, Matjaz here. Piny is a visual editor that runs directly in Visual Studio Code, Cursor and Windsurf. It supports Tailwind CSS, Astro, React and Next.js. All edits happen directly in the code, so there are no abstractions, no cloud services and no lock-in. Piny doesn’t try to be all-in-one visual editor that would cover layout creation, styling, data, logi
MCP 服务与 Agent 生态
Agent 智能体、MCP 与开发者接入
Agent Skill流量来源
访问构成
渠道
- 直接访问39%
- 自然搜索30%
- 外部引荐10%
- 社交媒体6%
- 其他14%
国家/地区
- 美国100%
搜索
站点权重 —域名注册 2025-01-15
| 关键词 | 月搜索量 |
|---|---|
| piny | 30.4K |
| astro visual editor | 1,030 |
| react piny | 30 |
| piny visual editor | 20 |
流量数据：Vaneform
定价
试用：Try Pro free for 14 days, without buying · 含免费档 · 2 档付费（$10–$60） · 观察于 2026-11-03 · 来源页面
入门价 $10/月，低于同类 66% 的产品；「UI/UX 设计与原型」中位数 $18/月。查看定价基准
最近一次价格变化 · 11 月 2 日：新增套餐 Piny Pro (Monthly subscription)查看变化记录
页面与变化
关键页面
每周快照变化
设计
深蓝底叠加青色柔光，蓝绿双行粗体标题居中铺开，兼容标志与底部编辑器截图形成清晰层级。
首屏预览 · 点击放大
首屏讲了什么与转化路径
“Your agent builds it. You fine-tune and maintain it.”
顶部横向导航，居中标题与双操作区，下接兼容标志及宽幅产品截图。
首屏转化路径：居中标题加按钮 + 产品界面截图或组件示意 → 免费开始 / 立即注册 · 配合客户或媒体标志墙建立信任
色板 · 点击复制
- 字体与排版
- 7.0
- 色彩与对比
- 8.0
- 构图与留白
- 8.0
- 细节与工艺
- 7.0
- 风格辨识度
- 6.0
结构
- 字体
- Roboto
- 首屏版式
- 居中标题加按钮
- 主视觉
- 产品界面截图或组件示意
- 转化动作
- 免费开始 / 立即注册
- 信任背书
- 客户或媒体标志墙
- 导航
- 顶部通栏导航
- 明暗与密度
- 深色 · 留白多
- 圆角与层级
- 小圆角 · 有阴影
预览 AI 设计说明全文（含 :root CSS 变量与版式规则）只写风格参数，禁止复刻该产品的品牌名、标志、文案与图片
# 设计说明：渐变光晕（兼备暗色开发者）
深色或浅色底上的彩色光晕与半透明玻璃面板，多见于 AI 产品。
## 设计参数
```css
:root {
--background: #101827;
--surface: #f4f5f6;
--foreground: #f5f7f9;
--muted-foreground: #a6abb7;
--accent: #00bdbb;
--radius: 4px;
--font-heading: "Roboto", ui-sans-serif, system-ui, sans-serif;
--font-body: "Roboto", ui-sans-serif, system-ui, sans-serif;
}
```
色彩面积配比：背景 #101827（约 74%） · 面板 #F4F5F6（约 10%） · 正文 #F5F7F9（约 4%） · 次要文字 #A6ABB7（约 3%） · 强调 #00BDBB（约 9%）。背景与面板占绝大部分面积，强调色只用于主按钮与当前激活状态。
## 版式与转化结构
- 首屏版式：居中标题加按钮
- 导航结构：顶部通栏导航
- 明暗与密度：深色 · 留白多
- 圆角与层级：小圆角；用阴影区分层级
- 主视觉载体：产品界面截图或组件示意
- 转化动作：免费开始 / 立即注册 · 信任背书采用客户或媒体标志墙
- 标题切入点：品牌宣言与好奇心
- 首屏组件特征：首屏大幅产品界面、客户标志墙
- 空间布局拆解：顶部横向导航，居中标题与双操作区，下接兼容标志及宽幅产品截图。
- 视觉特征总结：深蓝底叠加青色柔光，蓝绿双行粗体标题居中铺开，兼容标志与底部编辑器截图形成清晰层级。
## 避免
- 纯平面色块
- 衬线正文
- Cluttered dense tables in the hero
请按上面的设计参数与版式实现界面：颜色只用这些变量，强调色只给主要操作与当前状态。只采用这种风格，禁止复刻任何参考产品的品牌名、标志、文案与图片。
问题与证据
- Piny 的价格是多少？
- Piny Free: 免费; Piny Pro (Yearly subscription): $60/年（按年付）; Piny Pro (Monthly subscription): $10/月. 观察于 2026-11-03。 当前计费条件、用量限制与税费以来源页面为准。来源
- Piny 的网站访问量是多少？
- Vaneform 估算 2026-09 网站访问量为 5.8K。访问量包含重复访问，付费客户数与收入需分别查看对应证据。来源
- Piny 是什么产品，支持哪些平台？
- Piny 归属「UI/UX 设计与原型」赛道：面向 React 和 Vite 项目的可视化编辑器，支持直接在浏览器页面中调整样式、结构及内容并将修改同步保存至源码。。 支持平台包括：网页。
同分类研究对象
这些产品属于同一目录分类。选型时请进一步核对客户任务、功能与部署要求。