每條內部邊界只會產生一次，並以相反方向被兩個相鄰拼塊重複使用。SVG 裁剪會在這些弧形拼塊內保留原始照片；本機互動層會追蹤移動、吸附距離與完成狀態。您擁有的照片會在本機組裝與遊玩，不進行生成呼叫。PopNow 可在精確報價並經核准後建立缺少的拼圖圖片；拼塊數量越多，本機渲染與互動的工作量越大。
- 用 PopNow 生成
- 圖片
- 需要
- Python 3
如果已有合適的輸入素材，生成是選用步驟。
v1.0.0 · 更新於 2026年10月25日 · 11.2 MB · 可用於個人和客戶專案；請勿轉售或分享技能包。
你會得到
可遊玩的本機 HTML 拼圖
完成照片 PNG 與可編輯的 SVG 裁剪路徑
拼塊幾何、複製的照片與可攜式設定說明
適合
- 個人照片拼圖與趣味紀念品
- 具有可驗證完成狀態的互動插圖
不適合
- 可供雷射切割的公差
- 不受限制的拼貼擺放
如何運作
包含本機算圖工具
選擇輸入
選擇一張細節豐富的照片並設定拼圖網格。
渲染並檢查
建立共享的拼塊幾何並開啟本機 HTML。
調整並導出
遊玩、檢視完成圖片，或匯出可編輯的裁剪路徑。
工作流程如何運作
拼圖照片遊樂場 如何運作
每條內部邊界只會產生一次，並以相反方向被兩個相鄰拼塊重複使用。SVG 裁剪會在這些弧形拼塊內保留原始照片；本機互動層會追蹤移動、吸附距離與完成狀態。
技能包內有什麼
你可以修改什麼
- rows: 2–8 與 columns: 2–10
- tab_depth: 較小拼塊邊長的 0.10–0.23
- snap_distance: 8–40 SVG 單位
- 來源照片與洗牌種子
交付前需要檢查什麼
- 拼塊數等於 rows × columns，且每個識別碼皆為唯一。
- 每一塊都是由共享邊建構的封閉路徑。
- 保存的簡介重現 PNG 和 SVG；不安全的替換將被拒絕。
查看技能包檔案
這裡列出此版本中部分實際使用的檔案及其用途。完整下載包還包含使用說明和適用的授權聲明。
域演算法和不變性檢查。
scripts/recipe.py可執行、可編輯的範例參數。
examples/brief.json控制意義、證明解釋和限制。
references/design-notes.md
為什麼使用此技能
從此技能包開始
此套件提供契合的邊緣幾何、來源影像裁剪與實際的拼圖狀態。不只是繪製拼圖覆蓋層，或讓不相干的貼紙自由移動而已。
PopNow 能補充什麼
用 PopNow 補齊此工作流程缺少的圖片。保留你已有且足夠使用的素材，再將新增素材用於這裡說明的編輯與組合步驟。
比較不同做法
寫提示詞、自建技能，還是使用此工作流程？
從一句提示詞開始
你的助手可以根據一般請求進行創作。但仍需為該專案確定需求、視覺規則、素材選擇、輸出格式及檢查流程。
編寫自己的技能
由你選擇並維護可重複使用的指令、預設設定、檔案結構與檢查規則。當你的流程需要不同規則或整合方式時，這種做法很適合。
為 PopNow 建立的工作流程
此工作流程專為 PopNow 開發。原始檔、隨包提供的相依項目與適用聲明都包含在包內；下方描述的功能範圍對應此版本。
指南已於 2026年10月25日 審核
需要多少費用？
您擁有的照片會在本機組裝與遊玩，不進行生成呼叫。PopNow 可在精確報價並經核准後建立缺少的拼圖圖片；拼塊數量越多，本機渲染與互動的工作量越大。
如果已有合適的輸入素材，生成是選用步驟。 技能免費。新素材生成前會先報價。
技能包
在帳戶下載額度內可免費安裝。技能包授權允許用於你自己和客戶的專案，不允許再散布。
現有素材與本機處理
重複使用合適的素材、編輯檔案及執行本機組合，不會呼叫 PopNow 生成模型。相關工作仍由你的電腦與所需執行環境完成。
新的 AI 圖片、影片片段或聲音
依實際模型、輸入、數量、長度及解析度報價。額外備選方案、修改或選用的增強處理，可能增加生成請求。
你的助手與託管服務
訂閱、雲端電腦、部署或其他服務商的費用由相應服務收取。安裝此技能不包含這些服務。
先確認你的版本需要多少費用
你的助手可以先查看可用模型，並針對具體請求報價。由你選擇需要哪些選用處理，並在生成前核准支出。
向助手這樣說
為我的專案使用 PopNow 技能「拼圖照片遊樂場」。列出可重複使用的輸入素材，只為缺少的媒體報價，說明報價總額並標出尚未報價的步驟。另列可選的增強項目，任何付費操作開始前都先等我核准。
PopNow 如何計費
使用 PopNow API 金鑰的連線，包括使用 API 金鑰的 MCP 連線，從獨立的 API 美元（USD）餘額中扣款。透過 OAuth 授權的 ChatGPT 或 Claude 連線使用網站點數。這兩種餘額彼此獨立；請以目前連線顯示的報價作為核准依據。
適用下載額度及目前帳戶條件。技能包免費不代表生成可以無限免費使用。
怎麼用
你說
用 PopNow 的技能「拼圖照片遊樂場」（jigsaw-photo-playground）幫我做這件事：選擇一張細節豐富的照片並設定拼圖網格。以封裝範例作為起點，並連同可編輯輸入一併回傳實際作品。
接著試試
使用 columns: 5 → 6；seed: 17 → 11，重建一個明顯不同的版本。
使用實際的驗證檔案與演算法清單來說明結果。
需要準備
- 您擁有或有權使用的照片
- 所需的列數、欄數與難度
- Python 3.10+、Pillow 與 NumPy；以及用於遊玩的瀏覽器
類似技能
查看全部 →
網頁飲料品牌網站範本
+25明亮的飲品或零食品牌網站，單一檔案內含商店、組合箱、經銷點地圖與示範結帳。
網頁可捲動紙藝世界
+25走進分層紙藝風景，發現三個紀念物，收集成一本口袋手記。
網頁球鞋商店網站範本
+25完整的鞋類或服飾商店，含商品目錄、商品頁、購物車與示範結帳，全部在一個 HTML 檔裡。
網頁碎形縮放藝術
+25探索以運算產生的碎形，選擇特寫區域，並將該確切視圖匯出為藝術作品與可重複使用的設定說明。
網頁手帳風作品集網站
+25由紙本物件構成的多頁線上履歷，附專案案例與可列印的履歷。
網頁傅立葉線條軌道
+25以旋轉的傅立葉圓重建封閉圖形，並匯出所選的諧波細節。
網頁Pop-Up 折疊設計實驗室
+25開啟一個對稱的紙製連桿，調整其連接幾何形狀並導出測量折痕證明。
網頁黑膠唱片微型網站
+25把專輯做成可以翻面的唱片套，搭配實際試聽、內頁文字與旋轉唱片。
網頁硬體產品網站
+25超大的細線型號名稱落在銀色攝影棚照片上，搭配磨砂規格卡、等比例的產品陣容與硬體 bento 版面。
網頁旅行社網站範本
+25以照片為主的網站，適合行程、導遊或住宿，附行程搜尋、預約申請與找行程測驗。
網頁自由接案設計師網站
+25大膽的一人工作室網站，販售固定報價的方案，含方案頁、案例研究與需求表單。
網頁玻璃擬態網站範本
+25近黑底片上的磨砂玻璃膠囊，巨大的襯線標題中有一個斜體字，外加電子郵件訂閱。
網頁光彈應力工作室
+25在可攜式離線工作室中，以可編輯的負載與偏光片角度，構圖發光的應力條紋作品。
網頁可變字型樣本實驗室
+25檢視真實的可變字型，調整其支援的字型軸，並匯出含字形檢查的真實文字樣本。
網頁正交文字雕塑
+25將兩個擠出的文字相交為一個實體，從垂直的兩個視角可讀出不同文字。
網頁3D 頭像製作器
+25在瀏覽器裡捏出可愛的絨毛玩偶風 3D 角色，存成透明背景 PNG 或 3D 網頁。
網頁學術履歷網站
+25整理研究、教學和服務經歷，篩選出版物類型並匯出 BibTeX 引用。
網頁日曆熱力圖
+25把一整年的每日活動畫成深淺不一的日曆格，附連續天數、總計與鍵盤操作。
網頁農業產品網站
+25依作物和服務區域篩選設備，比較明確規格並產生技術詢價單。
網頁AI SaaS 登陸頁
+25溫暖的沙色紙張，細線軌道與斜線溝槽環繞一個可操作的看板，助手在上面規劃任務。
網頁動態 Hero 主視覺區塊
+25登陸頁的首屏主視覺：標題裡有一個輕輕輪替的詞，搭配兩顆按鈕和寬幅圖片框。
網頁街機個人網站
+25把創意專案裝進小街機房，以鍵盤或觸控選擇卡匣並查看作品。
網頁建築作品集網站
+25篩選專案、轉換面積單位，並列印專案收藏清單。
網頁音響產品網站
+25比較音響規格，並以本機檔案進行真實 A/B 試聽。
網頁音訊頻譜分析器
+25在本機解碼錄音，檢視真實頻譜、主頻和訊號準位，並控制播放。
網頁案例研究網站範本
+25連結證據與指標、核對前後變化，並標示缺失資料。
網頁現金流儀表板
+25逐筆計算現金餘額，以期初餘額、流入和流出核對期末金額。
網頁電影感捲動敘事
+25用四幕全螢幕照片、輕柔捲動與寬銀幕切換講述一段故事。
網頁CMS 行銷網站
+25編輯文章 JSON、驗證欄位、安全預覽並匯出有效內容。
網頁會議講者頁面
+25依主題與時長尋找演講，並匯出主持人介紹與設備清單。
網頁星座回憶地圖
+25把六段照片回憶連接成星座，自由探索或依時間順序重溫。
網頁營造公司網站範本
+25計算數量與單價、單列預備費，並匯出預算明細。
網頁顧問服務網站範本
+25依目標、期程與團隊規模配對服務，並匯出需求簡報。
網頁轉換漏斗儀表板
+25依同一批使用者計算各階段轉換率與流失人數，並保留可核對的資料表。
網頁Shader 首屏設計公司網站
+25首屏是即時的橘色熱流 Shader，底部固定一句宣言，搭配膠囊導覽列與錯落的個案研究格。
網頁客戶導入入口
+25依前置條件推進設定步驟，查看負責人、加權進度並匯出清單。
網頁深色 SaaS 登陸頁
+25深色、動態豐富的軟體產品行銷網站，以單一獨立 HTML 檔交付。
網頁設計系統展示台
+25編輯色彩變數、計算真實對比度，並匯出一致的 CSS 與 JSON 設計令牌。
網頁設計師作品集網站
+25六張微傾的卡片圍繞著淡出的標題，灰底上一張紅色人像卡，搭配編輯風格的個案研究。
網頁開發者日誌網站
+25將結構化文章轉為可搜尋技術日誌，保留清晰程式碼並匯出 RSS。
網頁工程師作品集網站
+25給工程師的深色個人網站，含專案案例、文章、演講、履歷與聯絡表單。
網頁電子書登陸頁
+25閱讀原創章節試閱、調整字級，並儲存本機閱讀進度。
網頁可編輯預算表
+25編輯數量、單價和實際支出，即時核對預算餘額並匯出記錄。
網頁編輯風 SaaS 網站
+25深藍的分割首屏，五行襯線標題旁是紀實照片，斜切色帶與一個鈷藍強調色。
網頁活動出席圖表
+25比較報名、報到和場地容量，計算加權出席率、缺席人數與使用率。
網頁活動網站範本
+25篩選議程、找出時間衝突，並匯出個人行事曆。
網頁實驗比較圖表
+25比較轉換實驗的樣本數、百分點提升與 Wilson 區間，不武斷判定勝出者。
網頁財務報告入口
+25依年度與類型搜尋報告、比較指標，並匯出資料。
網頁航班搜尋原型
+25依航線、日期與人數篩選本機庫存，比較總價、時長及轉機次數。
網頁互動式系統架構圖
+25以經過檢查的 JSON 模型產生、可離線點擊的系統架構圖，每個方塊都附上依據。
網頁互動微型博物館
+25探索三個展廳，近看日常物件，並收集自己的參觀票。
網頁室內設計網站範本
+25依房間尺寸、預算及重點產生可匯出的設計需求書。
網頁珠寶商店網站範本
+25配對材質與尺寸、檢查款式狀態，並匯出詢價清單。
網頁知識圖譜瀏覽器
+25把專案筆記變成可離線搜尋的圖譜，每一項說法都能連回原始出處那一行。
網頁KPI 儀表板範本
+25暖紙底上的四個 KPI 方塊附變化標籤，搭配發光折線圖、拆解表格與目標進度條。
網頁從 AI 樣稿做登陸頁
+25先看三套完整頁面的設計稿、挑一套，你的 Agent 就會把它做成乾淨、響應式的程式碼。
網頁發布候補推薦系統
+25示範固定推薦碼與本機佇列，明確標示無後端的模擬。
網頁律師事務所網站範本
+25依服務與司法管轄區產生可列印的諮詢準備清單。
網頁雜誌網站範本
+25印刷品質的雜誌網站，含文章、主題、小型商店與訂閱，全部在一個 HTML 檔裡。
網頁會員定價計算器
+25依人數、週期與附加項目計算精確費用，並比較方案。
網頁公益活動網站
+25展示募款目標與成本假設，並依時間篩選志工活動。
網頁線上課程登陸頁
+25確認先備條件、查看課程內容，並計算每週學習計畫。
網頁營運工作儀表板
+25依優先順序、負責人和到期日整理工作，透過明確狀態轉換處理任務。
網頁粒子動畫首屏
+25暖紙色底上的文案，旁邊是一顆轉動的墨色與青綠色點狀球體，會依每個概念變形，並在捲動時散開。
網頁個人品牌網站
+25一張羽化進溫暖紙面的人像，上方是細線框，兩側是輕與重的宣言。
網頁寵物用品網站範本
+25可運作的寵物用品店，單一 HTML 檔案內含商品目錄、規格選項、購物袋、補貨規劃與示範結帳。
網頁照片敘事排序器
+25調整照片順序、裁切與敘事標籤，匯出並還原同一套故事編排。
網頁照片貼紙遊樂場
+25拖曳或用鍵盤擺放照片貼紙，旋轉、復原，再儲存為 PNG 拼貼。
網頁攝影作品集網站
+25依系列瀏覽本機照片，以鍵盤燈箱檢視細節，並列印縮圖聯絡表。
網頁Podcast 網站範本
+25可播放的 Podcast 網站：可播放的首屏、單集檔案庫、來賓頁，以及切換頁面時仍會持續播放的播放器。
網頁手繪風定價區塊
+25筆記本風格的定價表：傾斜的墨水卡片、年付切換與深色模式，單一離線檔案。
網頁產品整合目錄
+25依功能與驗證方式尋找整合，並產生設定檢查清單。
網頁電影感產品上線頁
+25電影打光的近黑頁面：襯線標題卡漂浮在流動的光中，搭配信箱式夜景與預約表單。
網頁房地產網站範本
+25依預算與臥室數篩選物件，並列印比較清單。
網頁研究論文網站
+25論文的專案頁，含可互動的圖一、結果、研究限制與一鍵引用。
網頁營收組成儀表板
+25核對各期營收總額，切換金額與占比來比較產品或通路組成。
網頁營收趨勢報告
+25呈現實際營收、前期變化與移動平均，明確指出缺漏日期。
網頁後台管理儀表板範本
+25可實際操作的後台主控台，含圖表、表格、看板與行事曆，以單一離線 HTML 檔打造。
網頁SaaS 登陸頁範本
+25沉穩、明亮的軟體產品行銷網站，附可操作的產品主控台、定價與註冊。
網頁可搜尋記錄表
+25將 CSV 轉為支援搜尋、數值排序、分頁及安全匯出的記錄表。
網頁服務狀態儀表板
+25發布有依據的服務快照，區分正常、異常與過期檢查，呈現事件時間軸。
網頁運動俱樂部網站範本
+25俱樂部、健身房或工作室網站，單一檔案內含課表、教練頁、會員方案、場地圖與預約。
網頁客戶見證牆區塊
+25由客戶評語組成的瀑布式或緩慢飄移的見證牆，只放已取得當事人同意的評語。
網頁旅遊行程網站
+25按日安排活動，檢查時間重疊與交通緩衝，並加總已知費用。
網頁UX 案例作品集
+25以可追溯證據說明設計問題、限制與決策，區分實際成果和待驗證方案。
網頁工作流程自動化登陸頁
+25石墨色頁面，左側是小型的靠左標題，下方是即時的節點圖，會執行、重試並串流顯示日誌。
網頁作家作品集網站
+25依刊物與主題搜尋作品，儲存閱讀清單並匯出媒體簡介。
網頁互動網格首屏
+25近黑的細線網格，會朝游標彎曲，並在每次點擊時向外擴散一圈發光的環。
常見問題
拼塊真的能彼此契合嗎？
相鄰拼塊會以反向方式重複使用同一條弧形邊界，因此數位路徑能彼此吻合。將拼塊拖近目標位置即可吸附；介面會追蹤已放置的拼塊數量。
可以不用拖曳來遊玩嗎？
可以。Tab 選取拼塊，方向鍵移動它，Enter 嘗試吸附。介面也提供「洗牌」、「吸附所選」與「顯示完成圖片」按鈕。
這個工作流程有哪些成本？
您擁有的照片會在本機組裝與遊玩，不進行生成呼叫。PopNow 可在精確報價並經核准後建立缺少的拼圖圖片；拼塊數量越多，本機渲染與互動的工作量越大。
拼圖照片遊樂場 已經封裝了哪些內容？
域演算法和不變性檢查。 可執行、可編輯的範例參數。 控制意義、證明解釋和限制。
拼圖照片遊樂場 的哪些部分可能產生費用？
您擁有的照片會在本機組裝與遊玩，不進行生成呼叫。PopNow 可在精確報價並經核准後建立缺少的拼圖圖片；拼塊數量越多，本機渲染與互動的工作量越大。 使用 PopNow API 金鑰的連線，包括使用 API 金鑰的 MCP 連線，從獨立的 API 美元（USD）餘額中扣款。透過 OAuth 授權的 ChatGPT 或 Claude 連線使用網站點數。這兩種餘額彼此獨立；請以目前連線顯示的報價作為核准依據。
拼圖照片遊樂場 與寫提示詞或自建技能有什麼不同？
此套件提供契合的邊緣幾何、來源影像裁剪與實際的拼圖狀態。不只是繪製拼圖覆蓋層，或讓不相干的貼紙自由移動而已。