跳到正文
cccskills
免费在 GitHub 公开中文介绍

prototype

制作可交互的 HTML 原型来试验逻辑和状态变化,或在同一页面切换不同界面方案。通过操作验证设计疑问,记录结论,并将验证后的决定用于实际代码。

原文查看原文说明

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

AI 评分100分/ 100查看安装方法

适用场景

  • 通过操作检验复杂状态变化
  • 比较不同的界面设计
  • 向非技术人员分享逻辑原型
  • 在实现前记录设计决定

中文介绍

功能

制作一次性原型,用来验证设计疑问。检验逻辑或状态管理方式时,生成可分享的单个 HTML 文件,提供自由操作按钮和分步说明。探索外观时,则在同一页面提供多个差异明显、可以切换的界面方案。

适用场景

适合试验仅凭纸面难以判断的状态变化,或比较界面的设计方向。原型会展示操作后的状态,让非技术人员也能确认变化。经过验证的决定会应用到实际代码中,原型与结论则保留下来,供以后查阅。

使用示例

  • “我想通过可操作的 HTML 原型,试试这些状态变化是否自然。”
  • “请提供几种方向明显不同的界面方案,方便比较这个页面的外观。”

原型放在相关逻辑或页面附近,并采用能表明其原型用途的名称。

注意事项

目标不是达到生产质量,因此省略测试和精细打磨。状态原则上保存在内存中,界面原型按现有项目的方式启动。原型保存在主分支之外的试验分支,并在实现任务中记录引用和结论。

本介绍由 AI(OpenAI Codex)根据公开的 SKILL.md 撰写。准确的规格请查看下方原文。

客观评估

AI 仅根据 SKILL.md 的内容,从 4 个方面进行了评估。星标数和热度不计入评估。

指令清晰度能否看出何时使用、做什么
A良好区分逻辑与状态验证和外观比较,并明确各自的产出。
步骤具体性步骤、输入输出和示例是否具体
A良好明确 HTML 与界面两种路径、启动方式、状态展示及原型和结论的保存位置。
安全性发送数据、删除文件、执行命令等是否有说明
A良好状态默认保存在内存,数据库试验使用临时存储,原型保存在主分支之外。
安装难易度所需工具和 API 密钥是否少且有说明
A良好说明逻辑原型直接打开 HTML,界面原型使用项目现有运行方式。

总分按每项 A=25 分、B=15 分、C=5 分相加。 由 AI(OpenAI Codex)于 2026年10月19日 评估。仅供参考,安装前请同时查看原文。

如果您认为评估有误,请申请复核

请写明哪一项有误以及原因。无需登录。我们会对照 SKILL.md 重新评估,并在此处更新结果。

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

包含的文件(4)

  • SKILL.md2.9 KB
  • agents/openai.yaml100 B
  • LOGIC.md5.9 KB
  • UI.md6.8 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Prototype

A prototype is throwaway code that answers a question. The question decides the shape.

Pick a branch

Identify which question is being answered, using the user's prompt, the surrounding code, or by asking if the user is around:

  • "Does this logic / state model feel right?" → LOGIC.md. Build a single shareable HTML file (free-play buttons plus tabbed guided walkthroughs) that pushes the state machine through cases that are hard to reason about on paper, and that a non-developer can drive.
  • "What should this look like?" → UI.md. Generate several radically different UI variations on a single route, switchable via a URL search param and a floating bottom bar.

The two branches produce very different artifacts, so getting this wrong wastes the whole prototype. If the question is genuinely ambiguous and the user isn't reachable, default to whichever branch better matches the surrounding code (a backend module → logic; a page or component → UI) and state the assumption at the top of the prototype.

Rules that apply to both

  1. Throwaway from day one, and clearly marked as such. Locate the prototype code close to where it will actually be used (next to the module or page it's prototyping for) so context is obvious, but name it so a casual reader can see it's a prototype, not production. For throwaway UI routes, obey whatever routing convention the project already uses; don't invent a new top-level structure.
  2. Trivial to run. A UI prototype starts from one command in the project's task runner: pnpm <name>, python <path>, bun <path>, etc. A logic demo is a single HTML file the user double-clicks. Either way, no thinking required to start it.
  3. No persistence by default. State lives in memory. Persistence is the thing the prototype is checking, not something it should depend on. If the question explicitly involves a database, hit a scratch DB or a local file with a clear "PROTOTYPE, wipe me" name.
  4. Skip the polish. No tests, no error handling beyond what makes the prototype runnable, no abstractions. The point is to learn something fast.
  5. Surface the state. After every action (logic) or on every variant switch (UI), print or render the full relevant state so the user can see what changed.
  6. Capture it when done. Fold any validated decision into the real code, then capture the prototype itself as a primary source: commit it to a throwaway branch, out of main, and leave a context pointer to that branch on the implementation issue. Capture the answer too (the verdict and the question it settled) in the issue or a commit. The main branch keeps only the validated decision.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

ask-matt

免费有简介AI 评分 90分

根据任务的规模和阶段,指导你选择相关技能及其使用顺序,涵盖想法梳理、实现和故障排查,帮助确定下一步以及如何衔接后续工作。

  • 选择从想法到实现的步骤
  • 确定故障排查的起点
  • 规划分多次会话完成的开发
mattpocock/skills29.7万2026年10月13日 更新

chief-of-staff

免费有简介AI 评分 60分

在单次会话中协调承担不同任务的子智能体,推进长期目标。后台工作与用户对话同时进行,并改进共享规范、工作环境和后续任务所需的信息访问条件。

  • 协调长期目标中的任务分工
  • 后台推进工作并持续对话
  • 改进共享规范和工作环境
mattpocock/skills29.7万2026年10月13日 更新

claude-handoff

免费有简介AI 评分 90分

将进行中的对话整理为交接摘要,移除敏感信息,明确后续重点、参考资料和建议技能,再启动新的后台智能体,从当前工作目录继续处理任务。

  • 将后续工作交给新的智能体
  • 限定下一次会话的任务范围
  • 整理下一次会话所需的参考资料
mattpocock/skills29.7万2026年10月13日 更新

code-review

免费有简介AI 评分 90分

以指定提交、分支或标签为基准,从开发规范和原始需求两个角度审查代码变更。分别报告规范问题与需求缺漏,便于独立判断两方面的结果。

  • 审查分支或PR的变更
  • 检查指定提交或标签之后的变更
  • 对照已记录的开发规范
mattpocock/skills29.7万2026年10月13日 更新

codebase-design

免费有简介AI 评分 90分

帮助设计用法精简、内部集中处理复杂逻辑的模块。通过统一术语和判断标准,评估模块是否易用、实现替换位置是否合适,以及是否便于测试。

  • 简化模块的调用方式
  • 集中分散的复杂逻辑
  • 选择可替换实现的位置
mattpocock/skills29.7万2026年10月13日 更新

diagnosing-bugs

免费有简介AI 评分 80分

通过能检测具体症状的测试或脚本,调查难以复现的故障和性能下降。缩小失败条件,验证多个原因假设,完成修复后检查原始复现流程及防止复发的测试。

  • 调查难以复现的错误
  • 查找处理速度下降的原因
  • 重复验证间歇性故障
mattpocock/skills29.7万2026年10月13日 更新

查看 mattpocock 的全部技能

报告此技能的问题