前言¶
做教育類產品的開發者通常會遇到一類重複需求：生成字帖、練習紙、可打印的學習用紙。網格類型多——米字格、田字格、回宮格、九宮格、四線三格……每一種的輔助線規則都不同；而前端要同時照顧瀏覽器和微信小程序兩端，Canvas API 寫法還有差異。自己逐個實現一遍，成本高且容易畫錯輔助線。下面介紹的通用網格排版引擎，就是專門處理這件事的 Skill。
這是什麼¶
通用網格排版引擎（米字格/田字格等13種），座標 @user_3ff3c268/canvas-grid-engine，由社區開發者 user_3ff3c268 發佈並維護，當前版本 1.2.0，來源爲 community，SkillHub 分類爲 education。
它解決的問題是：在 Canvas 2D 上按統一接口生成 13 種教育用紙/字帖網格，並附帶漢字排版規則（居中、自動換行、拼音標註）和一套微信綠配色設計令牌。定位是純前端、零依賴，瀏覽器與微信小程序的 Canvas API 完全一致，不需要服務端參與。
核心功能¶
1、網格類型：米字格、田字格、回宮格、九宮格、方格、橫線、四線三格、點陣格、黃金圓格、米字回宮格、田字四點格、無格等，共 13 種。
2、漢字排版：漢字在格內居中、按行自動換行、可輸出拼音標註，滿足字帖場景的基本排版要求。
3、設計令牌：內置微信綠（#07C160）配色令牌，輸出風格與微信生態一致。
4、運行環境：純前端零依賴，直接使用宿主環境的 Canvas 2D 能力，瀏覽器與微信小程序兩端 API 一致。
5、觸發詞：生成字帖 / 練習紙 / 米字格 / 田字格 / 網格渲染 / 學習用紙 / 可打印紙 / 拼音標註。在 Agent 中調用時，用這些自然語言表達即可命中。
根據 SkillHub 頁面數據（抓取時間 2026-11-05），該 Skill 評分 100000，下載 837 次，標籤顯示 requires_api_key=false，即不需要 API Key。
安裝與啓用¶
官方地址：https://api.skillhub.cn/user_3ff3c268/canvas-grid-engine ，SkillHub 頁面：https://www.skillhub.cn/skills/user_3ff3c268/canvas-grid-engine 。
啓用方式爲把該 Skill 安裝到支持 SKILL.md 格式的 Agent 環境（如 Cursor、Codex CLI、Claude Code 等）後，在對話中使用上述觸發詞調用。本次寫作時官方頁面抓取失敗，未能覈實到具體的安裝命令、目錄路徑或配置文件字段，因此不在此給出未經覈實的命令；如需命令級文檔，建議直接打開官方地址查看。
典型用法¶
官方資料未提供逐行的代碼示例，下面給出可復現的調用流程。
1、在瀏覽器或微信小程序頁面中準備好一個 Canvas 2D 上下文（兩端寫法一致）。
2、在 Agent 對話中使用觸發詞提出需求，例如“生成米字格練習紙，帶拼音標註”或“畫一張四線三格的可打印紙”。
3、Agent 命中該 Skill 後，會在 Canvas 2D 上繪製對應網格，漢字按居中與自動換行規則排布，需要時附加拼音標註。
4、如需改配色，要求使用微信綠設計令牌或直接指定顏色值。
網格類型覆蓋：米字格、田字格、回宮格、九宮格、方格、橫線、四線三格、點陣格、黃金圓格、米字回宮格、田字四點格、無格。
適用場景與注意¶
適合誰：教育類 Web 應用、微信小程序裏需要字帖/練習紙功能的開發者；也適合需要在服務端或離線環境用 Canvas 2D 批量產出可打印學習用紙的場景（無外部依賴，不涉及 API Key）。
限制與坑：
1、該 Skill 只負責網格繪製與漢字排版規則，不包含字體文件、打印樣式（頁邊距、紙張尺寸）的完整處理，打印前的版式需自行把關。
2、拼音標註依賴宿主環境的拼音數據或輸入，官方資料未說明拼音詞庫來源，對生僻字或多音字的標註結果需要實際驗證。
3、“瀏覽器與微信小程序 Canvas API 完全一致”是指調用層一致，但不同端對 canvas 節點獲取方式（如 document.getElementById 與 wx.createSelectorQuery）不同，接入時仍需按端處理。
4、本次寫作時官方頁面無法抓取，版本號（1.2.0）、評分與下載量以 SkillHub 預抓取數據爲準，安裝前建議到官方頁面複覈一次。
結尾¶
通用網格排版引擎把 13 種教育用紙網格、漢字居中與換行、拼音標註、微信綠配色集中在一個零依賴的前端 Skill 裏，兩端 API 一致，適合直接嵌入教育產品的字帖與練習紙功能。官方地址：https://api.skillhub.cn/user_3ff3c268/canvas-grid-engine 。
