Claude Code WebAPP開發
建材彙整網頁 Matboard
SketchUp 模型　→　建材資料
王澄音
2026.08.06
THINKLAB
2026

王澄音 Cheng-Yin, Wang

THINKLAB
2026

學經歷

  • 東海大學建築系（2022~2027）
  • 劉培森建築師事務所　實習生（2025.07~2025.08）
  • Think Lab之物建築　實習生（2026.06~2026.08）
建材彙整網頁 Matboard · 王澄音02 / 25

WHY

開發動機

THINKLAB
2026

模型裡有材質、尺寸資訊，為什麼還要再做一個網站？

1

數量靠人工

一面一面點選、抄尺寸、貼進 Excel。設計改一次必須整份重新對照確認。

2

資料讀不出來

材質、圖層、屬性都在檔案裡，需要額外花費心力整理成表。

3

對方打不開檔

若業主與施工單位沒有模型，溝通時較難直接理解討論的材質在案件中的確切位置。

參考模型：890 區塊　13 種材質　5,705.91 m²　—　逐面抄寫不現實，也難以複核。
建材彙整網頁 Matboard · 王澄音03 / 25

WHAT

系統目標

THINKLAB
2026

上傳模型，在瀏覽器裡取得材質、尺寸與建材彙整。

.skp 檔案你的 SketchUp 模型
→
網站讀檔取出材質與尺寸
→
瀏覽器3D 預覽 ＋ 彙整表

讀檔在網站端完成 —— 觀看者不必安裝 SketchUp。

  • 每個面的材質、長寬與實際面積
  • 牆面／地板／天花／屋頂自動分類
  • 可匯出 PDF 報表與 Excel 表格

得到的是什麼

890
區塊
13
種材質
3
種匯出格式
建材彙整網頁 Matboard · 王澄音04 / 25

HOW IT STARTED

由誰來閱讀模型？

THINKLAB
2026

做成 SketchUp 外掛，還是讓網站自己讀檔。

否決

做成 SketchUp 外掛

  • 每台電腦都要裝 SketchUp
  • 桌面軟體必須一直開著
  • 分享給別人就失效
採用

讓網站自己讀檔

  • 上傳後由網站直接處理
  • 使用者只需要一個瀏覽器
  • 以後要加功能，修改網站即可
建材彙整網頁 Matboard · 王澄音05 / 25

HOW IT WORKS

網站怎麼讀 .skp

THINKLAB
2026

.skp 是 SketchUp 的專屬格式，一般程式打不開。

採用的做法

使用 SketchUp 官方的讀檔元件

隨 SketchUp 一起安裝，讀到的內容與畫面上看到的一致。

兩件要先知道的事
  • 版本太新會讀不了，此時會明確告知
  • 要開放給外部使用，需先確認授權

上傳之後，網站做的四件事

1　打開檔案讀出模型內容
2　走訪群組含元件與圖層
3　合併與量測算出材質與尺寸
4　產生預覽存成網站的資料

只要上傳一次，之後再打開網站同一個模型會立刻顯示。

建材彙整網頁 Matboard · 王澄音06 / 25

PROBLEMS

遇到的核心問題

THINKLAB
2026
一、牆面尺寸偵測
轉了角度的樓板，套正方向的框就量錯。要沿著它自己的邊測量。
二、模型重疊面
量體貼在一起時，兩個面都存在卻都看不到。
建材彙整網頁 Matboard · 王澄音07 / 25

MEASURE

尺寸量測規則

THINKLAB
2026

沿著這個面真正的邊去量，不套一個正方向的外框。

矩形
報兩個邊長；牆面依立面習慣排成寬 × 高。
三角形
報三個邊長，外加最長邊與其對應高。
其他形狀
逐段列出每一條邊長，並標明整體範圍。
6.00 4.00
6 × 4 m 的樓板轉 30°
報 6.00 × 4.00，不是外框的 8.2 × 7.5
面積照實際幾何計算，開口已扣除　—　帶窗、門的牆體會自動扣除開口面積。
建材彙整網頁 Matboard · 王澄音08 / 25

OVERLAP

重疊面偵測

THINKLAB
2026

實心量體組成的模型，有大量彼此貼合、兩面都看不到的表面。

2,102.08
m² 被埋沒
36.8%
佔全部表面積
314
組重疊面
0.24 秒
計算時間
兩面貼在一起
兩個量體面對面接觸，兩個面都被埋住。
兩側都扣
同一面畫了兩次
位置完全重合，但還有一份看得見。
只扣一次
位置重合的面會兩兩比對，實際算出彼此蓋掉多少 —— 不是抓比例估算。彙整表可切換「全部面／扣除重疊」。
建材彙整網頁 Matboard · 王澄音09 / 25

INTERFACE

介面架構：三欄配置

THINKLAB
2026
建材彙整網頁的三欄介面：左欄檔案、中欄模型預覽、右欄資料
左欄
資料進出
拖入模型、專案清單。
中欄
模型本身
由.skp讀取的預覽模型。
右欄
答案
選取面與建材彙整兩個分頁。
建材彙整網頁 Matboard · 王澄音10 / 25

