首頁 / Skills / 開發提效 / 原型 Prototype
開發提效

原型 Prototype

Matt PocockMITSkill 語言: 英文
授權已核對不含腳本
演示真實執行紀錄 · claude-opus-5-5 · 2026年10月
I'm not sure our subscription state model is right. States: trialing, active, past_due, canceled. Events: trial_ended, payment_succeeded, payment_failed, cancel_requested, grace_period_expired. The two things I can't settle on paper: what should happen if a payment fails right when the trial ends, and should a late payment reactivate a subscription that is already canceled? Build me something I can click through with our product manager.
Skill: prototype
Read: .claude/skills/prototype/LOGIC.md
Write: subscription-states.PROTOTYPE.html

I built a single HTML file you can open by double-clicking: subscription-states.PROTOTYPE.html. I haven't opened it in a browser myself, so do a quick click-through before the meeting.

How it handles your two open questions: I didn't pick an answer for either one. Each is a switch at the top of the page, and when you flip one, everything clicked so far replays under the new rule. That way you and your PM can compare both answers on the same scenario side by side.

  • Q1, the first charge fails at trial end: either grace period (→ past due) or cancel immediately (they never paid).
  • Q2, a late payment on a canceled subscription: never reactivate (refund instead), reactivate only if we canceled them for not paying, or always reactivate.

What's on the page:

  • Current-state panel: shows status, whether they can use the product, whether they've ever paid, whether the first charge is still pending, failed attempts, why they were canceled, and how many refunds we owe. Fields that just changed are highlighted, and every event comes with a plain-English explanation.
  • Seven guided scenarios:
    • Happy path
    • Card declined at trial end
    • Decline arrives before the "trial ended" signal (payment systems don't guarantee the order events arrive in)
    • Late payment after we canceled them
    • Late payment after they canceled
    • Grace-period timer fires after they already paid
    • Events that should do nothing
  • Free-play buttons: one per event. If a button would be ignored in the current state it's shown outlined, and clicking it explains why.

Things the prototype brings up that you should discuss:

  • Q1 is about two things, not one. In my model, "trial ended" moves the customer to active before the first charge has resolved. So for a short time an "active" customer may never have paid. I track that with a "waiting on first charge" flag, since you only have four states. Decide whether that's acceptable or whether you need a fifth state.
  • Event order matters for Q1. If the payment failure arrives before "trial ended," I treat it as the trial-end charge. The late "trial ended" is then ignored, so the customer ends up in the same place either way. Check that this is what you want.
  • Q2 depends on why they were canceled. If you choose "never reactivate," you also need a refund process, because the money has already been taken. The model can only tell "customer asked" apart from "stopped paying" because it records a cancel reason, so whichever option you choose, keep that field.
  • The two switches affect each other. With Q1 set to "cancel immediately" and Q2 set to "only if we canceled them," a customer who fixes their card after a failed trial-end charge comes straight back. That's probably fine, but it's worth noticing.

My recommendation: Q1 = grace period, Q2 = reactivate only for non-payment cancellations. These are the defaults the page opens with. It's your call with your PM, though.

The state logic is a self-contained SubscriptionModel block in the file. It doesn't touch the page, so you can move it into real code once you've decided. This folder isn't a git repository, so I haven't saved the prototype to a branch.

Real run recorded with claude-code / claude-opus-5-5. It generated a single double-clickable HTML file (subscription-states.PROTOTYPE.html, about 18 KB). This shows the agent's full reply; the HTML file itself is not included, and we have not opened it in a browser. Output is unmodified.

它做什麼

把原型當作「回答一個問題的一次性程式碼」,並依問題決定它的形態。

運作方式

  1. 「這個邏輯或狀態模型對不對勁?」 產生一個自足的 HTML 檔,有自由操作按鈕與分步演示分頁,使用業務語言而非程式語言,非開發者也能操作。邏輯部分放在一個小型純函式模組中,之後可直接搬進正式程式碼。
  2. 「這個介面該長什麼樣?」 在同一個路由上產生多個結構不同的介面方案,以 URL 參數與底部浮動列切換,最好嵌在既有頁面中。
  3. 所有狀態放記憶體,不寫測試、不做修飾,每次操作後顯示完整狀態。
  4. 問題有了答案後,驗證過的決定進入正式程式碼,原型本身作為原始依據保留在一個一次性分支上。

適合情境

在決定動工之前,先敲定一個狀態機或一個介面方向。

需要了解

我們試用時,它把兩個懸而未決的問題做成頁面上的開關,而不是替你猜,還指出了過程中發現的邊界情況。

說明與風險

純指令檔:沒有腳本、不連網。 Skill 會讓代理在你的專案中建立一次性檔案:邏輯類問題產生單一自足的 HTML 檔,介面類問題則在某個路由上產生多個介面變體,以 ?variant= 參數切換。它也建議把完成的原型放到一個一次性的 git 分支上。原型程式碼沒有測試與錯誤處理,請勿直接上線。 壓縮檔中另附原始儲存庫的 MIT 授權檔 LICENSE 與 agents/openai.yaml(供 Codex 使用的顯示名稱)。