尧图网站建设 
用单文件可共享 HTML 原型验证状态模型skills 仓库 prototype/LOGIC 实战指南【免费下载链接】skillsSkills for Real Engineers. Straight from my .agents directory.项目地址: https://gitcode.com/GitHub_Trending/skills13/skills在业务逻辑、状态迁移与数据结构这一类纸面上看起来合理、推演真实用例时才觉得不对劲的问题上与其反复口头推演不如把状态模型做成一个可点击驱动的单文件 HTML 演示交给非开发者设计师、产品经理、领域专家亲手玩一遍。本指南以 skills 仓库prototype技能的 LOGIC.md 为核心完整讲解如何构建这种逻辑原型——从问题声明、纯逻辑模块隔离、页面布局到交付与归档——并补充 SKILL.md、prototype 文档 与 CHANGELOG.md 中的实现依据。读完你将掌握一套可复用的逻辑原型方法论能用一次双击就能运行的 HTML 文件验证任何状态机、reducer 或数据变换逻辑。逻辑原型是什么一个可分享的演示逻辑原型Logic Prototype的产物是一个自包含的 HTML 文件一份可分享的演示任何人都能通过点击按钮来驱动一个状态模型。它针对的问题是业务逻辑、状态迁移或数据形状这类问题往往在纸上看起来合理只有把它推到真实用例里走一遍才感觉不对。这份文件的三个关键特性决定了它的价值单文件、零安装纯 HTML/CSS/JS没有框架、没有打包器、没有服务器所有内容内联双击即可打开甚至可以放进邮件转发说领域语言而非代码语言按钮和状态展示都使用业务术语让设计师、PM、领域专家亲自感受模型而不是读 reducer 代码可被非开发者驱动交付对象不需要克隆仓库、不需要安装运行时这正是 prototype 文档 强调的取舍——终端应用只能被克隆了仓库并装有运行时的人驱动这恰好排除了原型最需要征求意见的那批人而一个自包含文件可以被任何人双击驱动。从 CHANGELOG.md 的 1.2.0 版本记录可以看到这一演进脉络PR #763逻辑分支从终端应用改为单个可共享 HTML 文件核心动机正是终端应用把设计师、PM、领域专家排除在外而底层的纯逻辑模块保持不变仍然是最终可以搬进真实代码的那部分。何时该用逻辑原型识别正确的形状以下场景适合选择逻辑原型我不确定这个状态机能不能处理 X 然后 Y 这种边界情况这个数据模型真的能让我表达……这种情况吗在写 API 之前我想先感受一下 API 应该长什么样任何想按按钮、看状态变化的诉求。关键的分支判定在 SKILL.md 中有明确定义原型由问题决定形状——这个逻辑/状态模型感觉对吗走 LOGIC 分支产出一个带自由操作按钮与标签化引导走查的单文件 HTML而这看起来应该是什么样走 UI.md 分支产出同一路由下可切换的多套差异化 UI 变体。如果问题关乎外观那是 UI 分支而不是逻辑分支。两个分支产出截然不同的工件选错分支会浪费整个原型如果问题确实模棱两可且用户不在场则按周围代码匹配的分支默认处理后端模块→逻辑页面或组件→UI并在原型顶部写明假设。五步流程构建逻辑原型第一步写出问题声明写代码之前先把要验证什么状态模型、回答什么问题写下来——一段话放在演示页顶部可见的引言区域而不是只放在注释里。这段文字是原型的锚点一个回答了错误问题的逻辑原型是纯粹的浪费所以要让问题显式化以便之后随时核对——无论用户此刻在旁观看还是之后才回来AFK查阅。这与 prototype 文档 的验收标准一致你能用一句话说出这个原型要回答的问题而且它写在演示顶部而不只是在你脑子里。第二步把逻辑隔离进可移植的纯模块把真正的逻辑回答问题的核心那部分放进一个script块写成一个小而纯的模块——它必须能够被拎出来直接放进真实代码库。页面外壳是一次性的这个模块不是。模块的形态取决于问题形态签名/特征适用场景纯 reducer(state, action) state动作是离散事件、状态是单一值状态机显式状态与迁移问题的核心包含现在到底哪些动作是合法的一组纯函数作用在普通数据类型上没有隐式的当前状态只有变换类/带清晰方法面的模块明确的 method surface逻辑确实拥有持续的内部状态选择最适合问题的形态而不是最容易接到页面的形态。保持它的纯粹性不碰 DOM、不碰document、按钮处理器不得深入其内部。页面单向调用它绝不允许反向流动——这正是原型能超越自身生命周期的原因问题一旦被回答经过验证的 reducer / 机器 / 函数集可以原样升格进真实模块。这对应 codebase-design 所倡导的深模块理念大量行为封装在小型接口背后测试/驱动都通过接口进行。第三步构建可分享的 HTML 文件一个文件、纯 HTML/CSS/JS没有框架、没有打包器、没有服务器全部内联双击可开、可被邮件转发。任何人打开即可运行。为非开发者而写每个标签都用领域语言而非代码语言按钮和状态读起来像业务本身而不是 reducer用平实的语言解释正在发生什么。页面自上而下采用清晰的层级标题与一句话说明解释这个演示让你探索什么即第一步的问题声明当前状态面板完整呈现相关状态渲染成可读的面板带标签的字段而不是原始 JSON dump每次点击后重新渲染让变化可见在有助于非开发者理解时明确指出刚刚改变了什么自由操作按钮每个动作一个按钮、始终可用任何人都能以任意顺序戳模型每次点击分发对应 action 并重新渲染状态引导走查Scenarios一组场景每个场景一个标签页。每个标签页包含一段简短的平实语言场景描述它构建了什么情境、要注意观察什么下方是该场景有序的按钮序列。每一步都是真实按钮点击执行该动作并进入下一步。启动一个走查时重置到已知初始状态保证场景每次都按相同方式运行。场景的选择要有策略优先演示那些在纸上难以推演的不自然情况——happy path、一个棘手的边界用例、一次对应该非法操作的尝试。外观保持美观但克制干净的排版、充裕的留白、一种强调色。不要动画、不要花哨——没有任何东西应该与状态和按钮争夺注意力。第四步交付把文件发给对方或当面打开。他们会在方便时点击走查和自由操作最有价值的时刻是当他们说出**等等这不应该是可能的或咦我原本以为 X 会不一样**——这些正是点子本身的 bug而这正是原型的全部意义所在。如果对方想要新的动作或新场景就加上——原型是不断演化的。第五步捕获答案与原型一旦原型回答了问题先捕获答案再按 SKILL 描述的方式捕获原型本体。逻辑分支的映射关系经过验证的 reducer / 机器 / 函数集升格进真实模块——这是被吸收的决定HTML 外壳随原型归档到一次性分支保留原型作为一手资料primary source由于它是单一自包含文件在那里始终可以轻易地重新运行。这一归档机制在 prototype 文档 中有更完整的展开答案结论 它所解决的问题被持久化捕获——提交信息、ADR 或实现 issue 中原型本身作为答案的可运行证据提交到 main 之外的prototype/name一次性分支永不合并并在实现 issue 上留下指向该分支的上下文指针context pointer。main 保持干净探索成果却仍然可查找、可重跑。这也是对原型不是用来删的这一观念的澄清废弃throwaway是写作方式的约束而不是销毁的承诺——它永远不合并进 main这一点没有变变的只是代码存放的位置。反模式清单六条红线逻辑原型有六条明确的反模式LOGIC.md 原样列出不要加测试。需要测试的原型就不再是原型了。这对应 prototype 文档 的通用规则跳过打磨没有测试、没有超出可运行所需的错误处理、没有抽象——目标是快速学到那一件事。不要接真实数据库。除非问题特指持久化否则使用内存状态。SKILL.md 的通用规则同样强调默认无持久化状态驻留内存持久化是被原型检查的对象而不是它应该依赖的东西若问题确实涉及数据库才使用带明确PROTOTYPE用完擦掉命名的临时库或本地文件。不要泛化。不要如果我们以后想支持 X 呢。原型只回答一个问题。不要把逻辑和页面糊在一起。如果纯模块引用了 DOM、document或按钮处理器它就不再可升格。页面只是纯模块之上的薄壳。不要引入框架、打包器或服务器。收件人双击就能运行的一个文件React 应用或 dev server 会毁掉可分享。不要把 HTML 外壳发布到生产环境。页面是为人工点击优化的一次性外壳其背后的逻辑模块才是值得保留的部分。从源码看逻辑原型的定位在 skills 仓库中prototype是一个model-invoked技能见 skills/engineering/README.md 的 Model-invoked 列表这意味着 Agent 可以在任务匹配时自动使用它。其 agents/openai.yaml 给出了 Codex 界面的元数据display_name: Prototype、short_description: Prototype to answer a design question与 SKILL.md 的 frontmatter 描述Build a throwaway prototype to answer a design question完全对应。从 CHANGELOG.md 可以看到逻辑分支的演化证据1.2.0PR #763逻辑分支的产物重塑为单个可共享 HTML 文件——带标签的状态面板、始终可用的自由操作按钮、一组标签化的引导走查可移植的纯逻辑模块仍然升格进真实代码HTML 外壳才是被丢弃的部分。原型不再等于删除而是作为可运行证据归档到prototype/name分支。1.0.0prototype技能改为 model-invoked描述围绕prototype 回答设计问题的一次性代码改写每个分支各有一个触发场景状态/逻辑 sanity-check或 UI 探索。它最大的消费方是 wayfinder一张 wayfinder 地图由决策 ticket 组成prototype是四类 ticket 之一——用于应该长什么样 / 应该怎么表现这种任何讨论都解决不了的阻塞性问题。原型 ticket 由答案解决原型本身作为资产链接在地图上。判定逻辑原型是否有效的检查清单综合 prototype 文档 的 Its working if 标准一个成功的逻辑原型应当满足你能用一句话说出它存在的目的且这句话写在演示顶部而非只在脑中不读代码的人也能驱动它——打开文件、在走查标签页里按按钮用自己的话描述所见有人说出等等这不应该是可能的或咦我原本以为 X 是这样——这是点子的 bug正是全部意义所在一次坐下就完成回答。如果一天后还在构建它说明问题太大了需要拆分结束时 main 只包含决定、不包含原型实现 issue 指向仍保留原型的分支。小结逻辑原型把难以在纸面上推演的状态模型变成任何人双击即可驱动的一个 HTML 文件顶部写清问题声明逻辑隔离进可移植的纯模块页面用领域语言渲染状态面板、自由操作按钮和标签化引导走查交付给非开发者获取真实反馈最后把验证过的逻辑升格进真实代码、把演示归档到一次性分支。它的每一步都在向一个目标收敛用最低的成本在写真实代码之前发现点子里的 bug。相关资源核心方法论见 LOGIC.md分支选择与通用规则见 SKILL.md 与 UI.md完整背景与常见问题见 prototype 文档技能在技能体系中的定位见 skills/engineering/README.md 与 CHANGELOG.md。【免费下载链接】skillsSkills for Real Engineers. Straight from my .agents directory.项目地址: https://gitcode.com/GitHub_Trending/skills13/skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 用单文件可共享 HTML 原型验证状态模型：skills 仓库 prototype/LOGIC 实战指南
用单文件可共享 HTML 原型验证状态模型skills 仓库 prototype/LOGIC 实战指南【免费下载链接】skillsSkills for Real Engineers. Straight from my .agents directory.项目地址: https://gitcode.com/GitHub_Trending/skills13/skills在业务逻辑、状态迁移与数据结构这一类纸面上看起来合理、推演真实用例时才觉得不对劲的问题上与其反复口头推演不如把状态模型做成一个可点击驱动的单文件 HTML 演示交给非开发者设计师、产品经理、领域专家亲手玩一遍。本指南以 skills 仓库prototype技能的 LOGIC.md 为核心完整讲解如何构建这种逻辑原型——从问题声明、纯逻辑模块隔离、页面布局到交付与归档——并补充 SKILL.md、prototype 文档 与 CHANGELOG.md 中的实现依据。读完你将掌握一套可复用的逻辑原型方法论能用一次双击就能运行的 HTML 文件验证任何状态机、reducer 或数据变换逻辑。逻辑原型是什么一个可分享的演示逻辑原型Logic Prototype的产物是一个自包含的 HTML 文件一份可分享的演示任何人都能通过点击按钮来驱动一个状态模型。它针对的问题是业务逻辑、状态迁移或数据形状这类问题往往在纸上看起来合理只有把它推到真实用例里走一遍才感觉不对。这份文件的三个关键特性决定了它的价值单文件、零安装纯 HTML/CSS/JS没有框架、没有打包器、没有服务器所有内容内联双击即可打开甚至可以放进邮件转发说领域语言而非代码语言按钮和状态展示都使用业务术语让设计师、PM、领域专家亲自感受模型而不是读 reducer 代码可被非开发者驱动交付对象不需要克隆仓库、不需要安装运行时这正是 prototype 文档 强调的取舍——终端应用只能被克隆了仓库并装有运行时的人驱动这恰好排除了原型最需要征求意见的那批人而一个自包含文件可以被任何人双击驱动。从 CHANGELOG.md 的 1.2.0 版本记录可以看到这一演进脉络PR #763逻辑分支从终端应用改为单个可共享 HTML 文件核心动机正是终端应用把设计师、PM、领域专家排除在外而底层的纯逻辑模块保持不变仍然是最终可以搬进真实代码的那部分。何时该用逻辑原型识别正确的形状以下场景适合选择逻辑原型我不确定这个状态机能不能处理 X 然后 Y 这种边界情况这个数据模型真的能让我表达……这种情况吗在写 API 之前我想先感受一下 API 应该长什么样任何想按按钮、看状态变化的诉求。关键的分支判定在 SKILL.md 中有明确定义原型由问题决定形状——这个逻辑/状态模型感觉对吗走 LOGIC 分支产出一个带自由操作按钮与标签化引导走查的单文件 HTML而这看起来应该是什么样走 UI.md 分支产出同一路由下可切换的多套差异化 UI 变体。如果问题关乎外观那是 UI 分支而不是逻辑分支。两个分支产出截然不同的工件选错分支会浪费整个原型如果问题确实模棱两可且用户不在场则按周围代码匹配的分支默认处理后端模块→逻辑页面或组件→UI并在原型顶部写明假设。五步流程构建逻辑原型第一步写出问题声明写代码之前先把要验证什么状态模型、回答什么问题写下来——一段话放在演示页顶部可见的引言区域而不是只放在注释里。这段文字是原型的锚点一个回答了错误问题的逻辑原型是纯粹的浪费所以要让问题显式化以便之后随时核对——无论用户此刻在旁观看还是之后才回来AFK查阅。这与 prototype 文档 的验收标准一致你能用一句话说出这个原型要回答的问题而且它写在演示顶部而不只是在你脑子里。第二步把逻辑隔离进可移植的纯模块把真正的逻辑回答问题的核心那部分放进一个script块写成一个小而纯的模块——它必须能够被拎出来直接放进真实代码库。页面外壳是一次性的这个模块不是。模块的形态取决于问题形态签名/特征适用场景纯 reducer(state, action) state动作是离散事件、状态是单一值状态机显式状态与迁移问题的核心包含现在到底哪些动作是合法的一组纯函数作用在普通数据类型上没有隐式的当前状态只有变换类/带清晰方法面的模块明确的 method surface逻辑确实拥有持续的内部状态选择最适合问题的形态而不是最容易接到页面的形态。保持它的纯粹性不碰 DOM、不碰document、按钮处理器不得深入其内部。页面单向调用它绝不允许反向流动——这正是原型能超越自身生命周期的原因问题一旦被回答经过验证的 reducer / 机器 / 函数集可以原样升格进真实模块。这对应 codebase-design 所倡导的深模块理念大量行为封装在小型接口背后测试/驱动都通过接口进行。第三步构建可分享的 HTML 文件一个文件、纯 HTML/CSS/JS没有框架、没有打包器、没有服务器全部内联双击可开、可被邮件转发。任何人打开即可运行。为非开发者而写每个标签都用领域语言而非代码语言按钮和状态读起来像业务本身而不是 reducer用平实的语言解释正在发生什么。页面自上而下采用清晰的层级标题与一句话说明解释这个演示让你探索什么即第一步的问题声明当前状态面板完整呈现相关状态渲染成可读的面板带标签的字段而不是原始 JSON dump每次点击后重新渲染让变化可见在有助于非开发者理解时明确指出刚刚改变了什么自由操作按钮每个动作一个按钮、始终可用任何人都能以任意顺序戳模型每次点击分发对应 action 并重新渲染状态引导走查Scenarios一组场景每个场景一个标签页。每个标签页包含一段简短的平实语言场景描述它构建了什么情境、要注意观察什么下方是该场景有序的按钮序列。每一步都是真实按钮点击执行该动作并进入下一步。启动一个走查时重置到已知初始状态保证场景每次都按相同方式运行。场景的选择要有策略优先演示那些在纸上难以推演的不自然情况——happy path、一个棘手的边界用例、一次对应该非法操作的尝试。外观保持美观但克制干净的排版、充裕的留白、一种强调色。不要动画、不要花哨——没有任何东西应该与状态和按钮争夺注意力。第四步交付把文件发给对方或当面打开。他们会在方便时点击走查和自由操作最有价值的时刻是当他们说出**等等这不应该是可能的或咦我原本以为 X 会不一样**——这些正是点子本身的 bug而这正是原型的全部意义所在。如果对方想要新的动作或新场景就加上——原型是不断演化的。第五步捕获答案与原型一旦原型回答了问题先捕获答案再按 SKILL 描述的方式捕获原型本体。逻辑分支的映射关系经过验证的 reducer / 机器 / 函数集升格进真实模块——这是被吸收的决定HTML 外壳随原型归档到一次性分支保留原型作为一手资料primary source由于它是单一自包含文件在那里始终可以轻易地重新运行。这一归档机制在 prototype 文档 中有更完整的展开答案结论 它所解决的问题被持久化捕获——提交信息、ADR 或实现 issue 中原型本身作为答案的可运行证据提交到 main 之外的prototype/name一次性分支永不合并并在实现 issue 上留下指向该分支的上下文指针context pointer。main 保持干净探索成果却仍然可查找、可重跑。这也是对原型不是用来删的这一观念的澄清废弃throwaway是写作方式的约束而不是销毁的承诺——它永远不合并进 main这一点没有变变的只是代码存放的位置。反模式清单六条红线逻辑原型有六条明确的反模式LOGIC.md 原样列出不要加测试。需要测试的原型就不再是原型了。这对应 prototype 文档 的通用规则跳过打磨没有测试、没有超出可运行所需的错误处理、没有抽象——目标是快速学到那一件事。不要接真实数据库。除非问题特指持久化否则使用内存状态。SKILL.md 的通用规则同样强调默认无持久化状态驻留内存持久化是被原型检查的对象而不是它应该依赖的东西若问题确实涉及数据库才使用带明确PROTOTYPE用完擦掉命名的临时库或本地文件。不要泛化。不要如果我们以后想支持 X 呢。原型只回答一个问题。不要把逻辑和页面糊在一起。如果纯模块引用了 DOM、document或按钮处理器它就不再可升格。页面只是纯模块之上的薄壳。不要引入框架、打包器或服务器。收件人双击就能运行的一个文件React 应用或 dev server 会毁掉可分享。不要把 HTML 外壳发布到生产环境。页面是为人工点击优化的一次性外壳其背后的逻辑模块才是值得保留的部分。从源码看逻辑原型的定位在 skills 仓库中prototype是一个model-invoked技能见 skills/engineering/README.md 的 Model-invoked 列表这意味着 Agent 可以在任务匹配时自动使用它。其 agents/openai.yaml 给出了 Codex 界面的元数据display_name: Prototype、short_description: Prototype to answer a design question与 SKILL.md 的 frontmatter 描述Build a throwaway prototype to answer a design question完全对应。从 CHANGELOG.md 可以看到逻辑分支的演化证据1.2.0PR #763逻辑分支的产物重塑为单个可共享 HTML 文件——带标签的状态面板、始终可用的自由操作按钮、一组标签化的引导走查可移植的纯逻辑模块仍然升格进真实代码HTML 外壳才是被丢弃的部分。原型不再等于删除而是作为可运行证据归档到prototype/name分支。1.0.0prototype技能改为 model-invoked描述围绕prototype 回答设计问题的一次性代码改写每个分支各有一个触发场景状态/逻辑 sanity-check或 UI 探索。它最大的消费方是 wayfinder一张 wayfinder 地图由决策 ticket 组成prototype是四类 ticket 之一——用于应该长什么样 / 应该怎么表现这种任何讨论都解决不了的阻塞性问题。原型 ticket 由答案解决原型本身作为资产链接在地图上。判定逻辑原型是否有效的检查清单综合 prototype 文档 的 Its working if 标准一个成功的逻辑原型应当满足你能用一句话说出它存在的目的且这句话写在演示顶部而非只在脑中不读代码的人也能驱动它——打开文件、在走查标签页里按按钮用自己的话描述所见有人说出等等这不应该是可能的或咦我原本以为 X 是这样——这是点子的 bug正是全部意义所在一次坐下就完成回答。如果一天后还在构建它说明问题太大了需要拆分结束时 main 只包含决定、不包含原型实现 issue 指向仍保留原型的分支。小结逻辑原型把难以在纸面上推演的状态模型变成任何人双击即可驱动的一个 HTML 文件顶部写清问题声明逻辑隔离进可移植的纯模块页面用领域语言渲染状态面板、自由操作按钮和标签化引导走查交付给非开发者获取真实反馈最后把验证过的逻辑升格进真实代码、把演示归档到一次性分支。它的每一步都在向一个目标收敛用最低的成本在写真实代码之前发现点子里的 bug。相关资源核心方法论见 LOGIC.md分支选择与通用规则见 SKILL.md 与 UI.md完整背景与常见问题见 prototype 文档技能在技能体系中的定位见 skills/engineering/README.md 与 CHANGELOG.md。【免费下载链接】skillsSkills for Real Engineers. Straight from my .agents directory.项目地址: https://gitcode.com/GitHub_Trending/skills13/skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考