Polymet

YC 出身的「AI 產品設計師」:用文字、截圖或 Figma 生成頁面與元件,帶入自家設計系統,直接輸出 React+Tailwind 程式碼

免費或付費 4 / 5
一句話介紹:YC 出身的「AI 產品設計師」:用文字、截圖或 Figma 生成頁面與元件,帶入自家設計系統,直接輸出 React+Tailwind 程式碼

Polymet 是 Y Combinator 2024 夏季梯次的新創,官網自稱「AI 產品設計師」。它跟 Lovable、Bolt 這類「AI 寫 App」工具的出發點不同:Polymet 從設計流程切入,讓你用英文描述、上傳手繪草圖或截圖、匯入 Figma 畫面來生成頁面、元件與可互動原型,再輸出可上線的前端程式碼(React+Tailwind CSS)。官網列出的使用者包括字節跳動、Glean、Turing、EQ Bank 等公司。

功能特色與適用場景:工作區分成 Canvas 與 Focus 兩種模式,Canvas 可以看整個專案的所有畫面,Focus 用來精修細節;同一個需求可以生成多個變體比較。最大的賣點是「帶入自己的設計系統」:可以連接 GitHub、公開或私有 npm 套件與 Storybook,讓 AI 用你們既有的元件來畫新頁面,而不是每次都長得像同一個模板。視覺編輯器可以直接調整排版、間距、顏色、字型與陰影,也有圖層面板;程式碼編輯器則讓工程師手動修改。設計稿可以匯出回 Figma,或用分享連結讓不需帳號的利害關係人試玩原型。

從官網 changelog 看,Polymet 這一年更新得很勤。7 月推出 MCP 伺服器,可以從 Claude Code 直接呼叫 Polymet 生成畫面再把程式碼拉回專案;8 月加入網路搜尋,貼網址就能抓那個網站的色彩、字型等設計 token;9 月起可連接 GitHub、Linear、Slack、Notion、Sentry、PostHog、Miro 等工具,讓 AI 讀需求單或錯誤紀錄再設計,也支援手機操作;10 月 24 日則推出專案分支(branching),可以開分支試大改動,衝突時用 AI 合併。專案也能接 Supabase 後端並直接發布。

給台灣使用者的建議:Polymet 最適合已經有設計系統的產品團隊,PM 可以拿它取代冗長的規格文件,直接做出可點的原型給工程師看;業務也能幫特定客戶客製 Demo 頁。介面與提示以英文為主,官方教學也寫「Design with English」,中文描述可以試,但複雜需求建議用英文下指令,畫面上的中文文案再另外指定。隱私方面要注意:官方 FAQ 寫明可能用你的內容改進模型,個人需要寫信 opt-out,Enterprise 方案則預設排除。跟 Figma 內建 AI 相比,Polymet 更偏向「設計直接變程式碼」;只想快速做頁面的話也可以比較 v0。

TheAI學院 編輯建議

編輯實測後的真心話
4

Polymet 跟一般 AI 建站工具最大的不同,是它認真看待「設計系統」這件事,能用你們自己的元件生成畫面。從 changelog 看團隊更新非常勤,10 月還加了專案分支。比較需要注意的是預設的資料使用政策,處理未公開產品前記得先 opt-out。

— theai 編輯團隊

主要功能

  • 用文字、截圖、手繪草圖或 Figma 畫面生成頁面、元件與互動原型
  • 帶入自家設計系統:支援 GitHub、npm 套件與 Storybook
  • 輸出 React+Tailwind CSS 程式碼,並可匯出回 Figma
  • 視覺編輯器與程式碼編輯器並行,支援專案分支與 AI 合併
  • MCP 伺服器與 GitHub、Linear、Notion、Sentry 等工具連接器

如何使用 Polymet

  1. 到 polymet.ai 點 Get Started 註冊,先用免費的 500 點
  2. 用英文描述頁面需求,或上傳截圖、手繪草圖、匯入 Figma 畫面
  3. 在設定中連接 GitHub、npm 套件或 Storybook,帶入自家設計系統
  4. 在 Canvas 比較生成的變體,用視覺編輯器微調間距、顏色與字型
  5. 用分享連結讓團隊試玩原型,確認後匯出 React 程式碼或回 Figma
  6. 處理機密設計前,先寫信申請排除模型訓練

適用場景

  • 產品經理用原型取代冗長規格文件,直接給工程師與主管試玩
  • 設計團隊把既有元件庫接進來,快速產出新功能頁面的多個變體
  • 業務為特定客戶客製化 Demo 頁與登陸頁
  • 工程師在 Claude Code 裡透過 MCP 請 Polymet 生成畫面再拉回程式碼
  • 新創團隊從 Figma 草稿一路做到可發布的前端頁面

Polymet 的優點與缺點

優點

  • 能吃進既有設計系統,產出不會千篇一律
  • 設計與程式碼同步產出,PM、設計師、工程師共用一份成果
  • 免費版每 30 天 500 點,預覽、匯出與發布不另收費

缺點

  • 官方教學以英文操作為主,中文提示效果需自行測試
  • 預設可能用使用者內容改進模型,需寫信申請排除(Enterprise 預設排除)
  • 產出限定 React+Tailwind,用其他前端框架的團隊需要轉換

價格方案

Free 每個組織每 30 天 500 點;Pro 每月 25 美元起(可分 12 級加量);Team 方案為同等點數加團隊功能;年繳送兩個月。無超額收費,預覽、匯出與發布各方案皆免費。Enterprise 需洽詢,價格以官網為準

Polymet 常見問題

Polymet 多少錢?

免費方案每個組織每 30 天 500 點;Pro 每月 25 美元起,可依需求分 12 級加量;Team 方案是同等點數再加團隊功能,年繳送兩個月。沒有超額收費,預覽、匯出與發布在各方案都免費,Enterprise 需洽詢,以官網為準。

Polymet 產出的程式碼是什麼格式?

官方 FAQ 說明輸出 React 與 Tailwind CSS,預覽環境會依專案設定執行 React 18 或 19、Tailwind 3 或 4。也可以匯出整個 repo、匯出到 Figma 或下載成圖片。

Polymet 會拿我的設計去訓練模型嗎?

官方 FAQ 寫明可能使用使用者建立的內容來改進模型,可寫信到 [email protected] 申請排除;Enterprise 方案客戶預設不納入訓練。處理未公開產品設計時,建議先完成 opt-out。

不是設計師也能用 Polymet 嗎?

可以。官方說明產品經理會用它做原型取代規格文件,業務團隊用來做客製化 Demo,工程師則用來加速前端開發。只要能描述需求或提供參考截圖,就能開始生成。

使用者評價

還沒有足夠評價,搶先分享你的使用心得!

寫下你的評價

評論將經審核後公開。

Polymet 的替代方案

查看相似的 AI 工具 →

相關 AI 工具

猜你也想看的AI 商品視覺生成

前往官網 ↗