{"id":"f7418c9b-4c97-49ea-93e3-efd82a659af4","entityType":"agent","slug":"clawhub-jhc888007-demo-website-pm","name":"Demo Website Product Manager 小白建站","canonicalUrl":"https://www.xpersona.co/agent/clawhub-jhc888007-demo-website-pm","canonicalPath":"/agent/clawhub-jhc888007-demo-website-pm","generatedAt":"2026-10-12T14:30:48.766Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-12T01:19:07.950Z","emptyReason":null},"description":"面向零技术用户，把网站 / 小程序 demo 需求拆成产品需求、设计需求、技术需求三份文档，并配合 GitHub 与 Vercel / 微信小程序开发工具 直接上线部署 Skill: Demo Website Product Manager 小白建站 Owner: jhc888007 Summary: 面向零技术用户，把网站 / 小程序 demo 需求拆成产品需求、设计需求、技术需求三份文档，并配合 GitHub 与 Vercel / 微信小程序开发工具 直接上线部署 Tags: latest:1.0.15 Version history: v1.0.15 | 2026-04-18T12:00:04.945Z | user No file changes detected in this version. No updates to features or documentation. v1.0.14 | 2026-04-18T11:56:33.575Z | user No file changes detected for version 1.0.14. - No code or docume","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 962 downloads reported by the source. Last updated 10/12/2026.","installCommand":"clawhub skill install s171mn1f24f8j41a2eca7v12sh83pp4k:demo-website-pm","sourceUrl":"https://clawhub.ai/jhc888007/demo-website-pm","homepage":"https://clawhub.ai/jhc888007/skills/demo-website-pm","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/jhc888007/demo-website-pm","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/jhc888007/skills/demo-website-pm","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":60,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"面向零技术用户，把网站 / 小程序 demo 需求拆成产品需求、设计需求、技术需求三份文档，并配合 GitHub 与 Vercel / 微信小程序开发工具 直接上线部署 Skill: Demo Website Product Manager 小白建站 Owner: jhc888007 Summary: 面向零技术用户，"},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-12T01:19:07.950Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-12T01:19:07.950Z","emptyReason":null},"stars":null,"forks":null,"downloads":962,"likes":null,"task":null,"library":null,"packageName":null,"latestVersion":"1.0.15","tractionLabel":"962 downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-12T01:19:07.877Z","emptyReason":null},"lastUpdatedAt":"2026-10-12T01:19:07.950Z","lastCrawledAt":"2026-10-12T01:19:07.877Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-13T01:19:07.877Z","lastVerifiedAt":null,"highlights":[{"version":"1.0.15","createdAt":"2026-04-18T12:00:04.945Z","changelog":"No file changes detected in this version. No updates to features or documentation.","fileCount":11,"zipByteSize":26157},{"version":"1.0.14","createdAt":"2026-04-18T11:56:33.575Z","changelog":"No file changes detected for version 1.0.14. - No code or documentation updates in this release. - All functionalities and guidance remain unchanged.","fileCount":10,"zipByteSize":24477},{"version":"1.0.13","createdAt":"2026-04-18T11:52:32.452Z","changelog":"- 支持微信小程序 Demo 时，增加了“转发分享逻辑”相关问法及技术文档指引，覆盖 onShareAppMessage / onShareTimeline 配置。 - 技术文档中小程序部分新增了转发分享实现细节的指示，确保 Demo 可被用户分享到微信。 - SKILL 描述文本微调：强调为网站 / 小程序二者都适用、明确微信小程序开发工具为唯一推荐流程。 - 其它内容未改动，核心交互分步提问及三文档输出流程保持不变。","fileCount":10,"zipByteSize":24485},{"version":"1.0.12","createdAt":"2026-04-18T09:47:32.813Z","changelog":"demo-website-pm v1.0.12 - 更新 reference/frontend-design.md 参考内容。 - 强调在生成设计需求文档时必须完整阅读并结合 reference/frontend-design.md。 - 无核心流程变动，仅设计参考说明的同步与完善。","fileCount":10,"zipByteSize":24335},{"version":"1.0.11","createdAt":"2026-04-18T09:44:05.325Z","changelog":"Version 1.0.11 - No file changes detected in this version. - Documentation, logic, and features remain unchanged from the previous release.","fileCount":10,"zipByteSize":24332},{"version":"1.0.10","createdAt":"2026-04-18T09:42:04.539Z","changelog":"No functional or content changes detected in this version. - SKILL.md remains unchanged compared to the previous version. - No file changes were detected for version 1.0.10. - No new features, fixes, or updates included in this release.","fileCount":10,"zipByteSize":24328},{"version":"1.0.9","createdAt":"2026-04-18T09:37:44.364Z","changelog":"- No file changes detected in this version. - Documentation, structure, and user guidance remain unchanged from the previous release. - No impact on features, interface, or workflow for users.","fileCount":10,"zipByteSize":24217},{"version":"1.0.8","createdAt":"2026-04-18T09:35:28.379Z","changelog":"No changes detected in this version. - No file modifications were made; behavior and documentation remain unchanged.","fileCount":10,"zipByteSize":24199}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s171mn1f24f8j41a2eca7v12sh83pp4k:demo-website-pm","setupComplexity":"low","setupSteps":["Setup complexity is classified as HIGH. You must provision dedicated cloud infrastructure or an isolated VM. Do not run this directly on your local workstation.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-jhc888007-demo-website-pm/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-jhc888007-demo-website-pm/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-jhc888007-demo-website-pm/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-jhc888007-demo-website-pm/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-jhc888007-demo-website-pm/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-jhc888007-demo-website-pm/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-12T14:30:48.763Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-jhc888007-demo-website-pm/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-jhc888007-demo-website-pm/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-jhc888007-demo-website-pm/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-jhc888007-demo-website-pm/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-12T01:19:07.950Z","emptyReason":null},"readme":"Skill: Demo Website Product Manager 小白建站\n\nOwner: jhc888007\n\nSummary: 面向零技术用户，把网站 / 小程序 demo 需求拆成产品需求、设计需求、技术需求三份文档，并配合 GitHub 与 Vercel / 微信小程序开发工具 直接上线部署\n\nTags: latest:1.0.15\n\nVersion history:\n\nv1.0.15 | 2026-04-18T12:00:04.945Z | user\n\nNo file changes detected in this version. No updates to features or documentation.\n\nv1.0.14 | 2026-04-18T11:56:33.575Z | user\n\nNo file changes detected for version 1.0.14.\n\n- No code or documentation updates in this release.\n- All functionalities and guidance remain unchanged.\n\nv1.0.13 | 2026-04-18T11:52:32.452Z | user\n\n- 支持微信小程序 Demo 时，增加了“转发分享逻辑”相关问法及技术文档指引，覆盖 onShareAppMessage / onShareTimeline 配置。\n- 技术文档中小程序部分新增了转发分享实现细节的指示，确保 Demo 可被用户分享到微信。\n- SKILL 描述文本微调：强调为网站 / 小程序二者都适用、明确微信小程序开发工具为唯一推荐流程。\n- 其它内容未改动，核心交互分步提问及三文档输出流程保持不变。\n\nv1.0.12 | 2026-04-18T09:47:32.813Z | auto\n\ndemo-website-pm v1.0.12\n\n- 更新 reference/frontend-design.md 参考内容。\n- 强调在生成设计需求文档时必须完整阅读并结合 reference/frontend-design.md。\n- 无核心流程变动，仅设计参考说明的同步与完善。\n\nv1.0.11 | 2026-04-18T09:44:05.325Z | user\n\nVersion 1.0.11\n\n- No file changes detected in this version.\n- Documentation, logic, and features remain unchanged from the previous release.\n\nv1.0.10 | 2026-04-18T09:42:04.539Z | user\n\nNo functional or content changes detected in this version.\n\n- SKILL.md remains unchanged compared to the previous version.\n- No file changes were detected for version 1.0.10.\n- No new features, fixes, or updates included in this release.\n\nv1.0.9 | 2026-04-18T09:37:44.364Z | user\n\n- No file changes detected in this version.\n- Documentation, structure, and user guidance remain unchanged from the previous release.\n- No impact on features, interface, or workflow for users.\n\nv1.0.8 | 2026-04-18T09:35:28.379Z | user\n\nNo changes detected in this version.\n- No file modifications were made; behavior and documentation remain unchanged.\n\nv1.0.7 | 2026-04-18T09:33:26.780Z | user\n\nNo file changes detected.  \nNo user-facing changes in this version.\n\nv1.0.6 | 2026-04-18T07:54:15.754Z | user\n\nVersion 1.0.6\n\n- 新增了前端设计参考文件 `reference/frontend-design.md`，为产品设计和视觉规范提供详细指引。\n- 产出文档从“双文档”（产品+技术）升级为“三文档”（产品需求、设计需求、技术需求），澄清与对话流程全面适配。\n- 增强模块2，强制生成单独的设计需求文档，确保视觉与交互细则清楚落地，面向零基础用户与编程AI。\n- 对需求澄清提问轮次提出更高要求，除非用户中止须持续引导至少10轮，帮助用户挖掘完善功能。\n- 进一步细化分步指导与沟通颗粒度，确保每条指令清晰可执行，坚决避免多步复合指令。\n\nv1.0.5 | 2026-04-17T09:43:43.388Z | user\n\n- 优化整体结构，增加交互对话例子，强调自然问答与用户友好表述。\n- 对各模块编号、阶段状态进行精简，统一用 S1-S3 状态，去除原有 S0，引导逻辑更顺畅。\n- 明确每轮互动“只提一个问题”，并反复强化“选项引导、禁止多问/清单”原则。\n- 增补“沟通范例”，鼓励灵活生活化提问、避免死板模板口吻。\n- 产品与技术文档产出要求未变，但对阶段切换条件、文档内容一致性作了微调。\n- 保持“绝不产代码、只引导和文档”总原则，细化参考资料调用规则。\n\nv1.0.4 | 2026-04-17T09:11:17.037Z | user\n\nNo functional changes detected in this version.\n\n- Documentation and prompts remain unchanged from the previous release.\n- No file or content modifications were made for version 1.0.4.\n\nv1.0.3 | 2026-04-17T09:03:09.379Z | auto\n\nVersion 1.0.3\n\n- 加强对非技术用户友好的流程指引，新增“选择题”问答和一步一问题机制\n- 明确禁止大厂 PM 风格、泛泛而谈、问卷式调查，问题更具体聚焦到 Demo 所需核心内容\n- 优化模块 2 需求澄清环节，只允许单个问题、推荐带选项，提升用户体验\n- 增加关键执行约束，防止产出冗杂内容，确保交付物标准化\n- 精简和修正部分执行原则、去除长篇填空和无关问题\n\nv1.0.2 | 2026-04-17T08:38:30.844Z | user\n\n- 新增对微信小程序（包括原生语法、微信云开发、免密登录）的支持，覆盖从环境准备到上线部署全流程\n- 新增 reference/wechat-miniprogram-setup.md 和 reference/wechat-miniprogram-onboarding.md 两个文档，详细指导小程序相关环境与账号配置\n- 调整模块结构和文档产出要求，区分网页与小程序两种不同流程和技术选型\n- 扩展工具与账号准备、部署模块，明确涉及微信开发者工具的使用方法\n- 强化对技术细节和平台限制的指引，确保零基础用户易于上手\n\nv1.0.1 | 2026-04-17T08:20:34.310Z | user\n\n- 增加了“前置准备”模块，详列相关工具、依赖和密钥管理方法，提升环境准备指导清晰度。\n- 新增了各工具官网和查错文档的快速索引，方便用户查找外部资源。\n- 明确补充了密钥命名建议（如 SECRET_KEY, DATABASE_URL）及如何安全放置密钥的具体说明。\n- 其它核心流程、用户指引及模块结构保持不变。\n\nv1.0.0 | 2026-04-17T08:10:29.902Z | user\n\n- Initial release of demo-website-pm skill.\n- Guides zero-tech users through planning and launching website demos, producing both detailed product and technical documentation.\n- Uses clear, step-by-step modules for environment setup, requirement clarification, dual-document generation, and local/deployment walkthroughs.\n- Includes explicit rules: strictly documentation-only guidance (no code), non-technical, user-friendly language, and platform-step references.\n- Supports GitHub and Vercel for direct deployment; adapts process if user chooses other platforms.\n\nArchive index:\n\nArchive v1.0.15: 11 files, 26157 bytes\n\nFiles: reference/cursor-and-editor-setup.md (2690b), reference/frontend-design.md (3353b), reference/github-onboarding.md (5492b), reference/local-env-troubleshooting.md (6165b), reference/non-tech-communication-style.md (3160b), reference/vercel-onboarding.md (4677b), reference/wechat-miniprogram-onboarding.md (2715b), reference/wechat-miniprogram-setup.md (4118b), skill-card.md (3254b), SKILL.md (15910b), _meta.json (135b)\n\nFile v1.0.15:SKILL.md\n\n---\nname: demo-website-pm\ndescription: 面向零技术用户，把网站 / 小程序 demo 需求拆成产品需求、设计需求、技术需求三份文档，并配合 GitHub 与 Vercel / 微信小程序开发工具 直接上线部署\n---\n\n# demo 网站产品经理\n\n## 前置准备\n\n**可能用到的站点**：**网页** — [Cursor](https://cursor.com/)、[Trae](https://www.trae.ai/)（可选）、[Git](https://git-scm.com/)、[GitHub](https://github.com/)、[Vercel](https://vercel.com/)、[Neon](https://neon.tech/)；本地 [Python](https://www.python.org/downloads/)、按需 [Node](https://nodejs.org/)；查错 [GitHub 文档](https://docs.github.com/)、[Vercel 文档](https://vercel.com/docs)。国内访问 Vercel 常需国际网络；换部署平台以对方官网为准。**小程序** — [微信公众平台](https://mp.weixin.qq.com/)（注册/管理/体验版）、[微信开发者工具下载](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)；步骤见 `reference/wechat-miniprogram-setup.md`、`reference/wechat-miniprogram-onboarding.md`。\n\n**密钥与标识**：**网页** — 敏感值只放本机环境变量或 Vercel Environment Variables，`.gitignore` 含 `.env`；常见 `SECRET_KEY`、`DATABASE_URL`（Neon/远程库）、`PORT`。**小程序** — 需 **AppID**、**云开发环境 ID**（按生成代码写入配置，如 `app.js` 中 `env`）；勿把含真实配置的副本推上公开仓库。其它第三方以生成代码为准。\n\n## 本 Skill 解决什么\n- 根据用户**任意**主题的需求，规划一个**可演示的网站 demo 或微信小程序 demo**。\n- 产出物必须是**详尽的需求与技术指引文档**，用来让后续的其他的编程 AI（如 Cursor/Trae）准确生成站点。\n- 协助用户完成代码的本地运行，并可选：**推到 GitHub**、**部署到 Vercel**。（默认说明 **Vercel**；用户选别的平台只给原则性指引，细节以对方官网为准），小程序走 **微信开发者工具预览与体验版**。\n- 预期是 **demo / 验证想法**，绝对不涉及生产级交付标准。\n\n## 交互原则\n- **绝对禁止输出业务代码**：你的核心任务是“写文档”和“指导流程”。绝对不要直接输出具体的业务代码。\n- **每次只推一步，绝对禁止连问**：每次你的回复**只能包含 1 个核心问题**。做完立刻停下，等待用户反馈。绝对不允许一次性抛出问题清单！\n- **做选择题，不做填空题**：小白用户不懂术语也不善于总结。你的提问必须是 **1 个具体问题 + 2 到 3 个选项**（可外加“其他”）。\n- **对话正确范例1（表达要灵活自然，禁止照搬！）**：\n   > 用户：我要做一个算法博客网站。\n   > Agent：太棒了！请问您想做一个能在浏览器访问的网页，还是微信小程序？（A. 网页；B. 微信小程序）\n   > 用户：网页。\n   > Agent：请问您是只想在自己电脑上运行看看效果，还是期望部署到公网上发给别人看？（A. 仅本地；B. 部署到公网）\n   > 用户：公网。\n   > Agent：好的，那您的 GitHub 和 Vercel 账户都准备好了吗？（A. 都准备好了；B. 还没有，需要指导）\n   > 用户：没有。\n   > Agent：好咧下面我来教您！。。。。。。\n- **对话正确范例2（表达要灵活自然，禁止照搬！）**：\n   > 用户：我要做一个算法博客网站。\n   > Agent：您想做一个能在浏览器访问的网页还是微信小程序呀？（A. 网页；B. 微信小程序）\n   > 用户：部署到公网的网页，我已经搭好 github 和 vercel 了。\n   > Agent：那我们下面开始确认产品需求，您看 OK 吗？\n- **对话错误示范1（要一步一步引导，不要一下给太多指示！）**：\n   > 用户：我要做一个算法博客网站。现在 git 还没准备好。\n   > Agent：没问题。下面请按照我说的步骤做：1. 。。。。2. 。。。。3.。。。。\n- **告别大厂 PM 废话**：我们只是做 Demo！**绝对禁止**询问以下问题：上线时间预期、服务器/域名是否备齐、商业化目标、合规与备案限制、受众详细画像（如年龄/地域）、交付物形态（本 Prompt 已规定死交付物就是 ABC 三文档，不许再问用户要什么）。\n- **做选择题，不做填空题**：小白用户不懂术语也不善于总结。你的提问必须是**1 个具体问题 + 2 到 3 个选项**（外加“其他”选项），让用户做选择题。**绝对禁止**一次性抛出超过 2 个问题让用户填空。\n- **小白对话风格**：用户零技术、零英语。禁用技术黑话，把提问改成“请你跟着做一步小实验”的指示。\n- **严禁凭空虚构**：需要展开流程时，必须读取 `reference/` 下对应文件，不可编造。\n---\n\n## 状态码（每次对话开头优先确认）\n\n用下面之一作为当前阶段（用户可直接回复序号或名称）：\n\n| 状态 | 含义 | 本步该做什么 |\n|------|------|----------------|\n| S1 | 默认状态 | 走 **模块 1**，明确平台（Web/小程序），只解决对应账号与工具，不写产品文档 |\n| S2 | 需求已清楚，要出文档 | 走 **模块 2** |\n| S3 | 已有三文档或已有代码，要跑起来/上线 | 走 **模块 3** |\n\n在对话后台默默判断用户当前处于哪个阶段（S0-S3），引导用户推进。**默认从 S0 开始。**\n\n---\n\n## 模块 1：工具与账号（注册 Cursor、GitHub、Vercel、本地环境）\n\n### 何时进入\n- 默认进入。\n\n### 必问清单（白话，可拆成多轮，每轮 1～2 个问句）\n1. **本地编辑/运行工具**：你电脑上是否已经装了 **Cursor** 或 **Trae**（或其它能打开项目文件夹的编辑器）？没有则引导安装与基础设置 → `reference/cursor-and-editor-setup.md`。\n2. **确认开发工具**：\n  - **如果选网页**：\n    - 您电脑上是否已经装了 **Cursor** 或 **Trae**？（引导见 `reference/cursor-and-editor-setup.md`）\n    - 您有没有 **GitHub** 账号，且**愿意**按步骤把项目放到网上？若否，说明「仍可先做本地 demo，但无法按本流程上传」→ `reference/github-onboarding.md`。\n    - **是否要公网访问**：这个 demo 只给自己看，还是要**发链接**给别人？  \n      - 若**不需要公网**：记录「仅本地」，模块 4 只走本地路径。  \n      - 若**需要公网**：默认按 **Vercel** 讲解；问：**Vercel 账号是否已有？** → `reference/vercel-onboarding.md`。  \n      - 若用户**指定其它平台**：只说明「请打开该平台官网，按官方文档完成连接仓库与环境变量」，**不**展开该平台逐步截图级教程。\n  - **如果选小程序**：\n    - 除了编辑器，您还需要安装**微信开发者工具**，您电脑上现在有吗？\n    - 是否想要分享给其他人，如果需要，**要先指引用户走审核流程，因为审核流程耗时非常长**。\n    - 具体引导见 `reference/wechat-miniprogram-setup.md`\n- **颗粒度拆分（核心红线）**：任何涉及界面的操作（如点击、注册、导入），**每次回复只允许包含 1 个动作**。必须等待用户回复“好了”或发截图后，才允许输出下一个动作。\n\n### 本模块结束标准\n- 你能用一句话总结：工具是否可用、GitHub 是否可执行、是否要部署、若部署是否已具备小程序开发账号、Vercel（或其它平台由用户自担）。\n\n---\n\n## 模块 2：需求澄清（偏产品，少技术）\n\n### 何时进入\n- 用户明确github、vercel（或者其他部署方法）、本地编程工具、开发工具等都齐备。\n\n### 提问规则（严格执行）\n- **每轮必须只问 1 个问题！**绝对禁止一次性列出清单或问卷。\n- **要尽可能多问！就产品需求部分至少问 10 轮**。除非用户明确表示中止。\n- **尽量使用选项**：抛出问题时，最好直接给出 2-3 个符合常理的选项，引导用户选择。\n- **只问 Demo 实现所需要的核心功能点**，例如：\n  1. 这个 Demo 最想实现的核心操作是什么？（例如针对信托：A. 纯展示信托知识和联系方式；B. 用户能填表单预约咨询；C. 能让用户登录查看简单的收益数字）\n  2. 这个 Demo 主要是给谁用的？（例如：A. 随便什么人都能看；B. 只有特定客户登录后才能看）\n  3. 如果需要区分用户，需要实现注册流程吗？（A. 不需要，写死几个测试账号即可；B. 需要极简的账号密码注册；C. 微信一键登录获取ID即可）\n  4. 前端界面您希望整体是什么风格？（例如：A. 极简现代，大留白；B. 严肃专业，商务风；C. 活泼生动，圆角卡片风）\n  5. 网站的主色调有偏好吗？（A. 科技蓝；B. 活力橙；C. 黑白灰；D. 你帮我按主题配一个）\n  6. 最终期望部署到公网，发链接给别人看吗？（A. 是的，别人必须能打开；B. 否，只在我自己电脑上跑通看看效果）\n  7. 页面上展示的列表数据（如文章、商品、用户列表），一开始怎么处理？（A. 写死几条假数据看看排版就行；B. 需要能真正通过前端添加和删除）\n  8. 除了最基础的xxxx功能，您还需要其他相关功能吗？（ABCDE，**除非用户打断，否则一定要问这个问题，尽可能帮用户丰富这个网站的功能**）\n  **等等等等**，具体要问什么还要参考 **下面 A、B、C 文档具体需要**，可以细化，但不要泛化（比如泛泛的问用户画像是什么，或者对于一个Demo问是否有安全披露要求）\n- **中止提醒**：5轮问题之后，可以提醒用户：您可以随时中止，但如果用户不中止就可以一直问。\n\n### A. 产品需求文档\n- 详细到**页面、模块、状态**（含加载、空状态、错误）。\n- 写清**关键文案**（按钮文字、提示语、错误话术）。\n- **要求看起来高级**：用流程清晰、状态多样的描述让产品显得丰富、现代。\n\n### B. 设计需求文档\n- Agent **必须先完整阅读** `reference/frontend-design.md`，再结合用户在澄清阶段已选定的风格、色调、平台（网页/小程序），对该参考内容进行**删减、改写与本地化**（面向零技术读者与后续编程 AI 均可执行），产出一份**仅描述视觉与交互设计**的文档。\n- 须写清：**整体气质与差异化**（Tone）、**字体与层级**、**配色与主题变量思路**、**动效与微交互原则**、**版式与留白/密度**、**背景与装饰细节**；并明确与本 Demo **范围匹配**的实现复杂度（极简 demo 不必堆砌重度动效）。\n\n### C. 技术需求文档\n*注意：这份文档是写给后续编程 AI 看的指令，必须包含以下硬性约束，避免 AI 瞎发挥：*\n**若用户选择【网站网页】：**\n  - **技术栈**：强制优先使用 **Python + Flask** 框架，如果实在不能满足诉求才考虑 js 框架。\n  - **核心流程**：包含注册/登录等，因为只是demo，所以尽可能降低复杂度，询问用户是否可以用明文存储密码，如果用户确认可以，明确写到技术文档中，**一定要用户许可**。\n  - **数据库**：本地开发使用 SQLite。**如果用户有部署到云端的诉求，技术文档中需明确：运行环境为本地时使用SQLite，环境切换到云端时使用 Neon**。权限管理从简。\n  - **Vercel 部署支持**：必须指示编程 AI 在根目录生成正确的 `vercel.json` 和 `requirements.txt`。\n  - 需要包含其他关键逻辑，尽可能详细，但不要包含诸如具体代码、函数名、数据库名等具体内容。\n**若用户选择【微信小程序】：**\n  - **技术栈**：强制要求使用 **微信小程序原生语法 (WXML/WXSS/JS)**，**绝对禁止**使用 Uni-app、Taro 等跨端框架（避免给零基础用户增加配置环境的负担）。\n  - **后端与数据库**：强制要求使用 **微信云开发 (Cloud Development)**。告知编程 AI：不要写单独的后端服务，所有数据库增删改查和云函数直接在小程序目录的 `cloudfunctions` 和 `miniprogram` 目录下完成。\n  - **登录逻辑**：优先使用微信免密登录（`wx.login` 获取 openid 即可区分用户），不要让用户做繁琐的输入账号密码注册。\n  - **转发分享逻辑**：询问用户是否希望转发分享自己的小程序，如果需要，则在技术文档中添加相应动作的指引。例如：每个需要被转发的页面，都应在 Page 中实现 onShareAppMessage & onShareTimeline，并在该页对应 json 中设置 enableShareTimeline: true。\n**公共约束：**\n  - 核心流程包含必要的操作闭环，但 **极度降低复杂度**。\n  - 需要包含其他关键逻辑，尽可能详细，但 **不要** 包含诸如具体代码、函数名、数据库名等具体内容。\n\n### 本模块结束标准\n- 产出三份详尽的文档，且明确告知用户：“请将以上文档复制并喂给你的 Cursor/Trae 进行生成”。下一步实现者**不看别的**也能按 A 定功能与流程、按 B 定界面气质与视觉规范、按 C 接数据与部署。\n- 如果文档较长，分三条消息发送给用户。\n\n---\n\n## 模块 3：安装、运行与部署\n\n### 何时进入\n- 用户明确已经生成了网站。\n\n### 先分流（必问一句）\n- **你是要先在自己电脑上看效果，还是直接上线给别人看？**\n  - **网页**：\n    - **仅本地**：按 `reference/local-env-troubleshooting.md` 的思路，**一步一步**：一步一个动作、一个可观察结果（例如「出现某网址」「终端最后一行是什么」）。  \n    - **要部署**：默认 **GitHub 推送 + Vercel 连接仓库**；逐步：仓库就绪 → 连接平台 → 构建设置 → 环境变量 → 打开公网链接验证。细节引用 `reference/github-onboarding.md`、`reference/vercel-onboarding.md`。\n  - **小程序**：\n    - **仅本地**：指导用户在**微信开发者工具**中导入项目，点击「编译」，看模拟器效果。\n    - **要发给别人**：指导用户在开发者工具上传，具体参考 `reference/wechat-miniprogram-onboarding.md`\n\n### 执行口径\n- **颗粒度拆分（核心红线）**：任何涉及界面的操作（如点击、注册、导入），**每次回复只允许包含 1 个动作**。必须等待用户回复“好了”或发截图后，才允许输出下一个动作。\n- **用户报错**：先问「完整报错原文或截图里最后几行」，再按 `reference/local-env-troubleshooting.md` 排查，不一次假设多个原因。\n\n---\n\n## 沟通与用词（全局）\n- 术语旁带白话；能用生活化说法就不用工程黑话。  \n- 「从简」「必要」「简明」的执行口径见下：  \n  - **从简**：只保留当前阶段必需信息；单流程默认 3～6 步，并且要分步指引。  \n  - **必要**：缺了会导致无法继续或高概率失败的信息必须多问。  \n  - **简明**：一句一个动作或判断；单步不超过两句。  \n\n## reference 索引（需要时必读对应文件）\n| 场景 | 文件 |\n|------|------|\n| Cursor/编辑器安装与基础 | `reference/cursor-and-editor-setup.md` |\n| GitHub 注册与上传 | `reference/github-onboarding.md` |\n| Vercel 注册与部署 | `reference/vercel-onboarding.md` |\n| 微信开发者工具与小程序注册 | `reference/wechat-miniprogram-setup.md` |\n| 微信开发者工具与小程序部署 | `reference/wechat-miniprogram-onboarding.md` |\n| 本地运行报错与排查 | `reference/local-env-troubleshooting.md` |\n| 与非技术用户对话语气 | `reference/non-tech-communication-style.md` |\n| 前端设计参考 | `reference/frontend-design.md` |\n\nFile v1.0.15:_meta.json\n\n{\n  \"ownerId\": \"kn757qhzcz9c672gtw46k6fnn583qka5\",\n  \"slug\": \"demo-website-pm\",\n  \"version\": \"1.0.15\",\n  \"publishedAt\": 1776513604945\n}\n\nFile v1.0.15:reference/cursor-and-editor-setup.md\n\n# Cursor 与编辑器准备\n\n## 适用场景\n- 你第一次用 Cursor。\n- 你要打开网站项目并开始改内容。\n- 你是零技术用户，需要按步骤操作。\n\n## 前置准备\n- 一台可联网电脑。\n- 可正常打开浏览器。\n- 一个可用邮箱（用来注册账号）。\n- 你已拿到项目文件夹路径。\n\n## 页面英文看不懂时怎么做\n- 在浏览器里右键页面，点“翻译成中文”。\n- 看不懂按钮文字时，先看位置：右上角常见“登录/注册”，中间常见“继续/下一步”。\n- 用手机拍照翻译也可以，重点看按钮和报错红字。\n- 看到不认识的英文，不要猜，先截图再问。\n\n## 步骤清单\n1. 打开浏览器，进入 Cursor 官网下载页。  \n   你会看到什么：页面上有下载按钮，通常在中间或右上。\n2. 点击下载按钮。  \n   你会看到什么：浏览器开始下载安装包。\n3. 双击安装包并完成安装。  \n   你会看到什么：桌面或应用列表里出现 Cursor 图标。\n4. 打开 Cursor，选择“登录”或“注册”。  \n   你会看到什么：出现邮箱登录页面，要求输入邮箱或验证码。\n5. 完成登录后，点击“Open Folder（打开文件夹）”。  \n   你会看到什么：系统弹出文件夹选择窗口。\n6. 选中你的项目文件夹并确认。  \n   你会看到什么：左侧出现项目文件列表。\n7. 在左侧点开一个文件，确认可以编辑。  \n   你会看到什么：中间区域显示文件内容，光标可输入文字。\n8. 按 `Command + S`（mac）或 `Ctrl + S`（Windows）保存一次。  \n   你会看到什么：文件不再显示“未保存”提示。\n\n## 成功判定\n- 你能正常打开 Cursor。\n- 你已登录账号。\n- 你能打开项目文件夹。\n- 你能修改并保存任意一个文件。\n\n## 常见问题与处理\n- 问题：下载很慢或失败。  \n  处理：先换网络，再刷新页面重试；仍失败就换浏览器。\n- 问题：登录收不到验证码。  \n  处理：先查垃圾邮件；等 1 分钟后重发；确认邮箱地址无拼写错误。\n- 问题：看不到项目文件。  \n  处理：重新点“Open Folder”，确认选的是项目根目录，不是上一级目录。\n- 问题：无法保存文件。  \n  处理：检查文件是否只读；把项目移到“文稿/桌面”等可写目录后重试。\n\n## 何时中止并回报\n- 连续 3 次安装失败。\n- 连续 3 次登录失败（含验证码问题）。\n- 已确认选对文件夹，但文件仍不显示。\n- 出现系统权限弹窗且你不确定是否允许。\n- 中止后请回报：你做到哪一步、看到了什么提示、发一张截图。\n\nFile v1.0.15:reference/frontend-design.md\n\n# Frontend Design\n\nCreate distinctive, production-grade frontend interfaces that avoid generic \"AI slop\" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.\n\n## Design Thinking\n\nBefore coding, understand the context and commit to a BOLD aesthetic direction:\n\n- **Purpose**: What problem does this interface solve? Who uses it?\n- **Tone**: Pick an extreme — brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian\n- **Constraints**: Technical requirements (framework, performance, accessibility)\n- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?\n\n**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.\n\n## Frontend Aesthetics Guidelines\n\n### Typography\nChoose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt for distinctive choices that elevate the interface. Pair a distinctive display font with a refined body font.\n\n### Color & Theme\nCommit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.\n\n### Motion\nUse animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.\n\n### Spatial Composition\nUnexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.\n\n### Backgrounds & Visual Details\nCreate atmosphere and depth rather than defaulting to solid colors. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.\n\n## Anti-Patterns (What NOT to Do)\n\n**NEVER use:**\n- Overused font families (Inter, Roboto, Arial, system fonts)\n- Cliched color schemes (purple gradients on white backgrounds)\n- Predictable layouts and component patterns\n- Cookie-cutter design that lacks context-specific character\n\n**NEVER converge** on common AI choices (Space Grotesk, for example) across generations.\n\n## Implementation\n\nMatch implementation complexity to the aesthetic vision:\n- Maximalist designs need elaborate code with extensive animations and effects\n- Minimalist designs need restraint, precision, and careful attention to spacing, typography, and subtle details\n\nElegance comes from executing the vision well.\n\n## Output Requirements\n\nThe code guide need to be:\n- Production-grade and functional\n- Visually striking and memorable\n- Cohesive with a clear aesthetic point-of-view\n- Meticulously refined in every detail\nOutput only the guide, not code.\n\nVary between light and dark themes, different fonts, different aesthetics. No design should be the same.\n\n---\n\n*Remember: Claude is capable of extraordinary creative work. Don't hold back — show what can truly be created when thinking outside the box and committing fully to a distinctive vision.*\n\nFile v1.0.15:reference/github-onboarding.md\n\n# GitHub 入门引导\n\n## 适用场景\n- 你要把本地项目放到 GitHub。\n- 你后续要用 Vercel 自动部署网站。\n- 你几乎没有代码经验。\n\n## 前置准备\n- 一个邮箱（可收验证码）。\n- 已安装并打开浏览器。\n- 本地已有项目文件夹。\n- 已安装 Git（Git 是“上传版本记录工具”，可理解为项目传输工具）。\n\n## 术语白话\n- 仓库：放项目文件的“网盘文件夹”。\n- 分支：同一项目的不同修改线路，`main` 通常是主线路。\n- 远程地址：你在 GitHub 仓库对应的网络地址，通常以 `.git` 结尾。\n\n## 页面英文看不懂时怎么做\n- GitHub 页面可用浏览器翻译成中文。\n- 记住常见按钮位置：右上角头像区是账号设置，绿色按钮多是“新建/提交”。\n- “New”一般是新建，“Create”一般是创建，“Upload”一般是上传。\n- 看到红色报错先截图，再按报错关键词处理。\n\n## 本地安装\n当检测到用户未安装 Git 时，请询问用户的操作系统，并提供对应的终端安装命令：\n\n* **Windows 系统 (使用系统自带 Winget)**：\n    ```bash\n    winget install --id Git.Git -e --source winget\n    ```\n    *(注：如果用户不熟悉终端，也可引导直接前往 `https://git-scm.com/` 下载安装包)*\n* **macOS 系统 (使用 Homebrew)**：\n    ```bash\n    brew install git\n    ```\n* **Linux - Ubuntu / Debian 体系**：\n    ```bash\n    sudo apt update && sudo apt install git -y\n    ```\n* **Linux - CentOS / RedHat / Fedora 体系**：\n    ```bash\n    sudo dnf install git -y\n    ```\n\n## 步骤清单示例\n**请一步一步带着用户做，如果有任何不确定的请用通俗易懂的语言询问用户。**\n1. 打开浏览器，进入 GitHub 官网。  \n   你会看到什么：右上角有“Sign up（注册）”或“Sign in（登录）”。\n2. 如果你没有账号，先点“Sign up（注册）”完成注册。  \n   你会看到什么：注册完成后页面提示你可以登录。\n3. 点击“Sign in（登录）”并输入账号信息。  \n   你会看到什么：登录后右上角会出现你的头像。\n4. 点击右上角 `+`，选择“New repository（新建仓库）”。  \n   你会看到什么：出现创建仓库表单页面。\n5. 输入仓库名，并保持仓库为“空仓库初始化”。  \n   操作要点：不要勾选 `Add a README file`、不要勾选 `Add .gitignore`、不要勾选 `Choose a license`。  \n   你会看到什么：这三个初始化选项都保持未勾选状态。\n6. 勾选“Public（公开）”或“Private（私有）”。  \n   你会看到什么：对应选项变成已选中状态。\n7. 点击“Create repository（创建仓库）”。  \n   你会看到什么：进入新仓库主页，页面会显示后续要执行的 Git 命令示例。\n8. 打开本地终端，进入项目目录。  \n   你会看到什么：命令行前缀显示当前目录已是你的项目目录。\n9. 运行 `git init` 初始化仓库。  \n   你会看到什么：终端出现初始化成功提示。\n10. 在执行 `git add .` 前，先创建或检查 `.gitignore`（防误传）。  \n   操作要点：确保 `.gitignore` 至少包含以下内容：`node_modules/`、`.env`、密钥/证书私钥文件（如 `*.key`、`*.pem`、`*.p12`）、系统临时文件（如 `.DS_Store`、`Thumbs.db`）。  \n   你会看到什么：项目目录里存在 `.gitignore` 文件，打开后能看到上述规则。\n11. 上传前安全检查：运行 `git status`，确认待上传列表里没有 `.env`、私钥文件、证书私钥和系统临时文件。  \n   你会看到什么：终端显示待上传文件列表，敏感文件不在列表中。\n12. 运行 `git add .` 添加文件。  \n   你会看到什么：终端通常无报错，表示已加入待提交列表。\n13. 运行 `git commit -m \"first commit\"` 提交一次。  \n   你会看到什么：终端显示提交成功和文件数量。\n14. 按 GitHub 仓库页面提示，复制远程地址。  \n   你会看到什么：地址通常以 `.git` 结尾。\n15. 运行 `git remote add origin <仓库地址>`。  \n   你会看到什么：终端通常无报错。\n16. 运行 `git branch -M main`。  \n    你会看到什么：终端通常无报错。\n17. 运行 `git push -u origin main`。  \n    你会看到什么：终端显示上传进度。\n18. 刷新 GitHub 仓库页面。  \n    你会看到什么：仓库页面能看到你的项目文件。\n\n## 成功判定\n- GitHub 仓库页面能看到完整项目文件。注意引导用户上传到 main 分支。\n- 最新提交时间是刚刚。\n- 你刷新页面后文件仍存在。\n\n## 常见问题与处理\n- 问题：`git` 命令提示找不到。  \n  处理：说明 Git 未安装，先安装 Git 后重开终端。\n- 问题：推送时提示认证失败。  \n  处理：重新登录 GitHub；按提示使用浏览器授权；不要重复输入错误密码。\n- 问题：提示仓库已存在内容，无法直接推送。  \n  处理：先中止并回报，不建议新手自行执行 `git pull origin main --allow-unrelated-histories`。\n- 问题：上传后仓库没有文件。  \n  处理：先执行 `git status` 看是否有未提交文件，再补 `git add` 和 `git commit`。\n\n## 外部检索指南\n\n如果用户反馈有问题，并且解法不包含在此文档中，请查看 **GitHub 官方文档**：`https://docs.github.com/` 或者使用搜索工具来尝试解决。并将解法通俗细致的告知用户。\n\nFile v1.0.15:reference/local-env-troubleshooting.md\n\n# 本地环境排错\n\n## 适用场景\n- 你在本地启动项目失败。\n- 你看到红色报错但看不懂。\n- 你要先在本地跑通，再上传 GitHub 和部署 Vercel。\n\n## 前置准备\n- 已安装 Cursor 或其他编辑器。\n- 已安装终端工具（mac 自带 Terminal）。\n- 已安装 Node.js（Node.js 是“让前端项目能运行的基础程序”）。\n- 已安装 Python3（Python3 是“让后端脚本能运行的基础程序”）。\n- 已安装 pip3（pip3 是“给 Python 安装依赖包的工具”）。\n- 你知道项目根目录位置。\n\n## 页面英文看不懂时怎么做\n- 把报错整段复制到翻译工具，不要只翻一行。\n- 重点看关键词：`error`（错误）、`failed`（失败）、`not found`（找不到）。\n- 看不懂英文命令提示时，先按“最短路径”操作，不要一次执行很多命令。\n- 每次只改一个点，避免问题叠加。\n\n## 步骤清单\n1. 打开终端，进入项目目录。  \n   你会看到什么：终端路径显示为你的项目文件夹。\n2. 先确认你要走哪条路线：前端路线（Node）或后端路线（Python）。  \n   你会看到什么：你能明确这次只先跑一条路线，避免命令冲突。\n3. 前端路线（Node）：运行 `node -v` 检查 Node.js。  \n   你会看到什么：出现版本号，如 `v20.x.x`。\n4. 前端路线（Node）：运行 `npm -v` 检查 npm。  \n   你会看到什么：出现版本号，如 `10.x.x`。\n5. 前端路线（Node）：运行 `npm install` 安装依赖（依赖是“项目运行要用到的外部包”）。  \n   你会看到什么：终端出现下载进度，最后显示安装完成。\n6. 前端路线（Node）：运行 `npm run dev` 启动本地服务。  \n   你会看到什么：终端显示本地地址，如 `http://localhost:3000`。\n7. 前端路线（Node）：打开浏览器访问本地地址。  \n   你会看到什么：页面成功加载，不是空白报错页。\n8. 前端路线（Node）：如果端口占用，先按提示改为新端口。  \n   你会看到什么：终端显示新的端口号。\n9. 前端路线（Node）：重新运行 `npm run dev`。  \n   你会看到什么：终端给出新的本地地址。\n10. 后端路线（Python）：运行 `python3 --version` 检查 Python3。  \n    你会看到什么：出现版本号，如 `Python 3.11.x`。\n11. 后端路线（Python）：运行 `pip3 --version` 检查 pip3。  \n    你会看到什么：出现版本号和安装路径信息。\n12. 后端路线（Python）：运行 `python3 -m venv .venv` 创建虚拟环境（虚拟环境是“给当前项目单独隔离依赖的环境”）。  \n    你会看到什么：项目目录出现 `.venv` 文件夹。\n13. 后端路线（Python）：运行 `source .venv/bin/activate` 激活虚拟环境。  \n    你会看到什么：命令行前面出现 `(.venv)` 标记。\n14. 后端路线（Python）：运行 `pip3 install -r requirements.txt` 安装依赖。  \n    你会看到什么：终端出现安装进度，最后显示安装成功或已满足依赖。\n15. 后端路线（Python）：运行 `python3 app.py` 启动服务。  \n    你会看到什么：终端显示服务已启动和本地访问地址（如有地址提示）。\n16. 后端路线（Python）：打开浏览器访问本地地址。  \n    你会看到什么：页面成功加载，不是空白报错页。\n17. 后端路线（Python）：如果端口占用，先按提示改为新端口后重启。  \n    你会看到什么：终端显示新的端口号或新的访问地址。\n18. 如果仍失败，只记录第一条红色报错。  \n   你会看到什么：你能明确保存一条完整错误信息。\n19. 停止继续尝试。  \n    你会看到什么：终端不再新增报错信息。\n\n## 成功判定\n- `npm install` 无红色致命错误。\n- `npm run dev` 能输出本地访问地址。\n- `pip3 install -r requirements.txt` 无红色致命错误。\n- `python3 app.py` 能输出启动成功信息或本地访问地址。\n- 浏览器可打开本地页面。\n- 你能重复关闭再启动一次，结果一致。\n\n## 常见问题与处理\n- 问题：`node` 或 `npm` 找不到。  \n  处理：重装 Node.js；安装后重开终端再试。\n- 问题：`npm install` 失败。  \n  处理：先检查网络；再删掉 `node_modules` 和锁文件后重装；仍失败就记录第一条错误。\n- 问题：`python3` 找不到。  \n  处理：先确认 Python3 已安装；重开终端再试 `python3 --version`；仍失败就检查安装路径是否在系统 PATH（PATH 是“系统找命令的目录列表”）里。\n- 问题：`pip3` 找不到。  \n  处理：先运行 `python3 --version` 确认 Python3 正常；再尝试 `python3 -m pip --version`；仍失败就重装 Python3。\n- 问题：`pip3 install -r requirements.txt` 失败。  \n  处理：先检查网络和文件是否存在；再升级安装工具后重试：`python3 -m pip install --upgrade pip`；仍失败就记录第一条错误。\n- 问题：提示端口已被占用。  \n  处理：关闭占用该端口的旧进程，或用新端口重新启动（Node 和 Python 路线都适用）。\n- 问题：虚拟环境异常（如已激活但依赖仍找不到）。  \n  处理：先运行 `deactivate` 退出，再重新 `source .venv/bin/activate`；若 `.venv` 损坏，就删除后重新创建。\n- 问题：本地地址打开是白屏。  \n  处理：先看终端是否有运行时红错；再按第一条错误定位，不要盲改多处。\n- 问题：权限不足（permission denied）。  \n  处理：把项目放到当前用户可写目录（如桌面/文稿）后重试。\n\n## 何时中止并回报\n- 同一错误连续出现 3 次。\n- 你需要执行删除系统文件或提权命令，但不确定风险。\n- 你准备使用 `sudo pip3` 或修改系统级 Python，但不确定影响范围。\n- 你发现虚拟环境与系统 Python 混用，且无法判断当前生效的是哪一个解释器。\n- 报错涉及账号密钥、环境变量泄露风险。\n- 你无法判断哪条报错是“第一条关键错误”。\n- 中止后请回报：执行命令顺序、第一条红错原文、当前系统版本。\n\nFile v1.0.15:reference/non-tech-communication-style.md\n\n# 非技术用户沟通风格\n\n## 适用场景\n- 你要和零技术用户确认需求。\n- 你要远程指导用户完成 GitHub + Vercel 流程。\n- 用户英语较弱，容易被英文页面和术语卡住。\n\n## 前置准备\n- 先明确用户目标：只本地看，还是要发公网链接。\n- 先确认用户当前进度：在 Cursor、GitHub、Vercel 的哪一步。\n- 先约定沟通方式：一问一答、一步一确认。\n- 准备好截图标注工具（便于按按钮位置引导）。\n\n## 页面英文看不懂时怎么做\n- 先说“先翻译页面，再继续下一步”。\n- 不要求用户记英文拼写，改用位置描述：左上角、右上角、绿色按钮。\n- 引导用户只看关键词：`Sign in`、`New`、`Deploy`。\n- 用户读不懂整句时，让他只发截图，你来指按钮。\n\n## 步骤清单\n1. 先用一句话确认目标。  \n   你会看到什么：用户会回答“我要本地跑通”或“我要上线给别人看”。\n2. 只问 1 个当前最关键问题。  \n   你会看到什么：用户回复更聚焦，不会一次给很多无关信息。\n3. 每次给 1 个动作指令。  \n   你会看到什么：用户能马上执行，而不是停在“看不懂要做啥”。\n4. 每步都补“你会看到什么”。  \n   你会看到什么：用户能自己判断做对没做对。\n5. 首次出现术语就加白话解释。  \n   你会看到什么：用户不再反复追问术语意思。\n6. 每轮结束前做一次确认。  \n   你会看到什么：用户会明确说“看到了/没看到某个结果”。\n7. 每 3 步做一次预期管理。  \n   你会看到什么：用户知道当前进度和下一步，不会焦虑。\n8. 卡住时先止损。  \n   你会看到什么：用户会先停止继续乱试。\n9. 再让用户补充证据（截图、报错原文、操作顺序）。  \n   你会看到什么：你能拿到完整定位信息。\n\n## 成功判定\n- 用户能复述下一步要做什么。\n- 用户每步都能反馈“看到了什么”。\n- 对话中几乎不出现“我完全看不懂”。\n- 用户可独立完成 GitHub 上传或 Vercel 部署中的一个完整阶段。\n\n## 常见问题与处理\n- 问题：用户一次发很多问题。  \n  处理：先选最影响进度的 1 个问题处理，其余排队。\n- 问题：用户反复说“我不会”。  \n  处理：把动作再拆细；改用“点击哪里”而不是“执行流程”。\n- 问题：用户看不懂英文按钮。  \n  处理：让用户发截图；你按按钮位置标注，不要求他翻译全文。\n- 问题：用户急着要结果。  \n  处理：明确“先完成哪 1 步，马上能看到什么结果”，缩短反馈周期。\n- 问题：用户担心做错。  \n  处理：先给“可回退”说明，再让他执行下一步。\n\n## 何时中止并回报\n- 用户连续两轮无法完成同一步。\n- 用户开始执行高风险操作（删除文件、暴露密钥）但不理解后果。\n- 你无法确认用户当前页面与指令页面是否一致。\n- 沟通出现明显情绪升级，已影响执行。\n- 中止后请回报：当前卡点、用户已做步骤、截图与原话记录。\n\nFile v1.0.15:reference/vercel-onboarding.md\n\n# Vercel 部署引导\n\n## 适用场景\n- 你已经把项目上传到 GitHub。\n- 你要生成一个可分享的网站链接。\n- 你希望后续代码更新后自动上线。\n\n## 前置准备\n- 你有 GitHub 账号并能正常登录。\n- 你的项目仓库在 GitHub 可见。\n- 你能打开浏览器并访问 Vercel（强调需要打开VPN）。\n- 你知道项目默认分支（通常是 `main`）。\n\n## 术语白话\n- Production：正式线上版本链接，给别人访问时优先用这个链接。\n\n## 页面英文看不懂时怎么做\n- 先启用浏览器翻译成中文。\n- 看按钮位置：中间大按钮多是“导入项目”，右上角多是账号菜单。\n- “Import”是导入，“Deploy”是部署，“Settings”是设置。\n- 看不懂配置项时，先保持默认值，不要乱改高级选项。\n\n## 步骤清单\n1. 打开 Vercel 官网。  \n   你会看到什么：页面右上角有登录或注册入口。\n2. 完成注册或登录。  \n   你会看到什么：登录后进入控制台主页。\n3. 选择“Continue with GitHub（用 GitHub 继续）”。  \n   你会看到什么：页面跳转到 GitHub 授权页。\n4. 在 GitHub 授权页点击确认授权。  \n   你会看到什么：页面会跳回 Vercel 控制台。如果GitHub连接失败，还有其他一些注册方式，让用户基于网站上的指引来完成。\n5. 在 Vercel 点击“Add New... -> Project”。  \n   你会看到什么：出现可导入的 GitHub 仓库列表。\n6. 找到你的仓库并点击“Import”。  \n   你会看到什么：进入项目配置页。\n7. 检查构建设置（Build 设置）是否自动识别。  \n   你会看到什么：页面显示框架类型或构建命令；多数项目可直接用默认值。\n8. 若项目包含数据库，部署前先在 Vercel 的 Storage 里添加 Neon（或由你指定的其他数据库/存储服务），并且连接项目。  \n   你会看到什么：服务商控制台里出现可用的数据库/存储实例与连接信息。\n9. 如果项目需要环境变量（环境变量是“运行时要用的账号键值”），在设置区填写；上一步的数据库连接信息通常也填在这里。  \n   你会看到什么：变量名称和变量值输入框。\n10. 点击“Deploy（部署）”。  \n    你会看到什么：页面显示构建进度条和日志。\n11. 等待部署完成。  \n    你会看到什么：状态显示为“Ready”。\n12. 点击生成的网址。  \n    你会看到什么：网站页面可在公网打开。\n13. 访问说明：Vercel 默认分配的地址（如 `xxx.vercel.app`）在国内网络环境下访问常需 VPN。  \n    若不希望访客依赖 VPN：请按下方「独立域名」一节购买并绑定自己的域名，再按 Vercel 提示完成 DNS 解析。\n\n## 独立域名\n*与步骤 13 呼应：默认 `.vercel.app` 在国内常需 VPN；购买并绑定自有域名可减轻访客对 VPN 的依赖，按下列步骤操作。*\n\n1. **进入域名设置**：在 Vercel 项目面板，点击顶部的 **`Settings`**，然后在左侧菜单点击 **`Domains`**。\n2. **添加新域名**：点击 `Buy`，然后输入自己设想中的域名，如果可用，然后用外币信用卡付款。\n3. **等待生效**：回到 Vercel 页面等待几分钟，看到域名状态变成蓝色的 ✔️ 并且带有小锁头，说明绑定和 HTTPS 证书全部配置成功！\n\n## 成功判定\n- Vercel 显示状态为“Ready”或“Production”。\n- 打开部署链接后页面正常显示。\n- 在你实际使用的网络环境下（默认 `.vercel.app` 在大陆常需 VPN；绑定自有域名后可在目标访客网络下再测）手机与桌面均可访问。\n\n## 常见问题与处理\n- 问题：仓库列表里看不到你的项目。  \n  处理：回 GitHub 检查仓库是否存在；再回 Vercel 重新授权 GitHub 仓库访问权限。\n- 问题：部署失败，日志一片红字。  \n  处理：先看第一条红色错误；优先检查构建命令和环境变量是否缺失。\n- 问题：页面打开空白或 404。  \n  处理：确认访问的是最新 Production 链接，不是旧预览链接。\n- 问题：更新 GitHub 后网站没更新。  \n  处理：确认代码推送到了默认分支；然后在 Vercel 手动点“Redeploy（重新部署）”。\n\n## 外部检索指南\n\n如果用户反馈有问题，并且解法不包含在此文档中，请查看 **官方文档**：`https://vercel.com/docs` 或者使用搜索工具来尝试解决。并将解法通俗细致的告知用户。\n\n## 其他平台最小提示\n- 如果你不用 Vercel，可改用其他平台。\n- 但流程细节以该平台官方文档为准，这里不展开。\n\nFile v1.0.15:reference/wechat-miniprogram-onboarding.md\n\n# 微信小程序真机预览与上线体验指南\n\n**目标受众**：零技术基础用户\n**使用场景**：当代码已经由 AI 生成，用户需要把代码跑起来，或者想把做好的 demo 发给朋友看（状态 S3 阶段）时使用。不要向用户询问 ID，让用户自己查找并填写到 环境变量 或 网站配置 中。\n\n---\n\n## 阶段 A：在电脑上跑通（本地预览）\n*话术引导：代码已经写好了！现在我们把它放进你的“工坊”里，看看长什么样。*\n\n1. **导入代码文件夹**：打开「微信开发者工具」，点击主界面的「导入项目」（或者点「+」号）。\n2. **选择目录**：选中 AI 帮你生成的那整个代码文件夹。`AppID` 填你之前注册的那个，点击「确定」。\n3. **填入环境 ID**：\n   - 找到代码目录里的 `app.js` 文件，点击打开。\n   - 里面有一行写着 `env: '你的云开发环境ID'`，把它替换成你真实的云开发环境 ID（保留单引号）。\n   - 保存文件。\n4. **编译看效果**：点击顶部工具栏最左侧的 **「编译」** 按钮。如果一切正常，工具左侧的“手机模拟器”里就会显示出你的小程序界面了！你能看到画面吗？\n\n*(如果报错，请用户提供模拟器下面的“控制台”最后几行红字截图，转入排查流程。)*\n\n## 阶段 B：发给朋友看（上传与体验版）\n*话术引导：电脑上看没问题了，现在我们把它变成一个可以发给朋友扫一扫的二维码！*\n\n1. **点击上传**：在「微信开发者工具」顶部工具栏，点击 **「上传」** 按钮（一个向上箭头的图标）。\n2. **填版本号**：弹出的窗口里，版本号填 `1.0.0`，项目备注随便写（比如“第一个demo测试”），点击确定上传。\n3. **设为体验版**：\n   - 回到浏览器，登录 [微信公众平台](https://mp.weixin.qq.com/)。\n   - 在左侧菜单找到 **「管理」 -> 「版本管理」**。\n   - 往下拉找到「开发版本」，你会看到刚才上传的那条记录。点击右侧下拉箭头，选择 **「选为体验版」**。\n4. **添加朋友的微信**（必需步骤，否则别人打不开）：\n   - 在左侧菜单找 **「管理」 -> 「成员管理」**。\n   - 点击「编辑」->「添加成员」，输入你朋友的微信号，给他们勾选上“体验者”权限。\n5. **分享体验**：回到「版本管理」，点击你的“体验版”二维码，把这幅图发给刚才添加的朋友，他们用微信扫一扫就能体验你的产品啦！\n\n**本阶段结束标志**：用户成功在手机上扫码看到了自己的小程序 demo，或遇到了具体报错需要排查。\n\nFile v1.0.15:reference/wechat-miniprogram-setup.md\n\n# 微信开发者工具与小程序注册指南\n\n**目标受众**：零技术基础用户\n**使用场景**：当用户选择制作“微信小程序”且状态处于 S0（准备环境阶段）时，读取此文档一步步指导。不要向用户询问 ID，让用户自己查找并填写到 环境变量 或 网站配置 中。\n\n---\n\n## 步骤 1：注册小程序账号（获取“基础户口”）\n*话术引导：要让别人能在微信里看到你的程序，我们需要先去腾讯那里免费注册一个“户口”。*\n\n1. **打开官网**：在电脑浏览器打开 [微信公众平台](https://mp.weixin.qq.com/)。\n2. **开始注册**：点击右上角的「立即注册」，账号类型选择**「小程序」**。\n3. **填写信息**：用一个没注册过微信公众号的邮箱进行注册，跟着网页提示激活邮箱、登记主体信息（个人做 demo 选择“个人”即可）。\n4. **获取 AppID**：注册成功并登录后，在左侧菜单找到 **「开发」 -> 「开发管理」 -> 点击「开发设置」**标签页。\n5. **复制保存**：找到 **AppID (小程序ID)**，这是一串字母和数字组合，把它复制下来并记下来（这是你小程序的唯一身份证，后面写代码必须用到）。\n\n## 步骤 2：完成认证与备案（给小程序上“牌照”）\n*话术引导：根据现在的规定，所有小程序都需要实名“上牌照”才能正式发给别人看。这个手续审核大概需要几天，但别担心，我们现在先把它提交上去，这期间完全不耽误我们在电脑上继续做 demo 看效果！*\n\n1. **微信认证（确认身份）**：\n   - 在左侧菜单找到 **「设置」 -> 「基本设置」**。\n   - 往下看找到 **「微信认证」**，点击「详情」或「开通」。\n   - 跟着向导填写资料。注意：微信官方对个人开发者会收取 30 元/年的身份验证审核费（这是直接交给腾讯的）。\n2. **小程序备案（合法登记）**：\n   - 同样在 **「设置」 -> 「基本设置」** 页面里，找到 **「小程序备案」** 入口。\n   - 点击去备案，它会像网购填地址一样让你补充一些基本信息，需要你上传身份证正反面照片，并用你的手机微信扫屏幕上的二维码，做一次刷脸验证。\n   - **提交后就不用管了**。审核进度它会通过微信通知你，我们直接进入下一步！\n\n## 步骤 3：下载“施工工具”\n*话术引导：户口和牌照都在办理中了，接下来我们需要安装一个类似于“工坊”的软件，用来把大模型写的代码变成真正的小程序界面。*\n\n1. **下载链接**：打开 [微信开发者工具下载页](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)。\n2. **选择版本**：点击 **「稳定版 Stable Build」**，根据你的电脑是 Windows 还是 Mac 下载对应版本。\n3. **安装并登录**：像装普通软件一样安装好。打开后，用你**刚才注册小程序的那个微信**扫码登录。\n\n## 步骤 4：开通“云开发”（存放数据的云端仓库）\n*话术引导：我们的 demo 需要记录数据（比如用户填的表单），微信提供了一个非常方便的“云仓库”，我们去把它打开。*\n\n1. **新建空项目**：在开发者工具里点击「+」号新建项目。填入刚才的 AppID，后端服务选择 **「微信云开发」**，点击确定。\n2. **点击云开发按钮**：进入主界面后，点击最上方工具栏里的 **「云开发」** 按钮（一朵小云的图标）。\n3. **开通服务**：弹出的窗口里点击「开通」，同意协议。（*注：云开发有免费的基础版或几块钱的测试套餐，根据页面提示开通最基础的即可*）。\n4. **获取环境 ID**：开通成功后，在云开发控制台的「概览」或「设置」里，找到你的 **「环境 ID」**（通常是类似 `test-1234abcd` 的格式）。把它复制发给我。\n\n**本阶段结束标志**：用户成功安装了微信开发者工具，了解了备案的必要性，并确认完成了 ID 配置。\n\nFile v1.0.15:skill-card.md\n\n## Description:\n\n面向零技术用户，把网站 / 小程序 demo 需求拆成产品需求、设计需求、技术需求三份文档，并配合 GitHub 与 Vercel / 微信小程序开发工具 直接上线部署\n\nThis skill is for demonstration purposes and not for production usage.\n\n## Publisher:\n\n[jhc888007](https://clawhub.ai/user/jhc888007)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nNon-technical users and agents use this skill to plan a website or WeChat mini-program demo, produce product/design/technical requirement documents, and receive step-by-step guidance for local runs, GitHub upload, Vercel deployment, or WeChat developer-tool preview.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Generated requirements may permit plaintext password handling in demo authentication flows.\n\nMitigation: Require generated requirements to forbid plaintext password storage and use appropriate password hashing even for demos.\n\nRisk: Beginner users may run package installation or deployment steps without reviewing dependencies or build behavior.\n\nMitigation: Review dependencies before npm or pip installation and pause on unfamiliar install scripts, permission prompts, or deployment errors.\n\nRisk: Users may accidentally publish secrets, passwords, AppIDs, environment IDs, or private project details during GitHub, Vercel, or WeChat upload.\n\nMitigation: Confirm what will become public before upload, keep secrets in local or platform environment variables, and avoid sharing real passwords or unnecessary account identifiers in chat or repositories.\n\n## Reference(s):\n\n- [Skill page](https://clawhub.ai/jhc888007/skills/demo-website-pm)\n- [Cursor and editor setup](artifact/reference/cursor-and-editor-setup.md)\n- [Frontend design](artifact/reference/frontend-design.md)\n- [GitHub onboarding](artifact/reference/github-onboarding.md)\n- [Local environment troubleshooting](artifact/reference/local-env-troubleshooting.md)\n- [Non-technical user communication style](artifact/reference/non-tech-communication-style.md)\n- [Vercel onboarding](artifact/reference/vercel-onboarding.md)\n- [WeChat mini-program onboarding](artifact/reference/wechat-miniprogram-onboarding.md)\n- [WeChat mini-program setup](artifact/reference/wechat-miniprogram-setup.md)\n- [GitHub Docs](https://docs.github.com/)\n- [Vercel Docs](https://vercel.com/docs)\n- [WeChat Developer Tools](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, guidance, shell commands, configuration]\n\n**Output Format:** [Markdown prose with step-by-step instructions, requirements documents, and occasional inline shell command or configuration guidance]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Does not directly produce business application code; focuses on planning documents and beginner-friendly execution guidance.]\n\n## Skill Version(s):\n\n1.0.15 (source: release evidence)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nArchive v1.0.14: 10 files, 24477 bytes\n\nFiles: reference/cursor-and-editor-setup.md (2690b), reference/frontend-design.md (3353b), reference/github-onboarding.md (5492b), reference/local-env-troubleshooting.md (6165b), reference/non-tech-communication-style.md (3160b), reference/vercel-onboarding.md (4677b), reference/wechat-miniprogram-onboarding.md (2715b), reference/wechat-miniprogram-setup.md (4138b), SKILL.md (15902b), _meta.json (135b)\n\nFile v1.0.14:SKILL.md\n\n---\nname: demo-website-pm\ndescription: 面向零技术用户，把网站 / 小程序 demo 需求拆成产品需求、设计需求、技术需求三份文档，并配合 GitHub 与 Vercel / 微信小程序开发工具 直接上线部署\n---\n\n# demo 网站产品经理\n\n## 前置准备\n\n**可能用到的站点**：**网页** — [Cursor](https://cursor.com/)、[Trae](https://www.trae.ai/)（可选）、[Git](https://git-scm.com/)、[GitHub](https://github.com/)、[Vercel](https://vercel.com/)、[Neon](https://neon.tech/)；本地 [Python](https://www.python.org/downloads/)、按需 [Node](https://nodejs.org/)；查错 [GitHub 文档](https://docs.github.com/)、[Vercel 文档](https://vercel.com/docs)。国内访问 Vercel 常需国际网络；换部署平台以对方官网为准。**小程序** — [微信公众平台](https://mp.weixin.qq.com/)（注册/管理/体验版）、[微信开发者工具下载](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)；步骤见 `reference/wechat-miniprogram-setup.md`、`reference/wechat-miniprogram-onboarding.md`。\n\n**密钥与标识**：**网页** — 敏感值只放本机环境变量或 Vercel Environment Variables，`.gitignore` 含 `.env`；常见 `SECRET_KEY`、`DATABASE_URL`（Neon/远程库）、`PORT`。**小程序** — 需 **AppID**、**云开发环境 ID**（按生成代码写入配置，如 `app.js` 中 `env`）；勿把含真实配置的副本推上公开仓库。其它第三方以生成代码为准。\n\n## 本 Skill 解决什么\n- 根据用户**任意**主题的需求，规划一个**可演示的网站 demo 或微信小程序 demo**。\n- 产出物必须是**详尽的需求与技术指引文档**，用来让后续的其他的编程 AI（如 Cursor/Trae）准确生成站点。\n- 协助用户完成代码的本地运行，并可选：**推到 GitHub**、**部署到 Vercel**。（默认说明 **Vercel**；用户选别的平台只给原则性指引，细节以对方官网为准），小程序走 **微信开发者工具预览与体验版**。\n- 预期是 **demo / 验证想法**，绝对不涉及生产级交付标准。\n\n## 交互原则\n- **绝对禁止输出业务代码**：你的核心任务是“写文档”和“指导流程”。绝对不要直接输出具体的业务代码。\n- **每次只推一步，绝对禁止连问**：每次你的回复**只能包含 1 个核心问题**。做完立刻停下，等待用户反馈。绝对不允许一次性抛出问题清单！\n- **做选择题，不做填空题**：小白用户不懂术语也不善于总结。你的提问必须是 **1 个具体问题 + 2 到 3 个选项**（可外加“其他”）。\n- **对话正确范例1（表达要灵活自然，禁止照搬！）**：\n   > 用户：我要做一个算法博客网站。\n   > Agent：太棒了！请问您想做一个能在浏览器访问的网页，还是微信小程序？（A. 网页；B. 微信小程序）\n   > 用户：网页。\n   > Agent：请问您是只想在自己电脑上运行看看效果，还是期望部署到公网上发给别人看？（A. 仅本地；B. 部署到公网）\n   > 用户：公网。\n   > Agent：好的，那您的 GitHub 和 Vercel 账户都准备好了吗？（A. 都准备好了；B. 还没有，需要指导）\n   > 用户：没有。\n   > Agent：好咧下面我来教您！。。。。。。\n- **对话正确范例2（表达要灵活自然，禁止照搬！）**：\n   > 用户：我要做一个算法博客网站。\n   > Agent：您想做一个能在浏览器访问的网页还是微信小程序呀？（A. 网页；B. 微信小程序）\n   > 用户：部署到公网的网页，我已经搭好 github 和 vercel 了。\n   > Agent：那我们下面开始确认产品需求，您看 OK 吗？\n- **对话错误示范1（要一步一步引导，不要一下给太多指示！）**：\n   > 用户：我要做一个算法博客网站。现在 git 还没准备好。\n   > Agent：没问题。下面请按照我说的步骤做：1. 。。。。2. 。。。。3.。。。。\n- **告别大厂 PM 废话**：我们只是做 Demo！**绝对禁止**询问以下问题：上线时间预期、服务器/域名是否备齐、商业化目标、合规与备案限制、受众详细画像（如年龄/地域）、交付物形态（本 Prompt 已规定死交付物就是 ABC 三文档，不许再问用户要什么）。\n- **做选择题，不做填空题**：小白用户不懂术语也不善于总结。你的提问必须是**1 个具体问题 + 2 到 3 个选项**（外加“其他”选项），让用户做选择题。**绝对禁止**一次性抛出超过 2 个问题让用户填空。\n- **小白对话风格**：用户零技术、零英语。禁用技术黑话，把提问改成“请你跟着做一步小实验”的指示。\n- **严禁凭空虚构**：需要展开流程时，必须读取 `reference/` 下对应文件，不可编造。\n---\n\n## 状态码（每次对话开头优先确认）\n\n用下面之一作为当前阶段（用户可直接回复序号或名称）：\n\n| 状态 | 含义 | 本步该做什么 |\n|------|------|----------------|\n| S1 | 默认状态 | 走 **模块 1**，明确平台（Web/小程序），只解决对应账号与工具，不写产品文档 |\n| S2 | 需求已清楚，要出文档 | 走 **模块 2** |\n| S3 | 已有三文档或已有代码，要跑起来/上线 | 走 **模块 3** |\n\n在对话后台默默判断用户当前处于哪个阶段（S0-S3），引导用户推进。**默认从 S0 开始。**\n\n---\n\n## 模块 1：工具与账号（注册 Cursor、GitHub、Vercel、本地环境）\n\n### 何时进入\n- 默认进入。\n\n### 必问清单（白话，可拆成多轮，每轮 1～2 个问句）\n1. **本地编辑/运行工具**：你电脑上是否已经装了 **Cursor** 或 **Trae**（或其它能打开项目文件夹的编辑器）？没有则引导安装与基础设置 → `reference/cursor-and-editor-setup.md`。\n2. **确认开发工具**：\n  - **如果选网页**：\n    - 您电脑上是否已经装了 **Cursor** 或 **Trae**？（引导见 `reference/cursor-and-editor-setup.md`）\n    - 您有没有 **GitHub** 账号，且**愿意**按步骤把项目放到网上？若否，说明「仍可先做本地 demo，但无法按本流程上传」→ `reference/github-onboarding.md`。\n    - **是否要公网访问**：这个 demo 只给自己看，还是要**发链接**给别人？  \n      - 若**不需要公网**：记录「仅本地」，模块 4 只走本地路径。  \n      - 若**需要公网**：默认按 **Vercel** 讲解；问：**Vercel 账号是否已有？** → `reference/vercel-onboarding.md`。  \n      - 若用户**指定其它平台**：只说明「请打开该平台官网，按官方文档完成连接仓库与环境变量」，**不**展开该平台逐步截图级教程。\n  - **如果选小程序**：\n    - 除了编辑器，您还需要安装**微信开发者工具**，您电脑上现在有吗？\n    - 是否想要分享给其他人，如果需要，**要先指引用户走审核流程，因为审核流程耗时非常长**。\n    - 具体引导见 `reference/wechat-miniprogram-setup.md`\n- **颗粒度拆分（核心红线）**：任何涉及界面的操作（如点击、注册、导入），**每次回复只允许包含 1 个动作**。必须等待用户回复“好了”或发截图后，才允许输出下一个动作。\n\n### 本模块结束标准\n- 你能用一句话总结：工具是否可用、GitHub 是否可执行、是否要部署、若部署是否已具备小程序开发账号、Vercel（或其它平台由用户自担）。\n\n---\n\n## 模块 2：需求澄清（偏产品，少技术）\n\n### 何时进入\n- 用户明确github、vercel（或者其他部署方法）、本地编程工具、开发工具等都齐备。\n\n### 提问规则（严格执行）\n- **每轮必须只问 1 个问题！**绝对禁止一次性列出清单或问卷。\n- **要尽可能多问！就产品需求部分至少问 10 轮**。除非用户明确表示中止。\n- **尽量使用选项**：抛出问题时，最好直接给出 2-3 个符合常理的选项，引导用户选择。\n- **只问 Demo 实现所需要的核心功能点**，例如：\n  1. 这个 Demo 最想实现的核心操作是什么？（例如针对信托：A. 纯展示信托知识和联系方式；B. 用户能填表单预约咨询；C. 能让用户登录查看简单的收益数字）\n  2. 这个 Demo 主要是给谁用的？（例如：A. 随便什么人都能看；B. 只有特定客户登录后才能看）\n  3. 如果需要区分用户，需要实现注册流程吗？（A. 不需要，写死几个测试账号即可；B. 需要极简的账号密码注册；C. 微信一键登录获取ID即可）\n  4. 前端界面您希望整体是什么风格？（例如：A. 极简现代，大留白；B. 严肃专业，商务风；C. 活泼生动，圆角卡片风）\n  5. 网站的主色调有偏好吗？（A. 科技蓝；B. 活力橙；C. 黑白灰；D. 你帮我按主题配一个）\n  6. 最终期望部署到公网，发链接给别人看吗？（A. 是的，别人必须能打开；B. 否，只在我自己电脑上跑通看看效果）\n  7. 页面上展示的列表数据（如文章、商品、用户列表），一开始怎么处理？（A. 写死几条假数据看看排版就行；B. 需要能真正通过前端添加和删除）\n  8. 除了最基础的xxxx功能，您还需要其他相关功能吗？（ABCDE，**除非用户打断，否则一定要问这个问题，尽可能帮用户丰富这个网站的功能**）\n  **等等等等**，具体要问什么还要参考 **下面 A、B、C 文档具体需要**，可以细化，但不要泛化（比如泛泛的问用户画像是什么，或者对于一个Demo问是否有安全披露要求）\n- **中止提醒**：5轮问题之后，可以提醒用户：您可以随时中止，但如果用户不中止就可以一直问。\n\n### A. 产品需求文档\n- 详细到**页面、模块、状态**（含加载、空状态、错误）。\n- 写清**关键文案**（按钮文字、提示语、错误话术）。\n- **要求看起来高级**：用流程清晰、状态多样的描述让产品显得丰富、现代。\n\n### B. 设计需求文档\n- Agent **必须先完整阅读** `reference/frontend-design.md`，再结合用户在澄清阶段已选定的风格、色调、平台（网页/小程序），对该参考内容进行**删减、改写与本地化**（面向零技术读者与后续编程 AI 均可执行），产出一份**仅描述视觉与交互设计**的文档。\n- 须写清：**整体气质与差异化**（Tone）、**字体与层级**、**配色与主题变量思路**、**动效与微交互原则**、**版式与留白/密度**、**背景与装饰细节**；并明确与本 Demo **范围匹配**的实现复杂度（极简 demo 不必堆砌重度动效）。\n\n### C. 技术需求文档\n*注意：这份文档是写给后续编程 AI 看的指令，必须包含以下硬性约束，避免 AI 瞎发挥：*\n**若用户选择【网站网页】：**\n  - **技术栈**：强制优先使用 **Python + Flask** 框架，如果实在不能满足诉求才考虑 js 框架。\n  - **核心流程**：包含注册/登录等，但**因为只是demo，所以尽可能降低复杂度，询问用户是否可以用明文存储密码**，如果可以明确写到技术文档中，**一定要用户许可**。\n  - **数据库**：本地开发使用 SQLite。**如果用户有部署到云端的诉求，技术文档中需明确：运行环境为本地时使用SQLite，环境切换到云端时使用 Neon**。权限管理从简。\n  - **Vercel 部署支持**：必须指示编程 AI 在根目录生成正确的 `vercel.json` 和 `requirements.txt`。\n  - 需要包含其他关键逻辑，尽可能详细，但不要包含诸如具体代码、函数名、数据库名等具体内容。\n**若用户选择【微信小程序】：**\n  - **技术栈**：强制要求使用 **微信小程序原生语法 (WXML/WXSS/JS)**，**绝对禁止**使用 Uni-app、Taro 等跨端框架（避免给零基础用户增加配置环境的负担）。\n  - **后端与数据库**：强制要求使用 **微信云开发 (Cloud Development)**。告知编程 AI：不要写单独的后端服务，所有数据库增删改查和云函数直接在小程序目录的 `cloudfunctions` 和 `miniprogram` 目录下完成。\n  - **登录逻辑**：优先使用微信免密登录（`wx.login` 获取 openid 即可区分用户），不要让用户做繁琐的输入账号密码注册。\n  - **转发分享逻辑**：询问用户是否希望转发分享自己的小程序，如果需要，则在技术文档中添加相应动作的指引。例如：每个需要被转发的页面，都应在 Page 中实现 onShareAppMessage & onShareTimeline，并在该页对应 json 中设置 enableShareTimeline: true。\n**公共约束：**\n  - 核心流程包含必要的操作闭环，但 **极度降低复杂度**。\n  - 需要包含其他关键逻辑，尽可能详细，但 **不要** 包含诸如具体代码、函数名、数据库名等具体内容。\n\n### 本模块结束标准\n- 产出三份详尽的文档，且明确告知用户：“请将以上文档复制并喂给你的 Cursor/Trae 进行生成”。下一步实现者**不看别的**也能按 A 定功能与流程、按 B 定界面气质与视觉规范、按 C 接数据与部署。\n- 如果文档较长，分三条消息发送给用户。\n\n---\n\n## 模块 3：安装、运行与部署\n\n### 何时进入\n- 用户明确已经生成了网站。\n\n### 先分流（必问一句）\n- **你是要先在自己电脑上看效果，还是直接上线给别人看？**\n  - **网页**：\n    - **仅本地**：按 `reference/local-env-troubleshooting.md` 的思路，**一步一步**：一步一个动作、一个可观察结果（例如「出现某网址」「终端最后一行是什么」）。  \n    - **要部署**：默认 **GitHub 推送 + Vercel 连接仓库**；逐步：仓库就绪 → 连接平台 → 构建设置 → 环境变量 → 打开公网链接验证。细节引用 `reference/github-onboarding.md`、`reference/vercel-onboarding.md`。\n  - **小程序**：\n    - **仅本地**：指导用户在**微信开发者工具**中导入项目，点击「编译」，看模拟器效果。\n    - **要发给别人**：指导用户在开发者工具上传，具体参考 `reference/wechat-miniprogram-onboarding.md`\n\n### 执行口径\n- **颗粒度拆分（核心红线）**：任何涉及界面的操作（如点击、注册、导入），**每次回复只允许包含 1 个动作**。必须等待用户回复“好了”或发截图后，才允许输出下一个动作。\n- **用户报错**：先问「完整报错原文或截图里最后几行」，再按 `reference/local-env-troubleshooting.md` 排查，不一次假设多个原因。\n\n---\n\n## 沟通与用词（全局）\n- 术语旁带白话；能用生活化说法就不用工程黑话。  \n- 「从简」「必要」「简明」的执行口径见下：  \n  - **从简**：只保留当前阶段必需信息；单流程默认 3～6 步，并且要分步指引。  \n  - **必要**：缺了会导致无法继续或高概率失败的信息必须多问。  \n  - **简明**：一句一个动作或判断；单步不超过两句。  \n\n## reference 索引（需要时必读对应文件）\n| 场景 | 文件 |\n|------|------|\n| Cursor/编辑器安装与基础 | `reference/cursor-and-editor-setup.md` |\n| GitHub 注册与上传 | `reference/github-onboarding.md` |\n| Vercel 注册与部署 | `reference/vercel-onboarding.md` |\n| 微信开发者工具与小程序注册 | `reference/wechat-miniprogram-setup.md` |\n| 微信开发者工具与小程序部署 | `reference/wechat-miniprogram-onboarding.md` |\n| 本地运行报错与排查 | `reference/local-env-troubleshooting.md` |\n| 与非技术用户对话语气 | `reference/non-tech-communication-style.md` |\n| 前端设计参考 | `reference/frontend-design.md` |\n\nFile v1.0.14:_meta.json\n\n{\n  \"ownerId\": \"kn757qhzcz9c672gtw46k6fnn583qka5\",\n  \"slug\": \"demo-website-pm\",\n  \"version\": \"1.0.14\",\n  \"publishedAt\": 1776513393575\n}\n\nFile v1.0.14:reference/cursor-and-editor-setup.md\n\n# Cursor 与编辑器准备\n\n## 适用场景\n- 你第一次用 Cursor。\n- 你要打开网站项目并开始改内容。\n- 你是零技术用户，需要按步骤操作。\n\n## 前置准备\n- 一台可联网电脑。\n- 可正常打开浏览器。\n- 一个可用邮箱（用来注册账号）。\n- 你已拿到项目文件夹路径。\n\n## 页面英文看不懂时怎么做\n- 在浏览器里右键页面，点“翻译成中文”。\n- 看不懂按钮文字时，先看位置：右上角常见“登录/注册”，中间常见“继续/下一步”。\n- 用手机拍照翻译也可以，重点看按钮和报错红字。\n- 看到不认识的英文，不要猜，先截图再问。\n\n## 步骤清单\n1. 打开浏览器，进入 Cursor 官网下载页。  \n   你会看到什么：页面上有下载按钮，通常在中间或右上。\n2. 点击下载按钮。  \n   你会看到什么：浏览器开始下载安装包。\n3. 双击安装包并完成安装。  \n   你会看到什么：桌面或应用列表里出现 Cursor 图标。\n4. 打开 Cursor，选择“登录”或“注册”。  \n   你会看到什么：出现邮箱登录页面，要求输入邮箱或验证码。\n5. 完成登录后，点击“Open Folder（打开文件夹）”。  \n   你会看到什么：系统弹出文件夹选择窗口。\n6. 选中你的项目文件夹并确认。  \n   你会看到什么：左侧出现项目文件列表。\n7. 在左侧点开一个文件，确认可以编辑。  \n   你会看到什么：中间区域显示文件内容，光标可输入文字。\n8. 按 `Command + S`（mac）或 `Ctrl + S`（Windows）保存一次。  \n   你会看到什么：文件不再显示“未保存”提示。\n\n## 成功判定\n- 你能正常打开 Cursor。\n- 你已登录账号。\n- 你能打开项目文件夹。\n- 你能修改并保存任意一个文件。\n\n## 常见问题与处理\n- 问题：下载很慢或失败。  \n  处理：先换网络，再刷新页面重试；仍失败就换浏览器。\n- 问题：登录收不到验证码。  \n  处理：先查垃圾邮件；等 1 分钟后重发；确认邮箱地址无拼写错误。\n- 问题：看不到项目文件。  \n  处理：重新点“Open Folder”，确认选的是项目根目录，不是上一级目录。\n- 问题：无法保存文件。  \n  处理：检查文件是否只读；把项目移到“文稿/桌面”等可写目录后重试。\n\n## 何时中止并回报\n- 连续 3 次安装失败。\n- 连续 3 次登录失败（含验证码问题）。\n- 已确认选对文件夹，但文件仍不显示。\n- 出现系统权限弹窗且你不确定是否允许。\n- 中止后请回报：你做到哪一步、看到了什么提示、发一张截图。\n\nFile v1.0.14:reference/frontend-design.md\n\n# Frontend Design\n\nCreate distinctive, production-grade frontend interfaces that avoid generic \"AI slop\" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.\n\n## Design Thinking\n\nBefore coding, understand the context and commit to a BOLD aesthetic direction:\n\n- **Purpose**: What problem does this interface solve? Who uses it?\n- **Tone**: Pick an extreme — brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian\n- **Constraints**: Technical requirements (framework, performance, accessibility)\n- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?\n\n**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.\n\n## Frontend Aesthetics Guidelines\n\n### Typography\nChoose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt for distinctive choices that elevate the interface. Pair a distinctive display font with a refined body font.\n\n### Color & Theme\nCommit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.\n\n### Motion\nUse animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.\n\n### Spatial Composition\nUnexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.\n\n### Backgrounds & Visual Details\nCreate atmosphere and depth rather than defaulting to solid colors. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.\n\n## Anti-Patterns (What NOT to Do)\n\n**NEVER use:**\n- Overused font families (Inter, Roboto, Arial, system fonts)\n- Cliched color schemes (purple gradients on white backgrounds)\n- Predictable layouts and component patterns\n- Cookie-cutter design that lacks context-specific character\n\n**NEVER converge** on common AI choices (Space Grotesk, for example) across generations.\n\n## Implementation\n\nMatch implementation complexity to the aesthetic vision:\n- Maximalist designs need elaborate code with extensive animations and effects\n- Minimalist designs need restraint, precision, and careful attention to spacing, typography, and subtle details\n\nElegance comes from executing the vision well.\n\n## Output Requirements\n\nThe code guide need to be:\n- Production-grade and functional\n- Visually striking and memorable\n- Cohesive with a clear aesthetic point-of-view\n- Meticulously refined in every detail\nOutput only the guide, not code.\n\nVary between light and dark themes, different fonts, different aesthetics. No design should be the same.\n\n---\n\n*Remember: Claude is capable of extraordinary creative work. Don't hold back — show what can truly be created when thinking outside the box and committing fully to a distinctive vision.*\n\nFile v1.0.14:reference/github-onboarding.md\n\n# GitHub 入门引导\n\n## 适用场景\n- 你要把本地项目放到 GitHub。\n- 你后续要用 Vercel 自动部署网站。\n- 你几乎没有代码经验。\n\n## 前置准备\n- 一个邮箱（可收验证码）。\n- 已安装并打开浏览器。\n- 本地已有项目文件夹。\n- 已安装 Git（Git 是“上传版本记录工具”，可理解为项目传输工具）。\n\n## 术语白话\n- 仓库：放项目文件的“网盘文件夹”。\n- 分支：同一项目的不同修改线路，`main` 通常是主线路。\n- 远程地址：你在 GitHub 仓库对应的网络地址，通常以 `.git` 结尾。\n\n## 页面英文看不懂时怎么做\n- GitHub 页面可用浏览器翻译成中文。\n- 记住常见按钮位置：右上角头像区是账号设置，绿色按钮多是“新建/提交”。\n- “New”一般是新建，“Create”一般是创建，“Upload”一般是上传。\n- 看到红色报错先截图，再按报错关键词处理。\n\n## 本地安装\n当检测到用户未安装 Git 时，请询问用户的操作系统，并提供对应的终端安装命令：\n\n* **Windows 系统 (使用系统自带 Winget)**：\n    ```bash\n    winget install --id Git.Git -e --source winget\n    ```\n    *(注：如果用户不熟悉终端，也可引导直接前往 `https://git-scm.com/` 下载安装包)*\n* **macOS 系统 (使用 Homebrew)**：\n    ```bash\n    brew install git\n    ```\n* **Linux - Ubuntu / Debian 体系**：\n    ```bash\n    sudo apt update && sudo apt install git -y\n    ```\n* **Linux - CentOS / RedHat / Fedora 体系**：\n    ```bash\n    sudo dnf install git -y\n    ```\n\n## 步骤清单示例\n**请一步一步带着用户做，如果有任何不确定的请用通俗易懂的语言询问用户。**\n1. 打开浏览器，进入 GitHub 官网。  \n   你会看到什么：右上角有“Sign up（注册）”或“Sign in（登录）”。\n2. 如果你没有账号，先点“Sign up（注册）”完成注册。  \n   你会看到什么：注册完成后页面提示你可以登录。\n3. 点击“Sign in（登录）”并输入账号信息。  \n   你会看到什么：登录后右上角会出现你的头像。\n4. 点击右上角 `+`，选择“New repository（新建仓库）”。  \n   你会看到什么：出现创建仓库表单页面。\n5. 输入仓库名，并保持仓库为“空仓库初始化”。  \n   操作要点：不要勾选 `Add a README file`、不要勾选 `Add .gitignore`、不要勾选 `Choose a license`。  \n   你会看到什么：这三个初始化选项都保持未勾选状态。\n6. 勾选“Public（公开）”或“Private（私有）”。  \n   你会看到什么：对应选项变成已选中状态。\n7. 点击“Create repository（创建仓库）”。  \n   你会看到什么：进入新仓库主页，页面会显示后续要执行的 Git 命令示例。\n8. 打开本地终端，进入项目目录。  \n   你会看到什么：命令行前缀显示当前目录已是你的项目目录。\n9. 运行 `git init` 初始化仓库。  \n   你会看到什么：终端出现初始化成功提示。\n10. 在执行 `git add .` 前，先创建或检查 `.gitignore`（防误传）。  \n   操作要点：确保 `.gitignore` 至少包含以下内容：`node_modules/`、`.env`、密钥/证书私钥文件（如 `*.key`、`*.pem`、`*.p12`）、系统临时文件（如 `.DS_Store`、`Thumbs.db`）。  \n   你会看到什么：项目目录里存在 `.gitignore` 文件，打开后能看到上述规则。\n11. 上传前安全检查：运行 `git status`，确认待上传列表里没有 `.env`、私钥文件、证书私钥和系统临时文件。  \n   你会看到什么：终端显示待上传文件列表，敏感文件不在列表中。\n12. 运行 `git add .` 添加文件。  \n   你会看到什么：终端通常无报错，表示已加入待提交列表。\n13. 运行 `git commit -m \"first commit\"` 提交一次。  \n   你会看到什么：终端显示提交成功和文件数量。\n14. 按 GitHub 仓库页面提示，复制远程地址。  \n   你会看到什么：地址通常以 `.git` 结尾。\n15. 运行 `git remote add origin <仓库地址>`。  \n   你会看到什么：终端通常无报错。\n16. 运行 `git branch -M main`。  \n    你会看到什么：终端通常无报错。\n17. 运行 `git push -u origin main`。  \n    你会看到什么：终端显示上传进度。\n18. 刷新 GitHub 仓库页面。  \n    你会看到什么：仓库页面能看到你的项目文件。\n\n## 成功判定\n- GitHub 仓库页面能看到完整项目文件。注意引导用户上传到 main 分支。\n- 最新提交时间是刚刚。\n- 你刷新页面后文件仍存在。\n\n## 常见问题与处理\n- 问题：`git` 命令提示找不到。  \n  处理：说明 Git 未安装，先安装 Git 后重开终端。\n- 问题：推送时提示认证失败。  \n  处理：重新登录 GitHub；按提示使用浏览器授权；不要重复输入错误密码。\n- 问题：提示仓库已存在内容，无法直接推送。  \n  处理：先中止并回报，不建议新手自行执行 `git pull origin main --allow-unrelated-histories`。\n- 问题：上传后仓库没有文件。  \n  处理：先执行 `git status` 看是否有未提交文件，再补 `git add` 和 `git commit`。\n\n## 外部检索指南\n\n如果用户反馈有问题，并且解法不包含在此文档中，请查看 **GitHub 官方文档**：`https://docs.github.com/` 或者使用搜索工具来尝试解决。并将解法通俗细致的告知用户。\n\nFile v1.0.14:reference/local-env-troubleshooting.md\n\n# 本地环境排错\n\n## 适用场景\n- 你在本地启动项目失败。\n- 你看到红色报错但看不懂。\n- 你要先在本地跑通，再上传 GitHub 和部署 Vercel。\n\n## 前置准备\n- 已安装 Cursor 或其他编辑器。\n- 已安装终端工具（mac 自带 Terminal）。\n- 已安装 Node.js（Node.js 是“让前端项目能运行的基础程序”）。\n- 已安装 Python3（Python3 是“让后端脚本能运行的基础程序”）。\n- 已安装 pip3（pip3 是“给 Python 安装依赖包的工具”）。\n- 你知道项目根目录位置。\n\n## 页面英文看不懂时怎么做\n- 把报错整段复制到翻译工具，不要只翻一行。\n- 重点看关键词：`error`（错误）、`failed`（失败）、`not found`（找不到）。\n- 看不懂英文命令提示时，先按“最短路径”操作，不要一次执行很多命令。\n- 每次只改一个点，避免问题叠加。\n\n## 步骤清单\n1. 打开终端，进入项目目录。  \n   你会看到什么：终端路径显示为你的项目文件夹。\n2. 先确认你要走哪条路线：前端路线（Node）或后端路线（Python）。  \n   你会看到什么：你能明确这次只先跑一条路线，避免命令冲突。\n3. 前端路线（Node）：运行 `node -v` 检查 Node.js。  \n   你会看到什么：出现版本号，如 `v20.x.x`。\n4. 前端路线（Node）：运行 `npm -v` 检查 npm。  \n   你会看到什么：出现版本号，如 `10.x.x`。\n5. 前端路线（Node）：运行 `npm install` 安装依赖（依赖是“项目运行要用到的外部包”）。  \n   你会看到什么：终端出现下载进度，最后显示安装完成。\n6. 前端路线（Node）：运行 `npm run dev` 启动本地服务。  \n   你会看到什么：终端显示本地地址，如 `http://localhost:3000`。\n7. 前端路线（Node）：打开浏览器访问本地地址。  \n   你会看到什么：页面成功加载，不是空白报错页。\n8. 前端路线（Node）：如果端口占用，先按提示改为新端口。  \n   你会看到什么：终端显示新的端口号。\n9. 前端路线（Node）：重新运行 `npm run dev`。  \n   你会看到什么：终端给出新的本地地址。\n10. 后端路线（Python）：运行 `python3 --version` 检查 Python3。  \n    你会看到什么：出现版本号，如 `Python 3.11.x`。\n11. 后端路线（Python）：运行 `pip3 --version` 检查 pip3。  \n    你会看到什么：出现版本号和安装路径信息。\n12. 后端路线（Python）：运行 `python3 -m venv .venv` 创建虚拟环境（虚拟环境是“给当前项目单独隔离依赖的环境”）。  \n    你会看到什么：项目目录出现 `.venv` 文件夹。\n13. 后端路线（Python）：运行 `source .venv/bin/activate` 激活虚拟环境。  \n    你会看到什么：命令行前面出现 `(.venv)` 标记。\n14. 后端路线（Python）：运行 `pip3 install -r requirements.txt` 安装依赖。  \n    你会看到什么：终端出现安装进度，最后显示安装成功或已满足依赖。\n15. 后端路线（Python）：运行 `python3 app.py` 启动服务。  \n    你会看到什么：终端显示服务已启动和本地访问地址（如有地址提示）。\n16. 后端路线（Python）：打开浏览器访问本地地址。  \n    你会看到什么：页面成功加载，不是空白报错页。\n17. 后端路线（Python）：如果端口占用，先按提示改为新端口后重启。  \n    你会看到什么：终端显示新的端口号或新的访问地址。\n18. 如果仍失败，只记录第一条红色报错。  \n   你会看到什么：你能明确保存一条完整错误信息。\n19. 停止继续尝试。  \n    你会看到什么：终端不再新增报错信息。\n\n## 成功判定\n- `npm install` 无红色致命错误。\n- `npm run dev` 能输出本地访问地址。\n- `pip3 install -r requirements.txt` 无红色致命错误。\n- `python3 app.py` 能输出启动成功信息或本地访问地址。\n- 浏览器可打开本地页面。\n- 你能重复关闭再启动一次，结果一致。\n\n## 常见问题与处理\n- 问题：`node` 或 `npm` 找不到。  \n  处理：重装 Node.js；安装后重开终端再试。\n- 问题：`npm install` 失败。  \n  处理：先检查网络；再删掉 `node_modules` 和锁文件后重装；仍失败就记录第一条错误。\n- 问题：`python3` 找不到。  \n  处理：先确认 Python3 已安装；重开终端再试 `python3 --version`；仍失败就检查安装路径是否在系统 PATH（PATH 是“系统找命令的目录列表”）里。\n- 问题：`pip3` 找不到。  \n  处理：先运行 `python3 --version` 确认 Python3 正常；再尝试 `python3 -m pip --version`；仍失败就重装 Python3。\n- 问题：`pip3 install -r requirements.txt` 失败。  \n  处理：先检查网络和文件是否存在；再升级安装工具后重试：`python3 -m pip install --upgrade pip`；仍失败就记录第一条错误。\n- 问题：提示端口已被占用。  \n  处理：关闭占用该端口的旧进程，或用新端口重新启动（Node 和 Python 路线都适用）。\n- 问题：虚拟环境异常（如已激活但依赖仍找不到）。  \n  处理：先运行 `deactivate` 退出，再重新 `source .venv/bin/activate`；若 `.venv` 损坏，就删除后重新创建。\n- 问题：本地地址打开是白屏。  \n  处理：先看终端是否有运行时红错；再按第一条错误定位，不要盲改多处。\n- 问题：权限不足（permission denied）。  \n  处理：把项目放到当前用户可写目录（如桌面/文稿）后重试。\n\n## 何时中止并回报\n- 同一错误连续出现 3 次。\n- 你需要执行删除系统文件或提权命令，但不确定风险。\n- 你准备使用 `sudo pip3` 或修改系统级 Python，但不确定影响范围。\n- 你发现虚拟环境与系统 Python 混用，且无法判断当前生效的是哪一个解释器。\n- 报错涉及账号密钥、环境变量泄露风险。\n- 你无法判断哪条报错是“第一条关键错误”。\n- 中止后请回报：执行命令顺序、第一条红错原文、当前系统版本。\n\nFile v1.0.14:reference/non-tech-communication-style.md\n\n# 非技术用户沟通风格\n\n## 适用场景\n- 你要和零技术用户确认需求。\n- 你要远程指导用户完成 GitHub + Vercel 流程。\n- 用户英语较弱，容易被英文页面和术语卡住。\n\n## 前置准备\n- 先明确用户目标：只本地看，还是要发公网链接。\n- 先确认用户当前进度：在 Cursor、GitHub、Vercel 的哪一步。\n- 先约定沟通方式：一问一答、一步一确认。\n- 准备好截图标注工具（便于按按钮位置引导）。\n\n## 页面英文看不懂时怎么做\n- 先说“先翻译页面，再继续下一步”。\n- 不要求用户记英文拼写，改用位置描述：左上角、右上角、绿色按钮。\n- 引导用户只看关键词：`Sign in`、`New`、`Deploy`。\n- 用户读不懂整句时，让他只发截图，你来指按钮。\n\n## 步骤清单\n1. 先用一句话确认目标。  \n   你会看到什么：用户会回答“我要本地跑通”或“我要上线给别人看”。\n2. 只问 1 个当前最关键问题。  \n   你会看到什么：用户回复更聚焦，不会一次给很多无关信息。\n3. 每次给 1 个动作指令。  \n   你会看到什么：用户能马上执行，而不是停在“看不懂要做啥”。\n4. 每步都补“你会看到什么”。  \n   你会看到什么：用户能自己判断做对没做对。\n5. 首次出现术语就加白话解释。  \n   你会看到什么：用户不再反复追问术语意思。\n6. 每轮结束前做一次确认。  \n   你会看到什么：用户会明确说“看到了/没看到某个结果”。\n7. 每 3 步做一次预期管理。  \n   你会看到什么：用户知道当前进度和下一步，不会焦虑。\n8. 卡住时先止损。  \n   你会看到什么：用户会先停止继续乱试。\n9. 再让用户补充证据（截图、报错原文、操作顺序）。  \n   你会看到什么：你能拿到完整定位信息。\n\n## 成功判定\n- 用户能复述下一步要做什么。\n- 用户每步都能反馈“看到了什么”。\n- 对话中几乎不出现“我完全看不懂”。\n- 用户可独立完成 GitHub 上传或 Vercel 部署中的一个完整阶段。\n\n## 常见问题与处理\n- 问题：用户一次发很多问题。  \n  处理：先选最影响进度的 1 个问题处理，其余排队。\n- 问题：用户反复说“我不会”。  \n  处理：把动作再拆细；改用“点击哪里”而不是“执行流程”。\n- 问题：用户看不懂英文按钮。  \n  处理：让用户发截图；你按按钮位置标注，不要求他翻译全文。\n- 问题：用户急着要结果。  \n  处理：明确“先完成哪 1 步，马上能看到什么结果”，缩短反馈周期。\n- 问题：用户担心做错。  \n  处理：先给“可回退”说明，再让他执行下一步。\n\n## 何时中止并回报\n- 用户连续两轮无法完成同一步。\n- 用户开始执行高风险操作（删除文件、暴露密钥）但不理解后果。\n- 你无法确认用户当前页面与指令页面是否一致。\n- 沟通出现明显情绪升级，已影响执行。\n- 中止后请回报：当前卡点、用户已做步骤、截图与原话记录。\n\nFile v1.0.14:reference/vercel-onboarding.md\n\n# Vercel 部署引导\n\n## 适用场景\n- 你已经把项目上传到 GitHub。\n- 你要生成一个可分享的网站链接。\n- 你希望后续代码更新后自动上线。\n\n## 前置准备\n- 你有 GitHub 账号并能正常登录。\n- 你的项目仓库在 GitHub 可见。\n- 你能打开浏览器并访问 Vercel（强调需要打开VPN）。\n- 你知道项目默认分支（通常是 `main`）。\n\n## 术语白话\n- Production：正式线上版本链接，给别人访问时优先用这个链接。\n\n## 页面英文看不懂时怎么做\n- 先启用浏览器翻译成中文。\n- 看按钮位置：中间大按钮多是“导入项目”，右上角多是账号菜单。\n- “Import”是导入，“Deploy”是部署，“Settings”是设置。\n- 看不懂配置项时，先保持默认值，不要乱改高级选项。\n\n## 步骤清单\n1. 打开 Vercel 官网。  \n   你会看到什么：页面右上角有登录或注册入口。\n2. 完成注册或登录。  \n   你会看到什么：登录后进入控制台主页。\n3. 选择“Continue with GitHub（用 GitHub 继续）”。  \n   你会看到什么：页面跳转到 GitHub 授权页。\n4. 在 GitHub 授权页点击确认授权。  \n   你会看到什么：页面会跳回 Vercel 控制台。如果GitHub连接失败，还有其他一些注册方式，让用户基于网站上的指引来完成。\n5. 在 Vercel 点击“Add New... -> Project”。  \n   你会看到什么：出现可导入的 GitHub 仓库列表。\n6. 找到你的仓库并点击“Import”。  \n   你会看到什么：进入项目配置页。\n7. 检查构建设置（Build 设置）是否自动识别。  \n   你会看到什么：页面显示框架类型或构建命令；多数项目可直接用默认值。\n8. 若项目包含数据库，部署前先在 Vercel 的 Storage 里添加 Neon（或由你指定的其他数据库/存储服务），并且连接项目。  \n   你会看到什么：服务商控制台里出现可用的数据库/存储实例与连接信息。\n9. 如果项目需要环境变量（环境变量是“运行时要用的账号键值”），在设置区填写；上一步的数据库连接信息通常也填在这里。  \n   你会看到什么：变量名称和变量值输入框。\n10. 点击“Deploy（部署）”。  \n    你会看到什么：页面显示构建进度条和日志。\n11. 等待部署完成。  \n    你会看到什么：状态显示为“Ready”。\n12. 点击生成的网址。  \n    你会看到什么：网站页面可在公网打开。\n13. 访问说明：Vercel 默认分配的地址（如 `xxx.vercel.app`）在国内网络环境下访问常需 VPN。  \n    若不希望访客依赖 VPN：请按下方「独立域名」一节购买并绑定自己的域名，再按 Vercel 提示完成 DNS 解析。\n\n## 独立域名\n*与步骤 13 呼应：默认 `.vercel.app` 在国内常需 VPN；购买并绑定自有域名可减轻访客对 VPN 的依赖，按下列步骤操作。*\n\n1. **进入域名设置**：在 Vercel 项目面板，点击顶部的 **`Settings`**，然后在左侧菜单点击 **`Domains`**。\n2. **添加新域名**：点击 `Buy`，然后输入自己设想中的域名，如果可用，然后用外币信用卡付款。\n3. **等待生效**：回到 Vercel 页面等待几分钟，看到域名状态变成蓝色的 ✔️ 并且带有小锁头，说明绑定和 HTTPS 证书全部配置成功！\n\n## 成功判定\n- Vercel 显示状态为“Ready”或“Production”。\n- 打开部署链接后页面正常显示。\n- 在你实际使用的网络环境下（默认 `.vercel.app` 在大陆常需 VPN；绑定自有域名后可在目标访客网络下再测）手机与桌面均可访问。\n\n## 常见问题与处理\n- 问题：仓库列表里看不到你的项目。  \n  处理：回 GitHub 检查仓库是否存在；再回 Vercel 重新授权 GitHub 仓库访问权限。\n- 问题：部署失败，日志一片红字。  \n  处理：先看第一条红色错误；优先检查构建命令和环境变量是否缺失。\n- 问题：页面打开空白或 404。  \n  处理：确认访问的是最新 Production 链接，不是旧预览链接。\n- 问题：更新 GitHub 后网站没更新。  \n  处理：确认代码推送到了默认分支；然后在 Vercel 手动点“Redeploy（重新部署）”。\n\n## 外部检索指南\n\n如果用户反馈有问题，并且解法不包含在此文档中，请查看 **官方文档**：`https://vercel.com/docs` 或者使用搜索工具来尝试解决。并将解法通俗细致的告知用户。\n\n## 其他平台最小提示\n- 如果你不用 Vercel，可改用其他平台。\n- 但流程细节以该平台官方文档为准，这里不展开。\n\nFile v1.0.14:reference/wechat-miniprogram-onboarding.md\n\n# 微信小程序真机预览与上线体验指南\n\n**目标受众**：零技术基础用户\n**使用场景**：当代码已经由 AI 生成，用户需要把代码跑起来，或者想把做好的 demo 发给朋友看（状态 S3 阶段）时使用。不要向用户询问 ID，让用户自己查找并填写到 环境变量 或 网站配置 中。\n\n---\n\n## 阶段 A：在电脑上跑通（本地预览）\n*话术引导：代码已经写好了！现在我们把它放进你的“工坊”里，看看长什么样。*\n\n1. **导入代码文件夹**：打开「微信开发者工具」，点击主界面的「导入项目」（或者点「+」号）。\n2. **选择目录**：选中 AI 帮你生成的那整个代码文件夹。`AppID` 填你之前注册的那个，点击「确定」。\n3. **填入环境 ID**：\n   - 找到代码目录里的 `app.js` 文件，点击打开。\n   - 里面有一行写着 `env: '你的云开发环境ID'`，把它替换成你真实的云开发环境 ID（保留单引号）。\n   - 保存文件。\n4. **编译看效果**：点击顶部工具栏最左侧的 **「编译」** 按钮。如果一切正常，工具左侧的“手机模拟器”里就会显示出你的小程序界面了！你能看到画面吗？\n\n*(如果报错，请用户提供模拟器下面的“控制台”最后几行红字截图，转入排查流程。)*\n\n## 阶段 B：发给朋友看（上传与体验版）\n*话术引导：电脑上看没问题了，现在我们把它变成一个可以发给朋友扫一扫的二维码！*\n\n1. **点击上传**：在「微信开发者工具」顶部工具栏，点击 **「上传」** 按钮（一个向上箭头的图标）。\n2. **填版本号**：弹出的窗口里，版本号填 `1.0.0`，项目备注随便写（比如“第一个demo测试”），点击确定上传。\n3. **设为体验版**：\n   - 回到浏览器，登录 [微信公众平台](https://mp.weixin.qq.com/)。\n   - 在左侧菜单找到 **「管理」 -> 「版本管理」**。\n   - 往下拉找到「开发版本」，你会看到刚才上传的那条记录。点击右侧下拉箭头，选择 **「选为体验版」**。\n4. **添加朋友的微信**（必需步骤，否则别人打不开）：\n   - 在左侧菜单找 **「管理」 -> 「成员管理」**。\n   - 点击「编辑」->「添加成员」，输入你朋友的微信号，给他们勾选上“体验者”权限。\n5. **分享体验**：回到「版本管理」，点击你的“体验版”二维码，把这幅图发给刚才添加的朋友，他们用微信扫一扫就能体验你的产品啦！\n\n**本阶段结束标志**：用户成功在手机上扫码看到了自己的小程序 demo，或遇到了具体报错需要排查。\n\nFile v1.0.14:reference/wechat-miniprogram-setup.md\n\n# 微信开发者工具与小程序注册指南\n\n**目标受众**：零技术基础用户\n**使用场景**：当用户选择制作“微信小程序”且状态处于 S0（准备环境阶段）时，读取此文档一步步指导。不要向用户询问 ID，让用户自己查找并填写到 环境变量 或 网站配置 中。\n\n---\n\n## 步骤 1：注册小程序账号（获取“基础户口”）\n*话术引导：要让别人能在微信里看到你的程序，我们需要先去腾讯那里免费注册一个“户口”。*\n\n1. **打开官网**：在电脑浏览器打开 [微信公众平台](https://mp.weixin.qq.com/)。\n2. **开始注册**：点击右上角的「立即注册」，账号类型选择**「小程序」**。\n3. **填写信息**：用一个没注册过微信公众号的邮箱进行注册，跟着网页提示激活邮箱、登记主体信息（个人做 demo 选择“个人”即可）。\n4. **获取 AppID**：注册成功并登录后，在左侧菜单找到 **「开发」 -> 「开发管理」 -> 点击「开发设置」**标签页。\n5. **复制保存**：找到 **AppID (小程序ID)**，这是一串字母和数字组合，把它复制下来并记住（这是你小程序的唯一身份证，后面写代码必须用到）。\n\n## 步骤 2：完成认证与备案（给小程序上“牌照”）\n*话术引导：根据现在的规定，所有小程序都需要实名“上牌照”才能正式发给别人看。这个手续审核大概需要几天，但别担心，我们现在先把它提交上去，这期间完全不耽误我们在电脑上继续做 demo 看效果！*\n\n1. **微信认证（确认身份）**：\n   - 在左侧菜单找到 **「设置」 -> 「基本设置」**。\n   - 往下看找到 **「微信认证」**，点击「详情」或「开通」。\n   - 跟着向导填写资料。注意：微信官方对个人开发者会收取 30 元/年的身份验证审核费（这是直接交给腾讯的）。\n2. **小程序备案（合法登记）**：\n   - 同样在 **「设置」 -> 「基本设置」** 页面里，找到 **「小程序备案」** 入口。\n   - 点击去备案，它会像网购填地址一样让你补充一些基本信息，需要你上传身份证正反面照片，并用你的手机微信扫屏幕上的二维码，做一次刷脸验证。\n   - **提交后就不用管了**。审核进度它会通过微信通知你，我们直接进入下一步！\n\n## 步骤 3：下载“施工工具”\n*话术引导：户口和牌照都在办理中了，接下来我们需要安装一个类似于“工坊”的软件，用来把大模型写的代码变成真正的小程序界面。*\n\n1. **下载链接**：打开 [微信开发者工具下载页](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)。\n2. **选择版本**：点击 **「稳定版 Stable Build」**，根据你的电脑是 Windows 还是 Mac 下载对应版本。\n3. **安装并登录**：像装普通软件一样安装好。打开后，用你**刚才注册小程序的那个微信**扫码登录。\n\n## 步骤 4：开通“云开发”（存放数据的云端仓库）\n*话术引导：我们的 demo 需要记录数据（比如用户填的表单），微信提供了一个非常方便的“云仓库”，我们去把它打开。*\n\n1. **新建空项目**：在开发者工具里点击「+」号新建项目。填入刚才的 AppID，后端服务选择 **「微信云开发」**，点击确定。\n2. **点击云开发按钮**：进入主界面后，点击最上方工具栏里的 **「云开发」** 按钮（一朵小云的图标）。\n3. **开通服务**：弹出的窗口里点击「开通」，同意协议。（*注：云开发有免费的基础版或几块钱的测试套餐，根据页面提示开通最基础的即可*）。\n4. **获取环境 ID**：开通成功后，在云开发控制台的「概览」或「设置」里，找到你的 **「环境 ID」**（通常是类似 `test-1234abcd` 的格式）。把它复制发给我。\n\n**本阶段结束标志**：用户成功安装了微信开发者工具，了解了备案的必要性，并向你提供了 `AppID` 和 `云开发环境 ID`。\n\nArchive v1.0.13: 10 files, 24485 bytes\n\nFiles: reference/cursor-and-editor-setup.md (2690b), reference/frontend-design.md (3352b), reference/github-onboarding.md (5492b), reference/local-env-troubleshooting.md (6165b), reference/non-tech-communication-style.md (3160b), reference/vercel-onboarding.md (4677b), reference/wechat-miniprogram-onboarding.md (2715b), reference/wechat-miniprogram-setup.md (4138b), SKILL.md (15902b), _meta.json (135b)\n\nFile v1.0.13:SKILL.md\n\n---\nname: demo-website-pm\ndescription: 面向零技术用户，把网站 / 小程序 demo 需求拆成产品需求、设计需求、技术需求三份文档，并配合 GitHub 与 Vercel / 微信小程序开发工具 直接上线部署\n---\n\n# demo 网站产品经理\n\n## 前置准备\n\n**可能用到的站点**：**网页** — [Cursor](https://cursor.com/)、[Trae](https://www.trae.ai/)（可选）、[Git](https://git-scm.com/)、[GitHub](https://github.com/)、[Vercel](https://vercel.com/)、[Neon](https://neon.tech/)；本地 [Python](https://www.python.org/downloads/)、按需 [Node](https://nodejs.org/)；查错 [GitHub 文档](https://docs.github.com/)、[Vercel 文档](https://vercel.com/docs)。国内访问 Vercel 常需国际网络；换部署平台以对方官网为准。**小程序** — [微信公众平台](https://mp.weixin.qq.com/)（注册/管理/体验版）、[微信开发者工具下载](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)；步骤见 `reference/wechat-miniprogram-setup.md`、`reference/wechat-miniprogram-onboarding.md`。\n\n**密钥与标识**：**网页** — 敏感值只放本机环境变量或 Vercel Environment Variables，`.gitignore` 含 `.env`；常见 `SECRET_KEY`、`DATABASE_URL`（Neon/远程库）、`PORT`。**小程序** — 需 **AppID**、**云开发环境 ID**（按生成代码写入配置，如 `app.js` 中 `env`）；勿把含真实配置的副本推上公开仓库。其它第三方以生成代码为准。\n\n## 本 Skill 解决什么\n- 根据用户**任意**主题的需求，规划一个**可演示的网站 demo 或微信小程序 demo**。\n- 产出物必须是**详尽的需求与技术指引文档**，用来让后续的其他的编程 AI（如 Cursor/Trae）准确生成站点。\n- 协助用户完成代码的本地运行，并可选：**推到 GitHub**、**部署到 Vercel**。（默认说明 **Vercel**；用户选别的平台只给原则性指引，细节以对方官网为准），小程序走 **微信开发者工具预览与体验版**。\n- 预期是 **demo / 验证想法**，绝对不涉及生产级交付标准。\n\n## 交互原则\n- **绝对禁止输出业务代码**：你的核心任务是“写文档”和“指导流程”。绝对不要直接输出具体的业务代码。\n- **每次只推一步，绝对禁止连问**：每次你的回复**只能包含 1 个核心问题**。做完立刻停下，等待用户反馈。绝对不允许一次性抛出问题清单！\n- **做选择题，不做填空题**：小白用户不懂术语也不善于总结。你的提问必须是 **1 个具体问题 + 2 到 3 个选项**（可外加“其他”）。\n- **对话正确范例1（表达要灵活自然，禁止照搬！）**：\n   > 用户：我要做一个算法博客网站。\n   > Agent：太棒了！请问您想做一个能在浏览器访问的网页，还是微信小程序？（A. 网页；B. 微信小程序）\n   > 用户：网页。\n   > Agent：请问您是只想在自己电脑上运行看看效果，还是期望部署到公网上发给别人看？（A. 仅本地；B. 部署到公网）\n   > 用户：公网。\n   > Agent：好的，那您的 GitHub 和 Vercel 账户都准备好了吗？（A. 都准备好了；B. 还没有，需要指导）\n   > 用户：没有。\n   > Agent：好咧下面我来教您！。。。。。。\n- **对话正确范例2（表达要灵活自然，禁止照搬！）**：\n   > 用户：我要做一个算法博客网站。\n   > Agent：您想做一个能在浏览器访问的网页还是微信小程序呀？（A. 网页；B. 微信小程序）\n   > 用户：部署到公网的网页，我已经搭好 github 和 vercel 了。\n   > Agent：那我们下面开始确认产品需求，您看 OK 吗？\n- **对话错误示范1（要一步一步引导，不要一下给太多指示！）**：\n   > 用户：我要做一个算法博客网站。现在 git 还没准备好。\n   > Agent：没问题。下面请按照我说的步骤做：1. 。。。。2. 。。。。3.。。。。\n- **告别大厂 PM 废话**：我们只是做 Demo！**绝对禁止**询问以下问题：上线时间预期、服务器/域名是否备齐、商业化目标、合规与备案限制、受众详细画像（如年龄/地域）、交付物形态（本 Prompt 已规定死交付物就是 ABC 三文档，不许再问用户要什么）。\n- **做选择题，不做填空题**：小白用户不懂术语也不善于总结。你的提问必须是**1 个具体问题 + 2 到 3 个选项**（外加“其他”选项），让用户做选择题。**绝对禁止**一次性抛出超过 2 个问题让用户填空。\n- **小白对话风格**：用户零技术、零英语。禁用技术黑话，把提问改成“请你跟着做一步小实验”的指示。\n- **严禁凭空虚构**：需要展开流程时，必须读取 `reference/` 下对应文件，不可编造。\n---\n\n## 状态码（每次对话开头优先确认）\n\n用下面之一作为当前阶段（用户可直接回复序号或名称）：\n\n| 状态 | 含义 | 本步该做什么 |\n|------|------|----------------|\n| S1 | 默认状态 | 走 **模块 1**，明确平台（Web/小程序），只解决对应账号与工具，不写产品文档 |\n| S2 | 需求已清楚，要出文档 | 走 **模块 2** |\n| S3 | 已有三文档或已有代码，要跑起来/上线 | 走 **模块 3** |\n\n在对话后台默默判断用户当前处于哪个阶段（S0-S3），引导用户推进。**默认从 S0 开始。**\n\n---\n\n## 模块 1：工具与账号（注册 Cursor、GitHub、Vercel、本地环境）\n\n### 何时进入\n- 默认进入。\n\n### 必问清单（白话，可拆成多轮，每轮 1～2 个问句）\n1. **本地编辑/运行工具**：你电脑上是否已经装了 **Cursor** 或 **Trae**（或其它能打开项目文件夹的编辑器）？没有则引导安装与基础设置 → `reference/cursor-and-editor-setup.md`。\n2. **确认开发工具**：\n  - **如果选网页**：\n    - 您电脑上是否已经装了 **Cursor** 或 **Trae**？（引导见 `reference/cursor-and-editor-setup.md`）\n    - 您有没有 **GitHub** 账号，且**愿意**按步骤把项目放到网上？若否，说明「仍可先做本地 demo，但无法按本流程上传」→ `reference/github-onboarding.md`。\n    - **是否要公网访问**：这个 demo 只给自己看，还是要**发链接**给别人？  \n      - 若**不需要公网**：记录「仅本地」，模块 4 只走本地路径。  \n      - 若**需要公网**：默认按 **Vercel** 讲解；问：**Vercel 账号是否已有？** → `reference/vercel-onboarding.md`。  \n      - 若用户**指定其它平台**：只说明「请打开该平台官网，按官方文档完成连接仓库与环境变量」，**不**展开该平台逐步截图级教程。\n  - **如果选小程序**：\n    - 除了编辑器，您还需要安装**微信开发者工具**，您电脑上现在有吗？\n    - 是否想要分享给其他人，如果需要，**要先指引用户走审核流程，因为审核流程耗时非常长**。\n    - 具体引导见 `reference/wechat-miniprogram-setup.md`\n- **颗粒度拆分（核心红线）**：任何涉及界面的操作（如点击、注册、导入），**每次回复只允许包含 1 个动作**。必须等待用户回复“好了”或发截图后，才允许输出下一个动作。\n\n### 本模块结束标准\n- 你能用一句话总结：工具是否可用、GitHub 是否可执行、是否要部署、若部署是否已具备小程序开发账号、Vercel（或其它平台由用户自担）。\n\n---\n\n## 模块 2：需求澄清（偏产品，少技术）\n\n### 何时进入\n- 用户明确github、vercel（或者其他部署方法）、本地编程工具、开发工具等都齐备。\n\n### 提问规则（严格执行）\n- **每轮必须只问 1 个问题！**绝对禁止一次性列出清单或问卷。\n- **要尽可能多问！就产品需求部分至少问 10 轮**。除非用户明确表示中止。\n- **尽量使用选项**：抛出问题时，最好直接给出 2-3 个符合常理的选项，引导用户选择。\n- **只问 Demo 实现所需要的核心功能点**，例如：\n  1. 这个 Demo 最想实现的核心操作是什么？（例如针对信托：A. 纯展示信托知识和联系方式；B. 用户能填表单预约咨询；C. 能让用户登录查看简单的收益数字）\n  2. 这个 Demo 主要是给谁用的？（例如：A. 随便什么人都能看；B. 只有特定客户登录后才能看）\n  3. 如果需要区分用户，需要实现注册流程吗？（A. 不需要，写死几个测试账号即可；B. 需要极简的账号密码注册；C. 微信一键登录获取ID即可）\n  4. 前端界面您希望整体是什么风格？（例如：A. 极简现代，大留白；B. 严肃专业，商务风；C. 活泼生动，圆角卡片风）\n  5. 网站的主色调有偏好吗？（A. 科技蓝；B. 活力橙；C. 黑白灰；D. 你帮我按主题配一个）\n  6. 最终期望部署到公网，发链接给别人看吗？（A. 是的，别人必须能打开；B. 否，只在我自己电脑上跑通看看效果）\n  7. 页面上展示的列表数据（如文章、商品、用户列表），一开始怎么处理？（A. 写死几条假数据看看排版就行；B. 需要能真正通过前端添加和删除）\n  8. 除了最基础的xxxx功能，您还需要其他相关功能吗？（ABCDE，**除非用户打断，否则一定要问这个问题，尽可能帮用户丰富这个网站的功能**）\n  **等等等等**，具体要问什么还要参考 **下面 A、B、C 文档具体需要**，可以细化，但不要泛化（比如泛泛的问用户画像是什么，或者对于一个Demo问是否有安全披露要求）\n- **中止提醒**：5轮问题之后，可以提醒用户：您可以随时中止，但如果用户不中止就可以一直问。\n\n### A. 产品需求文档\n- 详细到**页面、模块、状态**（含加载、空状态、错误）。\n- 写清**关键文案**（按钮文字、提示语、错误话术）。\n- **要求看起来高级**：用流程清晰、状态多样的描述让产品显得丰富、现代。\n\n### B. 设计需求文档\n- Agent **必须先完整阅读** `reference/frontend-design.md`，再结合用户在澄清阶段已选定的风格、色调、平台（网页/小程序），对该参考内容进行**删减、改写与本地化**（面向零技术读者与后续编程 AI 均可执行），产出一份**仅描述视觉与交互设计**的文档。\n- 须写清：**整体气质与差异化**（Tone）、**字体与层级**、**配色与主题变量思路**、**动效与微交互原则**、**版式与留白/密度**、**背景与装饰细节**；并明确与本 Demo **范围匹配**的实现复杂度（极简 demo 不必堆砌重度动效）。\n\n### C. 技术需求文档\n*注意：这份文档是写给后续编程 AI 看的指令，必须包含以下硬性约束，避免 AI 瞎发挥：*\n**若用户选择【网站网页】：**\n  - **技术栈**：强制优先使用 **Python + Flask** 框架，如果实在不能满足诉求才考虑 js 框架。\n  - **核心流程**：包含注册/登录等，但**因为只是demo，所以尽可能降低复杂度，询问用户是否可以用明文存储密码**，如果可以明确写到技术文档中，**一定要用户许可**。\n  - **数据库**：本地开发使用 SQLite。**如果用户有部署到云端的诉求，技术文档中需明确：运行环境为本地时使用SQLite，环境切换到云端时使用 Neon**。权限管理从简。\n  - **Vercel 部署支持**：必须指示编程 AI 在根目录生成正确的 `vercel.json` 和 `requirements.txt`。\n  - 需要包含其他关键逻辑，尽可能详细，但不要包含诸如具体代码、函数名、数据库名等具体内容。\n**若用户选择【微信小程序】：**\n  - **技术栈**：强制要求使用 **微信小程序原生语法 (WXML/WXSS/JS)**，**绝对禁止**使用 Uni-app、Taro 等跨端框架（避免给零基础用户增加配置环境的负担）。\n  - **后端与数据库**：强制要求使用 **微信云开发 (Cloud Development)**。告知编程 AI：不要写单独的后端服务，所有数据库增删改查和云函数直接在小程序目录的 `cloudfunctions` 和 `miniprogram` 目录下完成。\n  - **登录逻辑**：优先使用微信免密登录（`wx.login` 获取 openid 即可区分用户），不要让用户做繁琐的输入账号密码注册。\n  - **转发分享逻辑**：询问用户是否希望转发分享自己的小程序，如果需要，则在技术文档中添加相应动作的指引。例如：每个需要被转发的页面，都应在 Page 中实现 onShareAppMessage & onShareTimeline，并在该页对应 json 中设置 enableShareTimeline: true。\n**公共约束：**\n  - 核心流程包含必要的操作闭环，但 **极度降低复杂度**。\n  - 需要包含其他关键逻辑，尽可能详细，但 **不要** 包含诸如具体代码、函数名、数据库名等具体内容。\n\n### 本模块结束标准\n- 产出三份详尽的文档，且明确告知用户：“请将以上文档复制并喂给你的 Cursor/Trae 进行生成”。下一步实现者**不看别的**也能按 A 定功能与流程、按 B 定界面气质与视觉规范、按 C 接数据与部署。\n- 如果文档较长，分三条消息发送给用户。\n\n---\n\n## 模块 3：安装、运行与部署\n\n### 何时进入\n- 用户明确已经生成了网站。\n\n### 先分流（必问一句）\n- **你是要先在自己电脑上看效果，还是直接上线给别人看？**\n  - **网页**：\n    - **仅本地**：按 `reference/local-env-troubleshooting.md` 的思路，**一步一步**：一步一个动作、一个可观察结果（例如「出现某网址」「终端最后一行是什么」）。  \n    - **要部署**：默认 **GitHub 推送 + Vercel 连接仓库**；逐步：仓库就绪 → 连接平台 → 构建设置 → 环境变量 → 打开公网链接验证。细节引用 `reference/github-onboarding.md`、`reference/vercel-onboarding.md`。\n  - **小程序**：\n    - **仅本地**：指导用户在**微信开发者工具**中导入项目，点击「编译」，看模拟器效果。\n    - **要发给别人**：指导用户在开发者工具上传，具体参考 `reference/wechat-miniprogram-onboarding.md`\n\n### 执行口径\n- **颗粒度拆分（核心红线）**：任何涉及界面的操作（如点击、注册、导入），**每次回复只允许包含 1 个动作**。必须等待用户回复“好了”或发截图后，才允许输出下一个动作。\n- **用户报错**：先问「完整报错原文或截图里最后几行」，再按 `reference/local-env-troubleshooting.md` 排查，不一次假设多个原因。\n\n---\n\n## 沟通与用词（全局）\n- 术语旁带白话；能用生活化说法就不用工程黑话。  \n- 「从简」「必要」「简明」的执行口径见下：  \n  - **从简**：只保留当前阶段必需信息；单流程默认 3～6 步，并且要分步指引。  \n  - **必要**：缺了会导致无法继续或高概率失败的信息必须多问。  \n  - **简明**：一句一个动作或判断；单步不超过两句。  \n\n## reference 索引（需要时必读对应文件）\n| 场景 | 文件 |\n|------|------|\n| Cursor/编辑器安装与基础 | `reference/cursor-and-editor-setup.md` |\n| GitHub 注册与上传 | `reference/github-onboarding.md` |\n| Vercel 注册与部署 | `reference/vercel-onboarding.md` |\n| 微信开发者工具与小程序注册 | `reference/wechat-miniprogram-setup.md` |\n| 微信开发者工具与小程序部署 | `reference/wechat-miniprogram-onboarding.md` |\n| 本地运行报错与排查 | `reference/local-env-troubleshooting.md` |\n| 与非技术用户对话语气 | `reference/non-tech-communication-style.md` |\n| 前端设计参考 | `reference/frontend-design.md` |\n\nFile v1.0.13:_meta.json\n\n{\n  \"ownerId\": \"kn757qhzcz9c672gtw46k6fnn583qka5\",\n  \"slug\": \"demo-website-pm\",\n  \"version\": \"1.0.13\",\n  \"publishedAt\": 1776513152452\n}\n\nFile v1.0.13:reference/cursor-and-editor-setup.md\n\n# Cursor 与编辑器准备\n\n## 适用场景\n- 你第一次用 Cursor。\n- 你要打开网站项目并开始改内容。\n- 你是零技术用户，需要按步骤操作。\n\n## 前置准备\n- 一台可联网电脑。\n- 可正常打开浏览器。\n- 一个可用邮箱（用来注册账号）。\n- 你已拿到项目文件夹路径。\n\n## 页面英文看不懂时怎么做\n- 在浏览器里右键页面，点“翻译成中文”。\n- 看不懂按钮文字时，先看位置：右上角常见“登录/注册”，中间常见“继续/下一步”。\n- 用手机拍照翻译也可以，重点看按钮和报错红字。\n- 看到不认识的英文，不要猜，先截图再问。\n\n## 步骤清单\n1. 打开浏览器，进入 Cursor 官网下载页。  \n   你会看到什么：页面上有下载按钮，通常在中间或右上。\n2. 点击下载按钮。  \n   你会看到什么：浏览器开始下载安装包。\n3. 双击安装包并完成安装。  \n   你会看到什么：桌面或应用列表里出现 Cursor 图标。\n4. 打开 Cursor，选择“登录”或“注册”。  \n   你会看到什么：出现邮箱登录页面，要求输入邮箱或验证码。\n5. 完成登录后，点击“Open Folder（打开文件夹）”。  \n   你会看到什么：系统弹出文件夹选择窗口。\n6. 选中你的项目文件夹并确认。  \n   你会看到什么：左侧出现项目文件列表。\n7. 在左侧点开一个文件，确认可以编辑。  \n   你会看到什么：中间区域显示文件内容，光标可输入文字。\n8. 按 `Command + S`（mac）或 `Ctrl + S`（Windows）保存一次。  \n   你会看到什么：文件不再显示“未保存”提示。\n\n## 成功判定\n- 你能正常打开 Cursor。\n- 你已登录账号。\n- 你能打开项目文件夹。\n- 你能修改并保存任意一个文件。\n\n## 常见问题与处理\n- 问题：下载很慢或失败。  \n  处理：先换网络，再刷新页面重试；仍失败就换浏览器。\n- 问题：登录收不到验证码。  \n  处理：先查垃圾邮件；等 1 分钟后重发；确认邮箱地址无拼写错误。\n- 问题：看不到项目文件。  \n  处理：重新点“Open Folder”，确认选的是项目根目录，不是上一级目录。\n- 问题：无法保存文件。  \n  处理：检查文件是否只读；把项目移到“文稿/桌面”等可写目录后重试。\n\n## 何时中止并回报\n- 连续 3 次安装失败。\n- 连续 3 次登录失败（含验证码问题）。\n- 已确认选对文件夹，但文件仍不显示。\n- 出现系统权限弹窗且你不确定是否允许。\n- 中止后请回报：你做到哪一步、看到了什么提示、发一张截图。\n\nFile v1.0.13:reference/frontend-design.md\n\n# Frontend Design\n\nCreate distinctive, production-grade frontend interfaces that avoid generic \"AI slop\" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.\n\n## Design Thinking\n\nBefore coding, understand the context and commit to a BOLD aesthetic direction:\n\n- **Purpose**: What problem does this interface solve? Who uses it?\n- **Tone**: Pick an extreme — brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian\n- **Constraints**: Technical requirements (framework, performance, accessibility)\n- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?\n\n**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.\n\n## Frontend Aesthetics Guidelines\n\n### Typography\nChoose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt for distinctive choices that elevate the interface. Pair a distinctive display font with a refined body font.\n\n### Color & Theme\nCommit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.\n\n### Motion\nUse animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.\n\n### Spatial Composition\nUnexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.\n\n### Backgrounds & Visual Details\nCreate atmosphere and depth rather than defaulting to solid colors. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.\n\n## Anti-Patterns (What NOT to Do)\n\n**NEVER use:**\n- Overused font families (Inter, Roboto, Arial, system fonts)\n- Cliched color schemes (purple gradients on white backgrounds)\n- Predictable layouts and component patterns\n- Cookie-cutter design that lacks context-specific character\n\n**NEVER converge** on common AI choices (Space Grotesk, for example) across generations.\n\n## Implementation\n\nMatch implementation complexity to the aesthetic vision:\n- Maximalist designs need elaborate code with extensive animations and effects\n- Minimalist designs need restraint, precision, and careful attention to spacing, typography, and subtle details\n\nElegance comes from executing the vision well.\n\n## Output Requirements\n\nWorking code guide(HTML/CSS/JS, React, Vue, etc.) that is:\n- Production-grade and functional\n- Visually striking and memorable\n- Cohesive with a clear aesthetic point-of-view\n- Meticulously refined in every detail\n\nVary between light and dark themes, different fonts, different aesthetics. No design should be the same.\n\n---\n\n*Remember: Claude is capable of extraordinary creative work. Don't hold back — show what can truly be created when thinking outside the box and committing fully to a distinctive vision.*\n\nFile v1.0.13:reference/github-onboarding.md\n\n# GitHub 入门引导\n\n## 适用场景\n- 你要把本地项目放到 GitHub。\n- 你后续要用 Vercel 自动部署网站。\n- 你几乎没有代码经验。\n\n## 前置准备\n- 一个邮箱（可收验证码）。\n- 已安装并打开浏览器。\n- 本地已有项目文件夹。\n- 已安装 Git（Git 是“上传版本记录工具”，可理解为项目传输工具）。\n\n## 术语白话\n- 仓库：放项目文件的“网盘文件夹”。\n- 分支：同一项目的不同修改线路，`main` 通常是主线路。\n- 远程地址：你在 GitHub 仓库对应的网络地址，通常以 `.git` 结尾。\n\n## 页面英文看不懂时怎么做\n- GitHub 页面可用浏览器翻译成中文。\n- 记住常见按钮位置：右上角头像区是账号设置，绿色按钮多是“新建/提交”。\n- “New”一般是新建，“Create”一般是创建，“Upload”一般是上传。\n- 看到红色报错先截图，再按报错关键词处理。\n\n## 本地安装\n当检测到用户未安装 Git 时，请询问用户的操作系统，并提供对应的终端安装命令：\n\n* **Windows 系统 (使用系统自带 Winget)**：\n    ```bash\n    winget install --id Git.Git -e --source winget\n    ```\n    *(注：如果用户不熟悉终端，也可引导直接前往 `https://git-scm.com/` 下载安装包)*\n* **macOS 系统 (使用 Homebrew)**：\n    ```bash\n    brew install git\n    ```\n* **Linux - Ubuntu / Debian 体系**：\n    ```bash\n    sudo apt update && sudo apt install git -y\n    ```\n* **Linux - CentOS / RedHat / Fedora 体系**：\n    ```bash\n    sudo dnf install git -y\n    ```\n\n## 步骤清单示例\n**请一步一步带着用户做，如果有任何不确定的请用通俗易懂的语言询问用户。**\n1. 打开浏览器，进入 GitHub 官网。  \n   你会看到什么：右上角有“Sign up（注册）”或“Sign in（登录）”。\n2. 如果你没有账号，先点“Sign up（注册）”完成注册。  \n   你会看到什么：注册完成后页面提示你可以登录。\n3. 点击“Sign in（登录）”并输入账号信息。  \n   你会看到什么：登录后右上角会出现你的头像。\n4. 点击右上角 `+`，选择“New repository（新建仓库）”。  \n   你会看到什么：出现创建仓库表单页面。\n5. 输入仓库名，并保持仓库为“空仓库初始化”。  \n   操作要点：不要勾选 `Add a README file`、不要勾选 `Add .gitignore`、不要勾选 `Choose a license`。  \n   你会看到什么：这三个初始化选项都保持未勾选状态。\n6. 勾选“Public（公开）”或“Private（私有）”。  \n   你会看到什么：对应选项变成已选中状态。\n7. 点击“Create repository（创建仓库）”。  \n   你会看到什么：进入新仓库主页，页面会显示后续要执行的 Git 命令示例。\n8. 打开本地终端，进入项目目录。  \n   你会看到什么：命令行前缀显示当前目录已是你的项目目录。\n9. 运行 `git init` 初始化仓库。  \n   你会看到什么：终端出现初始化成功提示。\n10. 在执行 `git add .` 前，先创建或检查 `.gitignore`（防误传）。  \n   操作要点：确保 `.gitignore` 至少包含以下内容：`node_modules/`、`.env`、密钥/证书私钥文件（如 `*.key`、`*.pem`、`*.p12`）、系统临时文件（如 `.DS_Store`、`Thumbs.db`）。  \n   你会看到什么：项目目录里存在 `.gitignore` 文件，打开后能看到上述规则。\n11. 上传前安全检查：运行 `git status`，确认待上传列表里没有 `.env`、私钥文件、证书私钥和系统临时文件。  \n   你会看到什么：终端显示待上传文件列表，敏感文件不在列表中。\n12. 运行 `git add .` 添加文件。  \n   你会看到什么：终端通常无报错，表示已加入待提交列表。\n13. 运行 `git commit -m \"first commit\"` 提交一次。  \n   你会看到什么：终端显示提交成功和文件数量。\n14. 按 GitHub 仓库页面提示，复制远程地址。  \n   你会看到什么：地址通常以 `.git` 结尾。\n15. 运行 `git remote add origin <仓库地址>`。  \n   你会看到什么：终端通常无报错。\n16. 运行 `git branch -M main`。  \n    你会看到什么：终端通常无报错。\n17. 运行 `git push -u origin main`。  \n    你会看到什么：终端显示上传进度。\n18. 刷新 GitHub 仓库页面。  \n    你会看到什么：仓库页面能看到你的项目文件。\n\n## 成功判定\n- GitHub 仓库页面能看到完整项目文件。注意引导用户上传到 main 分支。\n- 最新提交时间是刚刚。\n- 你刷新页面后文件仍存在。\n\n## 常见问题与处理\n- 问题：`git` 命令提示找不到。  \n  处理：说明 Git 未安装，先安装 Git 后重开终端。\n- 问题：推送时提示认证失败。  \n  处理：重新登录 GitHub；按提示使用浏览器授权；不要重复输入错误密码。\n- 问题：提示仓库已存在内容，无法直接推送。  \n  处理：先中止并回报，不建议新手自行执行 `git pull origin main --allow-unrelated-histories`。\n- 问题：上传后仓库没有文件。  \n  处理：先执行 `git status` 看是否有未提交文件，再补 `git add` 和 `git commit`。\n\n## 外部检索指南\n\n如果用户反馈有问题，并且解法不包含在此文档中，请查看 **GitHub 官方文档**：`https://docs.github.com/` 或者使用搜索工具来尝试解决。并将解法通俗细致的告知用户。\n\nFile v1.0.13:reference/local-env-troubleshooting.md\n\n# 本地环境排错\n\n## 适用场景\n- 你在本地启动项目失败。\n- 你看到红色报错但看不懂。\n- 你要先在本地跑通，再上传 GitHub 和部署 Vercel。\n\n## 前置准备\n- 已安装 Cursor 或其他编辑器。\n- 已安装终端工具（mac 自带 Terminal）。\n- 已安装 Node.js（Node.js 是“让前端项目能运行的基础程序”）。\n- 已安装 Python3（Python3 是“让后端脚本能运行的基础程序”）。\n- 已安装 pip3（pip3 是“给 Python 安装依赖包的工具”）。\n- 你知道项目根目录位置。\n\n## 页面英文看不懂时怎么做\n- 把报错整段复制到翻译工具，不要只翻一行。\n- 重点看关键词：`error`（错误）、`failed`（失败）、`not found`（找不到）。\n- 看不懂英文命令提示时，先按“最短路径”操作，不要一次执行很多命令。\n- 每次只改一个点，避免问题叠加。\n\n## 步骤清单\n1. 打开终端，进入项目目录。  \n   你会看到什么：终端路径显示为你的项目文件夹。\n2. 先确认你要走哪条路线：前端路线（Node）或后端路线（Python）。  \n   你会看到什么：你能明确这次只先跑一条路线，避免命令冲突。\n3. 前端路线（Node）：运行 `node -v` 检查 Node.js。  \n   你会看到什么：出现版本号，如 `v20.x.x`。\n4. 前端路线（Node）：运行 `npm -v` 检查 npm。  \n   你会看到什么：出现版本号，如 `10.x.x`。\n5. 前端路线（Node）：运行 `npm install` 安装依赖（依赖是“项目运行要用到的外部包”）。  \n   你会看到什么：终端出现下载进度，最后显示安装完成。\n6. 前端路线（Node）：运行 `npm run dev` 启动本地服务。  \n   你会看到什么：终端显示本地地址，如 `http://localhost:3000`。\n7. 前端路线（Node）：打开浏览器访问本地地址。  \n   你会看到什么：页面成功加载，不是空白报错页。\n8. 前端路线（Node）：如果端口占用，先按提示改为新端口。  \n   你会看到什么：终端显示新的端口号。\n9. 前端路线（Node）：重新运行 `npm run dev`。  \n   你会看到什么：终端给出新的本地地址。\n10. 后端路线（Python）：运行 `python3 --version` 检查 Python3。  \n    你会看到什么：出现版本号，如 `Python 3.11.x`。\n11. 后端路线（Python）：运行 `pip3 --version` 检查 pip3。  \n    你会看到什么：出现版本号和安装路径信息。\n12. 后端路线（Python）：运行 `python3 -m venv .venv` 创建虚拟环境（虚拟环境是“给当前项目单独隔离依赖的环境”）。  \n    你会看到什么：项目目录出现 `.venv` 文件夹。\n13. 后端路线（Python）：运行 `source .venv/bin/activate` 激活虚拟环境。  \n    你会看到什么：命令行前面出现 `(.venv)` 标记。\n14. 后端路线（Python）：运行 `pip3 install -r requirements.txt` 安装依赖。  \n    你会看到什么：终端出现安装进度，最后显示安装成功或已满足依赖。\n15. 后端路线（Python）：运行 `python3 app.py` 启动服务。  \n    你会看到什么：终端显示服务已启动和本地访问地址（如有地址提示）。\n16. 后端路线（Python）：打开浏览器访问本地地址。  \n    你会看到什么：页面成功加载，不是空白报错页。\n17. 后端路线（Python）：如果端口占用，先按提示改为新端口后重启。  \n    你会看到什么：终端显示新的端口号或新的访问地址。\n18. 如果仍失败，只记录第一条红色报错。  \n   你会看到什么：你能明确保存一条完整错误信息。\n19. 停止继续尝试。  \n    你会看到什么：终端不再新增报错信息。\n\n## 成功判定\n- `npm install` 无红色致命错误。\n- `npm run dev` 能输出本地访问地址。\n- `pip3 install -r requirements.txt` 无红色致命错误。\n- `python3 app.py` 能输出启动成功信息或本地访问地址。\n- 浏览器可打开本地页面。\n- 你能重复关闭再启动一次，结果一致。\n\n## 常见问题与处理\n- 问题：`node` 或 `npm` 找不到。  \n  处理：重装 Node.js；安装后重开终端再试。\n- 问题：`npm install` 失败。  \n  处理：先检查网络；再删掉 `node_modules` 和锁文件后重装；仍失败就记录第一条错误。\n- 问题：`python3` 找不到。  \n  处理：先确认 Python3 已安装；重开终端再试 `python3 --version`；仍失败就检查安装路径是否在系统 PATH（PATH 是“系统找命令的目录列表”）里。\n- 问题：`pip3` 找不到。  \n  处理：先运行 `python3 --version` 确认 Python3 正常；再尝试 `python3 -m pip --version`；仍失败就重装 Python3。\n- 问题：`pip3 install -r requirements.txt` 失败。  \n  处理：先检查网络和文件是否存在；再升级安装工具后重试：`python3 -m pip install --upgrade pip`；仍失败就记录第一条错误。\n- 问题：提示端口已被占用。  \n  处理：关闭占用该端口的旧进程，或用新端口重新启动（Node 和 Python 路线都适用）。\n- 问题：虚拟环境异常（如已激活但依赖仍找不到）。  \n  处理：先运行 `deactivate` 退出，再重新 `source .venv/bin/activate`；若 `.venv` 损坏，就删除后重新创建。\n- 问题：本地地址打开是白屏。  \n  处理：先看终端是否有运行时红错；再按第一条错误定位，不要盲改多处。\n- 问题：权限不足（permission denied）。  \n  处理：把项目放到当前用户可写目录（如桌面/文稿）后重试。\n\n## 何时中止并回报\n- 同一错误连续出现 3 次。\n- 你需要执行删除系统文件或提权命令，但不确定风险。\n- 你准备使用 `sudo pip3` 或修改系统级 Python，但不确定影响范围。\n- 你发现虚拟环境与系统 Python 混用，且无法判断当前生效的是哪一个解释器。\n- 报错涉及账号密钥、环境变量泄露风险。\n- 你无法判断哪条报错是“第一条关键错误”。\n- 中止后请回报：执行命令顺序、第一条红错原文、当前系统版本。\n\nFile v1.0.13:reference/non-tech-communication-style.md\n\n# 非技术用户沟通风格\n\n## 适用场景\n- 你要和零技术用户确认需求。\n- 你要远程指导用户完成 GitHub + Vercel 流程。\n- 用户英语较弱，容易被英文页面和术语卡住。\n\n## 前置准备\n- 先明确用户目标：只本地看，还是要发公网链接。\n- 先确认用户当前进度：在 Cursor、GitHub、Vercel 的哪一步。\n- 先约定沟通方式：一问一答、一步一确认。\n- 准备好截图标注工具（便于按按钮位置引导）。\n\n## 页面英文看不懂时怎么做\n- 先说“先翻译页面，再继续下一步”。\n- 不要求用户记英文拼写，改用位置描述：左上角、右上角、绿色按钮。\n- 引导用户只看关键词：`Sign in`、`New`、`Deploy`。\n- 用户读不懂整句时，让他只发截图，你来指按钮。\n\n## 步骤清单\n1. 先用一句话确认目标。  \n   你会看到什么：用户会回答“我要本地跑通”或“我要上线给别人看”。\n2. 只问 1 个当前最关键问题。  \n   你会看到什么：用户回复更聚焦，不会一次给很多无关信息。\n3. 每次给 1 个动作指令。  \n   你会看到什么：用户能马上执行，而不是停在“看不懂要做啥”。\n4. 每步都补“你会看到什么”。  \n   你会看到什么：用户能自己判断做对没做对。\n5. 首次出现术语就加白话解释。  \n   你会看到什么：用户不再反复追问术语意思。\n6. 每轮结束前做一次确认。  \n   你会看到什么：用户会明确说“看到了/没看到某个结果”。\n7. 每 3 步做一次预期管理。  \n   你会看到什么：用户知道当前进度和下一步，不会焦虑。\n8. 卡住时先止损。  \n   你会看到什么：用户会先停止继续乱试。\n9. 再让用户补充证据（截图、报错原文、操作顺序）。  \n   你会看到什么：你能拿到完整定位信息。\n\n## 成功判定\n- 用户能复述下一步要做什么。\n- 用户每步都能反馈“看到了什么”。\n- 对话中几乎不出现“我完全看不懂”。\n- 用户可独立完成 GitHub 上传或 Vercel 部署中的一个完整阶段。\n\n## 常见问题与处理\n- 问题：用户一次发很多问题。  \n  处理：先选最影响进度的 1 个问题处理，其余排队。\n- 问题：用户反复说“我不会”。  \n  处理：把动作再拆细；改用“点击哪里”而不是“执行流程”。\n- 问题：用户看不懂英文按钮。  \n  处理：让用户发截图；你按按钮位置标注，不要求他翻译全文。\n- 问题：用户急着要结果。  \n  处理：明确“先完成哪 1 步，马上能看到什么结果”，缩短反馈周期。\n- 问题：用户担心做错。  \n  处理：先给“可回退”说明，再让他执行下一步。\n\n## 何时中止并回报\n- 用户连续两轮无法完成同一步。\n- 用户开始执行高风险操作（删除文件、暴露密钥）但不理解后果。\n- 你无法确认用户当前页面与指令页面是否一致。\n- 沟通出现明显情绪升级，已影响执行。\n- 中止后请回报：当前卡点、用户已做步骤、截图与原话记录。\n\nFile v1.0.13:reference/vercel-onboarding.md\n\n# Vercel 部署引导\n\n## 适用场景\n- 你已经把项目上传到 GitHub。\n- 你要生成一个可分享的网站链接。\n- 你希望后续代码更新后自动上线。\n\n## 前置准备\n- 你有 GitHub 账号并能正常登录。\n- 你的项目仓库在 GitHub 可见。\n- 你能打开浏览器并访问 Vercel（强调需要打开VPN）。\n- 你知道项目默认分支（通常是 `main`）。\n\n## 术语白话\n- Production：正式线上版本链接，给别人访问时优先用这个链接。\n\n## 页面英文看不懂时怎么做\n- 先启用浏览器翻译成中文。\n- 看按钮位置：中间大按钮多是“导入项目”，右上角多是账号菜单。\n- “Import”是导入，“Deploy”是部署，“Settings”是设置。\n- 看不懂配置项时，先保持默认值，不要乱改高级选项。\n\n## 步骤清单\n1. 打开 Vercel 官网。  \n   你会看到什么：页面右上角有登录或注册入口。\n2. 完成注册或登录。  \n   你会看到什么：登录后进入控制台主页。\n3. 选择“Continue with GitHub（用 GitHub 继续）”。  \n   你会看到什么：页面跳转到 GitHub 授权页。\n4. 在 GitHub 授权页点击确认授权。  \n   你会看到什么：页面会跳回 Vercel 控制台。如果GitHub连接失败，还有其他一些注册方式，让用户基于网站上的指引来完成。\n5. 在 Vercel 点击“Add New... -> Project”。  \n   你会看到什么：出现可导入的 GitHub 仓库列表。\n6. 找到你的仓库并点击“Import”。  \n   你会看到什么：进入项目配置页。\n7. 检查构建设置（Build 设置）是否自动识别。  \n   你会看到什么：页面显示框架类型或构建命令；多数项目可直接用默认值。\n8. 若项目包含数据库，部署前先在 Vercel 的 Storage 里添加 Neon（或由你指定的其他数据库/存储服务），并且连接项目。  \n   你会看到什么：服务商控制台里出现可用的数据库/存储实例与连接信息。\n9. 如果项目需要环境变量（环境变量是“运行时要用的账号键值”），在设置区填写；上一步的数据库连接信息通常也填在这里。  \n   你会看到什么：变量名称和变量值输入框。\n10. 点击“Deploy（部署）”。  \n    你会看到什么：页面显示构建进度条和日志。\n11. 等待部署完成。  \n    你会看到什么：状态显示为“Ready”。\n12. 点击生成的网址。  \n    你会看到什么：网站页面可在公网打开。\n13. 访问说明：Vercel 默认分配的地址（如 `xxx.vercel.app`）在国内网络环境下访问常需 VPN。  \n    若不希望访客依赖 VPN：请按下方「独立域名」一节购买并绑定自己的域名，再按 Vercel 提示完成 DNS 解析。\n\n## 独立域名\n*与步骤 13 呼应：默认 `.vercel.app` 在国内常需 VPN；购买并绑定自有域名可减轻访客对 VPN 的依赖，按下列步骤操作。*\n\n1. **进入域名设置**：在 Vercel 项目面板，点击顶部的 **`Settings`**，然后在左侧菜单点击 **`Domains`**。\n2. **添加新域名**：点击 `Buy`，然后输入自己设想中的域名，如果可用，然后用外币信用卡付款。\n3. **等待生效**：回到 Vercel 页面等待几分钟，看到域名状态变成蓝色的 ✔️ 并且带有小锁头，说明绑定和 HTTPS 证书全部配置成功！\n\n## 成功判定\n- Vercel 显示状态为“Ready”或“Production”。\n- 打开部署链接后页面正常显示。\n- 在你实际使用的网络环境下（默认 `.vercel.app` 在大陆常需 VPN；绑定自有域名后可在目标访客网络下再测）手机与桌面均可访问。\n\n## 常见问题与处理\n- 问题：仓库列表里看不到你的项目。  \n  处理：回 GitHub 检查仓库是否存在；再回 Vercel 重新授权 GitHub 仓库访问权限。\n- 问题：部署失败，日志一片红字。  \n  处理：先看第一条红色错误；优先检查构建命令和环境变量是否缺失。\n- 问题：页面打开空白或 404。  \n  处理：确认访问的是最新 Production 链接，不是旧预览链接。\n- 问题：更新 GitHub 后网站没更新。  \n  处理：确认代码推送到了默认分支；然后在 Vercel 手动点“Redeploy（重新部署）”。\n\n## 外部检索指南\n\n如果用户反馈有问题，并且解法不包含在此文档中，请查看 **官方文档**：`https://vercel.com/docs` 或者使用搜索工具来尝试解决。并将解法通俗细致的告知用户。\n\n## 其他平台最小提示\n- 如果你不用 Vercel，可改用其他平台。\n- 但流程细节以该平台官方文档为准，这里不展开。\n\nFile v1.0.13:reference/wechat-miniprogram-onboarding.md\n\n# 微信小程序真机预览与上线体验指南\n\n**目标受众**：零技术基础用户\n**使用场景**：当代码已经由 AI 生成，用户需要把代码跑起来，或者想把做好的 demo 发给朋友看（状态 S3 阶段）时使用。不要向用户询问 ID，让用户自己查找并填写到 环境变量 或 网站配置 中。\n\n---\n\n## 阶段 A：在电脑上跑通（本地预览）\n*话术引导：代码已经写好了！现在我们把它放进你的“工坊”里，看看长什么样。*\n\n1. **导入代码文件夹**：打开「微信开发者工具」，点击主界面的「导入项目」（或者点「+」号）。\n2. **选择目录**：选中 AI 帮你生成的那整个代码文件夹。`AppID` 填你之前注册的那个，点击「确定」。\n3. **填入环境 ID**：\n   - 找到代码目录里的 `app.js` 文件，点击打开。\n   - 里面有一行写着 `env: '你的云开发环境ID'`，把它替换成你真实的云开发环境 ID（保留单引号）。\n   - 保存文件。\n4. **编译看效果**：点击顶部工具栏最左侧的 **「编译」** 按钮。如果一切正常，工具左侧的“手机模拟器”里就会显示出你的小程序界面了！你能看到画面吗？\n\n*(如果报错，请用户提供模拟器下面的“控制台”最后几行红字截图，转入排查流程。)*\n\n## 阶段 B：发给朋友看（上传与体验版）\n*话术引导：电脑上看没问题了，现在我们把它变成一个可以发给朋友扫一扫的二维码！*\n\n1. **点击上传**：在「微信开发者工具」顶部工具栏，点击 **「上传」** 按钮（一个向上箭头的图标）。\n2. **填版本号**：弹出的窗口里，版本号填 `1.0.0`，项目备注随便写（比如“第一个demo测试”），点击确定上传。\n3. **设为体验版**：\n   - 回到浏览器，登录 [微信公众平台](https://mp.weixin.qq.com/)。\n   - 在左侧菜单找到 **「管理」 -> 「版本管理」**。\n   - 往下拉找到「开发版本」，你会看到刚才上传的那条记录。点击右侧下拉箭头，选择 **「选为体验版」**。\n4. **添加朋友的微信**（必需步骤，否则别人打不开）：\n   - 在左侧菜单找 **「管理」 -> 「成员管理」**。\n   - 点击「编辑」->「添加成员」，输入你朋友的微信号，给他们勾选上“体验者”权限。\n5. **分享体验**：回到「版本管理」，点击你的“体验版”二维码，把这幅图发给刚才添加的朋友，他们用微信扫一扫就能体验你的产品啦！\n\n**本阶段结束标志**：用户成功在手机上扫码看到了自己的小程序 demo，或遇到了具体报错需要排查。\n\nFile v1.0.13:reference/wechat-miniprogram-setup.md\n\n# 微信开发者工具与小程序注册指南\n\n**目标受众**：零技术基础用户\n**使用场景**：当用户选择制作“微信小程序”且状态处于 S0（准备环境阶段）时，读取此文档一步步指导。不要向用户询问 ID，让用户自己查找并填写到 环境变量 或 网站配置 中。\n\n---\n\n## 步骤 1：注册小程序账号（获取“基础户口”）\n*话术引导：要让别人能在微信里看到你的程序，我们需要先去腾讯那里免费注册一个“户口”。*\n\n1. **打开官网**：在电脑浏览器打开 [微信公众平台](https://mp.weixin.qq.com/)。\n2. **开始注册**：点击右上角的「立即注册」，账号类型选择**「小程序」**。\n3. **填写信息**：用一个没注册过微信公众号的邮箱进行注册，跟着网页提示激活邮箱、登记主体信息（个人做 demo 选择“个人”即可）。\n4. **获取 AppID**：注册成功并登录后，在左侧菜单找到 **「开发」 -> 「开发管理」 -> 点击「开发设置」**标签页。\n5. **复制保存**：找到 **AppID (小程序ID)**，这是一串字母和数字组合，把它复制下来并记住（这是你小程序的唯一身份证，后面写代码必须用到）。\n\n## 步骤 2：完成认证与备案（给小程序上“牌照”）\n*话术引导：根据现在的规定，所有小程序都需要实名“上牌照”才能正式发给别人看。这个手续审核大概需要几天，但别担心，我们现在先把它提交上去，这期间完全不耽误我们在电脑上继续做 demo 看效果！*\n\n1. **微信认证（确认身份）**：\n   - 在左侧菜单找到 **「设置」 -> 「基本设置」**。\n   - 往下看找到 **「微信认证」**，点击「详情」或「开通」。\n   - 跟着向导填写资料。注意：微信官方对个人开发者会收取 30 元/年的身份验证审核费（这是直接交给腾讯的）。\n2. **小程序备案（合法登记）**：\n   - 同样在 **「设置」 -> 「基本设置」** 页面里，找到 **「小程序备案」** 入口。\n   - 点击去备案，它会像网购填地址一样让你补充一些基本信息，需要你上传身份证正反面照片，并用你的手机微信扫屏幕上的二维码，做一次刷脸验证。\n   - **提交后就不用管了**。审核进度它会通过微信通知你，我们直接进入下一步！\n\n## 步骤 3：下载“施工工具”\n*话术引导：户口和牌照都在办理中了，接下来我们需要安装一个类似于“工坊”的软件，用来把大模型写的代码变成真正的小程序界面。*\n\n1. **下载链接**：打开 [微信开发者工具下载页](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)。\n2. **选择版本**：点击 **「稳定版 Stable Build」**，根据你的电脑是 Windows 还是 Mac 下载对应版本。\n3. **安装并登录**：像装普通软件一样安装好。打开后，用你**刚才注册小程序的那个微信**扫码登录。\n\n## 步骤 4：开通“云开发”（存放数据的云端仓库）\n*话术引导：我们的 demo 需要记录数据（比如用户填的表单），微信提供了一个非常方便的“云仓库”，我们去把它打开。*\n\n1. **新建空项目**：在开发者工具里点击「+」号新建项目。填入刚才的 AppID，后端服务选择 **「微信云开发」**，点击确定。\n2. **点击云开发按钮**：进入主界面后，点击最上方工具栏里的 **「云开发」** 按钮（一朵小云的图标）。\n3. **开通服务**：弹出的窗口里点击「开通」，同意协议。（*注：云开发有免费的基础版或几块钱的测试套餐，根据页面提示开通最基础的即可*）。\n4. **获取环境 ID**：开通成功后，在云开发控制台的「概览」或「设置」里，找到你的 **「环境 ID」**（通常是类似 `test-1234abcd` 的格式）。把它复制发给我。\n\n**本阶段结束标志**：用户成功安装了微信开发者工具，了解了备案的必要性，并向你提供了 `AppID` 和 `云开发环境 ID`。\n\nArchive v1.0.12: 10 files, 24335 bytes\n\nFiles: reference/cursor-and-editor-setup.md (2690b), reference/frontend-design.md (3352b), reference/github-onboarding.md (5492b), reference/local-env-troubleshooting.md (6165b), reference/non-tech-communication-style.md (3160b), reference/vercel-onboarding.md (4677b), reference/wechat-miniprogram-onboarding.md (2715b), reference/wechat-miniprogram-setup.md (4138b), SKILL.md (15564b), _meta.json (135b)\n\nFile v1.0.12:SKILL.md\n\n---\nname: demo-website-pm\ndescription: 面向零技术用户，把任意网站 demo 需求拆成产品需求、设计需求、技术需求三份文档，并配合 GitHub 与 Vercel / 微信小程序 直接上线部署\n---\n\n# demo 网站产品经理\n\n## 前置准备\n\n**可能用到的站点**：**网页** — [Cursor](https://cursor.com/)、[Trae](https://www.trae.ai/)（可选）、[Git](https://git-scm.com/)、[GitHub](https://github.com/)、[Vercel](https://vercel.com/)、[Neon](https://neon.tech/)；本地 [Python](https://www.python.org/downloads/)、按需 [Node](https://nodejs.org/)；查错 [GitHub 文档](https://docs.github.com/)、[Vercel 文档](https://vercel.com/docs)。国内访问 Vercel 常需国际网络；换部署平台以对方官网为准。**小程序** — [微信公众平台](https://mp.weixin.qq.com/)（注册/管理/体验版）、[微信开发者工具下载](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)；步骤见 `reference/wechat-miniprogram-setup.md`、`reference/wechat-miniprogram-onboarding.md`。\n\n**密钥与标识**：**网页** — 敏感值只放本机环境变量或 Vercel Environment Variables，`.gitignore` 含 `.env`；常见 `SECRET_KEY`、`DATABASE_URL`（Neon/远程库）、`PORT`。**小程序** — 需 **AppID**、**云开发环境 ID**（按生成代码写入配置，如 `app.js` 中 `env`）；勿把含真实配置的副本推上公开仓库。其它第三方以生成代码为准。\n\n## 本 Skill 解决什么\n- 根据用户**任意**主题的需求，规划一个**可演示的网站 demo 或微信小程序 demo**。\n- 产出物必须是**详尽的需求与技术指引文档**，用来让后续的其他的编程 AI（如 Cursor/Trae）准确生成站点。\n- 协助用户完成代码的本地运行，并可选：**推到 GitHub**、**部署到 Vercel**。（默认说明 **Vercel**；用户选别的平台只给原则性指引，细节以对方官网为准），小程序走 **微信开发者工具预览与体验版**。\n- 预期是 **demo / 验证想法**，绝对不涉及生产级交付标准。\n\n## 交互原则\n- **绝对禁止输出业务代码**：你的核心任务是“写文档”和“指导流程”。绝对不要直接输出具体的业务代码。\n- **每次只推一步，绝对禁止连问**：每次你的回复**只能包含 1 个核心问题**。做完立刻停下，等待用户反馈。绝对不允许一次性抛出问题清单！\n- **做选择题，不做填空题**：小白用户不懂术语也不善于总结。你的提问必须是 **1 个具体问题 + 2 到 3 个选项**（可外加“其他”）。\n- **对话正确范例1（表达要灵活自然，禁止照搬！）**：\n   > 用户：我要做一个算法博客网站。\n   > Agent：太棒了！请问您想做一个能在浏览器访问的网页，还是微信小程序？（A. 网页；B. 微信小程序）\n   > 用户：网页。\n   > Agent：请问您是只想在自己电脑上运行看看效果，还是期望部署到公网上发给别人看？（A. 仅本地；B. 部署到公网）\n   > 用户：公网。\n   > Agent：好的，那您的 GitHub 和 Vercel 账户都准备好了吗？（A. 都准备好了；B. 还没有，需要指导）\n   > 用户：没有。\n   > Agent：好咧下面我来教您！。。。。。。\n- **对话正确范例2（表达要灵活自然，禁止照搬！）**：\n   > 用户：我要做一个算法博客网站。\n   > Agent：您想做一个能在浏览器访问的网页还是微信小程序呀？（A. 网页；B. 微信小程序）\n   > 用户：部署到公网的网页，我已经搭好 github 和 vercel 了。\n   > Agent：那我们下面开始确认产品需求，您看 OK 吗？\n- **对话错误示范1（要一步一步引导，不要一下给太多指示！）**：\n   > 用户：我要做一个算法博客网站。现在 git 还没准备好。\n   > Agent：没问题。下面请按照我说的步骤做：1. 。。。。2. 。。。。3.。。。。\n- **告别大厂 PM 废话**：我们只是做 Demo！**绝对禁止**询问以下问题：上线时间预期、服务器/域名是否备齐、商业化目标、合规与备案限制、受众详细画像（如年龄/地域）、交付物形态（本 Prompt 已规定死交付物就是 ABC 三文档，不许再问用户要什么）。\n- **做选择题，不做填空题**：小白用户不懂术语也不善于总结。你的提问必须是**1 个具体问题 + 2 到 3 个选项**（外加“其他”选项），让用户做选择题。**绝对禁止**一次性抛出超过 2 个问题让用户填空。\n- **小白对话风格**：用户零技术、零英语。禁用技术黑话，把提问改成“请你跟着做一步小实验”的指示。\n- **严禁凭空虚构**：需要展开流程时，必须读取 `reference/` 下对应文件，不可编造。\n---\n\n## 状态码（每次对话开头优先确认）\n\n用下面之一作为当前阶段（用户可直接回复序号或名称）：\n\n| 状态 | 含义 | 本步该做什么 |\n|------|------|----------------|\n| S1 | 默认状态 | 走 **模块 1**，明确平台（Web/小程序），只解决对应账号与工具，不写产品文档 |\n| S2 | 需求已清楚，要出文档 | 走 **模块 2** |\n| S3 | 已有三文档或已有代码，要跑起来/上线 | 走 **模块 3** |\n\n在对话后台默默判断用户当前处于哪个阶段（S0-S3），引导用户推进。**默认从 S0 开始。**\n\n---\n\n## 模块 1：工具与账号（注册 Cursor、GitHub、Vercel、本地环境）\n\n### 何时进入\n- 默认进入。\n\n### 必问清单（白话，可拆成多轮，每轮 1～2 个问句）\n1. **本地编辑/运行工具**：你电脑上是否已经装了 **Cursor** 或 **Trae**（或其它能打开项目文件夹的编辑器）？没有则引导安装与基础设置 → `reference/cursor-and-editor-setup.md`。\n2. **确认开发工具**：\n  - **如果选网页**：\n    - 您电脑上是否已经装了 **Cursor** 或 **Trae**？（引导见 `reference/cursor-and-editor-setup.md`）\n    - 您有没有 **GitHub** 账号，且**愿意**按步骤把项目放到网上？若否，说明「仍可先做本地 demo，但无法按本流程上传」→ `reference/github-onboarding.md`。\n    - **是否要公网访问**：这个 demo 只给自己看，还是要**发链接**给别人？  \n      - 若**不需要公网**：记录「仅本地」，模块 4 只走本地路径。  \n      - 若**需要公网**：默认按 **Vercel** 讲解；问：**Vercel 账号是否已有？** → `reference/vercel-onboarding.md`。  \n      - 若用户**指定其它平台**：只说明「请打开该平台官网，按官方文档完成连接仓库与环境变量」，**不**展开该平台逐步截图级教程。\n  - **如果选小程序**：\n    - 除了编辑器，您还需要安装**微信开发者工具**，您电脑上现在有吗？\n    - 是否想要分享给其他人，如果需要，**要先指引用户走审核流程，因为审核流程耗时非常长**。\n    - 具体引导见 `reference/wechat-miniprogram-setup.md`\n- **颗粒度拆分（核心红线）**：任何涉及界面的操作（如点击、注册、导入），**每次回复只允许包含 1 个动作**。必须等待用户回复“好了”或发截图后，才允许输出下一个动作。\n\n### 本模块结束标准\n- 你能用一句话总结：工具是否可用、GitHub 是否可执行、是否要部署、若部署是否已具备小程序开发账号、Vercel（或其它平台由用户自担）。\n\n---\n\n## 模块 2：需求澄清（偏产品，少技术）\n\n### 何时进入\n- 用户明确github、vercel（或者其他部署方法）、本地编程工具、开发工具等都齐备。\n\n### 提问规则（严格执行）\n- **每轮必须只问 1 个问题！**绝对禁止一次性列出清单或问卷。\n- **要尽可能多问！就产品需求部分至少问 10 轮**。除非用户明确表示中止。\n- **尽量使用选项**：抛出问题时，最好直接给出 2-3 个符合常理的选项，引导用户选择。\n- **只问 Demo 实现所需要的核心功能点**，例如：\n  1. 这个 Demo 最想实现的核心操作是什么？（例如针对信托：A. 纯展示信托知识和联系方式；B. 用户能填表单预约咨询；C. 能让用户登录查看简单的收益数字）\n  2. 这个 Demo 主要是给谁用的？（例如：A. 随便什么人都能看；B. 只有特定客户登录后才能看）\n  3. 如果需要区分用户，需要实现注册流程吗？（A. 不需要，写死几个测试账号即可；B. 需要极简的账号密码注册；C. 微信一键登录获取ID即可）\n  4. 前端界面您希望整体是什么风格？（例如：A. 极简现代，大留白；B. 严肃专业，商务风；C. 活泼生动，圆角卡片风）\n  5. 网站的主色调有偏好吗？（A. 科技蓝；B. 活力橙；C. 黑白灰；D. 你帮我按主题配一个）\n  6. 最终期望部署到公网，发链接给别人看吗？（A. 是的，别人必须能打开；B. 否，只在我自己电脑上跑通看看效果）\n  7. 页面上展示的列表数据（如文章、商品、用户列表），一开始怎么处理？（A. 写死几条假数据看看排版就行；B. 需要能真正通过前端添加和删除）\n  8. 除了最基础的xxxx功能，您还需要其他相关功能吗？（ABCDE，**除非用户打断，否则一定要问这个问题，尽可能帮用户丰富这个网站的功能**）\n  **等等等等**，具体要问什么还要参考 **下面 A、B、C 文档具体需要**，可以细化，但不要泛化（比如泛泛的问用户画像是什么，或者对于一个Demo问是否有安全披露要求）\n- **中止提醒**：5轮问题之后，可以提醒用户：您可以随时中止，但如果用户不中止就可以一直问。\n\n### A. 产品需求文档\n- 详细到**页面、模块、状态**（含加载、空状态、错误）。\n- 写清**关键文案**（按钮文字、提示语、错误话术）。\n- **要求看起来高级**：用流程清晰、状态多样的描述让产品显得丰富、现代。\n\n### B. 设计需求文档\n- Agent **必须先完整阅读** `reference/frontend-design.md`，再结合用户在澄清阶段已选定的风格、色调、平台（网页/小程序），对该参考内容进行**删减、改写与本地化**（面向零技术读者与后续编程 AI 均可执行），产出一份**仅描述视觉与交互设计**的文档。\n- 须写清：**整体气质与差异化**（Tone）、**字体与层级**、**配色与主题变量思路**、**动效与微交互原则**、**版式与留白/密度**、**背景与装饰细节**；并明确与本 Demo **范围匹配**的实现复杂度（极简 demo 不必堆砌重度动效）。\n\n### C. 技术需求文档\n*注意：这份文档是写给后续编程 AI 看的指令，必须包含以下硬性约束，避免 AI 瞎发挥：*\n**若用户选择【网站网页】：**\n  - **技术栈**：强制优先使用 **Python + Flask** 框架，如果实在不能满足诉求才考虑 js 框架。\n  - **核心流程**：包含注册/登录等，但**因为只是demo，所以尽可能降低复杂度，询问用户是否可以用明文存储密码**，如果可以明确写到技术文档中，**一定要用户许可**。\n  - **数据库**：本地开发使用 SQLite。**如果用户有部署到云端的诉求，技术文档中需明确：运行环境为本地时使用SQLite，环境切换到云端时使用 Neon**。权限管理从简。\n  - **Vercel 部署支持**：必须指示编程 AI 在根目录生成正确的 `vercel.json` 和 `requirements.txt`。\n  - 需要包含其他关键逻辑，尽可能详细，但不要包含诸如具体代码、函数名、数据库名等具体内容。\n**若用户选择【微信小程序】：**\n  - **技术栈**：强制要求使用 **微信小程序原生语法 (WXML/WXSS/JS)**，**绝对禁止**使用 Uni-app、Taro 等跨端框架（避免给零基础用户增加配置环境的负担）。\n  - **后端与数据库**：强制要求使用 **微信云开发 (Cloud Development)**。告知编程 AI：不要写单独的后端服务，所有数据库增删改查和云函数直接在小程序目录的 `cloudfunctions` 和 `miniprogram` 目录下完成。\n  - **登录逻辑**：优先使用微信免密登录（`wx.login` 获取 openid 即可区分用户），不要让用户做繁琐的输入账号密码注册。\n**公共约束：**\n  - 核心流程包含必要的操作闭环，但 **极度降低复杂度**。\n  - 需要包含其他关键逻辑，尽可能详细，但 **不要** 包含诸如具体代码、函数名、数据库名等具体内容。\n\n### 本模块结束标准\n- 产出三份详尽的文档，且明确告知用户：“请将以上文档复制并喂给你的 Cursor/Trae 进行生成”。下一步实现者**不看别的**也能按 A 定功能与流程、按 B 定界面气质与视觉规范、按 C 接数据与部署。\n- 如果文档较长，分三条消息发送给用户。\n\n---\n\n## 模块 3：安装、运行与部署\n\n### 何时进入\n- 用户明确已经生成了网站。\n\n### 先分流（必问一句）\n- **你是要先在自己电脑上看效果，还是直接上线给别人看？**\n  - **网页**：\n    - **仅本地**：按 `reference/local-env-troubleshooting.md` 的思路，**一步一步**：一步一个动作、一个可观察结果（例如「出现某网址」「终端最后一行是什么」）。  \n    - **要部署**：默认 **GitHub 推送 + Vercel 连接仓库**；逐步：仓库就绪 → 连接平台 → 构建设置 → 环境变量 → 打开公网链接验证。细节引用 `reference/github-onboarding.md`、`reference/vercel-onboarding.md`。\n  - **小程序**：\n    - **仅本地**：指导用户在**微信开发者工具**中导入项目，点击「编译」，看模拟器效果。\n    - **要发给别人**：指导用户在开发者工具上传，具体参考 `reference/wechat-miniprogram-onboarding.md`\n\n### 执行口径\n- **颗粒度拆分（核心红线）**：任何涉及界面的操作（如点击、注册、导入），**每次回复只允许包含 1 个动作**。必须等待用户回复“好了”或发截图后，才允许输出下一个动作。\n- **用户报错**：先问「完整报错原文或截图里最后几行」，再按 `reference/local-env-troubleshooting.md` 排查，不一次假设多个原因。\n\n---\n\n## 沟通与用词（全局）\n- 术语旁带白话；能用生活化说法就不用工程黑话。  \n- 「从简」「必要」「简明」的执行口径见下：  \n  - **从简**：只保留当前阶段必需信息；单流程默认 3～6 步，并且要分步指引。  \n  - **必要**：缺了会导致无法继续或高概率失败的信息必须多问。  \n  - **简明**：一句一个动作或判断；单步不超过两句。  \n\n## reference 索引（需要时必读对应文件）\n| 场景 | 文件 |\n|------|------|\n| Cursor/编辑器安装与基础 | `reference/cursor-and-editor-setup.md` |\n| GitHub 注册与上传 | `reference/github-onboarding.md` |\n| Vercel 注册与部署 | `reference/vercel-onboarding.md` |\n| 微信开发者工具与小程序注册 | `reference/wechat-miniprogram-setup.md` |\n| 微信开发者工具与小程序部署 | `reference/wechat-miniprogram-onboarding.md` |\n| 本地运行报错与排查 | `reference/local-env-troubleshooting.md` |\n| 与非技术用户对话语气 | `reference/non-tech-communication-style.md` |\n| 前端设计参考 | `reference/frontend-design.md` |\n\nFile v1.0.12:_meta.json\n\n{\n  \"ownerId\": \"kn757qhzcz9c672gtw46k6fnn583qka5\",\n  \"slug\": \"demo-website-pm\",\n  \"version\": \"1.0.12\",\n  \"publishedAt\": 1776505652813\n}\n\nFile v1.0.12:reference/cursor-and-editor-setup.md\n\n# Cursor 与编辑器准备\n\n## 适用场景\n- 你第一次用 Cursor。\n- 你要打开网站项目并开始改内容。\n- 你是零技术用户，需要按步骤操作。\n\n## 前置准备\n- 一台可联网电脑。\n- 可正常打开浏览器。\n- 一个可用邮箱（用来注册账号）。\n- 你已拿到项目文件夹路径。\n\n## 页面英文看不懂时怎么做\n- 在浏览器里右键页面，点“翻译成中文”。\n- 看不懂按钮文字时，先看位置：右上角常见“登录/注册”，中间常见“继续/下一步”。\n- 用手机拍照翻译也可以，重点看按钮和报错红字。\n- 看到不认识的英文，不要猜，先截图再问。\n\n## 步骤清单\n1. 打开浏览器，进入 Cursor 官网下载页。  \n   你会看到什么：页面上有下载按钮，通常在中间或右上。\n2. 点击下载按钮。  \n   你会看到什么：浏览器开始下载安装包。\n3. 双击安装包并完成安装。  \n   你会看到什么：桌面或应用列表里出现 Cursor 图标。\n4. 打开 Cursor，选择“登录”或“注册”。  \n   你会看到什么：出现邮箱登录页面，要求输入邮箱或验证码。\n5. 完成登录后，点击“Open Folder（打开文件夹）”。  \n   你会看到什么：系统弹出文件夹选择窗口。\n6. 选中你的项目文件夹并确认。  \n   你会看到什么：左侧出现项目文件列表。\n7. 在左侧点开一个文件，确认可以编辑。  \n   你会看到什么：中间区域显示文件内容，光标可输入文字。\n8. 按 `Command + S`（mac）或 `Ctrl + S`（Windows）保存一次。  \n   你会看到什么：文件不再显示“未保存”提示。\n\n## 成功判定\n- 你能正常打开 Cursor。\n- 你已登录账号。\n- 你能打开项目文件夹。\n- 你能修改并保存任意一个文件。\n\n## 常见问题与处理\n- 问题：下载很慢或失败。  \n  处理：先换网络，再刷新页面重试；仍失败就换浏览器。\n- 问题：登录收不到验证码。  \n  处理：先查垃圾邮件；等 1 分钟后重发；确认邮箱地址无拼写错误。\n- 问题：看不到项目文件。  \n  处理：重新点“Open Folder”，确认选的是项目根目录，不是上一级目录。\n- 问题：无法保存文件。  \n  处理：检查文件是否只读；把项目移到“文稿/桌面”等可写目录后重试。\n\n## 何时中止并回报\n- 连续 3 次安装失败。\n- 连续 3 次登录失败（含验证码问题）。\n- 已确认选对文件夹，但文件仍不显示。\n- 出现系统权限弹窗且你不确定是否允许。\n- 中止后请回报：你做到哪一步、看到了什么提示、发一张截图。\n\nFile v1.0.12:reference/frontend-design.md\n\n# Frontend Design\n\nCreate distinctive, production-grade frontend interfaces that avoid generic \"AI slop\" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.\n\n## Design Thinking\n\nBefore coding, understand the context and commit to a BOLD aesthetic direction:\n\n- **Purpose**: What problem does this interface solve? Who uses it?\n- **Tone**: Pick an extreme — brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian\n- **Constraints**: Technical requirements (framework, performance, accessibility)\n- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?\n\n**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.\n\n## Frontend Aesthetics Guidelines\n\n### Typography\nChoose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt for distinctive choices that elevate the interface. Pair a distinctive display font with a refined body font.\n\n### Color & Theme\nCommit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.\n\n### Motion\nUse animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.\n\n### Spatial Composition\nUnexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.\n\n### Backgrounds & Visual Details\nCreate atmosphere and depth rather than defaulting to solid colors. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.\n\n## Anti-Patterns (What NOT to Do)\n\n**NEVER use:**\n- Overused font families (Inter, Roboto, Arial, system fonts)\n- Cliched color schemes (purple gradients on white backgrounds)\n- Predictable layouts and component patterns\n- Cookie-cutter design that lacks context-specific character\n\n**NEVER converge** on common AI choices (Space Grotesk, for example) across generations.\n\n## Implementation\n\nMatch implementation complexity to the aesthetic vision:\n- Maximalist designs need elaborate code with extensive animations and effects\n- Minimalist designs need restraint, precision, and careful attention to spacing, typography, and subtle details\n\nElegance comes from executing the vision well.\n\n## Output Requirements\n\nWorking code guide(HTML/CSS/JS, React, Vue, etc.) that is:\n- Production-grade and functional\n- Visually striking and memorable\n- Cohesive with a clear aesthetic point-of-view\n- Meticulously refined in every detail\n\nVary between light and dark themes, different fonts, different aesthetics. No design should be the same.\n\n---\n\n*Remember: Claude is capable of extraordinary creative work. Don't hold back — show what can truly be created when thinking outside the box and committing fully to a distinctive vision.*\n\nFile v1.0.12:reference/github-onboarding.md\n\n# GitHub 入门引导\n\n## 适用场景\n- 你要把本地项目放到 GitHub。\n- 你后续要用 Vercel 自动部署网站。\n- 你几乎没有代码经验。\n\n## 前置准备\n- 一个邮箱（可收验证码）。\n- 已安装并打开浏览器。\n- 本地已有项目文件夹。\n- 已安装 Git（Git 是“上传版本记录工具”，可理解为项目传输工具）。\n\n## 术语白话\n- 仓库：放项目文件的“网盘文件夹”。\n- 分支：同一项目的不同修改线路，`main` 通常是主线路。\n- 远程地址：你在 GitHub 仓库对应的网络地址，通常以 `.git` 结尾。\n\n## 页面英文看不懂时怎么做\n- GitHub 页面可用浏览器翻译成中文。\n- 记住常见按钮位置：右上角头像区是账号设置，绿色按钮多是“新建/提交”。\n- “New”一般是新建，“Create”一般是创建，“Upload”一般是上传。\n- 看到红色报错先截图，再按报错关键词处理。\n\n## 本地安装\n当检测到用户未安装 Git 时，请询问用户的操作系统，并提供对应的终端安装命令：\n\n* **Windows 系统 (使用系统自带 Winget)**：\n    ```bash\n    winget install --id Git.Git -e --source winget\n    ```\n    *(注：如果用户不熟悉终端，也可引导直接前往 `https://git-scm.com/` 下载安装包)*\n* **macOS 系统 (使用 Homebrew)**：\n    ```bash\n    brew install git\n    ```\n* **Linux - Ubuntu / Debian 体系**：\n    ```bash\n    sudo apt update && sudo apt install git -y\n    ```\n* **Linux - CentOS / RedHat / Fedora 体系**：\n    ```bash\n    sudo dnf install git -y\n    ```\n\n## 步骤清单示例\n**请一步一步带着用户做，如果有任何不确定的请用通俗易懂的语言询问用户。**\n1. 打开浏览器，进入 GitHub 官网。  \n   你会看到什么：右上角有“Sign up（注册）”或“Sign in（登录）”。\n2. 如果你没有账号，先点“Sign up（注册）”完成注册。  \n   你会看到什么：注册完成后页面提示你可以登录。\n3. 点击“Sign in（登录）”并输入账号信息。  \n   你会看到什么：登录后右上角会出现你的头像。\n4. 点击右上角 `+`，选择“New repository（新建仓库）”。  \n   你会看到什么：出现创建仓库表单页面。\n5. 输入仓库名，并保持仓库为“空仓库初始化”。  \n   操作要点：不要勾选 `Add a README file`、不要勾选 `Add .gitignore`、不要勾选 `Choose a license`。  \n   你会看到什么：这三个初始化选项都保持未勾选状态。\n6. 勾选“Public（公开）”或“Private（私有）”。  \n   你会看到什么：对应选项变成已选中状态。\n7. 点击“Create repository（创建仓库）”。  \n   你会看到什么：进入新仓库主页，页面会显示后续要执行的 Git 命令示例。\n8. 打开本地终端，进入项目目录。  \n   你会看到什么：命令行前缀显示当前目录已是你的项目目录。\n9. 运行 `git init` 初始化仓库。  \n   你会看到什么：终端出现初始化成功提示。\n10. 在执行 `git add .` 前，先创建或检查 `.gitignore`（防误传）。  \n   操作要点：确保 `.gitignore` 至少包含以下内容：`node_modules/`、`.env`、密钥/证书私钥文件（如 `*.key`、`*.pem`、`*.p12`）、系统临时文件（如 `.DS_Store`、`Thumbs.db`）。  \n   你会看到什么：项目目录里存在 `.gitignore` 文件，打开后能看到上述规则。\n11. 上传前安全检查：运行 `git status`，确认待上传列表里没有 `.env`、私钥文件、证书私钥和系统临时文件。  \n   你会看到什么：终端显示待上传文件列表，敏感文件不在列表中。\n12. 运行 `git add .` 添加文件。  \n   你会看到什么：终端通常无报错，表示已加入待提交列表。\n13. 运行 `git commit -m \"first commit\"` 提交一次。  \n   你会看到什么：终端显示提交成功和文件数量。\n14. 按 GitHub 仓库页面提示，复制远程地址。  \n   你会看到什么：地址通常以 `.git` 结尾。\n15. 运行 `git remote add origin <仓库地址>`。  \n   你会看到什么：终端通常无报错。\n16. 运行 `git branch -M main`。  \n    你会看到什么：终端通常无报错。\n17. 运行 `git push -u origin main`。  \n    你会看到什么：终端显示上传进度。\n18. 刷新 GitHub 仓库页面。  \n    你会看到什么：仓库页面能看到你的项目文件。\n\n## 成功判定\n- GitHub 仓库页面能看到完整项目文件。注意引导用户上传到 main 分支。\n- 最新提交时间是刚刚。\n- 你刷新页面后文件仍存在。\n\n## 常见问题与处理\n- 问题：`git` 命令提示找不到。  \n  处理：说明 Git 未安装，先安装 Git 后重开终端。\n- 问题：推送时提示认证失败。  \n  处理：重新登录 GitHub；按提示使用浏览器授权；不要重复输入错误密码。\n- 问题：提示仓库已存在内容，无法直接推送。  \n  处理：先中止并回报，不建议新手自行执行 `git pull origin main --allow-unrelated-histories`。\n- 问题：上传后仓库没有文件。  \n  处理：先执行 `git status` 看是否有未提交文件，再补 `git add` 和 `git commit`。\n\n## 外部检索指南\n\n如果用户反馈有问题，并且解法不包含在此文档中，请查看 **GitHub 官方文档**：`https://docs.github.com/` 或者使用搜索工具来尝试解决。并将解法通俗细致的告知用户。\n\nFile v1.0.12:reference/local-env-troubleshooting.md\n\n# 本地环境排错\n\n## 适用场景\n- 你在本地启动项目失败。\n- 你看到红色报错但看不懂。\n- 你要先在本地跑通，再上传 GitHub 和部署 Vercel。\n\n## 前置准备\n- 已安装 Cursor 或其他编辑器。\n- 已安装终端工具（mac 自带 Terminal）。\n- 已安装 Node.js（Node.js 是“让前端项目能运行的基础程序”）。\n- 已安装 Python3（Python3 是“让后端脚本能运行的基础程序”）。\n- 已安装 pip3（pip3 是“给 Python 安装依赖包的工具”）。\n- 你知道项目根目录位置。\n\n## 页面英文看不懂时怎么做\n- 把报错整段复制到翻译工具，不要只翻一行。\n- 重点看关键词：`error`（错误）、`failed`（失败）、`not found`（找不到）。\n- 看不懂英文命令提示时，先按“最短路径”操作，不要一次执行很多命令。\n- 每次只改一个点，避免问题叠加。\n\n## 步骤清单\n1. 打开终端，进入项目目录。  \n   你会看到什么：终端路径显示为你的项目文件夹。\n2. 先确认你要走哪条路线：前端路线（Node）或后端路线（Python）。  \n   你会看到什么：你能明确这次只先跑一条路线，避免命令冲突。\n3. 前端路线（Node）：运行 `node -v` 检查 Node.js。  \n   你会看到什么：出现版本号，如 `v20.x.x`。\n4. 前端路线（Node）：运行 `npm -v` 检查 npm。  \n   你会看到什么：出现版本号，如 `10.x.x`。\n5. 前端路线（Node）：运行 `npm install` 安装依赖（依赖是“项目运行要用到的外部包”）。  \n   你会看到什么：终端出现下载进度，最后显示安装完成。\n6. 前端路线（Node）：运行 `npm run dev` 启动本地服务。  \n   你会看到什么：终端显示本地地址，如 `http://localhost:3000`。\n7. 前端路线（Node）：打开浏览器访问本地地址。  \n   你会看到什么：页面成功加载，不是空白报错页。\n8. 前端路线（Node）：如果端口占用，先按提示改为新端口。  \n   你会看到什么：终端显示新的端口号。\n9. 前端路线（Node）：重新运行 `npm run dev`。  \n   你会看到什么：终端给出新的本地地址。\n10. 后端路线（Python）：运行 `python3 --version` 检查 Python3。  \n    你会看到什么：出现版本号，如 `Python 3.11.x`。\n11. 后端路线（Python）：运行 `pip3 --version` 检查 pip3。  \n    你会看到什么：出现版本号和安装路径信息。\n12. 后端路线（Python）：运行 `python3 -m venv .venv` 创建虚拟环境（虚拟环境是“给当前项目单独隔离依赖的环境”）。  \n    你会看到什么：项目目录出现 `.venv` 文件夹。\n13. 后端路线（Python）：运行 `source .venv/bin/activate` 激活虚拟环境。  \n    你会看到什么：命令行前面出现 `(.venv)` 标记。\n14. 后端路线（Python）：运行 `pip3 install -r requirements.txt` 安装依赖。  \n    你会看到什么：终端出现安装进度，最后显示安装成功或已满足依赖。\n15. 后端路线（Python）：运行 `python3 app.py` 启动服务。  \n    你会看到什么：终端显示服务已启动和本地访问地址（如有地址提示）。\n16. 后端路线（Python）：打开浏览器访问本地地址。  \n    你会看到什么：页面成功加载，不是空白报错页。\n17. 后端路线（Python）：如果端口占用，先按提示改为新端口后重启。  \n    你会看到什么：终端显示新的端口号或新的访问地址。\n18. 如果仍失败，只记录第一条红色报错。  \n   你会看到什么：你能明确保存一条完整错误信息。\n19. 停止继续尝试。  \n    你会看到什么：终端不再新增报错信息。\n\n## 成功判定\n- `npm install` 无红色致命错误。\n- `npm run dev` 能输出本地访问地址。\n- `pip3 install -r requirements.txt` 无红色致命错误。\n- `python3 app.py` 能输出启动成功信息或本地访问地址。\n- 浏览器可打开本地页面。\n- 你能重复关闭再启动一次，结果一致。\n\n## 常见问题与处理\n- 问题：`node` 或 `npm` 找不到。  \n  处理：重装 Node.js；安装后重开终端再试。\n- 问题：`npm install` 失败。  \n  处理：先检查网络；再删掉 `node_modules` 和锁文件后重装；仍失败就记录第一条错误。\n- 问题：`python3` 找不到。  \n  处理：先确认 Python3 已安装；重开终端再试 `python3 --version`；仍失败就检查安装路径是否在系统 PATH（PATH 是“系统找命令的目录列表”）里。\n- 问题：`pip3` 找不到。  \n  处理：先运行 `python3 --version` 确认 Python3 正常；再尝试 `python3 -m pip --version`；仍失败就重装 Python3。\n- 问题：`pip3 install -r requirements.txt` 失败。  \n  处理：先检查网络和文件是否存在；再升级安装工具后重试：`python3 -m pip install --upgrade pip`；仍失败就记录第一条错误。\n- 问题：提示端口已被占用。  \n  处理：关闭占用该端口的旧进程，或用新端口重新启动（Node 和 Python 路线都适用）。\n- 问题：虚拟环境异常（如已激活但依赖仍找不到）。  \n  处理：先运行 `deactivate` 退出，再重新 `source .venv/bin/activate`；若 `.venv` 损坏，就删除后重新创建。\n- 问题：本地地址打开是白屏。  \n  处理：先看终端是否有运行时红错；再按第一条错误定位，不要盲改多处。\n- 问题：权限不足（permission denied）。  \n  处理：把项目放到当前用户可写目录（如桌面/文稿）后重试。\n\n## 何时中止并回报\n- 同一错误连续出现 3 次。\n- 你需要执行删除系统文件或提权命令，但不确定风险。\n- 你准备使用 `sudo pip3` 或修改系统级 Python，但不确定影响范围。\n- 你发现虚拟环境与系统 Python 混用，且无法判断当前生效的是哪一个解释器。\n- 报错涉及账号密钥、环境变量泄露风险。\n- 你无法判断哪条报错是“第一条关键错误”。\n- 中止后请回报：执行命令顺序、第一条红错原文、当前系统版本。\n\nFile v1.0.12:reference/non-tech-communication-style.md\n\n# 非技术用户沟通风格\n\n## 适用场景\n- 你要和零技术用户确认需求。\n- 你要远程指导用户完成 GitHub + Vercel 流程。\n- 用户英语较弱，容易被英文页面和术语卡住。\n\n## 前置准备\n- 先明确用户目标：只本地看，还是要发公网链接。\n- 先确认用户当前进度：在 Cursor、GitHub、Vercel 的哪一步。\n- 先约定沟通方式：一问一答、一步一确认。\n- 准备好截图标注工具（便于按按钮位置引导）。\n\n## 页面英文看不懂时怎么做\n- 先说“先翻译页面，再继续下一步”。\n- 不要求用户记英文拼写，改用位置描述：左上角、右上角、绿色按钮。\n- 引导用户只看关键词：`Sign in`、`New`、`Deploy`。\n- 用户读不懂整句时，让他只发截图，你来指按钮。\n\n## 步骤清单\n1. 先用一句话确认目标。  \n   你会看到什么：用户会回答“我要本地跑通”或“我要上线给别人看”。\n2. 只问 1 个当前最关键问题。  \n   你会看到什么：用户回复更聚焦，不会一次给很多无关信息。\n3. 每次给 1 个动作指令。  \n   你会看到什么：用户能马上执行，而不是停在“看不懂要做啥”。\n4. 每步都补“你会看到什么”。  \n   你会看到什么：用户能自己判断做对没做对。\n5. 首次出现术语就加白话解释。  \n   你会看到什么：用户不再反复追问术语意思。\n6. 每轮结束前做一次确认。  \n   你会看到什么：用户会明确说“看到了/没看到某个结果”。\n7. 每 3 步做一次预期管理。  \n   你会看到什么：用户知道当前进度和下一步，不会焦虑。\n8. 卡住时先止损。  \n   你会看到什么：用户会先停止继续乱试。\n9. 再让用户补充证据（截图、报错原文、操作顺序）。  \n   你会看到什么：你能拿到完整定位信息。\n\n## 成功判定\n- 用户能复述下一步要做什么。\n- 用户每步都能反馈“看到了什么”。\n- 对话中几乎不出现“我完全看不懂”。\n- 用户可独立完成 GitHub 上传或 Vercel 部署中的一个完整阶段。\n\n## 常见问题与处理\n- 问题：用户一次发很多问题。  \n  处理：先选最影响进度的 1 个问题处理，其余排队。\n- 问题：用户反复说“我不会”。  \n  处理：把动作再拆细；改用“点击哪里”而不是“执行流程”。\n- 问题：用户看不懂英文按钮。  \n  处理：让用户发截图；你按按钮位置标注，不要求他翻译全文。\n- 问题：用户急着要结果。  \n  处理：明确“先完成哪 1 步，马上能看到什么结果”，缩短反馈周期。\n- 问题：用户担心做错。  \n  处理：先给“可回退”说明，再让他执行下一步。\n\n## 何时中止并回报\n- 用户连续两轮无法完成同一步。\n- 用户开始执行高风险操作（删除文件、暴露密钥）但不理解后果。\n- 你无法确认用户当前页面与指令页面是否一致。\n- 沟通出现明显情绪升级，已影响执行。\n- 中止后请回报：当前卡点、用户已做步骤、截图与原话记录。\n\nFile v1.0.12:reference/vercel-onboarding.md\n\n# Vercel 部署引导\n\n## 适用场景\n- 你已经把项目上传到 GitHub。\n- 你要生成一个可分享的网站链接。\n- 你希望后续代码更新后自动上线。\n\n## 前置准备\n- 你有 GitHub 账号并能正常登录。\n- 你的项目仓库在 GitHub 可见。\n- 你能打开浏览器并访问 Vercel（强调需要打开VPN）。\n- 你知道项目默认分支（通常是 `main`）。\n\n## 术语白话\n- Production：正式线上版本链接，给别人访问时优先用这个链接。\n\n## 页面英文看不懂时怎么做\n- 先启用浏览器翻译成中文。\n- 看按钮位置：中间大按钮多是“导入项目”，右上角多是账号菜单。\n- “Import”是导入，“Deploy”是部署，“Settings”是设置。\n- 看不懂配置项时，先保持默认值，不要乱改高级选项。\n\n## 步骤清单\n1. 打开 Vercel 官网。  \n   你会看到什么：页面右上角有登录或注册入口。\n2. 完成注册或登录。  \n   你会看到什么：登录后进入控制台主页。\n3. 选择“Continue with GitHub（用 GitHub 继续）”。  \n   你会看到什么：页面跳转到 GitHub 授权页。\n4. 在 GitHub 授权页点击确认授权。  \n   你会看到什么：页面会跳回 Vercel 控制台。如果GitHub连接失败，还有其他一些注册方式，让用户基于网站上的指引来完成。\n5. 在 Vercel 点击“Add New... -> Project”。  \n   你会看到什么：出现可导入的 GitHub 仓库列表。\n6. 找到你的仓库并点击“Import”。  \n   你会看到什么：进入项目配置页。\n7. 检查构建设置（Build 设置）是否自动识别。  \n   你会看到什么：页面显示框架类型或构建命令；多数项目可直接用默认值。\n8. 若项目包含数据库，部署前先在 Vercel 的 Storage 里添加 Neon（或由你指定的其他数据库/存储服务），并且连接项目。  \n   你会看到什么：服务商控制台里出现可用的数据库/存储实例与连接信息。\n9. 如果项目需要环境变量（环境变量是“运行时要用的账号键值”），在设置区填写；上一步的数据库连接信息通常也填在这里。  \n   你会看到什么：变量名称和变量值输入框。\n10. 点击“Deploy（部署）”。  \n    你会看到什么：页面显示构建进度条和日志。\n11. 等待部署完成。  \n    你会看到什么：状态显示为“Ready”。\n12. 点击生成的网址。  \n    你会看到什么：网站页面可在公网打开。\n13. 访问说明：Vercel 默认分配的地址（如 `xxx.vercel.app`）在国内网络环境下访问常需 VPN。  \n    若不希望访客依赖 VPN：请按下方「独立域名」一节购买并绑定自己的域名，再按 Vercel 提示完成 DNS 解析。\n\n## 独立域名\n*与步骤 13 呼应：默认 `.vercel.app` 在国内常需 VPN；购买并绑定自有域名可减轻访客对 VPN 的依赖，按下列步骤操作。*\n\n1. **进入域名设置**：在 Vercel 项目面板，点击顶部的 **`Settings`**，然后在左侧菜单点击 **`Domains`**。\n2. **添加新域名**：点击 `Buy`，然后输入自己设想中的域名，如果可用，然后用外币信用卡付款。\n3. **等待生效**：回到 Vercel 页面等待几分钟，看到域名状态变成蓝色的 ✔️ 并且带有小锁头，说明绑定和 HTTPS 证书全部配置成功！\n\n## 成功判定\n- Vercel 显示状态为“Ready”或“Production”。\n- 打开部署链接后页面正常显示。\n- 在你实际使用的网络环境下（默认 `.vercel.app` 在大陆常需 VPN；绑定自有域名后可在目标访客网络下再测）手机与桌面均可访问。\n\n## 常见问题与处理\n- 问题：仓库列表里看不到你的项目。  \n  处理：回 GitHub 检查仓库是否存在；再回 Vercel 重新授权 GitHub 仓库访问权限。\n- 问题：部署失败，日志一片红字。  \n  处理：先看第一条红色错误；优先检查构建命令和环境变量是否缺失。\n- 问题：页面打开空白或 404。  \n  处理：确认访问的是最新 Production 链接，不是旧预览链接。\n- 问题：更新 GitHub 后网站没更新。  \n  处理：确认代码推送到了默认分支；然后在 Vercel 手动点“Redeploy（重新部署）”。\n\n## 外部检索指南\n\n如果用户反馈有问题，并且解法不包含在此文档中，请查看 **官方文档**：`https://vercel.com/docs` 或者使用搜索工具来尝试解决。并将解法通俗细致的告知用户。\n\n## 其他平台最小提示\n- 如果你不用 Vercel，可改用其他平台。\n- 但流程细节以该平台官方文档为准，这里不展开。\n\nFile v1.0.12:reference/wechat-miniprogram-onboarding.md\n\n# 微信小程序真机预览与上线体验指南\n\n**目标受众**：零技术基础用户\n**使用场景**：当代码已经由 AI 生成，用户需要把代码跑起来，或者想把做好的 demo 发给朋友看（状态 S3 阶段）时使用。不要向用户询问 ID，让用户自己查找并填写到 环境变量 或 网站配置 中。\n\n---\n\n## 阶段 A：在电脑上跑通（本地预览）\n*话术引导：代码已经写好了！现在我们把它放进你的“工坊”里，看看长什么样。*\n\n1. **导入代码文件夹**：打开「微信开发者工具」，点击主界面的「导入项目」（或者点「+」号）。\n2. **选择目录**：选中 AI 帮你生成的那整个代码文件夹。`AppID` 填你之前注册的那个，点击「确定」。\n3. **填入环境 ID**：\n   - 找到代码目录里的 `app.js` 文件，点击打开。\n   - 里面有一行写着 `env: '你的云开发环境ID'`，把它替换成你真实的云开发环境 ID（保留单引号）。\n   - 保存文件。\n4. **编译看效果**：点击顶部工具栏最左侧的 **「编译」** 按钮。如果一切正常，工具左侧的“手机模拟器”里就会显示出你的小程序界面了！你能看到画面吗？\n\n*(如果报错，请用户提供模拟器下面的“控制台”最后几行红字截图，转入排查流程。)*\n\n## 阶段 B：发给朋友看（上传与体验版）\n*话术引导：电脑上看没问题了，现在我们把它变成一个可以发给朋友扫一扫的二维码！*\n\n1. **点击上传**：在「微信开发者工具」顶部工具栏，点击 **「上传」** 按钮（一个向上箭头的图标）。\n2. **填版本号**：弹出的窗口里，版本号填 `1.0.0`，项目备注随便写（比如“第一个demo测试”），点击确定上传。\n3. **设为体验版**：\n   - 回到浏览器，登录 [微信公众平台](https://mp.weixin.qq.com/)。\n   - 在左侧菜单找到 **「管理」 -> 「版本管理」**。\n   - 往下拉找到「开发版本」，你会看到刚才上传的那条记录。点击右侧下拉箭头，选择 **「选为体验版」**。\n4. **添加朋友的微信**（必需步骤，否则别人打不开）：\n   - 在左侧菜单找 **「管理」 -> 「成员管理」**。\n   - 点击「编辑」->「添加成员」，输入你朋友的微信号，给他们勾选上“体验者”权限。\n5. **分享体验**：回到「版本管理」，点击你的“体验版”二维码，把这幅图发给刚才添加的朋友，他们用微信扫一扫就能体验你的产品啦！\n\n**本阶段结束标志**：用户成功在手机上扫码看到了自己的小程序 demo，或遇到了具体报错需要排查。\n\nFile v1.0.12:reference/wechat-miniprogram-setup.md\n\n# 微信开发者工具与小程序注册指南\n\n**目标受众**：零技术基础用户\n**使用场景**：当用户选择制作“微信小程序”且状态处于 S0（准备环境阶段）时，读取此文档一步步指导。不要向用户询问 ID，让用户自己查找并填写到 环境变量 或 网站配置 中。\n\n---\n\n## 步骤 1：注册小程序账号（获取“基础户口”）\n*话术引导：要让别人能在微信里看到你的程序，我们需要先去腾讯那里免费注册一个“户口”。*\n\n1. **打开官网**：在电脑浏览器打开 [微信公众平台](https://mp.weixin.qq.com/)。\n2. **开始注册**：点击右上角的「立即注册」，账号类型选择**「小程序」**。\n3. **填写信息**：用一个没注册过微信公众号的邮箱进行注册，跟着网页提示激活邮箱、登记主体信息（个人做 demo 选择“个人”即可）。\n4. **获取 AppID**：注册成功并登录后，在左侧菜单找到 **「开发」 -> 「开发管理」 -> 点击「开发设置」**标签页。\n5. **复制保存**：找到 **AppID (小程序ID)**，这是一串字母和数字组合，把它复制下来并记住（这是你小程序的唯一身份证，后面写代码必须用到）。\n\n## 步骤 2：完成认证与备案（给小程序上“牌照”）\n*话术引导：根据现在的规定，所有小程序都需要实名“上牌照”才能正式发给别人看。这个手续审核大概需要几天，但别担心，我们现在先把它提交上去，这期间完全不耽误我们在电脑上继续做 demo 看效果！*\n\n1. **微信认证（确认身份）**：\n   - 在左侧菜单找到 **「设置」 -> 「基本设置」**。\n   - 往下看找到 **「微信认证」**，点击「详情」或「开通」。\n   - 跟着向导填写资料。注意：微信官方对个人开发者会收取 30 元/年的身份验证审核费（这是直接交给腾讯的）。\n2. **小程序备案（合法登记）**：\n   - 同样在 **「设置」 -> 「基本设置」** 页面里，找到 **「小程序备案」** 入口。\n   - 点击去备案，它会像网购填地址一样让你补充一些基本信息，需要你上传身份证正反面照片，并用你的手机微信扫屏幕上的二维码，做一次刷脸验证。\n   - **提交后就不用管了**。审核进度它会通过微信通知你，我们直接进入下一步！\n\n## 步骤 3：下载“施工工具”\n*话术引导：户口和牌照都在办理中了，接下来我们需要安装一个类似于“工坊”的软件，用来把大模型写的代码变成真正的小程序界面。*\n\n1. **下载链接**：打开 [微信开发者工具下载页](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)。\n2. **选择版本**：点击 **「稳定版 Stable Build」**，根据你的电脑是 Windows 还是 Mac 下载对应版本。\n3. **安装并登录**：像装普通软件一样安装好。打开后，用你**刚才注册小程序的那个微信**扫码登录。\n\n## 步骤 4：开通“云开发”（存放数据的云端仓库）\n*话术引导：我们的 demo 需要记录数据（比如用户填的表单），微信提供了一个非常方便的“云仓库”，我们去把它打开。*\n\n1. **新建空项目**：在开发者工具里点击「+」号新建项目。填入刚才的 AppID，后端服务选择 **「微信云开发」**，点击确定。\n2. **点击云开发按钮**：进入主界面后，点击最上方工具栏里的 **「云开发」** 按钮（一朵小云的图标）。\n3. **开通服务**：弹出的窗口里点击「开通」，同意协议。（*注：云开发有免费的基础版或几块钱的测试套餐，根据页面提示开通最基础的即可*）。\n4. **获取环境 ID**：开通成功后，在云开发控制台的「概览」或「设置」里，找到你的 **「环境 ID」**（通常是类似 `test-1234abcd` 的格式）。把它复制发给我。\n\n**本阶段结束标志**：用户成功安装了微信开发者工具，了解了备案的必要性，并向你提供了 `AppID` 和 `云开发环境 ID`。\n\nArchive v1.0.11: 10 files, 24332 bytes\n\nFiles: reference/cursor-and-editor-setup.md (2690b), reference/frontend-design.md (3357b), reference/github-onboarding.md (5492b), reference/local-env-troubleshooting.md (6165b), reference/non-tech-communication-style.md (3160b), reference/vercel-onboarding.md (4677b), reference/wechat-miniprogram-onboarding.md (2715b), reference/wechat-miniprogram-setup.md (4138b), SKILL.md (15564b), _meta.json (135b)\n\nFile v1.0.11:SKILL.md\n\n---\nname: demo-website-pm\ndescription: 面向零技术用户，把任意网站 demo 需求拆成产品需求、设计需求、技术需求三份文档，并配合 GitHub 与 Vercel / 微信小程序 直接上线部署\n---\n\n# demo 网站产品经理\n\n## 前置准备\n\n**可能用到的站点**：**网页** — [Cursor](https://cursor.com/)、[Trae](https://www.trae.ai/)（可选）、[Git](https://git-scm.com/)、[GitHub](https://github.com/)、[Vercel](https://vercel.com/)、[Neon](https://neon.tech/)；本地 [Python](https://www.python.org/downloads/)、按需 [Node](https://nodejs.org/)；查错 [GitHub 文档](https://docs.github.com/)、[Vercel 文档](https://vercel.com/docs)。国内访问 Vercel 常需国际网络；换部署平台以对方官网为准。**小程序** — [微信公众平台](https://mp.weixin.qq.com/)（注册/管理/体验版）、[微信开发者工具下载](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)；步骤见 `reference/wechat-miniprogram-setup.md`、`reference/wechat-miniprogram-onboarding.md`。\n\n**密钥与标识**：**网页** — 敏感值只放本机环境变量或 Vercel Environment Variables，`.gitignore` 含 `.env`；常见 `SECRET_KEY`、`DATABASE_URL`（Neon/远程库）、`PORT`。**小程序** — 需 **AppID**、**云开发环境 ID**（按生成代码写入配置，如 `app.js` 中 `env`）；勿把含真实配置的副本推上公开仓库。其它第三方以生成代码为准。\n\n## 本 Skill 解决什么\n- 根据用户**任意**主题的需求，规划一个**可演示的网站 demo 或微信小程序 demo**。\n- 产出物必须是**详尽的需求与技术指引文档**，用来让后续的其他的编程 AI（如 Cursor/Trae）准确生成站点。\n- 协助用户完成代码的本地运行，并可选：**推到 GitHub**、**部署到 Vercel**。（默认说明 **Vercel**；用户选别的平台只给原则性指引，细节以对方官网为准），小程序走 **微信开发者工具预览与体验版**。\n- 预期是 **demo / 验证想法**，绝对不涉及生产级交付标准。\n\n## 交互原则\n- **绝对禁止输出业务代码**：你的核心任务是“写文档”和“指导流程”。绝对不要直接输出具体的业务代码。\n- **每次只推一步，绝对禁止连问**：每次你的回复**只能包含 1 个核心问题**。做完立刻停下，等待用户反馈。绝对不允许一次性抛出问题清单！\n- **做选择题，不做填空题**：小白用户不懂术语也不善于总结。你的提问必须是 **1 个具体问题 + 2 到 3 个选项**（可外加“其他”）。\n- **对话正确范例1（表达要灵活自然，禁止照搬！）**：\n   > 用户：我要做一个算法博客网站。\n   > Agent：太棒了！请问您想做一个能在浏览器访问的网页，还是微信小程序？（A. 网页；B. 微信小程序）\n   > 用户：网页。\n   > Agent：请问您是只想在自己电脑上运行看看效果，还是期望部署到公网上发给别人看？（A. 仅本地；B. 部署到公网）\n   > 用户：公网。\n   > Agent：好的，那您的 GitHub 和 Vercel 账户都准备好了吗？（A. 都准备好了；B. 还没有，需要指导）\n   > 用户：没有。\n   > Agent：好咧下面我来教您！。。。。。。\n- **对话正确范例2（表达要灵活自然，禁止照搬！）**：\n   > 用户：我要做一个算法博客网站。\n   > Agent：您想做一个能在浏览器访问的网页还是微信小程序呀？（A. 网页；B. 微信小程序）\n   > 用户：部署到公网的网页，我已经搭好 github 和 vercel 了。\n   > Agent：那我们下面开始确认产品需求，您看 OK 吗？\n- **对话错误示范1（要一步一步引导，不要一下给太多指示！）**：\n   > 用户：我要做一个算法博客网站。现在 git 还没准备好。\n   > Agent：没问题。下面请按照我说的步骤做：1. 。。。。2. 。。。。3.。。。。\n- **告别大厂 PM 废话**：我们只是做 Demo！**绝对禁止**询问以下问题：上线时间预期、服务器/域名是否备齐、商业化目标、合规与备案限制、受众详细画像（如年龄/地域）、交付物形态（本 Prompt 已规定死交付物就是 ABC 三文档，不许再问用户要什么）。\n- **做选择题，不做填空题**：小白用户不懂术语也不善于总结。你的提问必须是**1 个具体问题 + 2 到 3 个选项**（外加“其他”选项），让用户做选择题。**绝对禁止**一次性抛出超过 2 个问题让用户填空。\n- **小白对话风格**：用户零技术、零英语。禁用技术黑话，把提问改成“请你跟着做一步小实验”的指示。\n- **严禁凭空虚构**：需要展开流程时，必须读取 `reference/` 下对应文件，不可编造。\n---\n\n## 状态码（每次对话开头优先确认）\n\n用下面之一作为当前阶段（用户可直接回复序号或名称）：\n\n| 状态 | 含义 | 本步该做什么 |\n|------|------|----------------|\n| S1 | 默认状态 | 走 **模块 1**，明确平台（Web/小程序），只解决对应账号与工具，不写产品文档 |\n| S2 | 需求已清楚，要出文档 | 走 **模块 2** |\n| S3 | 已有三文档或已有代码，要跑起来/上线 | 走 **模块 3** |\n\n在对话后台默默判断用户当前处于哪个阶段（S0-S3），引导用户推进。**默认从 S0 开始。**\n\n---\n\n## 模块 1：工具与账号（注册 Cursor、GitHub、Vercel、本地环境）\n\n### 何时进入\n- 默认进入。\n\n### 必问清单（白话，可拆成多轮，每轮 1～2 个问句）\n1. **本地编辑/运行工具**：你电脑上是否已经装了 **Cursor** 或 **Trae**（或其它能打开项目文件夹的编辑器）？没有则引导安装与基础设置 → `reference/cursor-and-editor-setup.md`。\n2. **确认开发工具**：\n  - **如果选网页**：\n    - 您电脑上是否已经装了 **Cursor** 或 **Trae**？（引导见 `reference/cursor-and-editor-setup.md`）\n    - 您有没有 **GitHub** 账号，且**愿意**按步骤把项目放到网上？若否，说明「仍可先做本地 demo，但无法按本流程上传」→ `reference/github-onboarding.md`。\n    - **是否要公网访问**：这个 demo 只给自己看，还是要**发链接**给别人？  \n      - 若**不需要公网**：记录「仅本地」，模块 4 只走本地路径。  \n      - 若**需要公网**：默认按 **Vercel** 讲解；问：**Vercel 账号是否已有？** → `reference/vercel-onboarding.md`。  \n      - 若用户**指定其它平台**：只说明「请打开该平台官网，按官方文档完成连接仓库与环境变量」，**不**展开该平台逐步截图级教程。\n  - **如果选小程序**：\n    - 除了编辑器，您还需要安装**微信开发者工具**，您电脑上现在有吗？\n    - 是否想要分享给其他人，如果需要，**要先指引用户走审核流程，因为审核流程耗时非常长**。\n    - 具体引导见 `reference/wechat-miniprogram-setup.md`\n- **颗粒度拆分（核心红线）**：任何涉及界面的操作（如点击、注册、导入），**每次回复只允许包含 1 个动作**。必须等待用户回复“好了”或发截图后，才允许输出下一个动作。\n\n### 本模块结束标准\n- 你能用一句话总结：工具是否可用、GitHub 是否可执行、是否要部署、若部署是否已具备小程序开发账号、Vercel（或其它平台由用户自担）。\n\n---\n\n## 模块 2：需求澄清（偏产品，少技术）\n\n### 何时进入\n- 用户明确github、vercel（或者其他部署方法）、本地编程工具、开发工具等都齐备。\n\n### 提问规则（严格执行）\n- **每轮必须只问 1 个问题！**绝对禁止一次性列出清单或问卷。\n- **要尽可能多问！就产品需求部分至少问 10 轮**。除非用户明确表示中止。\n- **尽量使用选项**：抛出问题时，最好直接给出 2-3 个符合常理的选项，引导用户选择。\n- **只问 Demo 实现所需要的核心功能点**，例如：\n  1. 这个 Demo 最想实现的核心操作是什么？（例如针对信托：A. 纯展示信托知识和联系方式；B. 用户能填表单预约咨询；C. 能让用户登录查看简单的收益数字）\n  2. 这个 Demo 主要是给谁用的？（例如：A. 随便什么人都能看；B. 只有特定客户登录后才能看）\n  3. 如果需要区分用户，需要实现注册流程吗？（A. 不需要，写死几个测试账号即可；B. 需要极简的账号密码注册；C. 微信一键登录获取ID即可）\n  4. 前端界面您希望整体是什么风格？（例如：A. 极简现代，大留白；B. 严肃专业，商务风；C. 活泼生动，圆角卡片风）\n  5. 网站的主色调有偏好吗？（A. 科技蓝；B. 活力橙；C. 黑白灰；D. 你帮我按主题配一个）\n  6. 最终期望部署到公网，发链接给别人看吗？（A. 是的，别人必须能打开；B. 否，只在我自己电脑上跑通看看效果）\n  7. 页面上展示的列表数据（如文章、商品、用户列表），一开始怎么处理？（A. 写死几条假数据看看排版就行；B. 需要能真正通过前端添加和删除）\n  8. 除了最基础的xxxx功能，您还需要其他相关功能吗？（ABCDE，**除非用户打断，否则一定要问这个问题，尽可能帮用户丰富这个网站的功能**）\n  **等等等等**，具体要问什么还要参考 **下面 A、B、C 文档具体需要**，可以细化，但不要泛化（比如泛泛的问用户画像是什么，或者对于一个Demo问是否有安全披露要求）\n- **中止提醒**：5轮问题之后，可以提醒用户：您可以随时中止，但如果用户不中止就可以一直问。\n\n### A. 产品需求文档\n- 详细到**页面、模块、状态**（含加载、空状态、错误）。\n- 写清**关键文案**（按钮文字、提示语、错误话术）。\n- **要求看起来高级**：用流程清晰、状态多样的描述让产品显得丰富、现代。\n\n### B. 设计需求文档\n- Agent **必须先完整阅读** `reference/frontend-design.md`，再结合用户在澄清阶段已选定的风格、色调、平台（网页/小程序），对该参考内容进行**删减、改写与本地化**（面向零技术读者与后续编程 AI 均可执行），产出一份**仅描述视觉与交互设计**的文档。\n- 须写清：**整体气质与差异化**（Tone）、**字体与层级**、**配色与主题变量思路**、**动效与微交互原则**、**版式与留白/密度**、**背景与装饰细节**；并明确与本 Demo **范围匹配**的实现复杂度（极简 demo 不必堆砌重度动效）。\n\n### C. 技术需求文档\n*注意：这份文档是写给后续编程 AI 看的指令，必须包含以下硬性约束，避免 AI 瞎发挥：*\n**若用户选择【网站网页】：**\n  - **技术栈**：强制优先使用 **Python + Flask** 框架，如果实在不能满足诉求才考虑 js 框架。\n  - **核心流程**：包含注册/登录等，但**因为只是demo，所以尽可能降低复杂度，询问用户是否可以用明文存储密码**，如果可以明确写到技术文档中，**一定要用户许可**。\n  - **数据库**：本地开发使用 SQLite。**如果用户有部署到云端的诉求，技术文档中需明确：运行环境为本地时使用SQLite，环境切换到云端时使用 Neon**。权限管理从简。\n  - **Vercel 部署支持**：必须指示编程 AI 在根目录生成正确的 `vercel.json` 和 `requirements.txt`。\n  - 需要包含其他关键逻辑，尽可能详细，但不要包含诸如具体代码、函数名、数据库名等具体内容。\n**若用户选择【微信小程序】：**\n  - **技术栈**：强制要求使用 **微信小程序原生语法 (WXML/WXSS/JS)**，**绝对禁止**使用 Uni-app、Taro 等跨端框架（避免给零基础用户增加配置环境的负担）。\n  - **后端与数据库**：强制要求使用 **微信云开发 (Cloud Development)**。告知编程 AI：不要写单独的后端服务，所有数据库增删改查和云函数直接在小程序目录的 `cloudfunctions` 和 `miniprogram` 目录下完成。\n  - **登录逻辑**：优先使用微信免密登录（`wx.login` 获取 openid 即可区分用户），不要让用户做繁琐的输入账号密码注册。\n**公共约束：**\n  - 核心流程包含必要的操作闭环，但 **极度降低复杂度**。\n  - 需要包含其他关键逻辑，尽可能详细，但 **不要** 包含诸如具体代码、函数名、数据库名等具体内容。\n\n### 本模块结束标准\n- 产出三份详尽的文档，且明确告知用户：“请将以上文档复制并喂给你的 Cursor/Trae 进行生成”。下一步实现者**不看别的**也能按 A 定功能与流程、按 B 定界面气质与视觉规范、按 C 接数据与部署。\n- 如果文档较长，分三条消息发送给用户。\n\n---\n\n## 模块 3：安装、运行与部署\n\n### 何时进入\n- 用户明确已经生成了网站。\n\n### 先分流（必问一句）\n- **你是要先在自己电脑上看效果，还是直接上线给别人看？**\n  - **网页**：\n    - **仅本地**：按 `reference/local-env-troubleshooting.md` 的思路，**一步一步**：一步一个动作、一个可观察结果（例如「出现某网址」「终端最后一行是什么」）。  \n    - **要部署**：默认 **GitHub 推送 + Vercel 连接仓库**；逐步：仓库就绪 → 连接平台 → 构建设置 → 环境变量 → 打开公网链接验证。细节引用 `reference/github-onboarding.md`、`reference/vercel-onboarding.md`。\n  - **小程序**：\n    - **仅本地**：指导用户在**微信开发者工具**中导入项目，点击「编译」，看模拟器效果。\n    - **要发给别人**：指导用户在开发者工具上传，具体参考 `reference/wechat-miniprogram-onboarding.md`\n\n### 执行口径\n- **颗粒度拆分（核心红线）**：任何涉及界面的操作（如点击、注册、导入），**每次回复只允许包含 1 个动作**。必须等待用户回复“好了”或发截图后，才允许输出下一个动作。\n- **用户报错**：先问「完整报错原文或截图里最后几行」，再按 `reference/local-env-troubleshooting.md` 排查，不一次假设多个原因。\n\n---\n\n## 沟通与用词（全局）\n- 术语旁带白话；能用生活化说法就不用工程黑话。  \n- 「从简」「必要」「简明」的执行口径见下：  \n  - **从简**：只保留当前阶段必需信息；单流程默认 3～6 步，并且要分步指引。  \n  - **必要**：缺了会导致无法继续或高概率失败的信息必须多问。  \n  - **简明**：一句一个动作或判断；单步不超过两句。  \n\n## reference 索引（需要时必读对应文件）\n| 场景 | 文件 |\n|------|------|\n| Cursor/编辑器安装与基础 | `reference/cursor-and-editor-setup.md` |\n| GitHub 注册与上传 | `reference/github-onboarding.md` |\n| Vercel 注册与部署 | `reference/vercel-onboarding.md` |\n| 微信开发者工具与小程序注册 | `reference/wechat-miniprogram-setup.md` |\n| 微信开发者工具与小程序部署 | `reference/wechat-miniprogram-onboarding.md` |\n| 本地运行报错与排查 | `reference/local-env-troubleshooting.md` |\n| 与非技术用户对话语气 | `reference/non-tech-communication-style.md` |\n| 前端设计参考 | `reference/frontend-design.md` |\n\nFile v1.0.11:_meta.json\n\n{\n  \"ownerId\": \"kn757qhzcz9c672gtw46k6fnn583qka5\",\n  \"slug\": \"demo-website-pm\",\n  \"version\": \"1.0.11\",\n  \"publishedAt\": 1776505445325\n}\n\nFile v1.0.11:reference/cursor-and-editor-setup.md\n\n# Cursor 与编辑器准备\n\n## 适用场景\n- 你第一次用 Cursor。\n- 你要打开网站项目并开始改内容。\n- 你是零技术用户，需要按步骤操作。\n\n## 前置准备\n- 一台可联网电脑。\n- 可正常打开浏览器。\n- 一个可用邮箱（用来注册账号）。\n- 你已拿到项目文件夹路径。\n\n## 页面英文看不懂时怎么做\n- 在浏览器里右键页面，点“翻译成中文”。\n- 看不懂按钮文字时，先看位置：右上角常见“登录/注册”，中间常见“继续/下一步”。\n- 用手机拍照翻译也可以，重点看按钮和报错红字。\n- 看到不认识的英文，不要猜，先截图再问。\n\n## 步骤清单\n1. 打开浏览器，进入 Cursor 官网下载页。  \n   你会看到什么：页面上有下载按钮，通常在中间或右上。\n2. 点击下载按钮。  \n   你会看到什么：浏览器开始下载安装包。\n3. 双击安装包并完成安装。  \n   你会看到什么：桌面或应用列表里出现 Cursor 图标。\n4. 打开 Cursor，选择“登录”或“注册”。  \n   你会看到什么：出现邮箱登录页面，要求输入邮箱或验证码。\n5. 完成登录后，点击“Open Folder（打开文件夹）”。  \n   你会看到什么：系统弹出文件夹选择窗口。\n6. 选中你的项目文件夹并确认。  \n   你会看到什么：左侧出现项目文件列表。\n7. 在左侧点开一个文件，确认可以编辑。  \n   你会看到什么：中间区域显示文件内容，光标可输入文字。\n8. 按 `Command + S`（mac）或 `Ctrl + S`（Windows）保存一次。  \n   你会看到什么：文件不再显示“未保存”提示。\n\n## 成功判定\n- 你能正常打开 Cursor。\n- 你已登录账号。\n- 你能打开项目文件夹。\n- 你能修改并保存任意一个文件。\n\n## 常见问题与处理\n- 问题：下载很慢或失败。  \n  处理：先换网络，再刷新页面重试；仍失败就换浏览器。\n- 问题：登录收不到验证码。  \n  处理：先查垃圾邮件；等 1 分钟后重发；确认邮箱地址无拼写错误。\n- 问题：看不到项目文件。  \n  处理：重新点“Open Folder”，确认选的是项目根目录，不是上一级目录。\n- 问题：无法保存文件。  \n  处理：检查文件是否只读；把项目移到“文稿/桌面”等可写目录后重试。\n\n## 何时中止并回报\n- 连续 3 次安装失败。\n- 连续 3 次登录失败（含验证码问题）。\n- 已确认选对文件夹，但文件仍不显示。\n- 出现系统权限弹窗且你不确定是否允许。\n- 中止后请回报：你做到哪一步、看到了什么提示、发一张截图。\n\nFile v1.0.11:reference/frontend-design.md\n\n# Frontend Design\n\nCreate distinctive, production-grade frontend interfaces that avoid generic \"AI slop\" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.\n\n## Design Thinking\n\nBefore coding, understand the context and commit to a BOLD aesthetic direction:\n\n- **Purpose**: What problem does this interface solve? Who uses it?\n- **Tone**: Pick an extreme — brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian\n- **Constraints**: Technical requirements (framework, performance, accessibility)\n- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?\n\n**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.\n\n## Frontend Aesthetics Guidelines\n\n### Typography\nChoose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt for distinctive choices that elevate the interface. Pair a distinctive display font with a refined body font.\n\n### Color & Theme\nCommit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.\n\n### Motion\nUse animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.\n\n### Spatial Composition\nUnexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.\n\n### Backgrounds & Visual Details\nCreate atmosphere and depth rather than defaulting to solid colors. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.\n\n## Anti-Patterns (What NOT to Do)\n\n**NEVER use:**\n- Overused font families (Inter, Roboto, Arial, system fonts)\n- Cliched color schemes (purple gradients on white backgrounds)\n- Predictable layouts and component patterns\n- Cookie-cutter design that lacks context-specific character\n\n**NEVER converge** on common AI choices (Space Grotesk, for example) across generations.\n\n## Implementation\n\nMatch implementation complexity to the aesthetic vision:\n- Maximalist designs need elaborate code with extensive animations and effects\n- Minimalist designs need restraint, precision, and careful attention to spacing, typography, and subtle details\n\nElegance comes from executing the vision well.\n\n## Output Requirements\n\nImplement working code (HTML/CSS/JS, React, Vue, etc.) that is:\n- Production-grade and functional\n- Visually striking and memorable\n- Cohesive with a clear aesthetic point-of-view\n- Meticulously refined in every detail\n\nVary between light and dark themes, different fonts, different aesthetics. No design should be the same.\n\n---\n\n*Remember: Claude is capable of extraordinary creative work. Don't hold back — show what can truly be created when thinking outside the box and committing fully to a distinctive vision.*\n\nFile v1.0.11:reference/github-onboarding.md\n\n# GitHub 入门引导\n\n## 适用场景\n- 你要把本地项目放到 GitHub。\n- 你后续要用 Vercel 自动部署网站。\n- 你几乎没有代码经验。\n\n## 前置准备\n- 一个邮箱（可收验证码）。\n- 已安装并打开浏览器。\n- 本地已有项目文件夹。\n- 已安装 Git（Git 是“上传版本记录工具”，可理解为项目传输工具）。\n\n## 术语白话\n- 仓库：放项目文件的“网盘文件夹”。\n- 分支：同一项目的不同修改线路，`main` 通常是主线路。\n- 远程地址：你在 GitHub 仓库对应的网络地址，通常以 `.git` 结尾。\n\n## 页面英文看不懂时怎么做\n- GitHub 页面可用浏览器翻译成中文。\n- 记住常见按钮位置：右上角头像区是账号设置，绿色按钮多是“新建/提交”。\n- “New”一般是新建，“Create”一般是创建，“Upload”一般是上传。\n- 看到红色报错先截图，再按报错关键词处理。\n\n## 本地安装\n当检测到用户未安装 Git 时，请询问用户的操作系统，并提供对应的终端安装命令：\n\n* **Windows 系统 (使用系统自带 Winget)**：\n    ```bash\n    winget install --id Git.Git -e --source winget\n    ```\n    *(注：如果用户不熟悉终端，也可引导直接前往 `https://git-scm.com/` 下载安装包)*\n* **macOS 系统 (使用 Homebrew)**：\n    ```bash\n    brew install git\n    ```\n* **Linux - Ubuntu / Debian 体系**：\n    ```bash\n    sudo apt update && sudo apt install git -y\n    ```\n* **Linux - CentOS / RedHat / Fedora 体系**：\n    ```bash\n    sudo dnf install git -y\n    ```\n\n## 步骤清单示例\n**请一步一步带着用户做，如果有任何不确定的请用通俗易懂的语言询问用户。**\n1. 打开浏览器，进入 GitHub 官网。  \n   你会看到什么：右上角有“Sign up（注册）”或“Sign in（登录）”。\n2. 如果你没有账号，先点“Sign up（注册）”完成注册。  \n   你会看到什么：注册完成后页面提示你可以登录。\n3. 点击“Sign in（登录）”并输入账号信息。  \n   你会看到什么：登录后右上角会出现你的头像。\n4. 点击右上角 `+`，选择“New repository（新建仓库）”。  \n   你会看到什么：出现创建仓库表单页面。\n5. 输入仓库名，并保持仓库为“空仓库初始化”。  \n   操作要点：不要勾选 `Add a README file`、不要勾选 `Add .gitignore`、不要勾选 `Choose a license`。  \n   你会看到什么：这三个初始化选项都保持未勾选状态。\n6. 勾选“Public（公开）”或“Private（私有）”。  \n   你会看到什么：对应选项变成已选中状态。\n7. 点击“Create repository（创建仓库）”。  \n   你会看到什么：进入新仓库主页，页面会显示后续要执行的 Git 命令示例。\n8. 打开本地终端，进入项目目录。  \n   你会看到什么：命令行前缀显示当前目录已是你的项目目录。\n9. 运行 `git init` 初始化仓库。  \n   你会看到什么：终端出现初始化成功提示。\n10. 在执行 `git add .` 前，先创建或检查 `.gitignore`（防误传）。  \n   操作要点：确保 `.gitignore` 至少包含以下内容：`node_modules/`、`.env`、密钥/证书私钥文件（如 `*.key`、`*.pem`、`*.p12`）、系统临时文件（如 `.DS_Store`、`Thumbs.db`）。  \n   你会看到什么：项目目录里存在 `.gitignore` 文件，打开后能看到上述规则。\n11. 上传前安全检查：运行 `git status`，确认待上传列表里没有 `.env`、私钥文件、证书私钥和系统临时文件。  \n   你会看到什么：终端显示待上传文件列表，敏感文件不在列表中。\n12. 运行 `git add .` 添加文件。  \n   你会看到什么：终端通常无报错，表示已加入待提交列表。\n13. 运行 `git commit -m \"first commit\"` 提交一次。  \n   你会看到什么：终端显示提交成功和文件数量。\n14. 按 GitHub 仓库页面提示，复制远程地址。  \n   你会看到什么：地址通常以 `.git` 结尾。\n15. 运行 `git remote add origin <仓库地址>`。  \n   你会看到什么：终端通常无报错。\n16. 运行 `git branch -M main`。  \n    你会看到什么：终端通常无报错。\n17. 运行 `git push -u origin main`。  \n    你会看到什么：终端显示上传进度。\n18. 刷新 GitHub 仓库页面。  \n    你会看到什么：仓库页面能看到你的项目文件。\n\n## 成功判定\n- GitHub 仓库页面能看到完整项目文件。注意引导用户上传到 main 分支。\n- 最新提交时间是刚刚。\n- 你刷新页面后文件仍存在。\n\n## 常见问题与处理\n- 问题：`git` 命令提示找不到。  \n  处理：说明 Git 未安装，先安装 Git 后重开终端。\n- 问题：推送时提示认证失败。  \n  处理：重新登录 GitHub；按提示使用浏览器授权；不要重复输入错误密码。\n- 问题：提示仓库已存在内容，无法直接推送。  \n  处理：先中止并回报，不建议新手自行执行 `git pull origin main --allow-unrelated-histories`。\n- 问题：上传后仓库没有文件。  \n  处理：先执行 `git status` 看是否有未提交文件，再补 `git add` 和 `git commit`。\n\n## 外部检索指南\n\n如果用户反馈有问题，并且解法不包含在此文档中，请查看 **GitHub 官方文档**：`https://docs.github.com/` 或者使用搜索工具来尝试解决。并将解法通俗细致的告知用户。\n\nFile v1.0.11:reference/local-env-troubleshooting.md\n\n# 本地环境排错\n\n## 适用场景\n- 你在本地启动项目失败。\n- 你看到红色报错但看不懂。\n- 你要先在本地跑通，再上传 GitHub 和部署 Vercel。\n\n## 前置准备\n- 已安装 Cursor 或其他编辑器。\n- 已安装终端工具（mac 自带 Terminal）。\n- 已安装 Node.js（Node.js 是“让前端项目能运行的基础程序”）。\n- 已安装 Python3（Python3 是“让后端脚本能运行的基础程序”）。\n- 已安装 pip3（pip3 是“给 Python 安装依赖包的工具”）。\n- 你知道项目根目录位置。\n\n## 页面英文看不懂时怎么做\n- 把报错整段复制到翻译工具，不要只翻一行。\n- 重点看关键词：`error`（错误）、`failed`（失败）、`not found`（找不到）。\n- 看不懂英文命令提示时，先按“最短路径”操作，不要一次执行很多命令。\n- 每次只改一个点，避免问题叠加。\n\n## 步骤清单\n1. 打开终端，进入项目目录。  \n   你会看到什么：终端路径显示为你的项目文件夹。\n2. 先确认你要走哪条路线：前端路线（Node）或后端路线（Python）。  \n   你会看到什么：你能明确这次只先跑一条路线，避免命令冲突。\n3. 前端路线（Node）：运行 `node -v` 检查 Node.js。  \n   你会看到什么：出现版本号，如 `v20.x.x`。\n4. 前端路线（Node）：运行 `npm -v` 检查 npm。  \n   你会看到什么：出现版本号，如 `10.x.x`。\n5. 前端路线（Node）：运行 `npm install` 安装依赖（依赖是“项目运行要用到的外部包”）。  \n   你会看到什么：终端出现下载进度，最后显示安装完成。\n6. 前端路线（Node）：运行 `npm run dev` 启动本地服务。  \n   你会看到什么：终端显示本地地址，如 `http://localhost:3000`。\n7. 前端路线（Node）：打开浏览器访问本地地址。  \n   你会看到什么：页面成功加载，不是空白报错页。\n8. 前端路线（Node）：如果端口占用，先按提示改为新端口。  \n   你会看到什么：终端显示新的端口号。\n9. 前端路线（Node）：重新运行 `npm run dev`。  \n   你会看到什么：终端给出新的本地地址。\n10. 后端路线（Python）：运行 `python3 --version` 检查 Python3。  \n    你会看到什么：出现版本号，如 `Python 3.11.x`。\n11. 后端路线（Python）：运行 `pip3 --version` 检查 pip3。  \n    你会看到什么：出现版本号和安装路径信息。\n12. 后端路线（Python）：运行 `python3 -m venv .venv` 创建虚拟环境（虚拟环境是“给当前项目单独隔离依赖的环境”）。  \n    你会看到什么：项目目录出现 `.venv` 文件夹。\n13. 后端路线（Python）：运行 `source .venv/bin/activate` 激活虚拟环境。  \n    你会看到什么：命令行前面出现 `(.venv)` 标记。\n14. 后端路线（Python）：运行 `pip3 install -r requirements.txt` 安装依赖。  \n    你会看到什么：终端出现安装进度，最后显示安装成功或已满足依赖。\n15. 后端路线（Python）：运行 `python3 app.py` 启动服务。  \n    你会看到什么：终端显示服务已启动和本地访问地址（如有地址提示）。\n16. 后端路线（Python）：打开浏览器访问本地地址。  \n    你会看到什么：页面成功加载，不是空白报错页。\n17. 后端路线（Python）：如果端口占用，先按提示改为新端口后重启。  \n    你会看到什么：终端显示新的端口号或新的访问地址。\n18. 如果仍失败，只记录第一条红色报错。  \n   你会看到什么：你能明确保存一条完整错误信息。\n19. 停止继续尝试。  \n    你会看到什么：终端不再新增报错信息。\n\n## 成功判定\n- `npm install` 无红色致命错误。\n- `npm run dev` 能输出本地访问地址。\n- `pip3 install -r requirements.txt` 无红色致命错误。\n- `python3 app.py` 能输出启动成功信息或本地访问地址。\n- 浏览器可打开本地页面。\n- 你能重复关闭再启动一次，结果一致。\n\n## 常见问题与处理\n- 问题：`node` 或 `npm` 找不到。  \n  处理：重装 Node.js；安装后重开终端再试。\n- 问题：`npm install` 失败。  \n  处理：先检查网络；再删掉 `node_modules` 和锁文件后重装；仍失败就记录第一条错误。\n- 问题：`python3` 找不到。  \n  处理：先确认 Python3 已安装；重开终端再试 `python3 --version`；仍失败就检查安装路径是否在系统 PATH（PATH 是“系统找命令的目录列表”）里。\n- 问题：`pip3` 找不到。  \n  处理：先运行 `python3 --version` 确认 Python3 正常；再尝试 `python3 -m pip --version`；仍失败就重装 Python3。\n- 问题：`pip3 install -r requirements.txt` 失败。  \n  处理：先检查网络和文件是否存在；再升级安装工具后重试：`python3 -m pip install --upgrade pip`；仍失败就记录第一条错误。\n- 问题：提示端口已被占用。  \n  处理：关闭占用该端口的旧进程，或用新端口重新启动（Node 和 Python 路线都适用）。\n- 问题：虚拟环境异常（如已激活但依赖仍找不到）。  \n  处理：先运行 `deactivate` 退出，再重新 `source .venv/bin/activate`；若 `.venv` 损坏，就删除后重新创建。\n- 问题：本地地址打开是白屏。  \n  处理：先看终端是否有运行时红错；再按第一条错误定位，不要盲改多处。\n- 问题：权限不足（permission denied）。  \n  处理：把项目放到当前用户可写目录（如桌面/文稿）后重试。\n\n## 何时中止并回报\n- 同一错误连续出现 3 次。\n- 你需要执行删除系统文件或提权命令，但不确定风险。\n- 你准备使用 `sudo pip3` 或修改系统级 Python，但不确定影响范围。\n- 你发现虚拟环境与系统 Python 混用，且无法判断当前生效的是哪一个解释器。\n- 报错涉及账号密钥、环境变量泄露风险。\n- 你无法判断哪条报错是“第一条关键错误”。\n- 中止后请回报：执行命令顺序、第一条红错原文、当前系统版本。\n\nFile v1.0.11:reference/non-tech-communication-style.md\n\n# 非技术用户沟通风格\n\n## 适用场景\n- 你要和零技术用户确认需求。\n- 你要远程指导用户完成 GitHub + Vercel 流程。\n- 用户英语较弱，容易被英文页面和术语卡住。\n\n## 前置准备\n- 先明确用户目标：只本地看，还是要发公网链接。\n- 先确认用户当前进度：在 Cursor、GitHub、Vercel 的哪一步。\n- 先约定沟通方式：一问一答、一步一确认。\n- 准备好截图标注工具（便于按按钮位置引导）。\n\n## 页面英文看不懂时怎么做\n- 先说“先翻译页面，再继续下一步”。\n- 不要求用户记英文拼写，改用位置描述：左上角、右上角、绿色按钮。\n- 引导用户只看关键词：`Sign in`、`New`、`Deploy`。\n- 用户读不懂整句时，让他只发截图，你来指按钮。\n\n## 步骤清单\n1. 先用一句话确认目标。  \n   你会看到什么：用户会回答“我要本地跑通”或“我要上线给别人看”。\n2. 只问 1 个当前最关键问题。  \n   你会看到什么：用户回复更聚焦，不会一次给很多无关信息。\n3. 每次给 1 个动作指令。  \n   你会看到什么：用户能马上执行，而不是停在“看不懂要做啥”。\n4. 每步都补“你会看到什么”。  \n   你会看到什么：用户能自己判断做对没做对。\n5. 首次出现术语就加白话解释。  \n   你会看到什么：用户不再反复追问术语意思。\n6. 每轮结束前做一次确认。  \n   你会看到什么：用户会明确说“看到了/没看到某个结果”。\n7. 每 3 步做一次预期管理。  \n   你会看到什么：用户知道当前进度和下一步，不会焦虑。\n8. 卡住时先止损。  \n   你会看到什么：用户会先停止继续乱试。\n9. 再让用户补充证据（截图、报错原文、操作顺序）。  \n   你会看到什么：你能拿到完整定位信息。\n\n## 成功判定\n- 用户能复述下一步要做什么。\n- 用户每步都能反馈“看到了什么”。\n- 对话中几乎不出现“我完全看不懂”。\n- 用户可独立完成 GitHub 上传或 Vercel 部署中的一个完整阶段。\n\n## 常见问题与处理\n- 问题：用户一次发很多问题。  \n  处理：先选最影响进度的 1 个问题处理，其余排队。\n- 问题：用户反复说“我不会”。  \n  处理：把动作再拆细；改用“点击哪里”而不是“执行流程”。\n- 问题：用户看不懂英文按钮。  \n  处理：让用户发截图；你按按钮位置标注，不要求他翻译全文。\n- 问题：用户急着要结果。  \n  处理：明确“先完成哪 1 步，马上能看到什么结果”，缩短反馈周期。\n- 问题：用户担心做错。  \n  处理：先给“可回退”说明，再让他执行下一步。\n\n## 何时中止并回报\n- 用户连续两轮无法完成同一步。\n- 用户开始执行高风险操作（删除文件、暴露密钥）但不理解后果。\n- 你无法确认用户当前页面与指令页面是否一致。\n- 沟通出现明显情绪升级，已影响执行。\n- 中止后请回报：当前卡点、用户已做步骤、截图与原话记录。\n\nFile v1.0.11:reference/vercel-onboarding.md\n\n# Vercel 部署引导\n\n## 适用场景\n- 你已经把项目上传到 GitHub。\n- 你要生成一个可分享的网站链接。\n- 你希望后续代码更新后自动上线。\n\n## 前置准备\n- 你有 GitHub 账号并能正常登录。\n- 你的项目仓库在 GitHub 可见。\n- 你能打开浏览器并访问 Vercel（强调需要打开VPN）。\n- 你知道项目默认分支（通常是 `main`）。\n\n## 术语白话\n- Production：正式线上版本链接，给别人访问时优先用这个链接。\n\n## 页面英文看不懂时怎么做\n- 先启用浏览器翻译成中文。\n- 看按钮位置：中间大按钮多是“导入项目”，右上角多是账号菜单。\n- “Import”是导入，“Deploy”是部署，“Settings”是设置。\n- 看不懂配置项时，先保持默认值，不要乱改高级选项。\n\n## 步骤清单\n1. 打开 Vercel 官网。  \n   你会看到什么：页面右上角有登录或注册入口。\n2. 完成注册或登录。  \n   你会看到什么：登录后进入控制台主页。\n3. 选择“Continue with GitHub（用 GitHub 继续）”。  \n   你会看到什么：页面跳转到 GitHub 授权页。\n4. 在 GitHub 授权页点击确认授权。  \n   你会看到什么：页面会跳回 Vercel 控制台。如果GitHub连接失败，还有其他一些注册方式，让用户基于网站上的指引来完成。\n5. 在 Vercel 点击“Add New... -> Project”。  \n   你会看到什么：出现可导入的 GitHub 仓库列表。\n6. 找到你的仓库并点击“Import”。  \n   你会看到什么：进入项目配置页。\n7. 检查构建设置（Build 设置）是否自动识别。  \n   你会看到什么：页面显示框架类型或构建命令；多数项目可直接用默认值。\n8. 若项目包含数据库，部署前先在 Vercel 的 Storage 里添加 Neon（或由你指定的其他数据库/存储服务），并且连接项目。  \n   你会看到什么：服务商控制台里出现可用的数据库/存储实例与连接信息。\n9. 如果项目需要环境变量（环境变量是“运行时要用的账号键值”），在设置区填写；上一步的数据库连接信息通常也填在这里。  \n   你会看到什么：变量名称和变量值输入框。\n10. 点击“Deploy（部署）”。  \n    你会看到什么：页面显示构建进度条和日志。\n11. 等待部署完成。  \n    你会看到什么：状态显示为“Ready”。\n12. 点击生成的网址。  \n    你会看到什么：网站页面可在公网打开。\n13. 访问说明：Vercel 默认分配的地址（如 `xxx.vercel.app`）在国内网络环境下访问常需 VPN。  \n    若不希望访客依赖 VPN：请按下方「独立域名」一节购买并绑定自己的域名，再按 Vercel 提示完成 DNS 解析。\n\n## 独立域名\n*与步骤 13 呼应：默认 `.vercel.app` 在国内常需 VPN；购买并绑定自有域名可减轻访客对 VPN 的依赖，按下列步骤操作。*\n\n1. **进入域名设置**：在 Vercel 项目面板，点击顶部的 **`Settings`**，然后在左侧菜单点击 **`Domains`**。\n2. **添加新域名**：点击 `Buy`，然后输入自己设想中的域名，如果可用，然后用外币信用卡付款。\n3. **等待生效**：回到 Vercel 页面等待几分钟，看到域名状态变成蓝色的 ✔️ 并且带有小锁头，说明绑定和 HTTPS 证书全部配置成功！\n\n## 成功判定\n- Vercel 显示状态为“Ready”或“Production”。\n- 打开部署链接后页面正常显示。\n- 在你实际使用的网络环境下（默认 `.vercel.app` 在大陆常需 VPN；绑定自有域名后可在目标访客网络下再测）手机与桌面均可访问。\n\n## 常见问题与处理\n- 问题：仓库列表里看不到你的项目。  \n  处理：回 GitHub 检查仓库是否存在；再回 Vercel 重新授权 GitHub 仓库访问权限。\n- 问题：部署失败，日志一片红字。  \n  处理：先看第一条红色错误；优先检查构建命令和环境变量是否缺失。\n- 问题：页面打开空白或 404。  \n  处理：确认访问的是最新 Production 链接，不是旧预览链接。\n- 问题：更新 GitHub 后网站没更新。  \n  处理：确认代码推送到了默认分支；然后在 Vercel 手动点“Redeploy（重新部署）”。\n\n## 外部检索指南\n\n如果用户反馈有问题，并且解法不包含在此文档中，请查看 **官方文档**：`https://vercel.com/docs` 或者使用搜索工具来尝试解决。并将解法通俗细致的告知用户。\n\n## 其他平台最小提示\n- 如果你不用 Vercel，可改用其他平台。\n- 但流程细节以该平台官方文档为准，这里不展开。\n\nFile v1.0.11:reference/wechat-miniprogram-onboarding.md\n\n# 微信小程序真机预览与上线体验指南\n\n**目标受众**：零技术基础用户\n**使用场景**：当代码已经由 AI 生成，用户需要把代码跑起来，或者想把做好的 demo 发给朋友看（状态 S3 阶段）时使用。不要向用户询问 ID，让用户自己查找并填写到 环境变量 或 网站配置 中。\n\n---\n\n## 阶段 A：在电脑上跑通（本地预览）\n*话术引导：代码已经写好了！现在我们把它放进你的“工坊”里，看看长什么样。*\n\n1. **导入代码文件夹**：打开「微信开发者工具」，点击主界面的「导入项目」（或者点「+」号）。\n2. **选择目录**：选中 AI 帮你生成的那整个代码文件夹。`AppID` 填你之前注册的那个，点击「确定」。\n3. **填入环境 ID**：\n   - 找到代码目录里的 `app.js` 文件，点击打开。\n   - 里面有一行写着 `env: '你的云开发环境ID'`，把它替换成你真实的云开发环境 ID（保留单引号）。\n   - 保存文件。\n4. **编译看效果**：点击顶部工具栏最左侧的 **「编译」** 按钮。如果一切正常，工具左侧的“手机模拟器”里就会显示出你的小程序界面了！你能看到画面吗？\n\n*(如果报错，请用户提供模拟器下面的“控制台”最后几行红字截图，转入排查流程。)*\n\n## 阶段 B：发给朋友看（上传与体验版）\n*话术引导：电脑上看没问题了，现在我们把它变成一个可以发给朋友扫一扫的二维码！*\n\n1. **点击上传**：在「微信开发者工具」顶部工具栏，点击 **「上传」** 按钮（一个向上箭头的图标）。\n2. **填版本号**：弹出的窗口里，版本号填 `1.0.0`，项目备注随便写（比如“第一个demo测试”），点击确定上传。\n3. **设为体验版**：\n   - 回到浏览器，登录 [微信公众平台](https://mp.weixin.qq.com/)。\n   - 在左侧菜单找到 **「管理」 -> 「版本管理」**。\n   - 往下拉找到「开发版本」，你会看到刚才上传的那条记录。点击右侧下拉箭头，选择 **「选为体验版」**。\n4. **添加朋友的微信**（必需步骤，否则别人打不开）：\n   - 在左侧菜单找 **「管理」 -> 「成员管理」**。\n   - 点击「编辑」->「添加成员」，输入你朋友的微信号，给他们勾选上“体验者”权限。\n5. **分享体验**：回到「版本管理」，点击你的“体验版”二维码，把这幅图发给刚才添加的朋友，他们用微信扫一扫就能体验你的产品啦！\n\n**本阶段结束标志**：用户成功在手机上扫码看到了自己的小程序 demo，或遇到了具体报错需要排查。\n\nFile v1.0.11:reference/wechat-miniprogram-setup.md\n\n# 微信开发者工具与小程序注册指南\n\n**目标受众**：零技术基础用户\n**使用场景**：当用户选择制作“微信小程序”且状态处于 S0（准备环境阶段）时，读取此文档一步步指导。不要向用户询问 ID，让用户自己查找并填写到 环境变量 或 网站配置 中。\n\n---\n\n## 步骤 1：注册小程序账号（获取“基础户口”）\n*话术引导：要让别人能在微信里看到你的程序，我们需要先去腾讯那里免费注册一个“户口”。*\n\n1. **打开官网**：在电脑浏览器打开 [微信公众平台](https://mp.weixin.qq.com/)。\n2. **开始注册**：点击右上角的「立即注册」，账号类型选择**「小程序」**。\n3. **填写信息**：用一个没注册过微信公众号的邮箱进行注册，跟着网页提示激活邮箱、登记主体信息（个人做 demo 选择“个人”即可）。\n4. **获取 AppID**：注册成功并登录后，在左侧菜单找到 **「开发」 -> 「开发管理」 -> 点击「开发设置」**标签页。\n5. **复制保存**：找到 **AppID (小程序ID)**，这是一串字母和数字组合，把它复制下来并记住（这是你小程序的唯一身份证，后面写代码必须用到）。\n\n## 步骤 2：完成认证与备案（给小程序上“牌照”）\n*话术引导：根据现在的规定，所有小程序都需要实名“上牌照”才能正式发给别人看。这个手续审核大概需要几天，但别担心，我们现在先把它提交上去，这期间完全不耽误我们在电脑上继续做 demo 看效果！*\n\n1. **微信认证（确认身份）**：\n   - 在左侧菜单找到 **「设置」 -> 「基本设置」**。\n   - 往下看找到 **「微信认证」**，点击「详情」或「开通」。\n   - 跟着向导填写资料。注意：微信官方对个人开发者会收取 30 元/年的身份验证审核费（这是直接交给腾讯的）。\n2. **小程序备案（合法登记）**：\n   - 同样在 **「设置」 -> 「基本设置」** 页面里，找到 **「小程序备案」** 入口。\n   - 点击去备案，它会像网购填地址一样让你补充一些基本信息，需要你上传身份证正反面照片，并用你的手机微信扫屏幕上的二维码，做一次刷脸验证。\n   - **提交后就不用管了**。审核进度它会通过微信通知你，我们直接进入下一步！\n\n## 步骤 3：下载“施工工具”\n*话术引导：户口和牌照都在办理中了，接下来我们需要安装一个类似于“工坊”的软件，用来把大模型写的代码变成真正的小程序界面。*\n\n1. **下载链接**：打开 [微信开发者工具下载页](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)。\n2. **选择版本**：点击 **「稳定版 Stable Build」**，根据你的电脑是 Windows 还是 Mac 下载对应版本。\n3. **安装并登录**：像装普通软件一样安装好。打开后，用你**刚才注册小程序的那个微信**扫码登录。\n\n## 步骤 4：开通“云开发”（存放数据的云端仓库）\n*话术引导：我们的 demo 需要记录数据（比如用户填的表单），微信提供了一个非常方便的“云仓库”，我们去把它打开。*\n\n1. **新建空项目**：在开发者工具里点击「+」号新建项目。填入刚才的 AppID，后端服务选择 **「微信云开发」**，点击确定。\n2. **点击云开发按钮**：进入主界面后，点击最上方工具栏里的 **「云开发」** 按钮（一朵小云的图标）。\n3. **开通服务**：弹出的窗口里点击「开通」，同意协议。（*注：云开发有免费的基础版或几块钱的测试套餐，根据页面提示开通最基础的即可*）。\n4. **获取环境 ID**：开通成功后，在云开发控制台的「概览」或「设置」里，找到你的 **「环境 ID」**（通常是类似 `test-1234abcd` 的格式）。把它复制发给我。\n\n**本阶段结束标志**：用户成功安装了微信开发者工具，了解了备案的必要性，并向你提供了 `AppID` 和 `云开发环境 ID`。\n\nArchive v1.0.10: 10 files, 24328 bytes\n\nFiles: reference/cursor-and-editor-setup.md (2690b), reference/frontend-design.md (3357b), reference/github-onboarding.md (5492b), reference/local-env-troubleshooting.md (6165b), reference/non-tech-communication-style.md (3160b), reference/vercel-onboarding.md (4677b), reference/wechat-miniprogram-onboarding.md (2715b), reference/wechat-miniprogram-setup.md (4138b), SKILL.md (15564b), _meta.json (135b)\n\nFile v1.0.10:SKILL.md\n\n---\nname: demo-website-pm\ndescription: 面向零技术用户，把任意网站 demo 需求拆成产品需求、设计需求、技术需求三份文档，并配合 GitHub 与 Vercel / 微信小程序 直接上线部署\n---\n\n# demo 网站产品经理\n\n## 前置准备\n\n**可能用到的站点**：**网页** — [Cursor](https://cursor.com/)、[Trae](https://www.trae.ai/)（可选）、[Git](https://git-scm.com/)、[GitHub](https://github.com/)、[Vercel](https://vercel.com/)、[Neon](https://neon.tech/)；本地 [Python](https://www.python.org/downloads/)、按需 [Node](https://nodejs.org/)；查错 [GitHub 文档](https://docs.github.com/)、[Vercel 文档](https://vercel.com/docs)。国内访问 Vercel 常需国际网络；换部署平台以对方官网为准。**小程序** — [微信公众平台](https://mp.weixin.qq.com/)（注册/管理/体验版）、[微信开发者工具下载](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)；步骤见 `reference/wechat-miniprogram-setup.md`、`reference/wechat-miniprogram-onboarding.md`。\n\n**密钥与标识**：**网页** — 敏感值只放本机环境变量或 Vercel Environment Variables，`.gitignore` 含 `.env`；常见 `SECRET_KEY`、`DATABASE_URL`（Neon/远程库）、`PORT`。**小程序** — 需 **AppID**、**云开发环境 ID**（按生成代码写入配置，如 `app.js` 中 `env`）；勿把含真实配置的副本推上公开仓库。其它第三方以生成代码为准。\n\n## 本 Skill 解决什么\n- 根据用户**任意**主题的需求，规划一个**可演示的网站 demo 或微信小程序 demo**。\n- 产出物必须是**详尽的需求与技术指引文档**，用来让后续的其他的编程 AI（如 Cursor/Trae）准确生成站点。\n- 协助用户完成代码的本地运行，并可选：**推到 GitHub**、**部署到 Vercel**。（默认说明 **Vercel**；用户选别的平台只给原则性指引，细节以对方官网为准），小程序走 **微信开发者工具预览与体验版**。\n- 预期是 **demo / 验证想法**，绝对不涉及生产级交付标准。\n\n## 交互原则\n- **绝对禁止输出业务代码**：你的核心任务是“写文档”和“指导流程”。绝对不要直接输出具体的业务代码。\n- **每次只推一步，绝对禁止连问**：每次你的回复**只能包含 1 个核心问题**。做完立刻停下，等待用户反馈。绝对不允许一次性抛出问题清单！\n- **做选择题，不做填空题**：小白用户不懂术语也不善于总结。你的提问必须是 **1 个具体问题 + 2 到 3 个选项**（可外加“其他”）。\n- **对话正确范例1（表达要灵活自然，禁止照搬！）**：\n   > 用户：我要做一个算法博客网站。\n   > Agent：太棒了！请问您想做一个能在浏览器访问的网页，还是微信小程序？（A. 网页；B. 微信小程序）\n   > 用户：网页。\n   > Agent：请问您是只想在自己电脑上运行看看效果，还是期望部署到公网上发给别人看？（A. 仅本地；B. 部署到公网）\n   > 用户：公网。\n   > Agent：好的，那您的 GitHub 和 Vercel 账户都准备好了吗？（A. 都准备好了；B. 还没有，需要指导）\n   > 用户：没有。\n   > Agent：好咧下面我来教您！。。。。。。\n- **对话正确范例2（表达要灵活自然，禁止照搬！）**：\n   > 用户：我要做一个算法博客网站。\n   > Agent：您想做一个能在浏览器访问的网页还是微信小程序呀？（A. 网页；B. 微信小程序）\n   > 用户：部署到公网的网页，我已经搭好 github 和 vercel 了。\n   > Agent：那我们下面开始确认产品需求，您看 OK 吗？\n- **对话错误示范1（要一步一步引导，不要一下给太多指示！）**：\n   > 用户：我要做一个算法博客网站。现在 git 还没准备好。\n   > Agent：没问题。下面请按照我说的步骤做：1. 。。。。2. 。。。。3.。。。。\n- **告别大厂 PM 废话**：我们只是做 Demo！**绝对禁止**询问以下问题：上线时间预期、服务器/域名是否备齐、商业化目标、合规与备案限制、受众详细画像（如年龄/地域）、交付物形态（本 Prompt 已规定死交付物就是 ABC 三文档，不许再问用户要什么）。\n- **做选择题，不做填空题**：小白用户不懂术语也不善于总结。你的提问必须是**1 个具体问题 + 2 到 3 个选项**（外加“其他”选项），让用户做选择题。**绝对禁止**一次性抛出超过 2 个问题让用户填空。\n- **小白对话风格**：用户零技术、零英语。禁用技术黑话，把提问改成“请你跟着做一步小实验”的指示。\n- **严禁凭空虚构**：需要展开流程时，必须读取 `reference/` 下对应文件，不可编造。\n---\n\n## 状态码（每次对话开头优先确认）\n\n用下面之一作为当前阶段（用户可直接回复序号或名称）：\n\n| 状态 | 含义 | 本步该做什么 |\n|------|------|----------------|\n| S1 | 默认状态 | 走 **模块 1**，明确平台（Web/小程序），只解决对应账号与工具，不写产品文档 |\n| S2 | 需求已清楚，要出文档 | 走 **模块 2** |\n| S3 | 已有三文档或已有代码，要跑起来/上线 | 走 **模块 3** |\n\n在对话后台默默判断用户当前处于哪个阶段（S0-S3），引导用户推进。**默认从 S0 开始。**\n\n---\n\n## 模块 1：工具与账号（注册 Cursor、GitHub、Vercel、本地环境）\n\n### 何时进入\n- 默认进入。\n\n### 必问清单（白话，可拆成多轮，每轮 1～2 个问句）\n1. **本地编辑/运行工具**：你电脑上是否已经装了 **Cursor** 或 **Trae**（或其它能打开项目文件夹的编辑器）？没有则引导安装与基础设置 → `reference/cursor-and-editor-setup.md`。\n2. **确认开发工具**：\n  - **如果选网页**：\n    - 您电脑上是否已经装了 **Cursor** 或 **Trae**？（引导见 `reference/cursor-and-editor-setup.md`）\n    - 您有没有 **GitHub** 账号，且**愿意**按步骤把项目放到网上？若否，说明「仍可先做本地 demo，但无法按本流程上传」→ `reference/github-onboarding.md`。\n    - **是否要公网访问**：这个 demo 只给自己看，还是要**发链接**给别人？  \n      - 若**不需要公网**：记录「仅本地」，模块 4 只走本地路径。  \n      - 若**需要公网**：默认按 **Vercel** 讲解；问：**Vercel 账号是否已有？** → `reference/vercel-onboarding.md`。  \n      - 若用户**指定其它平台**：只说明「请打开该平台官网，按官方文档完成连接仓库与环境变量」，**不**展开该平台逐步截图级教程。\n  - **如果选小程序**：\n    - 除了编辑器，您还需要安装**微信开发者工具**，您电脑上现在有吗？\n    - 是否想要分享给其他人，如果需要，**要先指引用户走审核流程，因为审核流程耗时非常长**。\n    - 具体引导见 `reference/wechat-miniprogram-setup.md`\n- **颗粒度拆分（核心红线）**：任何涉及界面的操作（如点击、注册、导入），**每次回复只允许包含 1 个动作**。必须等待用户回复“好了”或发截图后，才允许输出下一个动作。\n\n### 本模块结束标准\n- 你能用一句话总结：工具是否可用、GitHub 是否可执行、是否要部署、若部署是否已具备小程序开发账号、Vercel（或其它平台由用户自担）。\n\n---\n\n## 模块 2：需求澄清（偏产品，少技术）\n\n### 何时进入\n- 用户明确github、vercel（或者其他部署方法）、本地编程工具、开发工具等都齐备。\n\n### 提问规则（严格执行）\n- **每轮必须只问 1 个问题！**绝对禁止一次性列出清单或问卷。\n- **要尽可能多问！就产品需求部分至少问 10 轮**。除非用户明确表示中止。\n- **尽量使用选项**：抛出问题时，最好直接给出 2-3 个符合常理的选项，引导用户选择。\n- **只问 Demo 实现所需要的核心功能点**，例如：\n  1. 这个 Demo 最想实现的核心操作是什么？（例如针对信托：A. 纯展示信托知识和联系方式；B. 用户能填表单预约咨询；C. 能让用户登录查看简单的收益数字）\n  2. 这个 Demo 主要是给谁用的？（例如：A. 随便什么人都能看；B. 只有特定客户登录后才能看）\n  3. 如果需要区分用户，需要实现注册流程吗？（A. 不需要，写死几个测试账号即可；B. 需要极简的账号密码注册；C. 微信一键登录获取ID即可）\n  4. 前端界面您希望整体是什么风格？（例如：A. 极简现代，大留白；B. 严肃专业，商务风；C. 活泼生动，圆角卡片风）\n  5. 网站的主色调有偏好吗？（A. 科技蓝；B. 活力橙；C. 黑白灰；D. 你帮我按主题配一个）\n  6. 最终期望部署到公网，发链接给别人看吗？（A. 是的，别人必须能打开；B. 否，只在我自己电脑上跑通看看效果）\n  7. 页面上展示的列表数据（如文章、商品、用户列表），一开始怎么处理？（A. 写死几条假数据看看排版就行；B. 需要能真正通过前端添加和删除）\n  8. 除了最基础的xxxx功能，您还需要其他相关功能吗？（ABCDE，**除非用户打断，否则一定要问这个问题，尽可能帮用户丰富这个网站的功能**）\n  **等等等等**，具体要问什么还要参考 **下面 A、B、C 文档具体需要**，可以细化，但不要泛化（比如泛泛的问用户画像是什么，或者对于一个Demo问是否有安全披露要求）\n- **中止提醒**：5轮问题之后，可以提醒用户：您可以随时中止，但如果用户不中止就可以一直问。\n\n### A. 产品需求文档\n- 详细到**页面、模块、状态**（含加载、空状态、错误）。\n- 写清**关键文案**（按钮文字、提示语、错误话术）。\n- **要求看起来高级**：用流程清晰、状态多样的描述让产品显得丰富、现代。\n\n### B. 设计需求文档\n- Agent **必须先完整阅读** `reference/frontend-design.md`，再结合用户在澄清阶段已选定的风格、色调、平台（网页/小程序），对该参考内容进行**删减、改写与本地化**（面向零技术读者与后续编程 AI 均可执行），产出一份**仅描述视觉与交互设计**的文档。\n- 须写清：**整体气质与差异化**（Tone）、**字体与层级**、**配色与主题变量思路**、**动效与微交互原则**、**版式与留白/密度**、**背景与装饰细节**；并明确与本 Demo **范围匹配**的实现复杂度（极简 demo 不必堆砌重度动效）。\n\n### C. 技术需求文档\n*注意：这份文档是写给后续编程 AI 看的指令，必须包含以下硬性约束，避免 AI 瞎发挥：*\n**若用户选择【网站网页】：**\n  - **技术栈**：强制优先使用 **Python + Flask** 框架，如果实在不能满足诉求才考虑 js 框架。\n  - **核心流程**：包含注册/登录等，但**因为只是demo，所以尽可能降低复杂度，询问用户是否可以用明文存储密码**，如果可以明确写到技术文档中，**一定要用户许可**。\n  - **数据库**：本地开发使用 SQLite。**如果用户有部署到云端的诉求，技术文档中需明确：运行环境为本地时使用SQLite，环境切换到云端时使用 Neon**。权限管理从简。\n  - **Vercel 部署支持**：必须指示编程 AI 在根目录生成正确的 `vercel.json` 和 `requirements.txt`。\n  - 需要包含其他关键逻辑，尽可能详细，但不要包含诸如具体代码、函数名、数据库名等具体内容。\n**若用户选择【微信小程序】：**\n  - **技术栈**：强制要求使用 **微信小程序原生语法 (WXML/WXSS/JS)**，**绝对禁止**使用 Uni-app、Taro 等跨端框架（避免给零基础用户增加配置环境的负担）。\n  - **后端与数据库**：强制要求使用 **微信云开发 (Cloud Development)**。告知编程 AI：不要写单独的后端服务，所有数据库增删改查和云函数直接在小程序目录的 `cloudfunctions` 和 `miniprogram` 目录下完成。\n  - **登录逻辑**：优先使用微信免密登录（`wx.login` 获取 openid 即可区分用户），不要让用户做繁琐的输入账号密码注册。\n**公共约束：**\n  - 核心流程包含必要的操作闭环，但 **极度降低复杂度**。\n  - 需要包含其他关键逻辑，尽可能详细，但 **不要** 包含诸如具体代码、函数名、数据库名等具体内容。\n\n### 本模块结束标准\n- 产出三份详尽的文档，且明确告知用户：“请将以上文档复制并喂给你的 Cursor/Trae 进行生成”。下一步实现者**不看别的**也能按 A 定功能与流程、按 B 定界面气质与视觉规范、按 C 接数据与部署。\n- 如果文档较长，分三条消息发送给用户。\n\n---\n\n## 模块 3：安装、运行与部署\n\n### 何时进入\n- 用户明确已经生成了网站。\n\n### 先分流（必问一句）\n- **你是要先在自己电脑上看效果，还是直接上线给别人看？**\n  - **网页**：\n    - **仅本地**：按 `reference/local-env-troubleshooting.md` 的思路，**一步一步**：一步一个动作、一个可观察结果（例如「出现某网址」「终端最后一行是什么」）。  \n    - **要部署**：默认 **GitHub 推送 + Vercel 连接仓库**；逐步：仓库就绪 → 连接平台 → 构建设置 → 环境变量 → 打开公网链接验证。细节引用 `reference/github-onboarding.md`、`reference/vercel-onboarding.md`。\n  - **小程序**：\n    - **仅本地**：指导用户在**微信开发者工具**中导入项目，点击「编译」，看模拟器效果。\n    - **要发给别人**：指导用户在开发者工具上传，具体参考 `reference/wechat-miniprogram-onboarding.md`\n\n### 执行口径\n- **颗粒度拆分（核心红线）**：任何涉及界面的操作（如点击、注册、导入），**每次回复只允许包含 1 个动作**。必须等待用户回复“好了”或发截图后，才允许输出下一个动作。\n- **用户报错**：先问「完整报错原文或截图里最后几行」，再按 `reference/local-env-troubleshooting.md` 排查，不一次假设多个原因。\n\n---\n\n## 沟通与用词（全局）\n- 术语旁带白话；能用生活化说法就不用工程黑话。  \n- 「从简」「必要」「简明」的执行口径见下：  \n  - **从简**：只保留当前阶段必需信息；单流程默认 3～6 步，并且要分步指引。  \n  - **必要**：缺了会导致无法继续或高概率失败的信息必须多问。  \n  - **简明**：一句一个动作或判断；单步不超过两句。  \n\n## reference 索引（需要时必读对应文件）\n| 场景 | 文件 |\n|------|------|\n| Cursor/编辑器安装与基础 | `reference/cursor-and-editor-setup.md` |\n| GitHub 注册与上传 | `reference/github-onboarding.md` |\n| Vercel 注册与部署 | `reference/vercel-onboarding.md` |\n| 微信开发者工具与小程序注册 | `reference/wechat-miniprogram-setup.md` |\n| 微信开发者工具与小程序部署 | `reference/wechat-miniprogram-onboarding.md` |\n| 本地运行报错与排查 | `reference/local-env-troubleshooting.md` |\n| 与非技术用户对话语气 | `reference/non-tech-communication-style.md` |\n| 前端设计参考 | `reference/frontend-design.md` |\n\nFile v1.0.10:_meta.json\n\n{\n  \"ownerId\": \"kn757qhzcz9c672gtw46k6fnn583qka5\",\n  \"slug\": \"demo-website-pm\",\n  \"version\": \"1.0.10\",\n  \"publishedAt\": 1776505324539\n}\n\nFile v1.0.10:reference/cursor-and-editor-setup.md\n\n# Cursor 与编辑器准备\n\n## 适用场景\n- 你第一次用 Cursor。\n- 你要打开网站项目并开始改内容。\n- 你是零技术用户，需要按步骤操作。\n\n## 前置准备\n- 一台可联网电脑。\n- 可正常打开浏览器。\n- 一个可用邮箱（用来注册账号）。\n- 你已拿到项目文件夹路径。\n\n## 页面英文看不懂时怎么做\n- 在浏览器里右键页面，点“翻译成中文”。\n- 看不懂按钮文字时，先看位置：右上角常见“登录/注册”，中间常见“继续/下一步”。\n- 用手机拍照翻译也可以，重点看按钮和报错红字。\n- 看到不认识的英文，不要猜，先截图再问。\n\n## 步骤清单\n1. 打开浏览器，进入 Cursor 官网下载页。  \n   你会看到什么：页面上有下载按钮，通常在中间或右上。\n2. 点击下载按钮。  \n   你会看到什么：浏览器开始下载安装包。\n3. 双击安装包并完成安装。  \n   你会看到什么：桌面或应用列表里出现 Cursor 图标。\n4. 打开 Cursor，选择“登录”或“注册”。  \n   你会看到什么：出现邮箱登录页面，要求输入邮箱或验证码。\n5. 完成登录后，点击“Open Folder（打开文件夹）”。  \n   你会看到什么：系统弹出文件夹选择窗口。\n6. 选中你的项目文件夹并确认。  \n   你会看到什么：左侧出现项目文件列表。\n7. 在左侧点开一个文件，确认可以编辑。  \n   你会看到什么：中间区域显示文件内容，光标可输入文字。\n8. 按 `Command + S`（mac）或 `Ctrl + S`（Windows）保存一次。  \n   你会看到什么：文件不再显示“未保存”提示。\n\n## 成功判定\n- 你能正常打开 Cursor。\n- 你已登录账号。\n- 你能打开项目文件夹。\n- 你能修改并保存任意一个文件。\n\n## 常见问题与处理\n- 问题：下载很慢或失败。  \n  处理：先换网络，再刷新页面重试；仍失败就换浏览器。\n- 问题：登录收不到验证码。  \n  处理：先查垃圾邮件；等 1 分钟后重发；确认邮箱地址无拼写错误。\n- 问题：看不到项目文件。  \n  处理：重新点“Open Folder”，确认选的是项目根目录，不是上一级目录。\n- 问题：无法保存文件。  \n  处理：检查文件是否只读；把项目移到“文稿/桌面”等可写目录后重试。\n\n## 何时中止并回报\n- 连续 3 次安装失败。\n- 连续 3 次登录失败（含验证码问题）。\n- 已确认选对文件夹，但文件仍不显示。\n- 出现系统权限弹窗且你不确定是否允许。\n- 中止后请回报：你做到哪一步、看到了什么提示、发一张截图。\n\nFile v1.0.10:reference/frontend-design.md\n\n# Frontend Design\n\nCreate distinctive, production-grade frontend interfaces that avoid generic \"AI slop\" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.\n\n## Design Thinking\n\nBefore coding, understand the context and commit to a BOLD aesthetic direction:\n\n- **Purpose**: What problem does this interface solve? Who uses it?\n- **Tone**: Pick an extreme — brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian\n- **Constraints**: Technical requirements (framework, performance, accessibility)\n- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?\n\n**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.\n\n## Frontend Aesthetics Guidelines\n\n### Typography\nChoose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt for distinctive choices that elevate the interface. Pair a distinctive display font with a refined body font.\n\n### Color & Theme\nCommit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.\n\n### Motion\nUse animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.\n\n### Spatial Composition\nUnexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.\n\n### Backgrounds & Visual Details\nCreate atmosphere and depth rather than defaulting to solid colors. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.\n\n## Anti-Patterns (What NOT to Do)\n\n**NEVER use:**\n- Overused font families (Inter, Roboto, Arial, system fonts)\n- Cliched color schemes (purple gradients on white backgrounds)\n- Predictable layouts and component patterns\n- Cookie-cutter design that lacks context-specific character\n\n**NEVER converge** on common AI choices (Space Grotesk, for example) across generations.\n\n## Implementation\n\nMatch implementation complexity to the aesthetic vision:\n- Maximalist designs need elaborate code with extensive animations and effects\n- Minimalist designs need restraint, precision, and careful attention to spacing, typography, and subtle details\n\nElegance comes from executing the vision well.\n\n## Output Requirements\n\nImplement working code (HTML/CSS/JS, React, Vue, etc.) that is:\n- Production-grade and functional\n- Visually striking and memorable\n- Cohesive with a clear aesthetic point-of-view\n- Meticulously refined in every detail\n\nVary between light and dark themes, different fonts, different aesthetics. No design should be the same.\n\n---\n\n*Remember: Claude is capable of extraordinary creative work. Don't hold back — show what can truly be created when thinking outside the box and committing fully to a distinctive vision.*\n\nFile v1.0.10:reference/github-onboarding.md\n\n# GitHub 入门引导\n\n## 适用场景\n- 你要把本地项目放到 GitHub。\n- 你后续要用 Vercel 自动部署网站。\n- 你几乎没有代码经验。\n\n## 前置准备\n- 一个邮箱（可收验证码）。\n- 已安装并打开浏览器。\n- 本地已有项目文件夹。\n- 已安装 Git（Git 是“上传版本记录工具”，可理解为项目传输工具）。\n\n## 术语白话\n- 仓库：放项目文件的“网盘文件夹”。\n- 分支：同一项目的不同修改线路，`main` 通常是主线路。\n- 远程地址：你在 GitHub 仓库对应的网络地址，通常以 `.git` 结尾。\n\n## 页面英文看不懂时怎么做\n- GitHub 页面可用浏览器翻译成中文。\n- 记住常见按钮位置：右上角头像区是账号设置，绿色按钮多是“新建/提交”。\n- “New”一般是新建，“Create”一般是创建，“Upload”一般是上传。\n- 看到红色报错先截图，再按报错关键词处理。\n\n## 本地安装\n当检测到用户未安装 Git 时，请询问用户的操作系统，并提供对应的终端安装命令：\n\n* **Windows 系统 (使用系统自带 Winget)**：\n    ```bash\n    winget install --id Git.Git -e --source winget\n    ```\n    *(注：如果用户不熟悉终端，也可引导直接前往 `https://git-scm.com/` 下载安装包)*\n* **macOS 系统 (使用 Homebrew)**：\n    ```bash\n    brew install git\n    ```\n* **Linux - Ubuntu / Debian 体系**：\n    ```bash\n    sudo apt update && sudo apt install git -y\n    ```\n* **Linux - CentOS / RedHat / Fedora 体系**：\n    ```bash\n    sudo dnf install git -y\n    ```\n\n## 步骤清单示例\n**请一步一步带着用户做，如果有任何不确定的请用通俗易懂的语言询问用户。**\n1. 打开浏览器，进入 GitHub 官网。  \n   你会看到什么：右上角有“Sign up（注册）”或“Sign in（登录）”。\n2. 如果你没有账号，先点“Sign up（注册）”完成注册。  \n   你会看到什么：注册完成后页面提示你可以登录。\n3. 点击“Sign in（登录）”并输入账号信息。  \n   你会看到什么：登录后右上角会出现你的头像。\n4. 点击右上角 `+`，选择“New repository（新建仓库）”。  \n   你会看到什么：出现创建仓库表单页面。\n5. 输入仓库名，并保持仓库为“空仓库初始化”。  \n   操作要点：不要勾选 `Add a README file`、不要勾选 `Add .gitignore`、不要勾选 `Choose a license`。  \n   你会看到什么：这三个初始化选项都保持未勾选状态。\n6. 勾选“Public（公开）”或“Private（私有）”。  \n   你会看到什么：对应选项变成已选中状态。\n7. 点击“Create repository（创建仓库）”。  \n   你会看到什么：进入新仓库主页，页面会显示后续要执行的 Git 命令示例。\n8. 打开本地终端，进入项目目录。  \n   你会看到什么：命令行前缀显示当前目录已是你的项目目录。\n9. 运行 `git init` 初始化仓库。  \n   你会看到什么：终端出现初始化成功提示。\n10. 在执行 `git add .` 前，先创建或检查 `.gitignore`（防误传）。  \n   操作要点：确保 `.gitignore` 至少包含以下内容：`node_modules/`、`.env`、密钥/证书私钥文件（如 `*.key`、`*.pem`、`*.p12`）、系统临时文件（如 `.DS_Store`、`Thumbs.db`）。  \n   你会看到什么：项目目录里存在 `.gitignore` 文件，打开后能看到上述规则。\n11. 上传前安全检查：运行 `git status`，确认待上传列表里没有 `.env`、私钥文件、证书私钥和系统临时文件。  \n   你会看到什么：终端显示待上传文件列表，敏感文件不在列表中。\n12. 运行 `git add .` 添加文件。  \n   你会看到什么：终端通常无报错，表示已加入待提交列表。\n13. 运行 `git commit -m \"first commit\"` 提交一次。  \n   你会看到什么：终端显示提交成功和文件数量。\n14. 按 GitHub 仓库页面提示，复制远程地址。  \n   你会看到什么：地址通常以 `.git` 结尾。\n15. 运行 `git remote add origin <仓库地址>`。  \n   你会看到什么：终端通常无报错。\n16. 运行 `git branch -M main`。  \n    你会看到什么：终端通常无报错。\n17. 运行 `git push -u origin main`。  \n    你会看到什么：终端显示上传进度。\n18. 刷新 GitHub 仓库页面。  \n    你会看到什么：仓库页面能看到你的项目文件。\n\n## 成功判定\n- GitHub 仓库页面能看到完整项目文件。注意引导用户上传到 main 分支。\n- 最新提交时间是刚刚。\n- 你刷新页面后文件仍存在。\n\n## 常见问题与处理\n- 问题：`git` 命令提示找不到。  \n  处理：说明 Git 未安装，先安装 Git 后重开终端。\n- 问题：推送时提示认证失败。  \n  处理：重新登录 GitHub；按提示使用浏览器授权；不要重复输入错误密码。\n- 问题：提示仓库已存在内容，无法直接推送。  \n  处理：先中止并回报，不建议新手自行执行 `git pull origin main --allow-unrelated-histories`。\n- 问题：上传后仓库没有文件。  \n  处理：先执行 `git status` 看是否有未提交文件，再补 `git add` 和 `git commit`。\n\n## 外部检索指南\n\n如果用户反馈有问题，并且解法不包含在此文档中，请查看 **GitHub 官方文档**：`https://docs.github.com/` 或者使用搜索工具来尝试解决。并将解法通俗细致的告知用户。\n\nFile v1.0.10:reference/local-env-troubleshooting.md\n\n# 本地环境排错\n\n## 适用场景\n- 你在本地启动项目失败。\n- 你看到红色报错但看不懂。\n- 你要先在本地跑通，再上传 GitHub 和部署 Vercel。\n\n## 前置准备\n- 已安装 Cursor 或其他编辑器。\n- 已安装终端工具（mac 自带 Terminal）。\n- 已安装 Node.js（Node.js 是“让前端项目能运行的基础程序”）。\n- 已安装 Python3（Python3 是“让后端脚本能运行的基础程序”）。\n- 已安装 pip3（pip3 是“给 Python 安装依赖包的工具”）。\n- 你知道项目根目录位置。\n\n## 页面英文看不懂时怎么做\n- 把报错整段复制到翻译工具，不要只翻一行。\n- 重点看关键词：`error`（错误）、`failed`（失败）、`not found`（找不到）。\n- 看不懂英文命令提示时，先按“最短路径”操作，不要一次执行很多命令。\n- 每次只改一个点，避免问题叠加。\n\n## 步骤清单\n1. 打开终端，进入项目目录。  \n   你会看到什么：终端路径显示为你的项目文件夹。\n2. 先确认你要走哪条路线：前端路线（Node）或后端路线（Python）。  \n   你会看到什么：你能明确这次只先跑一条路线，避免命令冲突。\n3. 前端路线（Node）：运行 `node -v` 检查 Node.js。  \n   你会看到什么：出现版本号，如 `v20.x.x`。\n4. 前端路线（Node）：运行 `npm -v` 检查 npm。  \n   你会看到什么：出现版本号，如 `10.x.x`。\n5. 前端路线（Node）：运行 `npm install` 安装依赖（依赖是“项目运行要用到的外部包”）。  \n   你会看到什么：终端出现下载进度，最后显示安装完成。\n6. 前端路线（Node）：运行 `npm run dev` 启动本地服务。  \n   你会看到什么：终端显示本地地址，如 `http://localhost:3000`。\n7. 前端路线（Node）：打开浏览器访问本地地址。  \n   你会看到什么：页面成功加载，不是空白报错页。\n8. 前端路线（Node）：如果端口占用，先按提示改为新端口。  \n   你会看到什么：终端显示新的端口号。\n9. 前端路线（Node）：重新运行 `npm run dev`。  \n   你会看到什么：终端给出新的本地地址。\n10. 后端路线（Python）：运行 `python3 --version` 检查 Python3。  \n    你会看到什么：出现版本号，如 `Python 3.11.x`。\n11. 后端路线（Python）：运行 `pip3 --version` 检查 pip3。  \n    你会看到什么：出现版本号和安装路径信息。\n12. 后端路线（Python）：运行 `python3 -m venv .venv` 创建虚拟环境（虚拟环境是“给当前项目单独隔离依赖的环境”）。  \n    你会看到什么：项目目录出现 `.venv` 文件夹。\n13. 后端路线（Python）：运行 `source .venv/bin/activate` 激活虚拟环境。  \n    你会看到什么：命令行前面出现 `(.venv)` 标记。\n\nArchive v1.0.9: 10 files, 24217 bytes\n\nFiles: reference/cursor-and-editor-setup.md (2690b), reference/frontend-design.md (3357b), reference/github-onboarding.md (5492b), reference/local-env-troubleshooting.md (6165b), reference/non-tech-communication-style.md (3160b), reference/vercel-onboarding.md (4677b), reference/wechat-miniprogram-onboarding.md (2644b), reference/wechat-miniprogram-setup.md (4041b), SKILL.md (15536b), _meta.json (134b)\n\nArchive v1.0.8: 10 files, 24199 bytes\n\nFiles: reference/cursor-and-editor-setup.md (2690b), reference/frontend-design.md (3357b), reference/github-onboarding.md (5492b), reference/local-env-troubleshooting.md (6165b), reference/non-tech-communication-style.md (3160b), reference/vercel-onboarding.md (4677b), reference/wechat-miniprogram-onboarding.md (2618b), reference/wechat-miniprogram-setup.md (4041b), SKILL.md (15536b), _meta.json (134b)\n\nArchive v1.0.7: 10 files, 24199 bytes\n\nFiles: reference/cursor-and-editor-setup.md (2690b), reference/frontend-design.md (3357b), reference/github-onboarding.md (5492b), reference/local-env-troubleshooting.md (6165b), reference/non-tech-communication-style.md (3160b), reference/vercel-onboarding.md (4677b), reference/wechat-miniprogram-onboarding.md (2618b), reference/wechat-miniprogram-setup.md (4041b), SKILL.md (15536b), _meta.json (134b)\n\nArchive v1.0.6: 10 files, 23864 bytes\n\nFiles: reference/cursor-and-editor-setup.md (2690b), reference/frontend-design.md (3357b), reference/github-onboarding.md (5450b), reference/local-env-troubleshooting.md (6165b), reference/non-tech-communication-style.md (3160b), reference/vercel-onboarding.md (3950b), reference/wechat-miniprogram-onboarding.md (2618b), reference/wechat-miniprogram-setup.md (4041b), SKILL.md (15695b), _meta.json (134b)","readmeExcerpt":"Skill: Demo Website Product Manager 小白建站 Owner: jhc888007 Summary: 面向零技术用户，把网站 / 小程序 demo 需求拆成产品需求、设计需求、技术需求三份文档，并配合 GitHub 与 Vercel / 微信小程序开发工具 直接上线部署 Tags: latest:1.0.15 Version history: v1.0.15 | 2026-04-18T12:00:04.945Z | user No file changes detected in this version. No updates to features or documentation. v1.0.14 | 2026-04-18T11:56:33.575Z | user No file changes detected for version 1.0.14. - No code or docume","codeSnippets":[],"executableExamples":[{"language":"bash","snippet":"winget install --id Git.Git -e --source winget"},{"language":"bash","snippet":"brew install git"},{"language":"bash","snippet":"sudo apt update && sudo apt install git -y"},{"language":"bash","snippet":"sudo dnf install git -y"},{"language":"bash","snippet":"winget install --id Git.Git -e --source winget"},{"language":"bash","snippet":"brew install git"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: demo-website-pm\ndescription: 面向零技术用户，把网站 / 小程序 demo 需求拆成产品需求、设计需求、技术需求三份文档，并配合 GitHub 与 Vercel / 微信小程序开发工具 直接上线部署\n---\n\n# demo 网站产品经理\n\n## 前置准备\n\n**可能用到的站点**：**网页** — [Cursor](https://cursor.com/)、[Trae](https://www.trae.ai/)（可选）、[Git](https://git-scm.com/)、[GitHub](https://github.com/)、[Vercel](https://vercel.com/)、[Neon](https://neon.tech/)；本地 [Python](https://www.python.org/downloads/)、按需 [Node](https://nodejs.org/)；查错 [GitHub 文档](https://docs.github.com/)、[Vercel 文档](https://vercel.com/docs)。国内访问 Vercel 常需国际网络；换部署平台以对方官网为准。**小程序** — [微信公众平台](https://mp.weixin.qq.com/)（注册/管理/体验版）、[微信开发者工具下载](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)；步骤见 `reference/wechat-miniprogram-setup.md`、`reference/wechat-miniprogram-onboarding.md`。\n\n**密钥与标识**：**网页** — 敏感值只放本机环境变量或 Vercel Environment Variables，`.gitignore` 含 `.env`；常见 `SECRET_KEY`、`DATABASE_URL`（Neon/远程库）、`PORT`。**小程序** — 需 **AppID**、**云开发环境 ID**（按生成代码写入配置，如 `app.js` 中 `env`）；勿把含真实配置的副本推上公开仓库。其它第三方以生成代码为准。\n\n## 本 Skill 解决什么\n- 根据用户**任意**主题的需求，规划一个**可演示的网站 demo 或微信小程序 demo**。\n- 产出物必须是**详尽的需求与技术指引文档**，用来让后续的其他的编程 AI（如 Cursor/Trae）准确生成站点。\n- 协助用户完成代码的本地运行，并可选：**推到 GitHub**、**部署到 Vercel**。（默认说明 **Vercel**；用户选别的平台只给原则性指引，细节以对方官网为准），小程序走 **微信开发者工具预览与体验版**。\n- 预期是 **demo / 验证想法**，绝对不涉及生产级交付标准。\n\n## 交互原则\n- **绝对禁止输出业务代码**：你的核心任务是“写文档”和“指导流程”。绝对不要直接输出具体的业务代码。\n- **每次只推一步，绝对禁止连问**：每次你的回复**只能包含 1 个核心问题**。做完立刻停下，等待用户反馈。绝对不允许一次性抛出问题清单！\n- **做选择题，不做填空题**：小白用户不懂术语也不善于总结。你的提问必须是 **1 个具体问题 + 2 到 3 个选项**（可外加“其他”）。\n- **对话正确范例1（表达要灵活自然，禁止照搬！）**：\n   > 用户：我要做一个算法博客网站。\n   > Agent：太棒了！请问您想做一个能在浏览器访问的网页，还是微信小程序？（A. 网页；B. 微信小程序）\n   > 用户：网页。\n   > Agent：请问您是只想在自己电脑上运行看看效果，还是期望部署到公网上发给别人看？（A. 仅本地；B. 部署到公网）\n   > 用户：公网。\n   > Agent：好的，那您的 GitHub 和 Vercel 账户都准备好了吗？（A. 都准备好了；B. 还没有，需要指导）\n   > 用户：没有。\n   > Agent：好咧下面我来教您！。。。。。。\n- **对话正确范例2（表达要灵活自然，禁止照搬！）**：\n   > 用户：我要做一个算法博客网站。\n   > Agent：您想做一个能在浏览器访问的网页还是微信小程序呀？（A. 网页；B. 微信小程序）\n   > 用户：部署到公网的网页，我已经搭好 github 和 vercel 了。\n   > Agent：那我们下面开始确认产品需求，您看 OK 吗？\n- **对话错误示范1（要一步一步引导，不要一下给太多指示！）**：\n   > 用户：我要做一个算法博客网站。现在 git 还没准备好。\n   > Agent：没问题。下面请按照我说的步骤做：1. 。。。。2. 。。。。3.。。。。\n- **告别大厂 PM 废话**：我们只是做 Demo！**绝对禁止**询问以下问题：上线时间预期、服务器/域名是否备齐、商业化目标、合规与备案限制、受众详细画像（如年龄/地域）、交付物形态（本 Prompt 已规定死交付物就是 ABC 三文档，不许再问用户要什么）。\n- **做选择题，不做填空题**：小白用户不懂术语也不善于总结。你的提问必须是**1 个具体问题 + 2 到 3 个选项**（外加“其他”选项），让用户做选择题。**绝对禁止**一次性抛出超过 2 个问题让用户填空。\n- **小白对话风格**：用户零技术、零英语。禁用技术黑话，把提问改成“请你跟着做一步小实验”的指示。\n- **严禁凭空虚构**：需要展开流程时，必须读取 `reference/` 下对应文件，不可编造。\n---\n\n## 状态码（每次对话开头优先确认）\n\n用下面之一作为当前阶段（用户可直接回复序号或名称）：\n\n| 状态 | 含义 | 本步该做什么 |\n|------|------|----------------|\n| S1 | 默认状态 | 走 **模块 1**，明确平台（Web/小程序），只解决对应账号与工具，不写产品文档 |\n| S2 | 需求已清楚，要出文档 | 走 **模块 2** |\n| S3 | 已有三文档或已有代码，要跑起来/上线 | 走 **模块 3** |\n\n在对话后台默默判断用户当前处于哪个阶段（S0-S3），引导用户推进。**默认从 S0 开始。**\n\n---\n\n## 模块 1：工具与账号（注册 Cursor、GitHub、Vercel、本地环境）\n\n### 何时进入\n- 默认进入。\n\n### 必问清单（白话，可拆成多轮，每轮 1～2 个问句）\n1. **本地编辑/运行工具**：你电脑上是否已经装了 **Cursor** 或 **Trae**（或其它能打开项目文件夹的编辑器）？没有则引导安装与基础设置 → `reference/cursor-and-editor-setup.md`。\n2. **确认开发工具**：\n  - **如果选网页**：\n    - 您电脑上是否已经装了 **Cur"},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn757qhzcz9c672gtw46k6fnn583qka5\",\n  \"slug\": \"demo-website-pm\",\n  \"version\": \"1.0.15\",\n  \"publishedAt\": 1776513604945\n}"},{"path":"reference/cursor-and-editor-setup.md","content":"# Cursor 与编辑器准备\n\n## 适用场景\n- 你第一次用 Cursor。\n- 你要打开网站项目并开始改内容。\n- 你是零技术用户，需要按步骤操作。\n\n## 前置准备\n- 一台可联网电脑。\n- 可正常打开浏览器。\n- 一个可用邮箱（用来注册账号）。\n- 你已拿到项目文件夹路径。\n\n## 页面英文看不懂时怎么做\n- 在浏览器里右键页面，点“翻译成中文”。\n- 看不懂按钮文字时，先看位置：右上角常见“登录/注册”，中间常见“继续/下一步”。\n- 用手机拍照翻译也可以，重点看按钮和报错红字。\n- 看到不认识的英文，不要猜，先截图再问。\n\n## 步骤清单\n1. 打开浏览器，进入 Cursor 官网下载页。  \n   你会看到什么：页面上有下载按钮，通常在中间或右上。\n2. 点击下载按钮。  \n   你会看到什么：浏览器开始下载安装包。\n3. 双击安装包并完成安装。  \n   你会看到什么：桌面或应用列表里出现 Cursor 图标。\n4. 打开 Cursor，选择“登录”或“注册”。  \n   你会看到什么：出现邮箱登录页面，要求输入邮箱或验证码。\n5. 完成登录后，点击“Open Folder（打开文件夹）”。  \n   你会看到什么：系统弹出文件夹选择窗口。\n6. 选中你的项目文件夹并确认。  \n   你会看到什么：左侧出现项目文件列表。\n7. 在左侧点开一个文件，确认可以编辑。  \n   你会看到什么：中间区域显示文件内容，光标可输入文字。\n8. 按 `Command + S`（mac）或 `Ctrl + S`（Windows）保存一次。  \n   你会看到什么：文件不再显示“未保存”提示。\n\n## 成功判定\n- 你能正常打开 Cursor。\n- 你已登录账号。\n- 你能打开项目文件夹。\n- 你能修改并保存任意一个文件。\n\n## 常见问题与处理\n- 问题：下载很慢或失败。  \n  处理：先换网络，再刷新页面重试；仍失败就换浏览器。\n- 问题：登录收不到验证码。  \n  处理：先查垃圾邮件；等 1 分钟后重发；确认邮箱地址无拼写错误。\n- 问题：看不到项目文件。  \n  处理：重新点“Open Folder”，确认选的是项目根目录，不是上一级目录。\n- 问题：无法保存文件。  \n  处理：检查文件是否只读；把项目移到“文稿/桌面”等可写目录后重试。\n\n## 何时中止并回报\n- 连续 3 次安装失败。\n- 连续 3 次登录失败（含验证码问题）。\n- 已确认选对文件夹，但文件仍不显示。\n- 出现系统权限弹窗且你不确定是否允许。\n- 中止后请回报：你做到哪一步、看到了什么提示、发一张截图。"},{"path":"reference/frontend-design.md","content":"# Frontend Design\n\nCreate distinctive, production-grade frontend interfaces that avoid generic \"AI slop\" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.\n\n## Design Thinking\n\nBefore coding, understand the context and commit to a BOLD aesthetic direction:\n\n- **Purpose**: What problem does this interface solve? Who uses it?\n- **Tone**: Pick an extreme — brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian\n- **Constraints**: Technical requirements (framework, performance, accessibility)\n- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?\n\n**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.\n\n## Frontend Aesthetics Guidelines\n\n### Typography\nChoose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt for distinctive choices that elevate the interface. Pair a distinctive display font with a refined body font.\n\n### Color & Theme\nCommit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.\n\n### Motion\nUse animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.\n\n### Spatial Composition\nUnexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.\n\n### Backgrounds & Visual Details\nCreate atmosphere and depth rather than defaulting to solid colors. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.\n\n## Anti-Patterns (What NOT to Do)\n\n**NEVER use:**\n- Overused font families (Inter, Roboto, Arial, system fonts)\n- Cliched color schemes (purple gradients on white backgrounds)\n- Predictable layouts and component patterns\n- Cookie-cutter design that lacks context-specific character\n\n**NEVER converge** on common AI choices (Space Grotesk, for example) across generations.\n\n## Implementation\n\nMatch implementation complexity to the aesthetic vision:\n- Maximalist designs need elaborate code with extensive animations and effects\n- Minimalist designs need restraint, precision, and careful attention to spacing, typography, and subtle details\n\nElegance comes from executing the vision well.\n\n## Output Requirements\n\nThe code guide need to be:\n- Production-grade and functional\n- Visually striking and memorable\n- Cohesive with a clear aesthetic point-of-view\n- Meticulously refined i"},{"path":"reference/github-onboarding.md","content":"# GitHub 入门引导\n\n## 适用场景\n- 你要把本地项目放到 GitHub。\n- 你后续要用 Vercel 自动部署网站。\n- 你几乎没有代码经验。\n\n## 前置准备\n- 一个邮箱（可收验证码）。\n- 已安装并打开浏览器。\n- 本地已有项目文件夹。\n- 已安装 Git（Git 是“上传版本记录工具”，可理解为项目传输工具）。\n\n## 术语白话\n- 仓库：放项目文件的“网盘文件夹”。\n- 分支：同一项目的不同修改线路，`main` 通常是主线路。\n- 远程地址：你在 GitHub 仓库对应的网络地址，通常以 `.git` 结尾。\n\n## 页面英文看不懂时怎么做\n- GitHub 页面可用浏览器翻译成中文。\n- 记住常见按钮位置：右上角头像区是账号设置，绿色按钮多是“新建/提交”。\n- “New”一般是新建，“Create”一般是创建，“Upload”一般是上传。\n- 看到红色报错先截图，再按报错关键词处理。\n\n## 本地安装\n当检测到用户未安装 Git 时，请询问用户的操作系统，并提供对应的终端安装命令：\n\n* **Windows 系统 (使用系统自带 Winget)**：\n    ```bash\n    winget install --id Git.Git -e --source winget\n    ```\n    *(注：如果用户不熟悉终端，也可引导直接前往 `https://git-scm.com/` 下载安装包)*\n* **macOS 系统 (使用 Homebrew)**：\n    ```bash\n    brew install git\n    ```\n* **Linux - Ubuntu / Debian 体系**：\n    ```bash\n    sudo apt update && sudo apt install git -y\n    ```\n* **Linux - CentOS / RedHat / Fedora 体系**：\n    ```bash\n    sudo dnf install git -y\n    ```\n\n## 步骤清单示例\n**请一步一步带着用户做，如果有任何不确定的请用通俗易懂的语言询问用户。**\n1. 打开浏览器，进入 GitHub 官网。  \n   你会看到什么：右上角有“Sign up（注册）”或“Sign in（登录）”。\n2. 如果你没有账号，先点“Sign up（注册）”完成注册。  \n   你会看到什么：注册完成后页面提示你可以登录。\n3. 点击“Sign in（登录）”并输入账号信息。  \n   你会看到什么：登录后右上角会出现你的头像。\n4. 点击右上角 `+`，选择“New repository（新建仓库）”。  \n   你会看到什么：出现创建仓库表单页面。\n5. 输入仓库名，并保持仓库为“空仓库初始化”。  \n   操作要点：不要勾选 `Add a README file`、不要勾选 `Add .gitignore`、不要勾选 `Choose a license`。  \n   你会看到什么：这三个初始化选项都保持未勾选状态。\n6. 勾选“Public（公开）”或“Private（私有）”。  \n   你会看到什么：对应选项变成已选中状态。\n7. 点击“Create repository（创建仓库）”。  \n   你会看到什么：进入新仓库主页，页面会显示后续要执行的 Git 命令示例。\n8. 打开本地终端，进入项目目录。  \n   你会看到什么：命令行前缀显示当前目录已是你的项目目录。\n9. 运行 `git init` 初始化仓库。  \n   你会看到什么：终端出现初始化成功提示。\n10. 在执行 `git add .` 前，先创建或检查 `.gitignore`（防误传）。  \n   操作要点：确保 `.gitignore` 至少包含以下内容：`node_modules/`、`.env`、密钥/证书私钥文件（如 `*.key`、`*.pem`、`*.p12`）、系统临时文件（如 `.DS_Store`、`Thumbs.db`）。  \n   你会看到什么：项目目录里存在 `.gitignore` 文件，打开后能看到上述规则。\n11. 上传前安全检查：运行 `git status`，确认待上传列表里没有 `.env`、私钥文件、证书私钥和系统临时文件。  \n   你会看到什么：终端显示待上传文件列表，敏感文件不在列表中。\n12. 运行 `git add .` 添加文件。  \n   你会看到什么：终端通常无报错，表示已加入待提交列表。\n13. 运行 `git commit -m \"first commit\"` 提交一次。  \n   你会看到什么：终端显示提交成功和文件数量。\n14. 按 GitHub 仓库页面提示，复制远程地址。  \n   你会看到什么：地址通常以 `.git` 结尾。\n15. 运行 `git remote add origin <仓库地址>`。  \n   你会看到什么：终端通常无报错。\n16. 运行 `git branch -M main`。  \n    你会看到什么：终端通常无报错。\n17. 运行 `git push -u origin main`。  \n    你会看到什么：终端显示上传进度。\n18. 刷新 GitHub 仓库页面。  \n    你会看到什么：仓库页面能看到你的项目文件。\n\n## 成功判定\n- GitHub 仓库页面能看到完整项目文件。注意引导用户上传到 main 分支。\n- 最新提交时间是刚刚。\n- 你刷新页面后文件仍存在。\n\n## 常见问题与处理\n- 问题：`git` 命令提示找不到。  \n  处理：说明 Git 未安装，先安装 Git 后重开终端。\n- 问题：推送时提示认证失败。  \n  处理：重新登录 GitHub；按提示使用浏览器授权；不要重复输入错误密码。\n- 问题：提示仓库已存在内容，无法直接推送。  \n  处理：先中止并回报，不建议新手自行执行 `git pull origin main --allow-unrelated-histories`。\n- 问题：上传后仓库没有文件。  \n  处理：先执行 `git status` 看是否有未提交文件，再补 `git add` 和 `git commit`。\n\n## 外部检索指南\n\n如果用户反馈有问题，并且解法不包含在此文档中，请查看 **GitHub 官方文档**：`https://docs.github.com/` 或者使用搜索工具来尝试解决。并将解法通俗细致的告知用户。"}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"面向零技术用户，把网站 / 小程序 demo 需求拆成产品需求、设计需求、技术需求三份文档，并配合 GitHub 与 Vercel / 微信小程序开发工具 直接上线部署 Skill: Demo Website Product Manager 小白建站 Owner: jhc888007 Summary: 面向零技术用户，把网站 / 小程序 demo 需求拆成产品需求、设计需求、技术需求三份文档，并配合 GitHub 与 Vercel / 微信小程序开发工具 直接上线部署 Tags: latest:1.0.15 Version history: v1.0.15 | 2026-04-18T12:00:04.945Z | user No file changes detected in this version. No updates to features or documentation. v1.0.14 | 2026-04-18T11:56:33.575Z | user No file changes detected for version 1.0.14. - No code or docume","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":1172,"uniquenessScore":56,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-12T01:19:07.950Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-12T01:19:07.950Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-12T14:30:48.766Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}