不用寫程式,依六個步驟做出具有自己品牌的 QR 碼工具。製作過程與成品都在瀏覽器內完成,不串接 AI、API、帳號或資料庫。
「碼上造門」是 QR 碼工具的生成器。使用者依序設定名稱、品牌圖片、頁尾、風格與功能,最後下載一套屬於自己的 QR 碼產生器,可離線使用,也能分享或上網發布。
教師、研習學員、教務與資訊人員,也適合學校或團隊的共用工具。
電腦與手機瀏覽器都能操作;成品也能在電腦與手機上開啟使用。
不需要帳號、伺服器或資料庫。下載後的成品可直接離線使用。
原始的 QR 碼產生工具,把網址轉換成 QR 碼。
「把你的連結,變成一碼好事。」
生成器之生成器:讓每個人做出自己的「碼上開門」,可客製、可下載、可分享。
依畫面步驟填寫、選色與上傳圖片,不必了解 HTML、CSS 或 JavaScript。
右側同步呈現成品樣貌,可切換電腦版與手機版檢查版面。
工具名稱、標題、Logo、Favicon(網站圖示)、頁尾與 QR 中央 Logo 都能設定。
深藍數位、矩陣科技、清新校園、活力童趣、專業行政與自訂品牌,可再微調配色與字型。
SVG 下載、QR 配色、中央 Logo、教學卡片、批次產生等,依情境開啟。
成品已內建 QR 編碼程式,不必連網,也不會把網址送到外部服務。
整包 ZIP 或單一 HTML,傳給同事即可使用。
可部署到 Cloudflare、GitHub Pages 或學校網站空間。
只接受 HTTP/HTTPS,阻擋帳號密碼與格式錯誤的網址。
每張 2 MB 以內;SVG 會檢查腳本與外部資源後轉為 PNG。
含標題與用途(研習簽到、課程教材、課後回饋、加入會議)的分享圖。
每行「名稱|網址」,一次最多 30 筆,打包成 ZIP 下載。
產出工具內附操作、離線原理與掃描提醒,方便接手的人閱讀。
網站配色與 QR 配色分開處理,QR 預設深碼白底,維持掃描率。
設定工具首頁會出現的文字,也會顯示在瀏覽器分頁。
左:生成器的第一步畫面(實際操作頁面)
三種圖片可以分開設定,也能用同一張圖片快速同步。
顯示在工具的 Header。
顯示在瀏覽器分頁與書籤旁。
放在 QR 碼中央;使用者可再更換,也可關閉。
支援 PNG、JPG、WebP、SVG;每張最多 2 MB。
會先檢查腳本、事件屬性、外部資源與尺寸,通過後轉成 PNG 使用。
按「將網站 Logo 套用到三處」可一次完成三張圖片的設定。
學校、團隊或個人名稱都可以,頁尾會是使用者最後看到的品牌資訊。
滑鼠移入、鍵盤聚焦或手機點按時,標籤會上浮、放大並出現光暈與星光提示,讓頁尾更有溫度。
先選接近需求的主題,再微調色彩與字型。網站色彩不會改動 QR 碼的安全配色。
主題選擇與即時預覽(清新校園主題)
基本 QR 生成與 PNG 下載固定保留,其餘功能依使用情境選擇。
| 功能 | 說明 | 建議情境 |
|---|---|---|
| SVG 向量下載 | 可無限放大、不易模糊 | 活動海報、大型輸出 |
| QR 配色設定 | 調整前景與背景,保留深碼淺底 | 需要配合品牌色時 |
| QR 中央 Logo | 在 QR 中央放品牌圖 | 校內品牌工具 |
| 教學 QR 卡片 | 輸出含標題與用途的分享圖 | 研習簽到、課程教材 |
| 批次產生 | 一次處理多筆名稱與網址 | 多場活動、多份教材 |
| 使用說明 | 工具內提供操作與掃描提醒 | 要交給他人使用時 |
| 記住 QR 配色 | 只儲存顏色,不儲存網址 | 需固定配色的團隊 |
產出前會自動檢查文字、圖片、網址、配色與必要檔案,依結果決定能否下載。
例如未填工具名稱或主標題、品牌連結格式錯誤。修正前下載按鈕會停用。
例如尚未加入 Logo 或 Favicon,成品會使用預設門形圖示。
第 6 步:檢查報告與三種輸出卡片
| 輸出方式 | 內容 | 適合 | 注意 |
|---|---|---|---|
| 📦 完整資料夾 ZIP(推薦) | index.html、style.css、app.js、vendor/assets、README、_headers | 離線使用、長期保存、上傳網站 | 必須解壓縮並保留資料夾結構 |
| 📄 單一 HTML | 程式、樣式與圖片全部嵌入同一檔案 | 雲端硬碟或 Email 快速分享 | 不易長期維護 |
| ☁️ GAS Web App ZIP | Code.gs(doGet)、Index.html、appsscript.json、部署說明 | 部署成 Google 網頁應用程式 | GAS 網頁編輯器不能直接匯入 ZIP |
Apps Script 網頁介面無法直接匯入 ZIP,需手動貼上兩個檔案,名稱要對應。
Index.html 的檔名必須是 Index,才能和 doGet() 對應。README.md。Code.gs 貼到預設程式檔;新增 HTML 檔並命名為 Index,貼入 Index.html。/exec 的網址分享。修改後要建立新版本再更新部署。貼上網址 → 確認沒有錯誤提示 → 下載 PNG 或 SVG → 用手機試掃。
輸入課程或活動名稱,選擇用途後輸出分享圖。
每行「名稱|網址」,最多 30 筆;輸出 SVG 與 PNG 的 ZIP。
範例:產出工具輸入網址後即時產生 QR 碼
QR 碼是公開的文字編碼規格,不需要 AI 理解內容,也不必把網址交給伺服器。成品內建 QR 編碼程式,瀏覽器在本機完成計算。
輸入欄位與按鈕
版面、品牌與互動
驗證、編碼與下載
產生 QR 方格矩陣
輸出清晰圖片
批次功能打包下載
私人權杖、暫時授權碼、個人資料、密碼,或僅限特定人員存取的私人連結。
列印或發布前,請一定要用手機實際掃描。
深色圖碼、淺色背景,前景與背景要有明顯對比。
上傳完整資料夾或 ZIP;需包含 _headers、vendor/、assets/。
把資料夾內容放入儲存庫的發布來源即可。
上傳整個資料夾,確認 index.html 位於根目錄。
如果你想在自己的研習或學校做出一個 QR 工具,就從第一步開始吧。
© 2026 Developed by Winnie Lab|專業讓你稱職 熱情使你傑出 🚀