PRINCIPLES

介面設計原則

THINKLAB
2026

以既有的 SketchUp 操作習慣為準。

1 沿用 SketchUp 的手感
中鍵旋轉、滾輪往游標縮放、Shift + Z 顯示全部……等慣用的更動視角方式。
2 所需資訊在右側
點選一個面，資料及時出現在右欄。
3 一次只問一個問題
右欄兩個分頁：點選面、整份模型統整資訊。
次要資訊預設收合。
4 數值計算說明
每個數字都寫明計算基準與排除了哪些材質，報表也會呈現。
建材彙整網頁 Matboard · 王澄音11 / 25

SCREEN 01

功能一 · 面資料查詢

THINKLAB
2026

點選任一面，右欄顯示這一塊的完整資料。

模型畫面中選取到的外牆白色磁磚（藍色高亮）
右欄「選取面」分頁顯示這一面的完整資料
材質與分類
名稱、表面類型、圖層
面積
實際幾何計算，開口已扣除
寬 × 高
依朝向決定排法
被覆蓋
被哪個量體埋住、各佔多少
位置
元件、朝向方位、高程
貼圖單元
材質貼圖的實際尺寸
模型自己記錄的屬性（材料規格、BIM 欄位共 15 項）也會帶出在收合欄位。
建材彙整網頁 Matboard · 王澄音12 / 25

SCREEN 02

功能二 · 建材彙整表

THINKLAB
2026

依材質累計，並且可以把不是建材的項目排除掉。

建材彙整表面板
點選材質後其餘淡出的模型預覽

點材質名稱：只顯示該材質，其餘淡出

取消勾選排除非建材之面積

草地、玻璃等非建材，取消後及時重算合計面積。

全部面／扣除重疊

同一份模型兩種基準：5,705.91 (全部面積)與 3,603.83 m²(扣除重疊面積)。選哪一個由使用者決定，彙整表上也會寫明。

選擇會被記住

排除設定跟著專案保存，重新打開仍在。

建材彙整網頁 Matboard · 王澄音13 / 25

SCREEN 03

功能三 · 水平剖面

THINKLAB
2026
剖面關閉的模型

剖面關閉 —— 只點得到最外層的屋頂

剖面開啟後可見室內樓板的模型

剖面開啟 —— 室內橡木地板 93.84 m² 可以點選

建材彙整網頁 Matboard · 王澄音14 / 25

OUTPUT

匯出格式

THINKLAB
2026

三種匯出都會套用當下的排除設定與計算基準。

建材彙整表 PDF 報表

PDF（A4 橫式）

材質成欄、屬性成列，類似門窗表的編排方式。

彙整表（Excel 可開）

各材質總面積、類別與是否計入。

明細表（Excel 可開）

每個面的邊長、面積與位置。

報表由網站產生，中文字型取自系統，任何電腦打開都不缺字。
建材彙整網頁 Matboard · 王澄音15 / 25

ONBOARDING

內建操作說明

THINKLAB
2026
內建八頁圖解導覽

八頁圖解

  • 1這個網站在做什麼
  • 2上傳模型
  • 3轉動視角
  • 4點選查詢
  • 5尺寸是怎麼量的
  • 6用剖面取出室內表面
  • 7建材彙整與排除
  • 8匯出
建材彙整網頁 Matboard · 王澄音16 / 25

STATUS

現況與限制

THINKLAB
2026

現況

  • 890 區塊、13 種材質可完整讀取
  • 重疊面計算約 0.24 秒完成
  • 數值讀取規則有自動檢查把關
  • 開機後自動啟動，開瀏覽器就能用

限制

  • 網站功能僅只得出面積
  • 要比較兩家建材廠商的報價仍得另外找資料
  • 停在這裡與直接開 SketchUp 一樣

接下來的實作

  • 材質底下新增廠商：報價・照片・規格
  • 選定廠商，該面立即算出金額
  • 彙整表加單價與金額，合計改預算總計
  • 匯出報表與表格同步帶出金額
能選廠商、能算金額，讓面積彙整表進化成估價表。
建材彙整網頁 Matboard · 王澄音17 / 25

WORKSHOP

實作步驟

THINKLAB
2026
1

選取面材質加入廠商

「廠商選項」區塊，按「＋」直接在網站上新增

→
2

選定就算金額

點一下選定廠商，面積下方立刻顯示金額

→
3

彙整表 「總預算」

總面積欄位，改成預算總計

→
4

匯出內容同步更動

報表與 Excel 表格都帶出單價與金額

建材彙整網頁 Matboard · 王澄音18 / 25

NEXT · 實作單元

建材選擇與預算

THINKLAB
2026

把「尺寸整理」延伸為「評估預算」。

1

材質　→　廠商選項

現況　材質「白色磁磚」
↓
加入後　報價・照片・規格
2

總面積　→　預算總計

現況　總面積 5,705.91 m²
↓
加入後　預算總計 NT$ ———
3

彙整表　→　估價表

現況　材質・面積・區塊數
↓
加入後　再加上單價與金額
建材彙整網頁 Matboard · 王澄音19 / 25

