我做了一個能 1:1 還原紙本的表單產品:Formu 開發記錄

現在越來越多人用 Agent 打造產品或有趣的小工具。身為前端工程師的我,免不了也想自己做出個什麼東西來——但常常是想一想就沒了,或做到一半就失去動力。所以這次我給自己一個目標:至少做出一個像樣的東西。

為什麼是表單?

會想做這個產品,是因為我想要一個能 1:1 還原紙本格式的數位表單。

市面上常見的表單工具(Google Forms、Microsoft Forms、Typeform、Jotform)格式都是制式的,客製化空間有限。如果你手上有一張既有的紙本表單,想原封不動搬到線上,基本上很難一模一樣。所以我想試著打造一款簡單好用、又夠彈性的表單系統。

技術選型

開工前我先跟 Claude Code 確認技術方向,最後的組合是:

• 架構:monorepo
• 前端:Vite + React
• 後端:Hono(輕量級框架)
• 資料庫:SQLite
• 部署:fly.io

選 fly.io 除了省去很多部署時間,還有一個關鍵:它有提供 CLI。裝上 CLI 之後事半功倍,因為部署設定這件事 Claude Code 就可以完全接手。資料庫選 SQLite 的理由也很單純:初期流量單機就夠了,在 fly.io 上掛個 volume 就能持久化。

先做 MVP,然後 dogfooding

技術跟工具確定後,我先做出一個 MVP,接著就是自己當第一個用戶(dogfooding)。馬上就遇到問題:手機版填表單很難用。桌機畫面大,表格可以照設計的排版去填;手機就不是這麼回事。最後我把手機版調整成 Flow 模式——一個欄位一行,逐欄填寫。

Dogfooding 的過程會冒出一大堆想法。我的做法是全部記下來,讓 Claude Code 建一個 TODO 檔區分優先級,之後的開發都照這個檔案走——不會做一做突然不知道進度在哪,否則很容易一下做這個、一下做那個。

核心賣點:1:1 還原紙本

這是 Formu 主要的賣點。表單設計採用類似 canvas 的畫布:點擊欄位、放到畫布上,自由排版。為了讓排版好用,畫布上做了這些:

• 網格 + 對齊系統:拖曳時每個欄位都排得整整齊齊,不會一高一低
• 快捷鍵:複製欄位直接貼上、按 Enter 對欄位輸入文字
• Table 欄位:可拖曳替換 rows / columns
• 預覽:直接預覽輸出 PDF 的樣子,以及桌機、手機的填寫樣式

其他還有流程設定、分享連結、掃 QR Code 填寫,甚至可以產生 Poster 直接列印,方便現場掃描。

測試與品質

接下來就是不斷測試:哪裡有問題、哪裡不順暢,記下來再調整。Claude Code 也沒閒著,把核心邏輯和重要運算的地方都補上測試,並且在 GitHub Actions 跑過 typecheck 和測試,確保程式品質。

官網跟產品,為什麼拆成兩個網域

測得差不多後,我買了網域,把 fly.io 的網址換掉。這裡有一個架構決策:Formu 是單純的 SPA,想被搜尋引擎索引,就得做一個 landing page。我把官網跟產品拆成不同網域——官網 formu.sundaymorning.dev、產品 app.formu.sundaymorning.dev。

有人可能會問: 怎麼不直接用 Next.js 放同一個架構?確實做得到,而且它預設就有 route 層級的 code splitting。但 code splitting 有個盲區:全域層。webapp 需要的基礎設施——state management、theme、auth——通常掛在 root layout 的 Provider 樹上,每一頁都得背,官網頁也躲不掉。之前有做過同樣的拆分,把官網從 webapp 獨立出來後,Core Web Vitals 明顯提升,提升的就是甩掉這些官網根本用不到的全域依賴。

而 Astro 更進一步:預設 zero JS、以內容為中心,純內容頁連 framework baseline 都不用背。加上官網跟產品的發版節奏完全不同——改個文案不該跟產品綁在同一次部署。所以我選擇拆開,官網用 Astro。剩下就是 SEO:HTML 語意化、sitemap、robots.txt、多語系的 canonical,以及產品和 FAQ 的 JSON-LD。

成果:Lighthouse 四項全部 100(Performance / Accessibility / Best Practices / SEO)。

最難的不是技術,是定價

最後,對我來說最困難的部分是定價。銷售模式是什麼?怎麼定才合理?會不會太貴或太便宜?成本怎麼算?身為工程師的我,這時才發現這完全不是一件簡單的事。

本來想走「用戶自己付款升級」的路線,但後來我覺得代建表單的服務可能更吸引人——中小型企業或診所手上往往已經有一堆現成表單,要他們自己重做一遍很麻煩,不如我們直接幫你建好。所以方案最後長這樣:

建完之後也有託管服務,幫忙微調和管理表單。

如果你也有表單上的需求,歡迎試用看看 Formu,還有早鳥優惠哦!