홈 / 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. "이건 어떻게 보여야 할까?" 구조가 서로 다른 여러 UI 안을 한 라우트에 만들고 URL 파라미터와 하단 플로팅 바로 전환합니다. 가능하면 기존 페이지 안에 둡니다.
  3. 모든 상태는 메모리에 두고, 테스트와 다듬기는 생략하며, 조작할 때마다 전체 상태를 보여 줍니다.
  4. 질문에 답이 나오면 검증된 결정은 실제 코드에 반영하고, 프로토타입 자체는 일회용 브랜치에 1차 자료로 보관합니다.

이럴 때 좋습니다

만들기로 결정하기 전에 상태 머신이나 UI 방향을 정하고 싶을 때.

알아 둘 점

저희 테스트에서는 결정되지 않은 두 질문을 임의로 정하지 않고 페이지의 스위치로 만들었고, 과정에서 발견한 경계 사례도 짚어 주었습니다.

참고 및 위험

지시문만 담긴 파일로, 스크립트가 없고 네트워크에 연결하지 않습니다. Skill은 에이전트에게 프로젝트 안에 일회용 파일을 만들게 합니다. 로직 질문에는 독립적인 HTML 파일 하나를, UI 질문에는 한 라우트에서 ?variant=로 전환하는 여러 UI 안을 만듭니다. 완성한 프로토타입은 일회용 git 브랜치에 보관하라고도 권합니다. 프로토타입 코드에는 테스트와 오류 처리가 없으므로 그대로 배포하지 마세요. 패키지에는 원본 저장소의 MIT 라이선스(LICENSE)와 agents/openai.yaml(Codex용 표시 이름)도 들어 있습니다.