本文へ移動
cccskills
無料GitHub で公開日本語紹介

prototype

ロジックや状態遷移の動き、画面の見た目に関する設計上の疑問を、使い捨ての試作で確かめます。操作できるHTMLや切り替え可能なUI案を作り、判断の根拠を残します。

原文原文の説明を見る

构建一次性原型来回答一个设计问题。适用于用户想验证某个 state model 或 logic 是否感觉对,或探索 UI 应该长什么样时。

インストール方法を見る

こんなときに便利

  • 状態遷移を操作して確かめたいとき
  • 非開発者とロジックの試作を共有
  • 一つのルートで異なるUI案を比較
  • 設計判断の根拠として試作を保存

日本語での紹介

できること

設計上の疑問を確かめるための、使い捨てのプロトタイプを作ります。ロジックや状態遷移を検証する場合は、自由に操作できるボタンと手順付きの説明を備えた単一のHTMLを作ります。見た目を検討する場合は、一つのルートに大きく異なるUI案を用意し、URLのパラメータと画面下部の切り替え欄で比較します。操作後の関連する状態も表示します。

こんなときに便利

紙上では追いにくい状態の変化を試したいときや、実装前に画面の方向性を比べたいときに向いています。ロジック用のHTMLは非開発者も操作できます。検証後は結論を実装に反映し、試作と判断の根拠を別ブランチやissueに残します。

使い方の例

  • 「この状態遷移を操作して確かめられるHTMLを作って」
  • 「この画面の見た目を、異なる複数のUI案で比較したい」

注意点

試作は本番用コードとして仕上げず、テストや抽象化、動作に不要な作り込みを省く方針です。状態は原則メモリ上だけに保持します。データベース自体が検証対象なら、一時的なDBなどを使います。UI用の起動方法やルート構成は既存プロジェクトに合わせます。

この紹介文は、公開されている SKILL.md をもとに AI(OpenAI Codex)が作成しました。正確な仕様は下の原文を確認してください。

含まれるファイル(4)

  • SKILL.md2.7 KB
  • agents/openai.yaml93 B
  • LOGIC.md5.8 KB
  • UI.md6.4 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

原型

Prototype 是用来回答一个问题的 throwaway code。问题决定形状。

选择分支

先识别正在回答哪个问题:来自用户 prompt、周围代码,或在用户在线时直接询问:

  • "Does this logic / state model feel right?" → LOGIC.md。构建一个单一、可分享的 HTML 文件(free-play buttons 加 tabbed guided walkthroughs),推动 state machine 跑过纸面上难以推理的 cases,而且非开发人员也能驱动它。
  • "What should this look like?" → UI.md。在单一路由上生成几种差异很大的 UI variations,并通过 URL search param 和浮动底栏切换。

这两个分支会产出非常不同的 artifacts;选错会浪费整个 prototype。如果问题确实模糊且用户不可达,默认选择更匹配周围代码的分支(backend module → logic;page 或 component → UI),并在 prototype 顶部说明假设。

两个分支通用的规则

  1. 从第一天就是 throwaway,并明确标记。 Prototype code 要靠近它实际会被使用的位置(放在被 prototype 的 module 或 page 旁边),这样上下文清楚;但命名要让随手读代码的人看出它是 prototype,不是 production。对 throwaway UI routes,遵守项目现有 routing convention;不要发明新的顶层结构。
  2. 运行毫无负担。 UI prototype 从项目 task runner 中的一条命令启动:pnpm <name>、python <path>、bun <path> 等。Logic demo 则是用户双击即可打开的单个 HTML 文件。无论哪种,启动都不需要动脑。
  3. 默认不持久化。 State 保存在内存中。Persistence 是 prototype 要_检查_的东西,不该成为依赖。如果问题明确涉及 database,就用 scratch DB 或带有清晰 “PROTOTYPE, wipe me” 名称的本地文件。
  4. 跳过 polish。 不写 tests,不做超过“能跑起来”所需的 error handling,不做 abstractions。重点是快速学到东西。
  5. 暴露 state。 每次 action(logic)或每次 variant switch(UI)后,打印或渲染完整相关 state,让用户看到发生了什么变化。
  6. 完成后 capture。 把验证过的 decision 折进真实 code,然后把 prototype 本身作为 primary source 保存:commit 到 main 之外的 throwaway branch,并在 implementation issue 上留下指向该 branch 的 context pointer。同时在 issue 或 commit 中 capture answer,也就是 verdict 与它解决的问题。Main branch 只保留验证过的 decision。

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

ask-matt

無料概要あり

アイデアの具体化、実装、不具合調査など、今の状況に合う関連スキルと使う順番を案内し、仕様作成や作業の引き継ぎを含めて開発の進め方を選ぶためのスキル。

  • アイデアから実装までの進め方選び
  • 難しい不具合調査の入口を探したいとき
  • 複数セッションの仕様と作業計画
vinvcn/mattpocock-skills-zh-CN5,1522026年10月20日 更新

claude-handoff

無料概要あり

現在の会話を引き継ぎ用に要約し、新しいバックグラウンドエージェントを起動します。既存資料への参照や推奨スキルを添えて、次の作業へ引き継ぎます。

  • 新しいエージェントで作業を続けたいとき
  • 次のセッションの作業を絞りたいとき
  • 既存資料を参照して引き継ぎたいとき
vinvcn/mattpocock-skills-zh-CN5,1522026年10月20日 更新

code-review

無料概要あり

指定したコミットやブランチからの差分を、コード規約と仕様への適合という二つの観点で並行レビューし、それぞれの指摘と重要な問題を分けて報告するスキル。

  • ブランチやPRをレビューしたいとき
  • 特定コミット以降を確認したいとき
  • 仕様の実装漏れや範囲外の変更の確認
vinvcn/mattpocock-skills-zh-CN5,1522026年10月20日 更新

codebase-design

無料概要あり

少ない利用ルールで多くの処理を扱えるモジュール設計を支援し、共通の用語と原則を使って、インターフェースや処理の差し替え位置、テストのしやすさを検討するスキル。

  • モジュールの使い方を簡単にしたいとき
  • リファクタリング時の構造検討
  • 処理を差し替える位置の検討
vinvcn/mattpocock-skills-zh-CN5,1522026年10月20日 更新

diagnosing-bugs

無料概要あり

不具合や性能低下を繰り返し再現できる検証手順を作り、原因の仮説を絞って修正します。最小の再現例づくりから再発防止テスト、一時的な調査コードの片付けまで進めます。

  • 解消しないエラーや誤出力の調査
  • 断続的な不具合の再現率を上げたいとき
  • 性能低下の測定と原因調査
vinvcn/mattpocock-skills-zh-CN5,1522026年10月20日 更新

domain-modeling

無料概要あり

プロジェクトの用語や概念の境界を具体例とコードで確かめ、合意した定義を用語集に、重要な設計判断を記録に残して認識をそろえるスキルです。

  • プロジェクトの曖昧な用語を整理したいとき
  • GLOSSARY.mdを作成・更新したいとき
  • 概念の境界をコードや例外で確かめたいとき
vinvcn/mattpocock-skills-zh-CN5,1522026年10月20日 更新

vinvcn のスキルをすべて見る

このスキルの問題を報告する