ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

用 Streamlit 构建 PM Skills Playground:技能检索、学习模拟与多 Provider 试驾实战指南

用 Streamlit 构建 PM Skills Playground:技能检索、学习模拟与多 Provider 试驾实战指南 AI 技能AI 插件【免费下载链接】Product-Manager-SkillsProduct Management skills framework built on battle-tested methods for Claude Code, Cowork, Codex, and AI agents.项目地址https://gitcode.com/gh_mirrors/pr/Product-Manager-Skills点击查看免费下载PM Skills Playground 是 Product-Manager-Skills 仓库内置的本地 Web 应用Streamlit beta 版它的目标是把「听说过某个 PM 技能」到「在自己的场景里看到它真实工作」之间的门槛降下来。本文以 app/STREAMLIT_INTERFACE.md 为主线结合 app/main.py 的单文件实现源码完整讲解它的本地安装、三模式导航Learn / Find My Skill / Run Skills、技能加载与缓存机制、触发式检索排序算法、三种会话类型的内部原理、主题元数据标准以及 Streamlit Community Cloud 部署方案。读完你可以直接在本仓库上跑起这个 Playground也能复刻它的「以文档为真源、以元数据驱动检索、以模拟器驱动学习」的设计思路。一、应用定位与三条学习路径Playground 是一个本地运行的 Web 应用用于三件事Learn——查看各平台Claude Code、Codex、ChatGPT、n8n、LangFlow、Cursor 等的接入与集成指南Find My Skill——用一句大白话描述处境得到排序后的技能推荐及匹配理由Run Skills——用预设或自定义上下文把技能作为「学习模拟器」跑一遍输出完整的 worked example。对应代码里的模式选择页app/main.py 的render_home()用三个带边框的容器分别呈现「 Learn Setup」「 Find My Skill」「 Run Skills」并强调「docs stay the source of truth; the app helps you navigate and practice」文档是事实源应用负责导航与练习。状态说明文档写作时该功能仍标记为 betanew feature in flight当前仓库中的技能数量与主题标记情况已比文档快照进一步演化见下文「主题元数据」一节但整体架构与用法不变。二、本地运行与多 Provider API 配置2.1 安装与启动在仓库根目录执行pip install -r app/requirements.txt streamlit run app/main.py依赖清单app/requirements.txt为streamlit1.32.0 anthropic0.40.0 openai1.40.0 pyyaml6.0 python-dotenv1.0.0其中openai在源码中是可选依赖app/main.py 用try/except ImportError包裹导入未安装时 OpenAI 与 Ollama 两个 provider 会从PROVIDERS注册表中移除仅保留 Anthropic。因此若只用 Claude装基础依赖即可要用 OpenAI/Ollama必须显式安装openai。2.2 API Key只走环境变量应用不接受在界面里输入 API Key只读取环境变量。启动前复制模板并编辑cp app/.env.example app/.envapp/.env.example 的完整模板如下# Anthropic ANTHROPIC_API_KEYsk-ant-... ANTHROPIC_MODELclaude-sonnet-4-6 ANTHROPIC_MODELSclaude-haiku-4-5-20251001,claude-sonnet-4-6 # OpenAI OPENAI_API_KEYsk-... OPENAI_MODELgpt-4o-mini OPENAI_MODELSgpt-4o-mini,gpt-4o # Ollama (local) OLLAMA_ENABLED1 OLLAMA_BASE_URLhttp://localhost:11434 OLLAMA_API_KEYollama OLLAMA_MODELqwen2.5:latest OLLAMA_MODELSqwen2.5:latest,llama3.2:latest各变量的语义如下变量作用取值示例ANTHROPIC_API_KEY/OPENAI_API_KEY云服务商密钥sk-ant-.../sk-...ANTHROPIC_MODEL/OPENAI_MODEL/OLLAMA_MODEL本次会话默认模型claude-sonnet-4-6等ANTHROPIC_MODELS/OPENAI_MODELS/OLLAMA_MODELS逗号分隔的可用模型列表会合并进下拉框gpt-4o-mini,gpt-4oOLLAMA_ENABLED本地 Ollama 开关取值1/true/yes/on任一即启用1OLLAMA_BASE_URLOllama 服务地址缺省http://localhost:11434同上OLLAMA_API_KEYOllama 无需鉴权占位符即可ollamaload_dotenv(Path(__file__).parent / .env)app/main.py在应用启动时自动加载.env也可以在 shell 中直接 export 后再启动。2.3 Provider 自动探测与内置默认模型侧边栏会依据环境变量自动探测可用 Provideravailable_providers()app/main.pyOllama 只要OLLAMA_ENABLED开启或设置了OLLAMA_BASE_URL即视为可用provider_enabledAnthropic/OpenAI 则要求密钥非空。若没有任何 Provider会显示醒目报错并展开 API 设置指引。每个 Provider 内置「快/强」两档默认模型app/main.py 的PROVIDERS常量Provider快速模型高能力模型anthropicclaude-haiku-4-5-20251001claude-sonnet-4-6openaigpt-4o-minigpt-4oollama本地qwen2.5:latestllama3.2:latest界面中每个模型都带帮助文案「Fast (cheaper; may miss depth in long workflows)」/「Capable (best for full workflow quality)」。在 workflow 会话里若选中快速模型且阶段数 ≥ 4界面会额外弹出警告提醒长工作流用高能力档app/main.py。Ollama 的调用走 OpenAI 兼容协议ollama_base_url()app/main.py会把裸地址自动补成http://localhost:11434/v1再以 OpenAI 客户端base_url方式连接。三、架构与技能加载机制3.1 文件结构app/ main.py # 单文件 Streamlit 应用1845 行 requirements.txt # streamlit, anthropic, openai, pyyaml, python-dotenv .env.example # 多 Provider API Key 模型模板 .env # 本地环境变量gitignored STREAMLIT_INTERFACE.md # 本文档3.2load_skills()从 SKILL.md 解析技能核心加载函数load_skills()app/main.py遍历skills/*/SKILL.md要求文件以---\n开头存在 YAML frontmatter否则跳过用text.split(---, 2)切出 frontmatter 与正文yaml.safe_load解析元数据解析失败则跳过将正文按##二级标题切分成sections字典从## Purpose段提取第一个非空段落作为purpose_short检测examples/子目录是否存在得到has_examples。每个技能最终生成如下结构字段来源是否必需namefrontmatter是descriptionfrontmatter是intentfrontmatter是typefrontmatter是themefrontmatter可选best_forfrontmatter可选scenariosfrontmatter可选estimated_timefrontmatter可选sections从##标题解析派生purpose_shortPurpose 段首段派生has_examplesexamples/子目录是否存在派生注意type的默认值frontmatter 缺失时回退为component。load_skills和load_guide_markdown都带有st.cache_data装饰器技能文件改动后必须重启应用或执行st.cache_data.clear()才能生效——开发技能期间建议用--server.fileWatcherType poll启动以支持自动重载。3.3 导航模型状态机驱动的视图树导航采用st.session_state.view驱动的状态机视图树如下Home (mode chooser) ├─ Learn Hubdocs 驱动的 onboarding 与平台指南 │ └─ Guide Detail渲染 docs/ 下的 markdown 指南文件 ├─ Find My Skill │ └─ Ranked skill suggestions处境 → 元数据匹配 └─ Run Skills (learning simulator) ├─ Skill Context Input │ └─ Worked Example Output │ ├─ Filled Template / Form │ └─ Steps and Transformations └─ Advanced Browser可选 └─ Theme (skill cards) └─ Skill Detail预览 场景输入 └─ Session运行技能nav()助手app/main.py负责视图切换与状态清理切换到非session视图时会清空messages、重置phase与workflow_outputs进入新会话时会丢弃旧的聊天/工作流产物保证每次会话从干净状态开始。render_sidebar()在所有 Run 相关视图下显示 Provider 状态徽章与 API 设置指引并支持按 Provider/模型切换selected_provider、selected_model均存入 session state。四、Find My Skill触发式元数据检索4.1 使用流程用户输入一段自然语言处境描述如 Help me create a PRD from discovery notes for a new onboarding improvement点击Find Skills后应用纯本地、即时地对全部技能排序不调用任何 API只有点击「Run This Skill」后才产生模型调用界面有专门提示展示「Recommended First」的最佳匹配卡片技能名、类型徽章、description、best_for前三条、以及匹配理由matched on ...下方列出其余最多 9 个候选项每个都可一键Preview或Run。finder 页还内置了 4 条示例 prompt 作为起步 chipsFIND_MY_SKILL_PROMPTS覆盖「激活率下降归因」「功能是否值得做」「把发现笔记转成 PRD」「优先级框架」四类典型处境支持按技能typecomponent/interactive/workflow和theme两个维度过滤。4.2 排序信号与评分权重检索使用触发导向trigger-oriented元数据信号包括name、description、best_for、scenarios、intent、purpose_short。rank_skills_for_query()app/main.py的具体评分逻辑空查询所有技能得 50 分标记为browse技能名与查询完全一致400 分标记exact name否则按字段加权累加name短语 320 / 每个命中 token 120、description240/45、best_for220/55、scenarios220/55、intent180/30、purpose140/24、skill body80/8token 覆盖率加成命中 token 占查询 token 的比例折算加分查询 ≥3 个 token 但只命中 2 个时直接过滤匹配理由通过summarize_match_reasons()汇总最多输出 3 条字段级理由description / best for / scenarios / intent / purpose。文本归一化层normalize_text/tokenize_textapp/main.py做了小写折叠、空白压缩、单字母与停用词过滤内置FINDER_STOP_WORDS集合tokens_match支持前缀与子串匹配保证「activation」能命中「activation drop」这类措辞差异。4.3 与 CLI 检索的一致性这种触发式设计刻意对齐了仓库 CLI 工具find-a-skill.sh的--mode trigger行为scripts/find-a-skill.sh该模式下关键词命中description/best_for/scenarios会获得 220 分加分并标记trigger-frontmatter输出时额外打印best_for与scenarios字段。也就是说同一套「以触发元数据为中心」的检索标准在 Streamlit 界面与命令行里是一致的./scripts/find-a-skill.sh --mode trigger onboarding五、Run Skills三种会话类型与系统提示词5.1 学习模拟器默认流程Run Skills 主页把「从选技能到看输出」压缩到最短路径选择技能下拉框列出全部技能按名排序带类型徽章与描述选择上下文可以选「quick context」技能自带scenarios 4 条全局预设GLOBAL_CONTEXT_PRESETS见 app/main.py或「Write my own context」自由填写点击Run the Skill Steps一次 API 调用把整个技能端到端内部跑完不追问输出固定为三个 H2 小节Filled Template / Form完成的工件/产物Steps and Transformations每步的输入、处理逻辑、产出与传递Assumptions Made模型为补全缺失细节引入的显式假设输出解析由parse_h2_sections()app/main.py按##标题切分三个小节分别渲染到带边框的容器中缺哪个就降级显示整段响应或提示。两条关键提示词构造如下app/main.pydef build_learning_simulator_system_prompt(skill: dict) - str: # You are a PM Skills learning simulator. # Run the skill end-to-end internally using the provided context. # Do not ask follow-up questions. # Make explicit assumptions when needed. # 后接完整 skill[body] def build_learning_simulator_user_prompt(skill: dict, context: str) - str: # 要求模型按固定顺序返回三个 H2 小节 # ## Filled Template / Form # ## Steps and Transformations # ## Assumptions Made5.2 高级模式交互式技能多轮对话在 Run Skills 底部 Need the older advanced browser? expander 中可以进入主题浏览器与手动会话模式保留交互式与工作流技能的原有行为。交互式会话render_interactive_sessionapp/main.py的关键机制会话前说明Skill Detail 页在启动前显示预检信息框说明这是逐题问答的引导式对话并明示可随时退出侧边栏的 Start over / Different skillWhat to bring技能详情页渲染技能自身的## Input段v0.81 标准说明哪些上下文能让会话更精准同时明确「空手而来也没关系引导流程会覆盖缺口」自动开场会话开始时首条用户消息自动发送My situation: ... 或 Lets start.Claude 以技能的 Step 0 开场进度解析detect_progress()app/main.py用正则从最新助手消息解析Q1/3、Context Q2/3、Step N of M模式渲染st.progress进度条——进度直接取自技能自身的输出而不是应用维护独立计数器所以技能更新后进度自动正确自由输入与退出st.chat_input自由应答输入done、bail、exit、quit会优雅结束会话侧边栏常驻↩ Start over · ← Different skill · Home 三个导航按钮。5.3 高级模式工作流技能分阶段执行工作流会话render_workflow_sessionapp/main.py阶段检测优先从已解析的 section 键中匹配Phase \d开头的小节否则回退到extract_workflow_phases()app/main.py从 Application 段按### Phase N标题切分阶段选择器单阶段 radio 可跳转到任意阶段「▶ Run this phase」单独执行当前阶段「⚡ Run all phases」顺序执行全部阶段产物存入workflow_outputs字典跨阶段保留每阶段提示词build_phase_prompt()明确要求只完成本阶段、产出具体草稿、以 Decisions made / Open questions / Next phase needs 三栏收尾顶部有completed_count / total的工作流进度条阶段间用 Previous phase / Continue to next phase / Start from phase 1 导航全部完成时显示成功提示。5.4 系统提示词学习模拟器 vs 高级会话两种会话使用不同的系统提示词def build_learning_simulator_system_prompt(skill): # 完整技能正文 模拟指令 # - 内部端到端执行 # - 不追问 # - 显式列出假设 def build_system_prompt(skill): # 完整技能正文 交互式技能附加便利化规则 # - 一次只问一个问题 # - 显示 Q1/3 式进度标签 # - 严格遵循技能结构不越权发挥build_system_prompt()app/main.py对type: interactive的技能追加Facilitation rules:四行约束——一次一问、带编号选项、显示进度标签、保持对话化但严格忠于技能结构。这与仓库 2026-02-10 v0.4 发布的便利化修复见 docs/announcements/2026-02-10-v0-4-facilitation-fix.md一脉相承。多轮交互的典型特征一次只问一个问题或小批量、用上一轮答案影响后续提问、给出带编号的上下文感知推荐用户可输入 1 或 2 4 选择、也可自由输入、根据选择自适应调整。仓库中的prioritization-advisorskills/prioritization-advisor/SKILL.md就是典型交互式技能先问产品阶段、团队上下文再推荐 RICE/ICE/价值-努力等框架。5.5 底层模型调用所有 Provider 最终汇入call_model()app/main.pyAnthropic 走client.messages.createmax_tokens2048OpenAI 与 Ollama 走client.chat.completions.createOllama 复用 OpenAI 客户端 /v1端点。认证错误anthropic.AuthenticationError/ OpenAIAuthenticationError会被捕获并提示「Invalid ... API key. Check your environment configuration.」其他异常原样展示。六、为技能添加主题元数据Theme 标准6.1 frontmatter 模式技能要出现在主题浏览器Advanced Browser中SKILL.md的 frontmatter 必须包含theme字段否则会出现在 Home 页的 All other skills expander 中。新增这些可选字段--- name: your-skill-name description: ... type: component|interactive|workflow theme: career-leadership # 下面的 7 个 theme slug 之一 best_for: - Plain-language use case (shown as bullet in skill card) - Another use case - Third use case scenarios: - Pre-built scenario the user can one-click load - Another scenario estimated_time: 10-15 min ---6.2 7 个主题 slug界面主题表app/main.py 的THEMES常量定义了 7 个主题含图标与一句话描述Slug显示名career-leadershipCareer Leadershipdiscovery-researchDiscovery Researchstrategy-positioningStrategy Positioningpm-artifactsWriting PM Artifactsfinance-metricsFinance Metricsai-agentsAI Agentsworkshops-facilitationWorkshops Facilitation主题浏览器按这 7 个主题分卡片展示卡片上会统计该主题下各类型component/interactive/workflow的技能数量。6.3 校验兼容性添加这些字段不会破坏元数据校验。check-skill-metadata.pyscripts/check-skill-metadata.py只要求四个必需字段——name小写 kebab-case、≤64 字符、description≤200 字符、intent非空、type必须为component/interactive/workflow之一——并忽略其他未知键同时校验 7 个必需章节Purpose、Input、Key Concepts、Application、Examples、Common Pitfalls、References的存在与顺序以及禁止在正文中使用$ARGUMENTS模板语法。技能目录名必须与name一致。运行校验python3 scripts/check-skill-metadata.py6.4 标记现状文档快照 vs 当前仓库文档写作时beta 阶段记录了「16 个技能覆盖全部 7 个主题其余 30 个技能待标记」的快照。从当前仓库结构看这一标记工作已大规模推进skills/*/SKILL.md现有77 个技能全部带theme字段且主题值已扩展至 13 种包括文档 7 主题之外的market-intelligence18 个、eol-transition6 个、validation-experiments5 个、stakeholder-comms4 个、product-lifecycle2 个、meta-authoring2 个等——这与仓库 v0.83 市场情报套件、v0.84 生命周期与 EOL 套件的发布节奏吻合见 docs/announcements/2026-07-17-v0-83-market-intelligence-suite.md 与 docs/announcements/2026-08-10-v0-84-lifecycle-and-eol-suite.md。注意main.py的THEMES目前仍定义 7 个主题新增主题值若要在主题浏览器中获得独立卡片需要同步扩展该常量。以 skills/user-story/SKILL.md 为例它的 frontmatter 是完整标注的范本type: component、theme: pm-artifacts、3 条best_for、2 条scenarios对应界面里的一键加载场景 chips、estimated_time: 5-10 min。场景 chips 存在 frontmatter 而非硬编码在应用里意味着给技能加一个scenarios条目Playground 里就自动多一个可一键加载的预设场景。七、UX 设计决策文档明确了七条设计决策也是复刻这类「文档 练习」应用时值得照抄的原则Mode-first for clarity——把 Learn / Find My Skill / Run Skills 三模式分离减少新手困惑docs 保持事实源地位Context-first inside Run Skills——选技能 → 加上下文 → 跑一次 → 同时看工件与变换路径是最短学习路径Advanced mode stays available——旧主题浏览器与手动会话流程保留供需要多轮交互或分阶段控制的高级用户使用Learning output structure is fixed——模拟器输出固定为 Filled Template/Form、Steps and Transformations、Assumptions Made 三节用户始终看到一致结构Learn Practice in one flow——Learn Hub 内置「Run this skill」starterLEARN_TO_RUN_SKILLSprioritization-advisor/Interactive、user-story/Component、prd-development/Workflow 三种类型各一个入门与执行打通而非割裂Situation-first discovery——用户很少按技能名思考finder 用触发式元数据让「用正常语言描述问题」也能命中正确技能Progress from the skill itself——交互式技能的Q1/3进度标签由技能输出自带应用只解析不维护独立计数器技能更新后进度天然正确Scenario chips as scaffolding——预设场景降低空白画布焦虑存放在技能 frontmatter 而非硬编码。八、部署Streamlit Community Cloud应用可以部署但只支持环境变量加载密钥、支持多 Provider。部署步骤将该仓库 fork 或 push 到 GitHub连接 streamlit.io/cloudMain file 设为app/main.pyPython 版本设为 3.11。两种部署形态Option A共享密钥 用量限制设置一个或多个 Provider 密钥ANTHROPIC_API_KEY、OPENAI_API_KEY或启用本地 OllamaOLLAMA_ENABLED1OLLAMA_BASE_URL可选设置默认/可用模型*_MODEL与*_MODELS列表建议加会话级 token 上限等限流避免失控成本——文档注明该限流能力尚未实现。Option B私有部署应用保持内部可用控制对托管环境的访问若不想公开暴露共享密钥后端端点推荐此方案。九、已知限制与未来增强已知限制缓存刷新技能改动需重启应用或st.cache_data.clear()活跃开发技能时建议streamlit run app/main.py --server.fileWatcherType poll启用自动重载未标记主题的技能文档快照显示约 30 个未打theme的技能会落在 Home 的 expander 中——当前仓库已全部标记此限制基本解除无流式输出API 响应一次性渲染完毕流式能改善长输出感知延迟属未来增强项工作流阶段检测阶段依赖### Phase N命名约定不符合该命名的工作流技能会整体显示为单个 Full workflow 阶段。未来增强清单流式响应Streaming responses共享托管密钥 会话级限流用于公开演示Related skills panel——从技能 References 段提取交叉引用Export worked example——把模拟器输出下载为 markdown剩余技能的主题标记收尾仓库已基本完成Finder 打磨——更丰富的匹配理由说明、最近搜索、保存推荐路径。十、小结PM Skills Playground 的价值不在于替代文档而在于把仓库 77 个SKILL.md变成可检索、可试驾、可学习的交互式资产load_skills()让每个技能的 frontmatter 与章节结构变成结构化数据触发式检索让用户能用自然语言找到对的技能学习模拟器用「一次调用 三段固定输出」把技能执行过程透明化主题元数据则让技能库按主题可浏览、可扩展。对想自建「技能市场/练习场」的团队而言这个 beta 应用本身就是一个完整可运行、可裁剪的参考实现。进一步阅读app/main.py完整实现、app/.env.example配置模板、scripts/check-skill-metadata.py元数据标准、scripts/find-a-skill.shCLI 检索对应物、skills/user-story/SKILL.md主题元数据范本、docs/announcements/2026-03-06-v0-6-navigation-commands.md导航演进背景。赞分享AI 技能AI 插件【免费下载链接】Product-Manager-SkillsProduct Management skills framework built on battle-tested methods for Claude Code, Cowork, Codex, and AI agents.项目地址https://gitcode.com/gh_mirrors/pr/Product-Manager-Skills点击查看免费下载相关推荐pm-skills 实战指南使用 /business-model 命令构建与分析四种业务模型画布pm skills 实战指南使用 /business model 命令构建与分析四种业务模型画布 导读 /business model 是 pm skillsAI 技能AI 插件pm-skills 用户画像实战指南用 user-personas 技能从调研数据构建可落地的 Personapm skills 用户画像实战指南用 user personas 技能从调研数据构建可落地的 Persona 本指南深入讲解 PM Skills MarkeAI 技能AI 插件pm-skills 项目 A/B 测试分析技能实战指南从显著性检验到 Ship/Extend/Stop 决策pm skills 项目 A/B 测试分析技能实战指南从显著性检验到 Ship/Extend/Stop 决策 本篇技术指南聚焦 pm skills 仓库中 pAI 技能AI 插件上一篇Argo Workflows 事件触发参数 TriggerParameter 完全指南从字段语义到参数化实战下一篇零基础快速上手Lorca用Go语言构建HTML5桌面应用的终极指南创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表