BUILD 01

選取面 · 廠商選項

THINKLAB
2026

點一個面，除了材質與尺寸，再列出這個材質可以用哪幾家。

白色磁磚
牆面 · 10.26 m²
廠商選項　3 ＋ 新增廠商
冠軍建材
HT-6060 白
NT$ 1,200 /m²
馬可貝里
MB-600W
NT$ 1,080 /m²
白馬磁磚
WM-60 亮面
NT$ 1,460 /m²

已選定的方案供這個面計價，其餘保留隨時可換。

按「＋」直接在網站上新增

  • 廠商名稱、品名與型號
  • 單價與計價單位（平方公尺／才／式）
  • 實物照片（可先留空，之後再補）

選定之後

  • 點一下就選定，該面立即以此單價計價
  • 同一種材質可一次套用到全部區塊
  • 廠商資料跟著專案保存，重開仍在
建材彙整網頁 Matboard · 王澄音20 / 25

PROMPTS 01

階段一：提示詞範例

THINKLAB
2026
1

廠商選項與「＋」按鈕

請在右側「選取面」的材質資訊下方，加一個 「廠商選項」區塊，列出這個材質已報價的廠商： 左邊照片、中間廠商與品名型號、右邊單價。 區塊右上角放一個「＋ 新增廠商」按鈕， 按下去出現表單：廠商名稱、品名型號、單價、 計價單位、照片（可留空）、交期， 儲存後立刻出現在清單裡。 資料以專案為單位存在瀏覽器，重新整理後還在。 原本的面積與尺寸計算完全不要動。
2

選定廠商就算出金額

「廠商選項」裡的每一張都可以點選， 點一下就是這個面採用的廠商， 選定的那一張加上外框。 選定之後，在面積下方加一列「金額」， 金額 = 面積 × 該廠商的單價， 顯示成 NT$ 加千分位。 還沒選定時顯示「尚未選定廠商」。
建材彙整網頁 Matboard · 王澄音21 / 25

BUILD 02

建材彙整表 · 金額欄位

THINKLAB
2026

面積欄旁邊加上單價與金額，合計由總面積改為預算總計。

　材質 面積 m² 單價 元/m² 金額 NT$
　白色磁磚753.061,200903,672
　清水混凝土999.52850849,592
　橡木地板373.533,2001,195,296
　金屬屋面295.222,600767,572
　預算總計2,421.333,716,132

欄位與數字為示意 —— 面積取自參考模型，單價僅供版面說明。

標頭改為「預算總計」；切到扣除重疊時，面積與金額一起重算。

排除項目不列金額

草地、室內陰影這類非建材，面積與金額都不計入。

兩種基準都要有金額

全部面與扣除重疊各對應一個預算數字。

匯出同步

報表與 Excel 表格都加上單價、金額欄。

建材彙整網頁 Matboard · 王澄音22 / 25

PROMPTS 02

階段二：提示詞範例

THINKLAB
2026

彙整表怎麼加欄、匯出怎麼跟著改；最後一段是會後的進階題。

3

彙整表加單價與金額

建材彙整表在面積右邊加「單價」與「金額」兩欄。 單價取自該材質選定的廠商，沒有選定就留空。 最後一列的合計改成「預算總計」， 畫面最上方的「總面積」也一起改。 切換「全部面／扣除重疊」時金額要重算， 被取消勾選的材質不計入。
4

匯出跟著改

PDF 報表與兩個 CSV 都加上單價與金額欄。 PDF 抬頭再加一行：報價版本與日期。 原本抬頭上的計算基準與排除清單要保留。
會後進階 接既有的報價表
請加一個「匯入廠商清單」按鈕，可以上傳 Excel 或 CSV 一次建立多家廠商， 模型材質與廠商怎麼對應由我在畫面上選。
建材彙整網頁 Matboard · 王澄音23 / 25

TIPS

提示詞怎麼寫，卡住怎麼辦

THINKLAB
2026
1

說清楚放在哪裡

位置、名稱、順序都清楚列出來，提示詞愈具體成果愈接近想像。

2

一次只做一件事

貼一段、看畫面、對了再貼下一段。一次講五件事，錯了會不知道是哪一件。

3

講明不准動什麼

若擔心AI亂改既有的東西，可以在提示詞最後補一句「其餘不做任何更改」。

4

錯了就把畫面貼回去

把錯誤訊息或截圖直接貼進 Claude Code。

卡住的時候，照抄這四句

「剛才的改動讓 ___ 壞掉了，請改回原本的行為。」

「畫面沒有變化，請幫我確認要不要重新啟動網站。」

「請用三行說明這次改了哪些地方。」

「先不要再改，我要看目前的結果。」

建材彙整網頁 Matboard · 王澄音24 / 25
REPOSITORY
專案原始碼
程式碼、說明文件與這份簡報都放在 GitHub
github.com/thinklab-architects/KAAwokshop-3d_to_Matboard
王澄音　·　高雄建築師公會 KAA AI WORKSHOP
2026.08.06
THINKLAB
2026
← → 換頁 ｜ O 總覽 ｜ F 全螢幕