建置器讀取所提供字型的 fvar 軸與 cmap 字元涵蓋範圍，並將已授權的字型內嵌於離線樣本工具。瀏覽器控制項會呈現那些實際字型軸；匯出項目包含 PNG、真實文字 SVG 與可編輯的設定 JSON。
- 需要
- Python 3 · browser
v1.0.0 · 更新於 2026年10月25日 · 351 KB · 可用於個人和客戶專案；請勿轉售或分享技能包。
你會得到
帶有真實互動控制的便攜式離線 HTML 工具
可編輯的 JSON 設定和特定任務的建構器
適合
- 字型探索、品牌字體學研究與可攜式字型樣本。
不適合
- 字型授權清關、將靜態字型轉換為可變字型，或在所有 SVG 檢視器中呈現完全相同的渲染。
如何運作
包含本機算圖工具
準備實際的輸入
內附的 OFL 字型，或已取得授權的可變字型。
套用支援的控制項
將可變字型更換為你有權內嵌的字型。編輯一行樣本文字。僅調整該字型具備的字型軸，並匯出結果。
建置並檢視結果
在瀏覽器中開啟 output/index.html。使用實際控制項並下載導出的工件。建構器不會部署網站。
工作流程如何運作
可變字型樣本實驗室 如何運作
建置器讀取所提供字型的 fvar 軸與 cmap 字元涵蓋範圍，並將已授權的字型內嵌於離線樣本工具。瀏覽器控制項會呈現那些實際字型軸；匯出項目包含 PNG、真實文字 SVG 與可編輯的設定 JSON。
技能包內有什麼
你可以修改什麼
- 將可變字型更換為你有權內嵌的字型。
- 編輯一行樣本文字。
- 僅調整該字型具備的字型軸，並匯出結果。
交付前需要檢查什麼
- 建置器會檢查真實的字型軸、數值範圍與字元涵蓋範圍。
- 在瀏覽器中檢視實際匯出的 PNG/SVG 與長篇文字；各檢視器的字型支援可能不同。
查看技能包檔案
這裡列出此版本中部分實際使用的檔案及其用途。完整下載包還包含使用說明和適用的授權聲明。
讀取真實的 fvar 軸與 cmap 字形涵蓋範圍，並內嵌已授權字型供離線使用。
scripts/project.py套用實際字型軸、檢查缺少的字元，並匯出真實文字 SVG 或點陣 PNG。
scripts/studio.js本地驗證、受保護的輸出與產出物建構。
scripts/build.py附帶實際支援控制項的可執行範例。
examples/project.json機制專屬的限制與視覺審查標準。
references/production.md
為什麼使用此技能
從此技能包開始
建置器讀取所提供字型的 fvar 軸與 cmap 字元涵蓋範圍，並將已授權的字型內嵌於離線樣本工具。瀏覽器控制項會呈現那些實際字型軸；匯出項目包含 PNG、真實文字 SVG 與可編輯的設定 JSON。套件已提供可運作範例、受限輸入與匯出流程，無需從純文字提示從頭設計。
比較不同做法
寫提示詞、自建技能，還是使用此工作流程？
從一句提示詞開始
你的助手可以根據一般請求進行創作。但仍需為該專案確定需求、視覺規則、素材選擇、輸出格式及檢查流程。
編寫自己的技能
由你選擇並維護可重複使用的指令、預設設定、檔案結構與檢查規則。當你的流程需要不同規則或整合方式時，這種做法很適合。
為 PopNow 建立的工作流程
此工作流程專為 PopNow 開發。原始檔、隨包提供的相依項目與適用聲明都包含在包內；下方描述的功能範圍對應此版本。
指南已於 2026年10月25日 審核
需要多少費用？
隨附的程序化或字型範例在本地執行，不需媒體生成。電腦運算時間，以及您使用的代理或外部檢視器，皆不在 PopNow 生成費用範圍內。後續要求新的選擇性媒體時，需另行報價。
所提供的流程在本機執行。是否請求新素材，由你另外選擇。 技能免費。新素材生成前會先報價。
技能包
在帳戶下載額度內可免費安裝。技能包授權允許用於你自己和客戶的專案，不允許再散布。
現有素材與本機處理
重複使用合適的素材、編輯檔案及執行本機組合，不會呼叫 PopNow 生成模型。相關工作仍由你的電腦與所需執行環境完成。
你的助手與託管服務
訂閱、雲端電腦、部署或其他服務商的費用由相應服務收取。安裝此技能不包含這些服務。
PopNow 如何計費
使用 PopNow API 金鑰的連線，包括使用 API 金鑰的 MCP 連線，從獨立的 API 美元（USD）餘額中扣款。透過 OAuth 授權的 ChatGPT 或 Claude 連線使用網站點數。這兩種餘額彼此獨立；請以目前連線顯示的報價作為核准依據。
適用下載額度及目前帳戶條件。技能包免費不代表生成可以無限免費使用。
怎麼用
你說
用 PopNow 的技能「可變字型樣本實驗室」（variable-type-specimen-lab）幫我做這件事：檢視真實的可變字型，調整其支援的字型軸，並匯出含字形檢查的真實文字樣本。從內建專案開始，進行要求的修改並檢視實際輸出。
接著試試
將可變字型更換為你有權內嵌的字型。
編輯一行樣本文字。
需要準備
- 內附的 OFL 字型，或已取得授權的可變字型。
- 具備 fontTools WOFF 支援的 Python 以便重建，另需新版瀏覽器。
類似技能
查看全部 →
網頁拼圖照片遊樂場
+25將照片變成可遊玩的弧形拼圖，支援拖曳、吸附與鍵盤控制。
網頁飲料品牌網站範本
+25明亮的飲品或零食品牌網站，單一檔案內含商店、組合箱、經銷點地圖與示範結帳。
網頁可捲動紙藝世界
+25走進分層紙藝風景，發現三個紀念物，收集成一本口袋手記。
網頁球鞋商店網站範本
+25完整的鞋類或服飾商店，含商品目錄、商品頁、購物車與示範結帳，全部在一個 HTML 檔裡。
網頁碎形縮放藝術
+25探索以運算產生的碎形，選擇特寫區域，並將該確切視圖匯出為藝術作品與可重複使用的設定說明。
網頁手帳風作品集網站
+25由紙本物件構成的多頁線上履歷，附專案案例與可列印的履歷。
網頁傅立葉線條軌道
+25以旋轉的傅立葉圓重建封閉圖形，並匯出所選的諧波細節。
網頁Pop-Up 折疊設計實驗室
+25開啟一個對稱的紙製連桿，調整其連接幾何形狀並導出測量折痕證明。
網頁黑膠唱片微型網站
+25把專輯做成可以翻面的唱片套，搭配實際試聽、內頁文字與旋轉唱片。
網頁硬體產品網站
+25超大的細線型號名稱落在銀色攝影棚照片上，搭配磨砂規格卡、等比例的產品陣容與硬體 bento 版面。
網頁旅行社網站範本
+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近黑的細線網格，會朝游標彎曲，並在每次點擊時向外擴散一圈發光的環。
常見問題
缺少字元時會怎樣？
建置器會檢查字型 cmap，拒絕不受支援的起始文字。瀏覽器會對缺少的字元發出警告，並停用該文字的圖稿匯出；它不會靜默改用其他字型替代。
隨附的範例需要付費生成嗎？
不需要。隨附素材或程序化輸入都在本地執行。若您要求新的圖片、片段或音效，請使用 PopNow 並在生成前取得確切報價與批准；API USD 與 OAuth 網站點數各自獨立。
可變字型樣本實驗室 已經封裝了哪些內容？
讀取真實的 fvar 軸與 cmap 字形涵蓋範圍，並內嵌已授權字型供離線使用。 套用實際字型軸、檢查缺少的字元，並匯出真實文字 SVG 或點陣 PNG。 本地驗證、受保護的輸出與產出物建構。 附帶實際支援控制項的可執行範例。 機制專屬的限制與視覺審查標準。
可變字型樣本實驗室 的哪些部分可能產生費用？
隨附的程序化或字型範例在本地執行，不需媒體生成。電腦運算時間，以及您使用的代理或外部檢視器，皆不在 PopNow 生成費用範圍內。後續要求新的選擇性媒體時，需另行報價。 使用 PopNow API 金鑰的連線，包括使用 API 金鑰的 MCP 連線，從獨立的 API 美元（USD）餘額中扣款。透過 OAuth 授權的 ChatGPT 或 Claude 連線使用網站點數。這兩種餘額彼此獨立；請以目前連線顯示的報價作為核准依據。
可變字型樣本實驗室 與寫提示詞或自建技能有什麼不同？
建置器讀取所提供字型的 fvar 軸與 cmap 字元涵蓋範圍，並將已授權的字型內嵌於離線樣本工具。瀏覽器控制項會呈現那些實際字型軸；匯出項目包含 PNG、真實文字 SVG 與可編輯的設定 JSON。套件已提供可運作範例、受限輸入與匯出流程，無需從純文字提示從頭設計。