PentestGPT UI 原型方法论在单一路由上生成、切换并裁决多个“ radically different” UI 变体【免费下载链接】PentestGPTAutomated Penetration Testing Agentic Framework Powered by Large Language Models项目地址: https://gitcode.com/GitHub_Trending/pe/PentestGPT本文基于 PentestGPT 仓库中的 Agent 技能定义文档 UI.md系统讲解“UI 原型”这一工作流的完整设计如何用?variantURL 参数在同一个路由上挂载多个结构性差异显著的界面变体、如何用浮动底部切换条在浏览器中快速比对以及如何在裁决完成后干净地清理原型代码。读完本文你将掌握一套可复制到任意前端项目以及交给编码 Agent 执行的 UI 方案对比与落地流程并能理解 PentestGPT 仓库中技能skills体系的加载、校验与分发机制是如何支撑这类 Agent 技能的。1. 背景UI 原型技能在 PentestGPT 仓库中的位置PentestGPT 是一个由大模型驱动的自动化渗透测试 Agentic 框架仓库内维护了一套面向编码 Agent 的技能skills体系技能以目录 SKILL.md的形式存放在 .agents/skills/ 下每个技能目录的SKILL.md必须带有 YAML frontmattername、description等字段并经过规范校验后才能被 Claude Code 与 Codex 两类 Agent 宿主共同发现。仓库根目录的 skills-lock.json 记录了技能清单与来源指纹其中prototype技能声明来自mattpocock/skills源sourceType: githubskillPath: skills/engineering/prototype/SKILL.md并带有computedHash用于校验内容完整性。该技能目录下包含三个文件SKILL.md — 技能入口负责在“逻辑问题”与“视觉问题”两个分支之间做路由UI.md — 本文的主角处理“这个东西应该长什么样”的问题LOGIC.md — 姊妹文档处理状态机/业务逻辑类问题构造一个可手动驱动状态模型的小型终端 TUI。从仓库结构看技能的实际加载与分发由 unified_agent/skills.py 实现install_skills会把技能目录安装到两个发现根目录——ws/.claude/skills/Claude Code和ws/.agents/skills/Codex 等跨 Agent 宿主——一份SKILL.md同时服务两类 Agentload_skill负责按 agentskills 规范解析并校验 frontmatter技能名必须全小写/数字/连字符、长度不超过 64、且与目录名一致description 必填且不超过 1024 字符lint_skill则会对 Claude 专有语法如$ARGUMENTS、动态 shell 注入!cmd、${CLAUDE_*}变量给出可移植性告警。相关行为在 tests/test_skills.py 中有完整覆盖包括“双目录符号链接安装”“幂等重装”“真实目录需 force 替换”等用例。需要说明的是AGENT.md 指出unified_agent/目前定位为“保留给根级打包/Docker 的兼容副本”框架主体在pentestgpt_agent/本文引用它仅作为技能机制的实现证据不代表它是框架运行时的核心路径。2. 核心思想原型是一次性代码答案是唯一要保留的东西SKILL.md 给原型定下的总纲是“原型是用来回答问题的一次性代码问题决定形态”。它要求先判断问题属于哪个分支“这段逻辑 / 状态模型感觉对吗” → LOGIC.md 分支“这个东西应该长什么样” → UI.md 分支即“在单一路由上生成多个 radically different结构性截然不同的 UI 变体通过 URL 搜索参数与浮动底部条切换”。选错分支“会浪费掉整个原型”。如果问题确实含糊且用户不在场就按周边代码类型默认后端模块 → 逻辑页面或组件 → UI并在原型顶部注明这一假设。UI.md 开篇给出了工作流的目标形态在同一条路由上生成若干 radically different 的 UI 变体从浮动底部条切换。用户在浏览器里翻来覆去地比对挑一个或者从每个变体里各取一部分然后把剩下的全部扔掉。并明确划出适用场景——典型的触发句式包括“这个页面应该长什么样”“我想在给这个 dashboard 下结论之前先看几个选项。”“给设置页换个布局试试。”以及“任何时候用户否则要在脑子里挑三个模糊的 mockup 花上一整天”。3. 两种子形态强烈优先“挂载到已有页面”UI.md 的核心判断是UI 原型只有“顶着整个应用”才好评判——真实的 header、真实的侧边栏、真实的数据、真实的密度。一个孤立的 throwaway 路由是真空环境每个变体单独看都“还不错”无法暴露真实问题。3.1 子形态 A —— 对已有页面的调整首选前提是该路由已经存在。变体在同一路由上渲染由?variantURL 搜索参数门控。现有的数据获取、路由参数、鉴权全部保留只有渲染层切换。这是默认选择除非有明确的理由不这么做。文档还覆盖了一个容易误判的情况如果原型对象是一个“还没有页面、但天然应该住在某个页面里”的东西dashboard 的一个新分区、设置页的一张新卡片、既有流程里的一个新步骤那仍然属于子形态 A——把变体挂载到宿主页面里而不是新开路由。3.2 子形态 B —— 新开页面最后手段只有当被原型的对象确实没有任何现成页面可以容纳时才用比如一个全新的顶级界面或一段无处嵌入的流程。要求创建一条throwaway 路由遵循项目已有的路由约定不要发明新的顶层结构命名必须让人一眼看出这是原型例如路径或文件名里包含prototype字样同样使用?variant模式。文档要求在做子形态 B 之前先做一次 sanity check“是否真的没有任何现成页面可以嵌入”——“一条空路由会掩盖一个有内容的路由才能暴露的设计问题”。两种子形态下的浮动底部条完全相同。4. 六步工作流4.1 第 1 步陈述问题确定变体数 N默认3 个变体。超过 5 个就不再“radically different”而变成噪音——上限设在 5。并且要用一行字把计划写下来写在原型所在位置或文件顶部注释里“settings 页的三个变体通过?variant切换放在既有的/settings路由上。”这样做无论用户在场与否都有效——用户在场可以反驳不在场则留下可复核的记录。4.2 第 2 步生成结构性截然不同的变体每个变体必须同时满足三条约束页面的目的及其可访问的数据项目的组件库 / 样式体系TailwindCSS、shadcn、MUI、纯 CSS什么都行清晰的导出组件名例如VariantA、VariantB、VariantC。关键红线变体之间必须结构性不同——不同的布局、不同的信息层级、不同的主要交互入口primary affordance而不是仅仅换配色。“三个微调过的卡片网格不是 UI 原型是墙纸。”如果两个草稿长得太像就用显式的“不要使用卡片网格”这类指令重做其中一个。4.3 第 3 步把变体接起来在路由上创建一个统一的 switcher 组件。UI.md 给出的伪代码需适配项目框架如下// pseudo-code — adapt to the projects framework const variant searchParams.get(variant) ?? A; return ( {variant A VariantA {...data} /} {variant B VariantB {...data} /} {variant C VariantC {...data} /} PrototypeSwitcher variants{[A,B,C]} current{variant} / / );对子形态 A已有页面把所有既有的数据获取逻辑保留在 switcher 之上每个变体改变的只有渲染子树对子形态 B新页面/prototype/name下的 throwaway 路由挂载同一个 switcher。4.4 第 4 步构建浮动切换条一个固定在屏幕底部中央的小条包含三个部件左箭头— 回退到上一个变体环形回绕变体标签— 显示当前变体键如果变体导出了名字一并显示。例如B — Sidebar layout右箭头— 前进到下一个变体环形回绕。行为规格逐条列明点击箭头更新 URL 搜索参数——使用框架的路由器Next.js 用router.replaceReact Router 用navigate等保证变体链接可分享、刷新后稳定键盘支持—←/→方向键也能切换但当input、textarea或[contenteditable]元素聚焦时不得拦截方向键避免破坏文本输入视觉上要明显区别于页面本身如高对比度药丸形、淡淡的阴影让人一眼看出它“不是被评价设计的一部分”生产构建中隐藏— 用process.env.NODE_ENV ! production或等价判断做门控防止一个误合入的原型把切换条直接发布给用户。切换条要放在项目共享 UI 目录下的单一共享组件里让两种子形态都能复用。4.5 第 5 步交付把 URL和各个?variant键值摆到用户面前让他想比对的时候随时翻。文档特别指出真正有价值的反馈通常不是“A 最好”而是“我要 B 的 header 配 C 的侧边栏”——那才是用户实际想要的设计。4.6 第 6 步记录裁决并清理某个变体胜出后写下是哪个、以及为什么——可以落在 commit message、ADR、issue或者用户不在场时原型旁边的一个NOTES.md。然后子形态 A— 删除落选变体和切换条把胜者并入既有页面子形态 B— 把胜出变体提升为正式路由删除 throwaway 路由和切换条。文档最后一句是硬性要求“不要把变体组件或切换条留在那儿。它们腐烂得很快会困惑下一个读者。”5. 反模式清单UI.md 用四个反模式为整套流程收尾每一条都对应工作流中的某个关键决策只在配色或文案上有差异的“变体”— 那是微调不是原型。真正的变体在结构上互相不同意。变体之间共享太多代码— 共享一个Header没问题共享一个Layout就违背初衷。每个变体必须有权扔掉布局。把变体接到真实的 mutation 上— 只读原型是安全的。如果某个变体需要写操作就指向 stub你要回答的问题是“它应该长什么样”而不是“后端是否好用”。把原型直接提升进生产— 变体代码是在原型约束下写的没有测试、错误处理最小化。并回正式代码时要重写。6. 与 SKILL.md 共同遵守的通用原型规则UI.md 是 UI 分支的细则SKILL.md 则给出两条分支都必须遵守的六条规则理解它们有助于把握 UI 原型的边界从第一天起就是一次性的并且要明码标注— 原型代码放在它将要被使用的位置旁边对应的模块或页面旁但命名要让人一眼看出是原型而非生产代码throwaway UI 路由必须遵循项目既有路由约定一条命令即可运行— 依托项目现有的 task runnerpnpm name、python path、bun path等用户不需要思考就能启动默认不做持久化— 状态放在内存里持久化正是原型要“检验”的对象而不是它该依赖的东西。若问题本身涉及数据库就指向一个 scratch DB 或带“PROTOTYPE — wipe me”清晰命名的本地文件跳过打磨— 不写测试、不加错误处理除了让原型能跑起来的程度、不做抽象。目的是快速学到东西然后删掉把状态摆出来— 逻辑原型每次动作后、UI 原型每次切换变体时都完整打印/渲染相关状态让用户看到变化完成后删除或吸收— 原型回答了问题之后要么删掉要么把验证过的决策折进正式代码不要留它在仓库里腐烂。“完成”的判定标准也被明确写出原型中唯一值得保留的是答案。把答案连同它所回答的问题一起记录到持久位置commit message、ADR、issue 或NOTES.md用户在场就快速对话确认不在场就留下占位待下一轮补上裁决再删除原型。7. 如何在本仓库中查看与复现这套技能结合仓库源码读者可以沿以下路径验证本文内容技能定义本体.agents/skills/prototype/SKILL.md、.agents/skills/prototype/UI.md、.agents/skills/prototype/LOGIC.md技能清单与来源指纹skills-lock.jsonprototype条目含source、sourceType、skillPath、computedHash加载/校验/安装实现unified_agent/skills.py 中的load_skillfrontmatter 解析与规范校验、discover_skills扫描含SKILL.md的子目录、install_skills向.claude/skills/与.agents/skills/双宿主分发支持 symlink/copy 两种模式与force语义行为测试tests/test_skills.py覆盖非法技能名拒绝、description 必填与 1024 上限、缺失 frontmatter 报错、Claude 专有语法 lint 告警、双目录符号链接安装与幂等重装等场景。需要说明适用前提.agents/skills/下这套技能是编码 Agent 面向本仓库开发过程的工作流指引例如为仓库自身的前端页面做 UI 方案对比与pentestgpt_agent/框架的 Supervisor/Executor 运行时无关复现?variant变体流程时按项目实际使用的框架Next.js / React Router 等适配 switcher 的路由 API 即可核心不变量只有三条——同一数据源、URL 参数门控、生产环境隐藏切换条。【免费下载链接】PentestGPTAutomated Penetration Testing Agentic Framework Powered by Large Language Models项目地址: https://gitcode.com/GitHub_Trending/pe/PentestGPT创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
PentestGPT UI 原型方法论在单一路由上生成、切换并裁决多个“ radically different” UI 变体【免费下载链接】PentestGPTAutomated Penetration Testing Agentic Framework Powered by Large Language Models项目地址: https://gitcode.com/GitHub_Trending/pe/PentestGPT本文基于 PentestGPT 仓库中的 Agent 技能定义文档 UI.md系统讲解“UI 原型”这一工作流的完整设计如何用?variantURL 参数在同一个路由上挂载多个结构性差异显著的界面变体、如何用浮动底部切换条在浏览器中快速比对以及如何在裁决完成后干净地清理原型代码。读完本文你将掌握一套可复制到任意前端项目以及交给编码 Agent 执行的 UI 方案对比与落地流程并能理解 PentestGPT 仓库中技能skills体系的加载、校验与分发机制是如何支撑这类 Agent 技能的。1. 背景UI 原型技能在 PentestGPT 仓库中的位置PentestGPT 是一个由大模型驱动的自动化渗透测试 Agentic 框架仓库内维护了一套面向编码 Agent 的技能skills体系技能以目录 SKILL.md的形式存放在 .agents/skills/ 下每个技能目录的SKILL.md必须带有 YAML frontmattername、description等字段并经过规范校验后才能被 Claude Code 与 Codex 两类 Agent 宿主共同发现。仓库根目录的 skills-lock.json 记录了技能清单与来源指纹其中prototype技能声明来自mattpocock/skills源sourceType: githubskillPath: skills/engineering/prototype/SKILL.md并带有computedHash用于校验内容完整性。该技能目录下包含三个文件SKILL.md — 技能入口负责在“逻辑问题”与“视觉问题”两个分支之间做路由UI.md — 本文的主角处理“这个东西应该长什么样”的问题LOGIC.md — 姊妹文档处理状态机/业务逻辑类问题构造一个可手动驱动状态模型的小型终端 TUI。从仓库结构看技能的实际加载与分发由 unified_agent/skills.py 实现install_skills会把技能目录安装到两个发现根目录——ws/.claude/skills/Claude Code和ws/.agents/skills/Codex 等跨 Agent 宿主——一份SKILL.md同时服务两类 Agentload_skill负责按 agentskills 规范解析并校验 frontmatter技能名必须全小写/数字/连字符、长度不超过 64、且与目录名一致description 必填且不超过 1024 字符lint_skill则会对 Claude 专有语法如$ARGUMENTS、动态 shell 注入!cmd、${CLAUDE_*}变量给出可移植性告警。相关行为在 tests/test_skills.py 中有完整覆盖包括“双目录符号链接安装”“幂等重装”“真实目录需 force 替换”等用例。需要说明的是AGENT.md 指出unified_agent/目前定位为“保留给根级打包/Docker 的兼容副本”框架主体在pentestgpt_agent/本文引用它仅作为技能机制的实现证据不代表它是框架运行时的核心路径。2. 核心思想原型是一次性代码答案是唯一要保留的东西SKILL.md 给原型定下的总纲是“原型是用来回答问题的一次性代码问题决定形态”。它要求先判断问题属于哪个分支“这段逻辑 / 状态模型感觉对吗” → LOGIC.md 分支“这个东西应该长什么样” → UI.md 分支即“在单一路由上生成多个 radically different结构性截然不同的 UI 变体通过 URL 搜索参数与浮动底部条切换”。选错分支“会浪费掉整个原型”。如果问题确实含糊且用户不在场就按周边代码类型默认后端模块 → 逻辑页面或组件 → UI并在原型顶部注明这一假设。UI.md 开篇给出了工作流的目标形态在同一条路由上生成若干 radically different 的 UI 变体从浮动底部条切换。用户在浏览器里翻来覆去地比对挑一个或者从每个变体里各取一部分然后把剩下的全部扔掉。并明确划出适用场景——典型的触发句式包括“这个页面应该长什么样”“我想在给这个 dashboard 下结论之前先看几个选项。”“给设置页换个布局试试。”以及“任何时候用户否则要在脑子里挑三个模糊的 mockup 花上一整天”。3. 两种子形态强烈优先“挂载到已有页面”UI.md 的核心判断是UI 原型只有“顶着整个应用”才好评判——真实的 header、真实的侧边栏、真实的数据、真实的密度。一个孤立的 throwaway 路由是真空环境每个变体单独看都“还不错”无法暴露真实问题。3.1 子形态 A —— 对已有页面的调整首选前提是该路由已经存在。变体在同一路由上渲染由?variantURL 搜索参数门控。现有的数据获取、路由参数、鉴权全部保留只有渲染层切换。这是默认选择除非有明确的理由不这么做。文档还覆盖了一个容易误判的情况如果原型对象是一个“还没有页面、但天然应该住在某个页面里”的东西dashboard 的一个新分区、设置页的一张新卡片、既有流程里的一个新步骤那仍然属于子形态 A——把变体挂载到宿主页面里而不是新开路由。3.2 子形态 B —— 新开页面最后手段只有当被原型的对象确实没有任何现成页面可以容纳时才用比如一个全新的顶级界面或一段无处嵌入的流程。要求创建一条throwaway 路由遵循项目已有的路由约定不要发明新的顶层结构命名必须让人一眼看出这是原型例如路径或文件名里包含prototype字样同样使用?variant模式。文档要求在做子形态 B 之前先做一次 sanity check“是否真的没有任何现成页面可以嵌入”——“一条空路由会掩盖一个有内容的路由才能暴露的设计问题”。两种子形态下的浮动底部条完全相同。4. 六步工作流4.1 第 1 步陈述问题确定变体数 N默认3 个变体。超过 5 个就不再“radically different”而变成噪音——上限设在 5。并且要用一行字把计划写下来写在原型所在位置或文件顶部注释里“settings 页的三个变体通过?variant切换放在既有的/settings路由上。”这样做无论用户在场与否都有效——用户在场可以反驳不在场则留下可复核的记录。4.2 第 2 步生成结构性截然不同的变体每个变体必须同时满足三条约束页面的目的及其可访问的数据项目的组件库 / 样式体系TailwindCSS、shadcn、MUI、纯 CSS什么都行清晰的导出组件名例如VariantA、VariantB、VariantC。关键红线变体之间必须结构性不同——不同的布局、不同的信息层级、不同的主要交互入口primary affordance而不是仅仅换配色。“三个微调过的卡片网格不是 UI 原型是墙纸。”如果两个草稿长得太像就用显式的“不要使用卡片网格”这类指令重做其中一个。4.3 第 3 步把变体接起来在路由上创建一个统一的 switcher 组件。UI.md 给出的伪代码需适配项目框架如下// pseudo-code — adapt to the projects framework const variant searchParams.get(variant) ?? A; return ( {variant A VariantA {...data} /} {variant B VariantB {...data} /} {variant C VariantC {...data} /} PrototypeSwitcher variants{[A,B,C]} current{variant} / / );对子形态 A已有页面把所有既有的数据获取逻辑保留在 switcher 之上每个变体改变的只有渲染子树对子形态 B新页面/prototype/name下的 throwaway 路由挂载同一个 switcher。4.4 第 4 步构建浮动切换条一个固定在屏幕底部中央的小条包含三个部件左箭头— 回退到上一个变体环形回绕变体标签— 显示当前变体键如果变体导出了名字一并显示。例如B — Sidebar layout右箭头— 前进到下一个变体环形回绕。行为规格逐条列明点击箭头更新 URL 搜索参数——使用框架的路由器Next.js 用router.replaceReact Router 用navigate等保证变体链接可分享、刷新后稳定键盘支持—←/→方向键也能切换但当input、textarea或[contenteditable]元素聚焦时不得拦截方向键避免破坏文本输入视觉上要明显区别于页面本身如高对比度药丸形、淡淡的阴影让人一眼看出它“不是被评价设计的一部分”生产构建中隐藏— 用process.env.NODE_ENV ! production或等价判断做门控防止一个误合入的原型把切换条直接发布给用户。切换条要放在项目共享 UI 目录下的单一共享组件里让两种子形态都能复用。4.5 第 5 步交付把 URL和各个?variant键值摆到用户面前让他想比对的时候随时翻。文档特别指出真正有价值的反馈通常不是“A 最好”而是“我要 B 的 header 配 C 的侧边栏”——那才是用户实际想要的设计。4.6 第 6 步记录裁决并清理某个变体胜出后写下是哪个、以及为什么——可以落在 commit message、ADR、issue或者用户不在场时原型旁边的一个NOTES.md。然后子形态 A— 删除落选变体和切换条把胜者并入既有页面子形态 B— 把胜出变体提升为正式路由删除 throwaway 路由和切换条。文档最后一句是硬性要求“不要把变体组件或切换条留在那儿。它们腐烂得很快会困惑下一个读者。”5. 反模式清单UI.md 用四个反模式为整套流程收尾每一条都对应工作流中的某个关键决策只在配色或文案上有差异的“变体”— 那是微调不是原型。真正的变体在结构上互相不同意。变体之间共享太多代码— 共享一个Header没问题共享一个Layout就违背初衷。每个变体必须有权扔掉布局。把变体接到真实的 mutation 上— 只读原型是安全的。如果某个变体需要写操作就指向 stub你要回答的问题是“它应该长什么样”而不是“后端是否好用”。把原型直接提升进生产— 变体代码是在原型约束下写的没有测试、错误处理最小化。并回正式代码时要重写。6. 与 SKILL.md 共同遵守的通用原型规则UI.md 是 UI 分支的细则SKILL.md 则给出两条分支都必须遵守的六条规则理解它们有助于把握 UI 原型的边界从第一天起就是一次性的并且要明码标注— 原型代码放在它将要被使用的位置旁边对应的模块或页面旁但命名要让人一眼看出是原型而非生产代码throwaway UI 路由必须遵循项目既有路由约定一条命令即可运行— 依托项目现有的 task runnerpnpm name、python path、bun path等用户不需要思考就能启动默认不做持久化— 状态放在内存里持久化正是原型要“检验”的对象而不是它该依赖的东西。若问题本身涉及数据库就指向一个 scratch DB 或带“PROTOTYPE — wipe me”清晰命名的本地文件跳过打磨— 不写测试、不加错误处理除了让原型能跑起来的程度、不做抽象。目的是快速学到东西然后删掉把状态摆出来— 逻辑原型每次动作后、UI 原型每次切换变体时都完整打印/渲染相关状态让用户看到变化完成后删除或吸收— 原型回答了问题之后要么删掉要么把验证过的决策折进正式代码不要留它在仓库里腐烂。“完成”的判定标准也被明确写出原型中唯一值得保留的是答案。把答案连同它所回答的问题一起记录到持久位置commit message、ADR、issue 或NOTES.md用户在场就快速对话确认不在场就留下占位待下一轮补上裁决再删除原型。7. 如何在本仓库中查看与复现这套技能结合仓库源码读者可以沿以下路径验证本文内容技能定义本体.agents/skills/prototype/SKILL.md、.agents/skills/prototype/UI.md、.agents/skills/prototype/LOGIC.md技能清单与来源指纹skills-lock.jsonprototype条目含source、sourceType、skillPath、computedHash加载/校验/安装实现unified_agent/skills.py 中的load_skillfrontmatter 解析与规范校验、discover_skills扫描含SKILL.md的子目录、install_skills向.claude/skills/与.agents/skills/双宿主分发支持 symlink/copy 两种模式与force语义行为测试tests/test_skills.py覆盖非法技能名拒绝、description 必填与 1024 上限、缺失 frontmatter 报错、Claude 专有语法 lint 告警、双目录符号链接安装与幂等重装等场景。需要说明适用前提.agents/skills/下这套技能是编码 Agent 面向本仓库开发过程的工作流指引例如为仓库自身的前端页面做 UI 方案对比与pentestgpt_agent/框架的 Supervisor/Executor 运行时无关复现?variant变体流程时按项目实际使用的框架Next.js / React Router 等适配 switcher 的路由 API 即可核心不变量只有三条——同一数据源、URL 参数门控、生产环境隐藏切换条。【免费下载链接】PentestGPTAutomated Penetration Testing Agentic Framework Powered by Large Language Models项目地址: https://gitcode.com/GitHub_Trending/pe/PentestGPT创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
