首页 / 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 使用的显示名)。