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 專案的可視化編輯器，支援直接在瀏覽器頁面中調整樣式、結構及內容並將修改同步儲存至源碼。。 支援平台包括：僅網頁。
同分類研究對象
這些產品屬於同一目錄分類。選型時請進一步核對客戶任務、功能與部署要求。