我的第一間商店｜自由工坊技能書

我的第一間商店

把想賣的商品，排成可以在自己電腦看的商店樣稿。

尚未認領

✦ 電商與銷售公會指定技能

閱讀使用介紹查看原作與使用入口登入工坊 Star 探索更多免費資源

一張可在本機開啟的商店／單品 HTML，清楚標示預覽而非可下單商店。

用途與適用範圍

想開店的銷售者
協助商家製作展示版面的開發者

已提供四種模板與私人的商店讀取連線；公開買家商店、結帳、訂單與金流尚未實作。
目錄、單品與參考商品 HTML 預覽
一次只核准自己的一家商店
共用平台選品與供貨狀態；服務模板明示尚無預約 API

開始使用

Node.js 24
連真資料前先在平台建立自己的商店；離線範例不需要帳號

先用虛構 snapshot 產生單品預覽，確認文案與商品資訊排版。
到平台建立商店並選品，再用 connect 代碼核准該商店的讀取。
修改自己的版面；含供貨價格與私人資料的預覽留在本機。

預期成果與示範

一張可在本機開啟的商店／單品 HTML，清楚標示預覽而非可下單商店。

選擇下一步

以下連結在新分頁開啟外部網站。服務、帳號與資料處理由目的地網站負責。

到 GitHub 看原始碼 ↗
目的地：github.com/FreeTWAI/freedom-storefront
查看程式碼、README 與原作的發行資訊。
閱讀收錄版本說明 ↗
目的地：github.com/FreeTWAI/freedom-storefront/blob/9823df79f8eee86008c269437880ed2e49bdc394/README.md
核對本書收錄版本的準備條件、安裝與操作說明。

功能示意圖，非實際操作截圖。

這本直接看，更多資源一起探索

這本技能書的公開介紹與使用說明，不用註冊就能閱讀。喜歡這類資源，歡迎加入自由工坊。

到技能書架探索更多免費公開資源。
選擇感興趣的公會，依加入資格領取指定技能書。
分享自己的作品，認識創作者與合作夥伴。

免費加入，探索更多資源已有帳號，登入繼續閱讀這本技能書

加入不會自動替你加星、加入公會或發布作品。外部工具、模型與服務的授權及費用，以原作者說明為準。

版本與來源

原作、自由工坊站內應用與可攜版本是不同交付；各來源連結標明自己的目的地，不代表已在工坊啟用。

來源 GitHub 帳號：FreeTWAI（Repo 擁有者帳號，不代表會員身分已核實。）

原作 Repo: https://github.com/FreeTWAI/freedom-storefront
工坊整合參考: https://github.com/FreeTWAI/freedom-storefront
指南核對來源: https://github.com/FreeTWAI/freedom-storefront/blob/9823df79f8eee86008c269437880ed2e49bdc394/README.md
記錄的授權: NOASSERTION
指南核對版本: 9823df79f8eee86008c269437880ed2e49bdc394
核對日期: 2026-09-27

一起開發

改善模板的易讀性與手機排版；公開結帳需求先在中央平台討論。

原作：FreeTWAI/freedom-storefront

從原作開始共創 ↗查看原作 PR ↗下載 Agent SKILL.md

預設 PR → FreeTWAI/freedom-storefront:main

修改由原作維護者審查。保留原作授權、commit 作者與共同貢獻者；收錄不移轉作品權利。

工坊整合與任務來源

查看工坊整合版本 · 為工坊整合任務建立 Fork

以下任務在工坊協調。若修改只針對工坊整合，PR 可送到 FreeTWAI/freedom-storefront:main，並記錄回饋原作的 PR 或未回送原因。

查看工坊 GitHub 任務 ↗

以下是入口與建議，不代表已認領或已完成。以 GitHub 最新 Issue、PR 與維護者確認為準。

里程碑

第一份可重用的共同成果建議里程碑
提交可重現案例、來源與驗證結果，由維護者審查；這是建議里程碑，尚未建立為 GitHub milestone。

參與任務

改善一張商店模板的手機版
建議任務
在既有 templates 與合成 snapshot 改單品資訊層級。
- 窄螢幕可完整閱讀商品與條件，保留預覽標示，不加入假的結帳。

查看工坊已有 PR · GitHub Milestones · 協作 JSON

完整指南與來源

讀取 Markdown 原文 · 下載 Agent SKILL.md

把想賣的商品，排成可以在自己電腦看的商店樣稿。

工坊收錄說明

供貨與商店

想練習開店，或替商家設計商品展示頁的人。

一張商店或單品展示頁。

搭配「開店與銷售」的選品，先討論版面；樣稿目前不能下單或結帳。

挑一個商品，先用範例做出展示頁，再換成自己的內容。

封面與來源署名

封面插畫：/art/skills/storefront.webp

原作者 GitHub：https://github.com/FreeTWAI/freedom-storefront

登入自由工坊並連結自己的 GitHub，即可在技能書加星或取消星星。

原作數據：/api/v1/github/books/storefront/metrics

Stars、Forks、追蹤數、未結 Issues 與 PR 合計、最近程式更新時間以 GitHub 回覆為準；數據附核對時間，讀取失敗不冒充零。

讀者與格式

商店模板與讀取客戶端

想開店的銷售者
協助商家製作展示版面的開發者

功能與使用範圍

已提供四種模板與私人的商店讀取連線；公開買家商店、結帳、訂單與金流尚未實作。

目錄、單品與參考商品 HTML 預覽
一次只核准自己的一家商店
共用平台選品與供貨狀態；服務模板明示尚無預約 API

開始前準備

Node.js 24
連真資料前先在平台建立自己的商店；離線範例不需要帳號

第一個練習

1. 先用虛構 snapshot 產生單品預覽，確認文案與商品資訊排版。

2. 到平台建立商店並選品，再用 connect 代碼核准該商店的讀取。

3. 修改自己的版面；含供貨價格與私人資料的預覽留在本機。

練習成果

一張可在本機開啟的商店／單品 HTML，清楚標示預覽而非可下單商店。

原始專案的起步指令

在自己的專案副本根目錄執行；指令已對照收錄版本的說明，這次介紹核對沒有代為安裝或執行。

npm ci --ignore-scripts
npm test
npm run build -- --template single-product --input examples/demo-snapshot.json --output dist/product.html --listing-id demo-listing