From c9e5fa2b9972244d411e9c9f2001bb794f43c57c Mon Sep 17 00:00:00 2001 From: admin Date: Thu, 3 Sep 2026 07:19:12 +0800 Subject: [PATCH] =?UTF-8?q?=E6=95=B4=E7=90=86=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...s-mcp Chrome DevTools for coding agents.md | 1346 ++++++++--------- Hermes/xingzhi/AI技术_2026-09-01.md | 48 - ...ools-mcp-infographic-prompts-2026-04-20.md | 336 ++-- .../prompts/infographic.md | 314 ++-- ...circular-infographic-prompts-2026-04-20.md | 510 +++---- Hermes/xingzhi/信息图提示词模板.md | 524 +++---- Hermes/xingzhi/养龙虾封面提示词-2026-04-20.md | 100 +- Hermes/xingzhi/常用任务指令.md | 42 +- ...复用的知识库 —— llm-wiki-sync 的实现与示例解析.md | 252 ++- Hermes/xingzhi/自动分析和完善MP3信息.md | 65 - .../Obsidian-Claude-Code-第二大脑协作指南.md | 104 -- .../技术笔记/django-tenants 完整配置指南.md | 444 +++--- ...-tenants 完整配置指南.md.bak.2026-04-21-184051 | 98 -- .../CUE+WAV分割与高质量MP3转换.md | 0 14 files changed, 1933 insertions(+), 2250 deletions(-) delete mode 100644 Hermes/xingzhi/AI技术_2026-09-01.md delete mode 100644 Hermes/xingzhi/自动分析和完善MP3信息.md delete mode 100644 Hermes/yunzhi/Obsidian-Claude-Code-第二大脑协作指南.md delete mode 100644 Hermes/yunzhi/技术笔记/django-tenants 完整配置指南.md.bak.2026-04-21-184051 rename {Hermes/yunzhi => knowledgebase}/CUE+WAV分割与高质量MP3转换.md (100%) diff --git a/Clippings/ChromeDevToolschrome-devtools-mcp Chrome DevTools for coding agents.md b/Clippings/ChromeDevToolschrome-devtools-mcp Chrome DevTools for coding agents.md index a6886a2e..7c503bf1 100644 --- a/Clippings/ChromeDevToolschrome-devtools-mcp Chrome DevTools for coding agents.md +++ b/Clippings/ChromeDevToolschrome-devtools-mcp Chrome DevTools for coding agents.md @@ -1,674 +1,674 @@ ---- -title: "ChromeDevTools/chrome-devtools-mcp: Chrome DevTools for coding agents" -source: "https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/README.md" -author: -published: -created: 2026-04-19 -description: "Chrome DevTools for coding agents. Contribute to ChromeDevTools/chrome-devtools-mcp development by creating an account on GitHub." -tags: - - "clippings" ---- -## Chrome DevTools for Agents - -Chrome DevTools for Agents (`chrome-devtools-mcp`) lets your coding agent (such as Gemini, Claude, Cursor or Copilot) control and inspect a live Chrome browser. It acts as a Model-Context-Protocol (MCP) server, giving your AI coding assistant access to the full power of Chrome DevTools for reliable automation, in-depth debugging, and performance analysis. A [CLI](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/cli.md) is also provided for use without MCP. -Chrome DevTools for Agents（ `chrome-devtools-mcp` ）允许您的编码代理（如 Gemini、Claude、Cursor 或 Copilot）控制和检查实时 Chrome 浏览器。它充当模型-上下文-协议（MCP）服务器，为您的 AI 编码助手提供完整的 Chrome DevTools 功能，以实现可靠的自动化、深入调试和性能分析。还提供了 CLI，可在没有 MCP 的情况下使用。 - -## Tool reference | Changelog | Contributing | Troubleshooting | Design Principles工具参考 | 更新日志 | 贡献指南 | 故障排除 | 设计原则 - -## Key features 主要功能 - -- **Get performance insights**: Uses [Chrome DevTools](https://github.com/ChromeDevTools/devtools-frontend) to record traces and extract actionable performance insights. - 获取性能洞察：使用 Chrome DevTools 记录跟踪并提取可操作的性能洞察。 -- **Advanced browser debugging**: Analyze network requests, take screenshots and check browser console messages (with source-mapped stack traces). - 高级浏览器调试：分析网络请求、截取屏幕截图并检查浏览器控制台消息（带源映射的堆栈跟踪）。 -- **Reliable automation**. Uses [puppeteer](https://github.com/puppeteer/puppeteer) to automate actions in Chrome and automatically wait for action results. - 可靠的自动化。使用 puppeteer 自动化 Chrome 中的操作，并自动等待操作结果。 - -## Disclaimers 免责声明 - -`chrome-devtools-mcp` exposes content of the browser instance to the MCP clients allowing them to inspect, debug, and modify any data in the browser or DevTools. Avoid sharing sensitive or personal information that you don't want to share with MCP clients. -`chrome-devtools-mcp` 将浏览器实例的内容暴露给 MCP 客户端，允许他们检查、调试和修改浏览器或 DevTools 中的任何数据。避免与 MCP 客户端共享您不想共享的敏感或个人信息。 - -`chrome-devtools-mcp` officially supports Google Chrome and [Chrome for Testing](https://developer.chrome.com/blog/chrome-for-testing/) only. Other Chromium-based browsers may work, but this is not guaranteed, and you may encounter unexpected behavior. Use at your own discretion. We are committed to providing fixes and support for the latest version of [Extended Stable Chrome](https://chromiumdash.appspot.com/schedule). -`chrome-devtools-mcp` 仅正式支持 Google Chrome 和 Chrome for Testing。其他基于 Chromium 的浏览器可能可以工作，但这没有保证，并且您可能会遇到意外行为。请自行判断使用。我们致力于为最新版本的 Extended Stable Chrome 提供修复和支持。 - -Performance tools may send trace URLs to the Google CrUX API to fetch real-user experience data. This helps provide a holistic performance picture by presenting field data alongside lab data. This data is collected by the [Chrome User Experience Report (CrUX)](https://developer.chrome.com/docs/crux). To disable this, run with the `--no-performance-crux` flag. -性能工具可能会将跟踪 URL 发送到 Google CrUX API 以获取真实用户体验数据。这有助于通过结合现场数据与实验室数据来提供全面的性能视图。这些数据由 Chrome 用户体验报告（CrUX）收集。要禁用此功能，请使用 `--no-performance-crux` 标志运行。 - -## Usage statistics 使用统计 - -Google collects usage statistics (such as tool invocation success rates, latency, and environment information) to improve the reliability and performance of Chrome DevTools MCP. -Google 收集使用统计信息（如工具调用成功率、延迟和环境信息），以改进 Chrome DevTools MCP 的可靠性和性能。 - -Data collection is **enabled by default**. You can opt-out by passing the `--no-usage-statistics` flag when starting the server: -数据收集默认启用。您可以通过在启动服务器时传递 `--no-usage-statistics` 标志来选择退出。 - -``` -"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"] -``` - -Google handles this data in accordance with the [Google Privacy Policy](https://policies.google.com/privacy). -谷歌根据《谷歌隐私政策》处理这些数据。 - -Google's collection of usage statistics for Chrome DevTools MCP is independent from the Chrome browser's usage statistics. Opting out of Chrome metrics does not automatically opt you out of this tool, and vice-versa. -谷歌收集 Chrome DevTools MCP 的使用统计数据与 Chrome 浏览器使用统计数据独立。退出 Chrome 指标不会自动退出此工具，反之亦然。 - -Collection is disabled if `CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS` or `CI` env variables are set. -如果设置了 `CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS` 或 `CI` 环境变量，则禁用收集。 - -## Update checks 更新检查 - -By default, the server periodically checks the npm registry for updates and logs a notification when a newer version is available. You can disable these update checks by setting the `CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS` environment variable. -默认情况下，服务器会定期检查 npm 注册中心以获取更新，并在有新版本可用时记录通知。您可以通过设置 `CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS` 环境变量来禁用这些更新检查。 - -## Requirements 要求 - -- [Node.js](https://nodejs.org/) v20.19 or a newer [latest maintenance LTS](https://github.com/nodejs/Release#release-schedule) version. - Node.js v20.19 或更新的最新维护长期支持版本。 -- [Chrome](https://www.google.com/chrome/) current stable version or newer. - Chrome 当前稳定版本或更新版本。 -- [npm](https://www.npmjs.com/) - -## Getting started 入门指南 - -Add the following config to your MCP client: -将以下配置添加到您的 MCP 客户端： - -``` -{ - "mcpServers": { - "chrome-devtools": { - "command": "npx", - "args": ["-y", "chrome-devtools-mcp@latest"] - } - } -} -``` - -> [!note] Note -> Using `chrome-devtools-mcp@latest` ensures that your MCP client will always use the latest version of the Chrome DevTools MCP server. -> 使用 `chrome-devtools-mcp@latest` 可确保您的 MCP 客户端始终使用 Chrome DevTools MCP 服务器的最新版本。 - -If you are interested in doing only basic browser tasks, use the `--slim` mode: -如果您只想执行基本的浏览器任务，请使用 `--slim` 模式： - -``` -{ - "mcpServers": { - "chrome-devtools": { - "command": "npx", - "args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"] - } - } -} -``` - -See [Slim tool reference](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/slim-tool-reference.md).参见 Slim 工具参考。 - -### MCP Client configuration MCP 客户端配置 - -Amp Follow [https://ampcode.com/manual#mcp](https://ampcode.com/manual#mcp) and use the config provided above. You can also install the Chrome DevTools MCP server using the CLI: -请遵循 https://ampcode.com/manual#mcp 并使用上面提供的配置。您也可以使用 CLI 安装 Chrome DevTools MCP 服务器： -``` -amp mcp add chrome-devtools -- npx chrome-devtools-mcp@latest -``` -Antigravity - -To use the Chrome DevTools MCP server follow the instructions from [Antigravity's docs](https://antigravity.google/docs/mcp) to install a custom MCP server. Add the following config to the MCP servers config: - -``` -{ - "mcpServers": { - "chrome-devtools": { - "command": "npx", - "args": [ - "chrome-devtools-mcp@latest", - "--browser-url=http://127.0.0.1:9222", - "-y" - ] - } - } -} -``` - -This will make the Chrome DevTools MCP server automatically connect to the browser that Antigravity is using. If you are not using port 9222, make sure to adjust accordingly. - -Chrome DevTools MCP will not start the browser instance automatically using this approach because the Chrome DevTools MCP server connects to Antigravity's built-in browser. If the browser is not already running, you have to start it first by clicking the Chrome icon at the top right corner. - -Claude Code Claude 代码 - -**Install via CLI (MCP only)** - -Use the Claude Code CLI to add the Chrome DevTools MCP server ([guide](https://code.claude.com/docs/en/mcp)): - -``` -claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest -``` - -**Install as a Plugin (MCP + Skills)** - -> \[!NOTE\] If you already had Chrome DevTools MCP installed previously for Claude Code, make sure to remove it first from your installation and configuration files. - -To install Chrome DevTools MCP with skills, add the marketplace registry in Claude Code: - -``` -/plugin marketplace add ChromeDevTools/chrome-devtools-mcp -``` - -Then, install the plugin: - -``` -/plugin install chrome-devtools-mcp -``` - -Restart Claude Code to have the MCP server and skills load (check with `/skills`). - -> \[!TIP\] If the plugin installation fails with a `Failed to clone repository` error (e.g., HTTPS connectivity issues behind a corporate firewall), see the [troubleshooting guide](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md#claude-code-plugin-installation-fails-with-failed-to-clone-repository) for workarounds, or use the CLI installation method above instead. - -Cline Follow [https://docs.cline.bot/mcp/configuring-mcp-servers](https://docs.cline.bot/mcp/configuring-mcp-servers) and use the config provided above. -请遵循 https://docs.cline.bot/mcp/configuring-mcp-servers 并使用上面提供的配置。 Codex Follow the [configure MCP guide](https://developers.openai.com/codex/mcp/#configure-with-the-cli) using the standard config from above. You can also install the Chrome DevTools MCP server using the Codex CLI: -请使用上面提供的标准配置遵循配置 MCP 指南。您也可以使用 Codex CLI 安装 Chrome DevTools MCP 服务器： -``` -codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest -``` - -**On Windows 11** - -Configure the Chrome install location and increase the startup timeout by updating `.codex/config.toml` and adding the following `env` and `startup_timeout_ms` parameters: - -``` -[mcp_servers.chrome-devtools] -command = "cmd" -args = [ - "/c", - "npx", - "-y", - "chrome-devtools-mcp@latest", -] -env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" } -startup_timeout_ms = 20_000 -``` - -Command Code 命令代码 - -Use the Command Code CLI to add the Chrome DevTools MCP server ([MCP guide](https://commandcode.ai/docs/mcp)): - -``` -cmd mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest -``` -Copilot CLI - -Start Copilot CLI: - -``` -copilot -``` - -Start the dialog to add a new MCP server by running: - -``` -/mcp add -``` - -Configure the following fields and press `CTRL+S` to save the configuration: - -- **Server name:** `chrome-devtools` -- **Server Type:** `[1] Local` -- **Command:** `npx -y chrome-devtools-mcp@latest` -Copilot / VS Code - -**Install as a Plugin (Recommended)** - -The easiest way to get up and running is to install `chrome-devtools-mcp` as an agent plugin. This bundles the **MCP server** and all **skills** together, so your agent gets both the tools and the expert guidance it needs to use them effectively. - -1. Open the **Command Palette** (`Cmd+Shift+P` on macOS or `Ctrl+Shift+P` on Windows/Linux). -2. Search for and run the **Chat: Install Plugin From Source** command. -3. Paste in our repository URL: `https://github.com/ChromeDevTools/chrome-devtools-mcp` - -That's it! Your agent is now supercharged with Chrome DevTools capabilities. - ---- - -**Install as an MCP Server (MCP only)** - -**Click the button to install:** - -**Or install manually:** - -Follow the VS Code [MCP configuration guide](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server) using the standard config from above, or use the CLI: - -For macOS and Linux: - -``` -code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}' -``` - -For Windows (PowerShell): - -``` -code --add-mcp '{"""name""":"""io.github.ChromeDevTools/chrome-devtools-mcp""","""command""":"""npx""","""args""":["""-y""","""chrome-devtools-mcp"""]}' -``` -Cursor - -**Click the button to install:** - -**Or install manually:** - -Go to `Cursor Settings` -> `MCP` -> `New MCP Server`. Use the config provided above. - -Factory CLI Use the Factory CLI to add the Chrome DevTools MCP server ([guide](https://docs.factory.ai/cli/configuration/mcp)): -使用 Factory CLI 添加 Chrome DevTools MCP 服务器（指南）： -``` -droid mcp add chrome-devtools "npx -y chrome-devtools-mcp@latest" -``` -Gemini CLI Install the Chrome DevTools MCP server using the Gemini CLI. -使用 Gemini CLI 安装 Chrome DevTools MCP 服务器。 - -**Project wide:** - -``` -# Either MCP only: -gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest -# Or as a Gemini extension (MCP+Skills): -gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp -``` - -**Globally:** - -``` -gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest -``` - -Alternatively, follow the [MCP guide](https://github.com/google-gemini/gemini-cli/blob/main/docs/tools/mcp-server.md#how-to-set-up-your-mcp-server) and use the standard config from above. - -Gemini Code Assist Follow the [configure MCP guide](https://cloud.google.com/gemini/docs/codeassist/use-agentic-chat-pair-programmer#configure-mcp-servers) using the standard config from above. -使用上面提供的标准配置，按照 MCP 配置指南进行配置。 JetBrains AI Assistant & Junie - -Go to `Settings | Tools | AI Assistant | Model Context Protocol (MCP)` -> `Add`. Use the config provided above. The same way chrome-devtools-mcp can be configured for JetBrains Junie in `Settings | Tools | Junie | MCP Settings` -> `Add`. Use the config provided above. - -Kiro - -In **Kiro Settings**, go to `Configure MCP` > `Open Workspace or User MCP Config` > Use the configuration snippet provided above. - -Or, from the IDE **Activity Bar** > `Kiro` > `MCP Servers` > `Click Open MCP Config`. Use the configuration snippet provided above. - -Katalon Studio - -The Chrome DevTools MCP server can be used with [Katalon StudioAssist](https://docs.katalon.com/katalon-studio/studioassist/mcp-servers/setting-up-chrome-devtools-mcp-server-for-studioassist) via an MCP proxy. - -**Step 1:** Install the MCP proxy by following the [MCP proxy setup guide](https://docs.katalon.com/katalon-studio/studioassist/mcp-servers/setting-up-mcp-proxy-for-stdio-mcp-servers). - -**Step 2:** Start the Chrome DevTools MCP server with the proxy: - -``` -mcp-proxy --transport streamablehttp --port 8080 -- npx -y chrome-devtools-mcp@latest -``` - -**Note:** You may need to pick another port if 8080 is already in use. - -**Step 3:** In Katalon Studio, add the server to StudioAssist with the following settings: - -- **Connection URL:** `http://127.0.0.1:8080/mcp` -- **Transport type:** `HTTP` - -Once connected, the Chrome DevTools MCP tools will be available in StudioAssist. - -Mistral Vibe - -Add in ~/.vibe/config.toml: - -``` -[[mcp_servers]] -name = "chrome-devtools" -transport = "stdio" -command = "npx" -args = ["chrome-devtools-mcp@latest"] -``` -OpenCode - -Add the following configuration to your `opencode.json` file. If you don't have one, create it at `~/.config/opencode/opencode.json` ([guide](https://opencode.ai/docs/mcp-servers)): - -``` -{ - "$schema": "https://opencode.ai/config.json", - "mcp": { - "chrome-devtools": { - "type": "local", - "command": ["npx", "-y", "chrome-devtools-mcp@latest"] - } - } -} -``` -Qoder - -In **Qoder Settings**, go to `MCP Server` > `+ Add` > Use the configuration snippet provided above. - -Alternatively, follow the [MCP guide](https://docs.qoder.com/user-guide/chat/model-context-protocol) and use the standard config from above. - -Qoder CLI - -Install the Chrome DevTools MCP server using the Qoder CLI ([guide](https://docs.qoder.com/cli/using-cli#mcp-servers)): - -**Project wide:** - -``` -qodercli mcp add chrome-devtools -- npx chrome-devtools-mcp@latest -``` - -**Globally:** - -``` -qodercli mcp add -s user chrome-devtools -- npx chrome-devtools-mcp@latest -``` -Visual Studio - -**Click the button to install:** - -Warp - -Go to `Settings | AI | Manage MCP Servers` -> `+ Add` to [add an MCP Server](https://docs.warp.dev/knowledge-and-collaboration/mcp#adding-an-mcp-server). Use the config provided above. - -Windsurf Follow the [configure MCP guide](https://docs.windsurf.com/windsurf/cascade/mcp#mcp-config-json) using the standard config from above. -使用上面提供的标准配置，按照 MCP 配置指南进行配置。 - -### Your first prompt 你的第一个提示 - -Enter the following prompt in your MCP Client to check if everything is working: -在 MCP 客户端中输入以下提示以检查一切是否正常： - -``` -Check the performance of https://developers.chrome.com -``` - -Your MCP client should open the browser and record a performance trace. - -> [!note] Note -> The MCP server will start the browser automatically once the MCP client uses a tool that requires a running browser instance. Connecting to the Chrome DevTools MCP server on its own will not automatically start the browser. - -## Tools - -If you run into any issues, checkout our [troubleshooting guide](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md). - -- **Input automation** (9 tools) - - [`click`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#click) - - [`drag`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#drag) - - [`fill`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#fill) - - [`fill_form`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#fill_form) - - [`handle_dialog`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#handle_dialog) - - [`hover`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#hover) - - [`press_key`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#press_key) - - [`type_text`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#type_text) - - [`upload_file`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#upload_file) -- **Navigation automation** (6 tools) - - [`close_page`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#close_page) - - [`list_pages`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#list_pages) - - [`navigate_page`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#navigate_page) - - [`new_page`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#new_page) - - [`select_page`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#select_page) - - [`wait_for`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#wait_for) -- **Emulation** (2 tools) - - [`emulate`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#emulate) - - [`resize_page`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#resize_page) -- **Performance** (4 tools) - - [`performance_analyze_insight`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#performance_analyze_insight) - - [`performance_start_trace`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#performance_start_trace) - - [`performance_stop_trace`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#performance_stop_trace) - - [`take_memory_snapshot`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#take_memory_snapshot) -- **Network** (2 tools) - - [`get_network_request`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#get_network_request) - - [`list_network_requests`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#list_network_requests) -- **Debugging** (6 tools) - - [`evaluate_script`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#evaluate_script) - - [`get_console_message`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#get_console_message) - - [`lighthouse_audit`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#lighthouse_audit) - - [`list_console_messages`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#list_console_messages) - - [`take_screenshot`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#take_screenshot) - - [`take_snapshot`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#take_snapshot) - -## Configuration - -The Chrome DevTools MCP server supports the following configuration option: - -- **`--autoConnect` / `--auto-connect`** If specified, automatically connects to a browser (Chrome 144+) running locally from the user data directory identified by the channel param (default channel is stable). Requires the remote debugging server to be started in the Chrome instance via chrome://inspect/#remote-debugging. - - **Type:** boolean - - **Default:** `false` -- **`--browserUrl` / `--browser-url`, `-u`** Connect to a running, debuggable Chrome instance (e.g. `http://127.0.0.1:9222`). For more details see: [https://github.com/ChromeDevTools/chrome-devtools-mcp#connecting-to-a-running-chrome-instance](https://github.com/ChromeDevTools/chrome-devtools-mcp#connecting-to-a-running-chrome-instance). - - **Type:** string -- **`--wsEndpoint` / `--ws-endpoint`, `-w`** WebSocket endpoint to connect to a running Chrome instance (e.g., ws://127.0.0.1:9222/devtools/browser/). Alternative to --browserUrl. - - **Type:** string -- **`--wsHeaders` / `--ws-headers`** Custom headers for WebSocket connection in JSON format (e.g., '{"Authorization":"Bearer token"}'). Only works with --wsEndpoint. - - **Type:** string -- **`--headless`** Whether to run in headless (no UI) mode. - - **Type:** boolean - - **Default:** `false` -- **`--executablePath` / `--executable-path`, `-e`** Path to custom Chrome executable. - - **Type:** string -- **`--isolated`** If specified, creates a temporary user-data-dir that is automatically cleaned up after the browser is closed. Defaults to false. - - **Type:** boolean -- **`--userDataDir` / `--user-data-dir`** Path to the user data directory for Chrome. Default is $HOME/.cache/chrome-devtools-mcp/chrome-profile$CHANNEL\_SUFFIX\_IF\_NON\_STABLE - - **Type:** string -- **`--channel`** Specify a different Chrome channel that should be used. The default is the stable channel version. - - **Type:** string - - **Choices:** `canary`, `dev`, `beta`, `stable` -- **`--logFile` / `--log-file`** Path to a file to write debug logs to. Set the env variable `DEBUG` to `*` to enable verbose logs. Useful for submitting bug reports. - - **Type:** string -- **`--viewport`** Initial viewport size for the Chrome instances started by the server. For example, `1280x720`. In headless mode, max size is 3840x2160px. - - **Type:** string -- **`--proxyServer` / `--proxy-server`** Proxy server configuration for Chrome passed as --proxy-server when launching the browser. See [https://www.chromium.org/developers/design-documents/network-settings/](https://www.chromium.org/developers/design-documents/network-settings/) for details. - - **Type:** string -- **`--acceptInsecureCerts` / `--accept-insecure-certs`** If enabled, ignores errors relative to self-signed and expired certificates. Use with caution. - - **Type:** boolean -- **`--experimentalVision` / `--experimental-vision`** Whether to enable coordinate-based tools such as click\_at(x,y). Usually requires a computer-use model able to produce accurate coordinates by looking at screenshots. - - **Type:** boolean -- **`--experimentalScreencast` / `--experimental-screencast`** Exposes experimental screencast tools (requires ffmpeg). Install ffmpeg [https://www.ffmpeg.org/download.html](https://www.ffmpeg.org/download.html) and ensure it is available in the MCP server PATH. - - **Type:** boolean -- **`--experimentalWebmcp` / `--experimental-webmcp`** Set to true to enable debugging WebMCP tools. Requires Chrome 149+ with the following flags: `--enable-features=WebMCPTesting,DevToolsWebMCPSupport` - - **Type:** boolean -- **`--chromeArg` / `--chrome-arg`** Additional arguments for Chrome. Only applies when Chrome is launched by chrome-devtools-mcp. - - **Type:** array -- **`--ignoreDefaultChromeArg` / `--ignore-default-chrome-arg`** Explicitly disable default arguments for Chrome. Only applies when Chrome is launched by chrome-devtools-mcp. - - **Type:** array -- **`--categoryEmulation` / `--category-emulation`** Set to false to exclude tools related to emulation. - - **Type:** boolean - - **Default:** `true` -- **`--categoryPerformance` / `--category-performance`** Set to false to exclude tools related to performance. - - **Type:** boolean - - **Default:** `true` -- **`--categoryNetwork` / `--category-network`** Set to false to exclude tools related to network. - - **Type:** boolean - - **Default:** `true` -- **`--performanceCrux` / `--performance-crux`** Set to false to disable sending URLs from performance traces to CrUX API to get field performance data. - - **Type:** boolean - - **Default:** `true` -- **`--usageStatistics` / `--usage-statistics`** Set to false to opt-out of usage statistics collection. Google collects usage data to improve the tool, handled under the Google Privacy Policy ([https://policies.google.com/privacy](https://policies.google.com/privacy)). This is independent from Chrome browser metrics. Disabled if `CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS` or `CI` env variables are set. - - **Type:** boolean - - **Default:** `true` -- **`--slim`** Exposes a "slim" set of 3 tools covering navigation, script execution and screenshots only. Useful for basic browser tasks. - - **Type:** boolean -- **`--redactNetworkHeaders` / `--redact-network-headers`** If true, redacts some of the network headers considered senstive before returning to the client. - - **Type:** boolean - - **Default:** `false` - -Pass them via the `args` property in the JSON configuration. For example: - -``` -{ - "mcpServers": { - "chrome-devtools": { - "command": "npx", - "args": [ - "chrome-devtools-mcp@latest", - "--channel=canary", - "--headless=true", - "--isolated=true" - ] - } - } -} -``` - -### Connecting via WebSocket with custom headers - -You can connect directly to a Chrome WebSocket endpoint and include custom headers (e.g., for authentication): - -``` -{ - "mcpServers": { - "chrome-devtools": { - "command": "npx", - "args": [ - "chrome-devtools-mcp@latest", - "--wsEndpoint=ws://127.0.0.1:9222/devtools/browser/", - "--wsHeaders={\"Authorization\":\"Bearer YOUR_TOKEN\"}" - ] - } - } -} -``` - -To get the WebSocket endpoint from a running Chrome instance, visit `http://127.0.0.1:9222/json/version` and look for the `webSocketDebuggerUrl` field. - -You can also run `npx chrome-devtools-mcp@latest --help` to see all available configuration options. - -## Concepts - -### User data directory - -`chrome-devtools-mcp` starts a Chrome's stable channel instance using the following user data directory: - -- Linux / macOS: `$HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL` -- Windows: `%HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL` - -The user data directory is not cleared between runs and shared across all instances of `chrome-devtools-mcp`. Set the `isolated` option to `true` to use a temporary user data dir instead which will be cleared automatically after the browser is closed. - -### Connecting to a running Chrome instance - -By default, the Chrome DevTools MCP server will start a new Chrome instance with a dedicated profile. This might not be ideal in all situations: - -- If you would like to maintain the same application state when alternating between manual site testing and agent-driven testing. -- When the MCP needs to sign into a website. Some accounts may prevent sign-in when the browser is controlled via WebDriver (the default launch mechanism for the Chrome DevTools MCP server). -- If you're running your LLM inside a sandboxed environment, but you would like to connect to a Chrome instance that runs outside the sandbox. - -In these cases, start Chrome first and let the Chrome DevTools MCP server connect to it. There are two ways to do so: - -- **Automatic connection (available in Chrome 144)**: best for sharing state between manual and agent-driven testing. -- **Manual connection via remote debugging port**: best when running inside a sandboxed environment. - -#### Automatically connecting to a running Chrome instance - -**Step 1:** Set up remote debugging in Chrome - -In Chrome (>= M144), do the following to set up remote debugging: - -1. Navigate to `chrome://inspect/#remote-debugging` to enable remote debugging. -2. Follow the dialog UI to allow or disallow incoming debugging connections. - -**Step 2:** Configure Chrome DevTools MCP server to automatically connect to a running Chrome Instance - -To connect the `chrome-devtools-mcp` server to the running Chrome instance, use `--autoConnect` command line argument for the MCP server. - -The following code snippet is an example configuration for gemini-cli: - -``` -{ - "mcpServers": { - "chrome-devtools": { - "command": "npx", - "args": ["chrome-devtools-mcp@latest", "--autoConnect"] - } - } -} -``` - -**Step 3:** Test your setup - -Make sure your browser is running. Open gemini-cli and run the following prompt: - -``` -Check the performance of https://developers.chrome.com -``` - -> [!note] Note -> The `autoConnect` option requires the user to start Chrome. If the user has multiple active profiles, the MCP server will connect to the default profile (as determined by Chrome). The MCP server has access to all open windows for the selected profile. - -The Chrome DevTools MCP server will try to connect to your running Chrome instance. It shows a dialog asking for user permission. - -Clicking **Allow** results in the Chrome DevTools MCP server opening [developers.chrome.com](http://developers.chrome.com/) and taking a performance trace. - -#### Manual connection using port forwarding - -You can connect to a running Chrome instance by using the `--browser-url` option. This is useful if you are running the MCP server in a sandboxed environment that does not allow starting a new Chrome instance. - -Here is a step-by-step guide on how to connect to a running Chrome instance: - -**Step 1: Configure the MCP client** - -Add the `--browser-url` option to your MCP client configuration. The value of this option should be the URL of the running Chrome instance. `http://127.0.0.1:9222` is a common default. - -``` -{ - "mcpServers": { - "chrome-devtools": { - "command": "npx", - "args": [ - "chrome-devtools-mcp@latest", - "--browser-url=http://127.0.0.1:9222" - ] - } - } -} -``` - -**Step 2: Start the Chrome browser** - -> [!warning] Warning -> Enabling the remote debugging port opens up a debugging port on the running browser instance. Any application on your machine can connect to this port and control the browser. Make sure that you are not browsing any sensitive websites while the debugging port is open. - -Start the Chrome browser with the remote debugging port enabled. Make sure to close any running Chrome instances before starting a new one with the debugging port enabled. The port number you choose must be the same as the one you specified in the `--browser-url` option in your MCP client configuration. - -For security reasons, [Chrome requires you to use a non-default user data directory](https://developer.chrome.com/blog/remote-debugging-port) when enabling the remote debugging port. You can specify a custom directory using the `--user-data-dir` flag. This ensures that your regular browsing profile and data are not exposed to the debugging session. - -**macOS** - -``` -/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable -``` - -**Linux** - -``` -/usr/bin/google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable -``` - -**Windows** - -``` -"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-profile-stable" -``` - -**Step 3: Test your setup** - -After configuring the MCP client and starting the Chrome browser, you can test your setup by running a simple prompt in your MCP client: - -``` -Check the performance of https://developers.chrome.com -``` - -Your MCP client should connect to the running Chrome instance and receive a performance report. - -If you hit VM-to-host port forwarding issues, see the “Remote debugging between virtual machine (VM) and host fails” section in [`docs/troubleshooting.md`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md#remote-debugging-between-virtual-machine-vm-and-host-fails). - -For more details on remote debugging, see the [Chrome DevTools documentation](https://developer.chrome.com/docs/devtools/remote-debugging/). - -### Debugging Chrome on Android - -Please consult [these instructions](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/debugging-android.md). - -## Known limitations - -See [Troubleshooting](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md). - ---- - -## Infographic +--- +title: "ChromeDevTools/chrome-devtools-mcp: Chrome DevTools for coding agents" +source: "https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/README.md" +author: +published: +created: 2026-04-19 +description: "Chrome DevTools for coding agents. Contribute to ChromeDevTools/chrome-devtools-mcp development by creating an account on GitHub." +tags: + - "clippings" +--- +## Chrome DevTools for Agents + +Chrome DevTools for Agents (`chrome-devtools-mcp`) lets your coding agent (such as Gemini, Claude, Cursor or Copilot) control and inspect a live Chrome browser. It acts as a Model-Context-Protocol (MCP) server, giving your AI coding assistant access to the full power of Chrome DevTools for reliable automation, in-depth debugging, and performance analysis. A [CLI](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/cli.md) is also provided for use without MCP. +Chrome DevTools for Agents（ `chrome-devtools-mcp` ）允许您的编码代理（如 Gemini、Claude、Cursor 或 Copilot）控制和检查实时 Chrome 浏览器。它充当模型-上下文-协议（MCP）服务器，为您的 AI 编码助手提供完整的 Chrome DevTools 功能，以实现可靠的自动化、深入调试和性能分析。还提供了 CLI，可在没有 MCP 的情况下使用。 + +## Tool reference | Changelog | Contributing | Troubleshooting | Design Principles工具参考 | 更新日志 | 贡献指南 | 故障排除 | 设计原则 + +## Key features 主要功能 + +- **Get performance insights**: Uses [Chrome DevTools](https://github.com/ChromeDevTools/devtools-frontend) to record traces and extract actionable performance insights. + 获取性能洞察：使用 Chrome DevTools 记录跟踪并提取可操作的性能洞察。 +- **Advanced browser debugging**: Analyze network requests, take screenshots and check browser console messages (with source-mapped stack traces). + 高级浏览器调试：分析网络请求、截取屏幕截图并检查浏览器控制台消息（带源映射的堆栈跟踪）。 +- **Reliable automation**. Uses [puppeteer](https://github.com/puppeteer/puppeteer) to automate actions in Chrome and automatically wait for action results. + 可靠的自动化。使用 puppeteer 自动化 Chrome 中的操作，并自动等待操作结果。 + +## Disclaimers 免责声明 + +`chrome-devtools-mcp` exposes content of the browser instance to the MCP clients allowing them to inspect, debug, and modify any data in the browser or DevTools. Avoid sharing sensitive or personal information that you don't want to share with MCP clients. +`chrome-devtools-mcp` 将浏览器实例的内容暴露给 MCP 客户端，允许他们检查、调试和修改浏览器或 DevTools 中的任何数据。避免与 MCP 客户端共享您不想共享的敏感或个人信息。 + +`chrome-devtools-mcp` officially supports Google Chrome and [Chrome for Testing](https://developer.chrome.com/blog/chrome-for-testing/) only. Other Chromium-based browsers may work, but this is not guaranteed, and you may encounter unexpected behavior. Use at your own discretion. We are committed to providing fixes and support for the latest version of [Extended Stable Chrome](https://chromiumdash.appspot.com/schedule). +`chrome-devtools-mcp` 仅正式支持 Google Chrome 和 Chrome for Testing。其他基于 Chromium 的浏览器可能可以工作，但这没有保证，并且您可能会遇到意外行为。请自行判断使用。我们致力于为最新版本的 Extended Stable Chrome 提供修复和支持。 + +Performance tools may send trace URLs to the Google CrUX API to fetch real-user experience data. This helps provide a holistic performance picture by presenting field data alongside lab data. This data is collected by the [Chrome User Experience Report (CrUX)](https://developer.chrome.com/docs/crux). To disable this, run with the `--no-performance-crux` flag. +性能工具可能会将跟踪 URL 发送到 Google CrUX API 以获取真实用户体验数据。这有助于通过结合现场数据与实验室数据来提供全面的性能视图。这些数据由 Chrome 用户体验报告（CrUX）收集。要禁用此功能，请使用 `--no-performance-crux` 标志运行。 + +## Usage statistics 使用统计 + +Google collects usage statistics (such as tool invocation success rates, latency, and environment information) to improve the reliability and performance of Chrome DevTools MCP. +Google 收集使用统计信息（如工具调用成功率、延迟和环境信息），以改进 Chrome DevTools MCP 的可靠性和性能。 + +Data collection is **enabled by default**. You can opt-out by passing the `--no-usage-statistics` flag when starting the server: +数据收集默认启用。您可以通过在启动服务器时传递 `--no-usage-statistics` 标志来选择退出。 + +``` +"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"] +``` + +Google handles this data in accordance with the [Google Privacy Policy](https://policies.google.com/privacy). +谷歌根据《谷歌隐私政策》处理这些数据。 + +Google's collection of usage statistics for Chrome DevTools MCP is independent from the Chrome browser's usage statistics. Opting out of Chrome metrics does not automatically opt you out of this tool, and vice-versa. +谷歌收集 Chrome DevTools MCP 的使用统计数据与 Chrome 浏览器使用统计数据独立。退出 Chrome 指标不会自动退出此工具，反之亦然。 + +Collection is disabled if `CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS` or `CI` env variables are set. +如果设置了 `CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS` 或 `CI` 环境变量，则禁用收集。 + +## Update checks 更新检查 + +By default, the server periodically checks the npm registry for updates and logs a notification when a newer version is available. You can disable these update checks by setting the `CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS` environment variable. +默认情况下，服务器会定期检查 npm 注册中心以获取更新，并在有新版本可用时记录通知。您可以通过设置 `CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS` 环境变量来禁用这些更新检查。 + +## Requirements 要求 + +- [Node.js](https://nodejs.org/) v20.19 or a newer [latest maintenance LTS](https://github.com/nodejs/Release#release-schedule) version. + Node.js v20.19 或更新的最新维护长期支持版本。 +- [Chrome](https://www.google.com/chrome/) current stable version or newer. + Chrome 当前稳定版本或更新版本。 +- [npm](https://www.npmjs.com/) + +## Getting started 入门指南 + +Add the following config to your MCP client: +将以下配置添加到您的 MCP 客户端： + +``` +{ + "mcpServers": { + "chrome-devtools": { + "command": "npx", + "args": ["-y", "chrome-devtools-mcp@latest"] + } + } +} +``` + +> [!note] Note +> Using `chrome-devtools-mcp@latest` ensures that your MCP client will always use the latest version of the Chrome DevTools MCP server. +> 使用 `chrome-devtools-mcp@latest` 可确保您的 MCP 客户端始终使用 Chrome DevTools MCP 服务器的最新版本。 + +If you are interested in doing only basic browser tasks, use the `--slim` mode: +如果您只想执行基本的浏览器任务，请使用 `--slim` 模式： + +``` +{ + "mcpServers": { + "chrome-devtools": { + "command": "npx", + "args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"] + } + } +} +``` + +See [Slim tool reference](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/slim-tool-reference.md).参见 Slim 工具参考。 + +### MCP Client configuration MCP 客户端配置 + +Amp Follow [https://ampcode.com/manual#mcp](https://ampcode.com/manual#mcp) and use the config provided above. You can also install the Chrome DevTools MCP server using the CLI: +请遵循 https://ampcode.com/manual#mcp 并使用上面提供的配置。您也可以使用 CLI 安装 Chrome DevTools MCP 服务器： +``` +amp mcp add chrome-devtools -- npx chrome-devtools-mcp@latest +``` +Antigravity + +To use the Chrome DevTools MCP server follow the instructions from [Antigravity's docs](https://antigravity.google/docs/mcp) to install a custom MCP server. Add the following config to the MCP servers config: + +``` +{ + "mcpServers": { + "chrome-devtools": { + "command": "npx", + "args": [ + "chrome-devtools-mcp@latest", + "--browser-url=http://127.0.0.1:9222", + "-y" + ] + } + } +} +``` + +This will make the Chrome DevTools MCP server automatically connect to the browser that Antigravity is using. If you are not using port 9222, make sure to adjust accordingly. + +Chrome DevTools MCP will not start the browser instance automatically using this approach because the Chrome DevTools MCP server connects to Antigravity's built-in browser. If the browser is not already running, you have to start it first by clicking the Chrome icon at the top right corner. + +Claude Code Claude 代码 + +**Install via CLI (MCP only)** + +Use the Claude Code CLI to add the Chrome DevTools MCP server ([guide](https://code.claude.com/docs/en/mcp)): + +``` +claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest +``` + +**Install as a Plugin (MCP + Skills)** + +> \[!NOTE\] If you already had Chrome DevTools MCP installed previously for Claude Code, make sure to remove it first from your installation and configuration files. + +To install Chrome DevTools MCP with skills, add the marketplace registry in Claude Code: + +``` +/plugin marketplace add ChromeDevTools/chrome-devtools-mcp +``` + +Then, install the plugin: + +``` +/plugin install chrome-devtools-mcp +``` + +Restart Claude Code to have the MCP server and skills load (check with `/skills`). + +> \[!TIP\] If the plugin installation fails with a `Failed to clone repository` error (e.g., HTTPS connectivity issues behind a corporate firewall), see the [troubleshooting guide](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md#claude-code-plugin-installation-fails-with-failed-to-clone-repository) for workarounds, or use the CLI installation method above instead. + +Cline Follow [https://docs.cline.bot/mcp/configuring-mcp-servers](https://docs.cline.bot/mcp/configuring-mcp-servers) and use the config provided above. +请遵循 https://docs.cline.bot/mcp/configuring-mcp-servers 并使用上面提供的配置。 Codex Follow the [configure MCP guide](https://developers.openai.com/codex/mcp/#configure-with-the-cli) using the standard config from above. You can also install the Chrome DevTools MCP server using the Codex CLI: +请使用上面提供的标准配置遵循配置 MCP 指南。您也可以使用 Codex CLI 安装 Chrome DevTools MCP 服务器： +``` +codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest +``` + +**On Windows 11** + +Configure the Chrome install location and increase the startup timeout by updating `.codex/config.toml` and adding the following `env` and `startup_timeout_ms` parameters: + +``` +[mcp_servers.chrome-devtools] +command = "cmd" +args = [ + "/c", + "npx", + "-y", + "chrome-devtools-mcp@latest", +] +env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" } +startup_timeout_ms = 20_000 +``` + +Command Code 命令代码 + +Use the Command Code CLI to add the Chrome DevTools MCP server ([MCP guide](https://commandcode.ai/docs/mcp)): + +``` +cmd mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest +``` +Copilot CLI + +Start Copilot CLI: + +``` +copilot +``` + +Start the dialog to add a new MCP server by running: + +``` +/mcp add +``` + +Configure the following fields and press `CTRL+S` to save the configuration: + +- **Server name:** `chrome-devtools` +- **Server Type:** `[1] Local` +- **Command:** `npx -y chrome-devtools-mcp@latest` +Copilot / VS Code + +**Install as a Plugin (Recommended)** + +The easiest way to get up and running is to install `chrome-devtools-mcp` as an agent plugin. This bundles the **MCP server** and all **skills** together, so your agent gets both the tools and the expert guidance it needs to use them effectively. + +1. Open the **Command Palette** (`Cmd+Shift+P` on macOS or `Ctrl+Shift+P` on Windows/Linux). +2. Search for and run the **Chat: Install Plugin From Source** command. +3. Paste in our repository URL: `https://github.com/ChromeDevTools/chrome-devtools-mcp` + +That's it! Your agent is now supercharged with Chrome DevTools capabilities. + +--- + +**Install as an MCP Server (MCP only)** + +**Click the button to install:** + +**Or install manually:** + +Follow the VS Code [MCP configuration guide](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server) using the standard config from above, or use the CLI: + +For macOS and Linux: + +``` +code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}' +``` + +For Windows (PowerShell): + +``` +code --add-mcp '{"""name""":"""io.github.ChromeDevTools/chrome-devtools-mcp""","""command""":"""npx""","""args""":["""-y""","""chrome-devtools-mcp"""]}' +``` +Cursor + +**Click the button to install:** + +**Or install manually:** + +Go to `Cursor Settings` -> `MCP` -> `New MCP Server`. Use the config provided above. + +Factory CLI Use the Factory CLI to add the Chrome DevTools MCP server ([guide](https://docs.factory.ai/cli/configuration/mcp)): +使用 Factory CLI 添加 Chrome DevTools MCP 服务器（指南）： +``` +droid mcp add chrome-devtools "npx -y chrome-devtools-mcp@latest" +``` +Gemini CLI Install the Chrome DevTools MCP server using the Gemini CLI. +使用 Gemini CLI 安装 Chrome DevTools MCP 服务器。 + +**Project wide:** + +``` +# Either MCP only: +gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest +# Or as a Gemini extension (MCP+Skills): +gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp +``` + +**Globally:** + +``` +gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest +``` + +Alternatively, follow the [MCP guide](https://github.com/google-gemini/gemini-cli/blob/main/docs/tools/mcp-server.md#how-to-set-up-your-mcp-server) and use the standard config from above. + +Gemini Code Assist Follow the [configure MCP guide](https://cloud.google.com/gemini/docs/codeassist/use-agentic-chat-pair-programmer#configure-mcp-servers) using the standard config from above. +使用上面提供的标准配置，按照 MCP 配置指南进行配置。 JetBrains AI Assistant & Junie + +Go to `Settings | Tools | AI Assistant | Model Context Protocol (MCP)` -> `Add`. Use the config provided above. The same way chrome-devtools-mcp can be configured for JetBrains Junie in `Settings | Tools | Junie | MCP Settings` -> `Add`. Use the config provided above. + +Kiro + +In **Kiro Settings**, go to `Configure MCP` > `Open Workspace or User MCP Config` > Use the configuration snippet provided above. + +Or, from the IDE **Activity Bar** > `Kiro` > `MCP Servers` > `Click Open MCP Config`. Use the configuration snippet provided above. + +Katalon Studio + +The Chrome DevTools MCP server can be used with [Katalon StudioAssist](https://docs.katalon.com/katalon-studio/studioassist/mcp-servers/setting-up-chrome-devtools-mcp-server-for-studioassist) via an MCP proxy. + +**Step 1:** Install the MCP proxy by following the [MCP proxy setup guide](https://docs.katalon.com/katalon-studio/studioassist/mcp-servers/setting-up-mcp-proxy-for-stdio-mcp-servers). + +**Step 2:** Start the Chrome DevTools MCP server with the proxy: + +``` +mcp-proxy --transport streamablehttp --port 8080 -- npx -y chrome-devtools-mcp@latest +``` + +**Note:** You may need to pick another port if 8080 is already in use. + +**Step 3:** In Katalon Studio, add the server to StudioAssist with the following settings: + +- **Connection URL:** `http://127.0.0.1:8080/mcp` +- **Transport type:** `HTTP` + +Once connected, the Chrome DevTools MCP tools will be available in StudioAssist. + +Mistral Vibe + +Add in ~/.vibe/config.toml: + +``` +[[mcp_servers]] +name = "chrome-devtools" +transport = "stdio" +command = "npx" +args = ["chrome-devtools-mcp@latest"] +``` +OpenCode + +Add the following configuration to your `opencode.json` file. If you don't have one, create it at `~/.config/opencode/opencode.json` ([guide](https://opencode.ai/docs/mcp-servers)): + +``` +{ + "$schema": "https://opencode.ai/config.json", + "mcp": { + "chrome-devtools": { + "type": "local", + "command": ["npx", "-y", "chrome-devtools-mcp@latest"] + } + } +} +``` +Qoder + +In **Qoder Settings**, go to `MCP Server` > `+ Add` > Use the configuration snippet provided above. + +Alternatively, follow the [MCP guide](https://docs.qoder.com/user-guide/chat/model-context-protocol) and use the standard config from above. + +Qoder CLI + +Install the Chrome DevTools MCP server using the Qoder CLI ([guide](https://docs.qoder.com/cli/using-cli#mcp-servers)): + +**Project wide:** + +``` +qodercli mcp add chrome-devtools -- npx chrome-devtools-mcp@latest +``` + +**Globally:** + +``` +qodercli mcp add -s user chrome-devtools -- npx chrome-devtools-mcp@latest +``` +Visual Studio + +**Click the button to install:** + +Warp + +Go to `Settings | AI | Manage MCP Servers` -> `+ Add` to [add an MCP Server](https://docs.warp.dev/knowledge-and-collaboration/mcp#adding-an-mcp-server). Use the config provided above. + +Windsurf Follow the [configure MCP guide](https://docs.windsurf.com/windsurf/cascade/mcp#mcp-config-json) using the standard config from above. +使用上面提供的标准配置，按照 MCP 配置指南进行配置。 + +### Your first prompt 你的第一个提示 + +Enter the following prompt in your MCP Client to check if everything is working: +在 MCP 客户端中输入以下提示以检查一切是否正常： + +``` +Check the performance of https://developers.chrome.com +``` + +Your MCP client should open the browser and record a performance trace. + +> [!note] Note +> The MCP server will start the browser automatically once the MCP client uses a tool that requires a running browser instance. Connecting to the Chrome DevTools MCP server on its own will not automatically start the browser. + +## Tools + +If you run into any issues, checkout our [troubleshooting guide](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md). + +- **Input automation** (9 tools) + - [`click`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#click) + - [`drag`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#drag) + - [`fill`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#fill) + - [`fill_form`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#fill_form) + - [`handle_dialog`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#handle_dialog) + - [`hover`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#hover) + - [`press_key`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#press_key) + - [`type_text`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#type_text) + - [`upload_file`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#upload_file) +- **Navigation automation** (6 tools) + - [`close_page`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#close_page) + - [`list_pages`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#list_pages) + - [`navigate_page`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#navigate_page) + - [`new_page`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#new_page) + - [`select_page`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#select_page) + - [`wait_for`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#wait_for) +- **Emulation** (2 tools) + - [`emulate`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#emulate) + - [`resize_page`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#resize_page) +- **Performance** (4 tools) + - [`performance_analyze_insight`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#performance_analyze_insight) + - [`performance_start_trace`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#performance_start_trace) + - [`performance_stop_trace`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#performance_stop_trace) + - [`take_memory_snapshot`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#take_memory_snapshot) +- **Network** (2 tools) + - [`get_network_request`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#get_network_request) + - [`list_network_requests`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#list_network_requests) +- **Debugging** (6 tools) + - [`evaluate_script`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#evaluate_script) + - [`get_console_message`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#get_console_message) + - [`lighthouse_audit`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#lighthouse_audit) + - [`list_console_messages`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#list_console_messages) + - [`take_screenshot`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#take_screenshot) + - [`take_snapshot`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md#take_snapshot) + +## Configuration + +The Chrome DevTools MCP server supports the following configuration option: + +- **`--autoConnect` / `--auto-connect`** If specified, automatically connects to a browser (Chrome 144+) running locally from the user data directory identified by the channel param (default channel is stable). Requires the remote debugging server to be started in the Chrome instance via chrome://inspect/#remote-debugging. + - **Type:** boolean + - **Default:** `false` +- **`--browserUrl` / `--browser-url`, `-u`** Connect to a running, debuggable Chrome instance (e.g. `http://127.0.0.1:9222`). For more details see: [https://github.com/ChromeDevTools/chrome-devtools-mcp#connecting-to-a-running-chrome-instance](https://github.com/ChromeDevTools/chrome-devtools-mcp#connecting-to-a-running-chrome-instance). + - **Type:** string +- **`--wsEndpoint` / `--ws-endpoint`, `-w`** WebSocket endpoint to connect to a running Chrome instance (e.g., ws://127.0.0.1:9222/devtools/browser/). Alternative to --browserUrl. + - **Type:** string +- **`--wsHeaders` / `--ws-headers`** Custom headers for WebSocket connection in JSON format (e.g., '{"Authorization":"Bearer token"}'). Only works with --wsEndpoint. + - **Type:** string +- **`--headless`** Whether to run in headless (no UI) mode. + - **Type:** boolean + - **Default:** `false` +- **`--executablePath` / `--executable-path`, `-e`** Path to custom Chrome executable. + - **Type:** string +- **`--isolated`** If specified, creates a temporary user-data-dir that is automatically cleaned up after the browser is closed. Defaults to false. + - **Type:** boolean +- **`--userDataDir` / `--user-data-dir`** Path to the user data directory for Chrome. Default is $HOME/.cache/chrome-devtools-mcp/chrome-profile$CHANNEL\_SUFFIX\_IF\_NON\_STABLE + - **Type:** string +- **`--channel`** Specify a different Chrome channel that should be used. The default is the stable channel version. + - **Type:** string + - **Choices:** `canary`, `dev`, `beta`, `stable` +- **`--logFile` / `--log-file`** Path to a file to write debug logs to. Set the env variable `DEBUG` to `*` to enable verbose logs. Useful for submitting bug reports. + - **Type:** string +- **`--viewport`** Initial viewport size for the Chrome instances started by the server. For example, `1280x720`. In headless mode, max size is 3840x2160px. + - **Type:** string +- **`--proxyServer` / `--proxy-server`** Proxy server configuration for Chrome passed as --proxy-server when launching the browser. See [https://www.chromium.org/developers/design-documents/network-settings/](https://www.chromium.org/developers/design-documents/network-settings/) for details. + - **Type:** string +- **`--acceptInsecureCerts` / `--accept-insecure-certs`** If enabled, ignores errors relative to self-signed and expired certificates. Use with caution. + - **Type:** boolean +- **`--experimentalVision` / `--experimental-vision`** Whether to enable coordinate-based tools such as click\_at(x,y). Usually requires a computer-use model able to produce accurate coordinates by looking at screenshots. + - **Type:** boolean +- **`--experimentalScreencast` / `--experimental-screencast`** Exposes experimental screencast tools (requires ffmpeg). Install ffmpeg [https://www.ffmpeg.org/download.html](https://www.ffmpeg.org/download.html) and ensure it is available in the MCP server PATH. + - **Type:** boolean +- **`--experimentalWebmcp` / `--experimental-webmcp`** Set to true to enable debugging WebMCP tools. Requires Chrome 149+ with the following flags: `--enable-features=WebMCPTesting,DevToolsWebMCPSupport` + - **Type:** boolean +- **`--chromeArg` / `--chrome-arg`** Additional arguments for Chrome. Only applies when Chrome is launched by chrome-devtools-mcp. + - **Type:** array +- **`--ignoreDefaultChromeArg` / `--ignore-default-chrome-arg`** Explicitly disable default arguments for Chrome. Only applies when Chrome is launched by chrome-devtools-mcp. + - **Type:** array +- **`--categoryEmulation` / `--category-emulation`** Set to false to exclude tools related to emulation. + - **Type:** boolean + - **Default:** `true` +- **`--categoryPerformance` / `--category-performance`** Set to false to exclude tools related to performance. + - **Type:** boolean + - **Default:** `true` +- **`--categoryNetwork` / `--category-network`** Set to false to exclude tools related to network. + - **Type:** boolean + - **Default:** `true` +- **`--performanceCrux` / `--performance-crux`** Set to false to disable sending URLs from performance traces to CrUX API to get field performance data. + - **Type:** boolean + - **Default:** `true` +- **`--usageStatistics` / `--usage-statistics`** Set to false to opt-out of usage statistics collection. Google collects usage data to improve the tool, handled under the Google Privacy Policy ([https://policies.google.com/privacy](https://policies.google.com/privacy)). This is independent from Chrome browser metrics. Disabled if `CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS` or `CI` env variables are set. + - **Type:** boolean + - **Default:** `true` +- **`--slim`** Exposes a "slim" set of 3 tools covering navigation, script execution and screenshots only. Useful for basic browser tasks. + - **Type:** boolean +- **`--redactNetworkHeaders` / `--redact-network-headers`** If true, redacts some of the network headers considered senstive before returning to the client. + - **Type:** boolean + - **Default:** `false` + +Pass them via the `args` property in the JSON configuration. For example: + +``` +{ + "mcpServers": { + "chrome-devtools": { + "command": "npx", + "args": [ + "chrome-devtools-mcp@latest", + "--channel=canary", + "--headless=true", + "--isolated=true" + ] + } + } +} +``` + +### Connecting via WebSocket with custom headers + +You can connect directly to a Chrome WebSocket endpoint and include custom headers (e.g., for authentication): + +``` +{ + "mcpServers": { + "chrome-devtools": { + "command": "npx", + "args": [ + "chrome-devtools-mcp@latest", + "--wsEndpoint=ws://127.0.0.1:9222/devtools/browser/", + "--wsHeaders={\"Authorization\":\"Bearer YOUR_TOKEN\"}" + ] + } + } +} +``` + +To get the WebSocket endpoint from a running Chrome instance, visit `http://127.0.0.1:9222/json/version` and look for the `webSocketDebuggerUrl` field. + +You can also run `npx chrome-devtools-mcp@latest --help` to see all available configuration options. + +## Concepts + +### User data directory + +`chrome-devtools-mcp` starts a Chrome's stable channel instance using the following user data directory: + +- Linux / macOS: `$HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL` +- Windows: `%HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL` + +The user data directory is not cleared between runs and shared across all instances of `chrome-devtools-mcp`. Set the `isolated` option to `true` to use a temporary user data dir instead which will be cleared automatically after the browser is closed. + +### Connecting to a running Chrome instance + +By default, the Chrome DevTools MCP server will start a new Chrome instance with a dedicated profile. This might not be ideal in all situations: + +- If you would like to maintain the same application state when alternating between manual site testing and agent-driven testing. +- When the MCP needs to sign into a website. Some accounts may prevent sign-in when the browser is controlled via WebDriver (the default launch mechanism for the Chrome DevTools MCP server). +- If you're running your LLM inside a sandboxed environment, but you would like to connect to a Chrome instance that runs outside the sandbox. + +In these cases, start Chrome first and let the Chrome DevTools MCP server connect to it. There are two ways to do so: + +- **Automatic connection (available in Chrome 144)**: best for sharing state between manual and agent-driven testing. +- **Manual connection via remote debugging port**: best when running inside a sandboxed environment. + +#### Automatically connecting to a running Chrome instance + +**Step 1:** Set up remote debugging in Chrome + +In Chrome (>= M144), do the following to set up remote debugging: + +1. Navigate to `chrome://inspect/#remote-debugging` to enable remote debugging. +2. Follow the dialog UI to allow or disallow incoming debugging connections. + +**Step 2:** Configure Chrome DevTools MCP server to automatically connect to a running Chrome Instance + +To connect the `chrome-devtools-mcp` server to the running Chrome instance, use `--autoConnect` command line argument for the MCP server. + +The following code snippet is an example configuration for gemini-cli: + +``` +{ + "mcpServers": { + "chrome-devtools": { + "command": "npx", + "args": ["chrome-devtools-mcp@latest", "--autoConnect"] + } + } +} +``` + +**Step 3:** Test your setup + +Make sure your browser is running. Open gemini-cli and run the following prompt: + +``` +Check the performance of https://developers.chrome.com +``` + +> [!note] Note +> The `autoConnect` option requires the user to start Chrome. If the user has multiple active profiles, the MCP server will connect to the default profile (as determined by Chrome). The MCP server has access to all open windows for the selected profile. + +The Chrome DevTools MCP server will try to connect to your running Chrome instance. It shows a dialog asking for user permission. + +Clicking **Allow** results in the Chrome DevTools MCP server opening [developers.chrome.com](http://developers.chrome.com/) and taking a performance trace. + +#### Manual connection using port forwarding + +You can connect to a running Chrome instance by using the `--browser-url` option. This is useful if you are running the MCP server in a sandboxed environment that does not allow starting a new Chrome instance. + +Here is a step-by-step guide on how to connect to a running Chrome instance: + +**Step 1: Configure the MCP client** + +Add the `--browser-url` option to your MCP client configuration. The value of this option should be the URL of the running Chrome instance. `http://127.0.0.1:9222` is a common default. + +``` +{ + "mcpServers": { + "chrome-devtools": { + "command": "npx", + "args": [ + "chrome-devtools-mcp@latest", + "--browser-url=http://127.0.0.1:9222" + ] + } + } +} +``` + +**Step 2: Start the Chrome browser** + +> [!warning] Warning +> Enabling the remote debugging port opens up a debugging port on the running browser instance. Any application on your machine can connect to this port and control the browser. Make sure that you are not browsing any sensitive websites while the debugging port is open. + +Start the Chrome browser with the remote debugging port enabled. Make sure to close any running Chrome instances before starting a new one with the debugging port enabled. The port number you choose must be the same as the one you specified in the `--browser-url` option in your MCP client configuration. + +For security reasons, [Chrome requires you to use a non-default user data directory](https://developer.chrome.com/blog/remote-debugging-port) when enabling the remote debugging port. You can specify a custom directory using the `--user-data-dir` flag. This ensures that your regular browsing profile and data are not exposed to the debugging session. + +**macOS** + +``` +/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable +``` + +**Linux** + +``` +/usr/bin/google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable +``` + +**Windows** + +``` +"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-profile-stable" +``` + +**Step 3: Test your setup** + +After configuring the MCP client and starting the Chrome browser, you can test your setup by running a simple prompt in your MCP client: + +``` +Check the performance of https://developers.chrome.com +``` + +Your MCP client should connect to the running Chrome instance and receive a performance report. + +If you hit VM-to-host port forwarding issues, see the “Remote debugging between virtual machine (VM) and host fails” section in [`docs/troubleshooting.md`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md#remote-debugging-between-virtual-machine-vm-and-host-fails). + +For more details on remote debugging, see the [Chrome DevTools documentation](https://developer.chrome.com/docs/devtools/remote-debugging/). + +### Debugging Chrome on Android + +Please consult [these instructions](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/debugging-android.md). + +## Known limitations + +See [Troubleshooting](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md). + +--- + +## Infographic ![Chrome DevTools MCP|800](file:///Users/weishen/Workspace/nexus/Hermes/xingzhi/chrome-devtools-mcp-infographic-2026-04-20.png) \ No newline at end of file diff --git a/Hermes/xingzhi/AI技术_2026-09-01.md b/Hermes/xingzhi/AI技术_2026-09-01.md deleted file mode 100644 index 8e3b605e..00000000 --- a/Hermes/xingzhi/AI技术_2026-09-01.md +++ /dev/null @@ -1,48 +0,0 @@ -# Blogwatcher Daily — 分类: AI技术 — 2026-09-01 - -共 **15** 篇文章。 - ---- - -## 【AI (artificial intelligence) | The Guardian】 - -- [‘Superhuman’ AI tool spots heart disease in less than 2 seconds](https://www.theguardian.com/technology/2026/aug/31/superhuman-ai-tool-spots-heart-disease) - > Technology trained on millions of routine ECGs could fast-track high-risk patients for treatmentDoctors have developed a “superhuman” AI tool that can spot heart disease in less than two seconds.The g -- [From Bill Gates to Bernie Sanders, most agree the AI arms race is disastrous. Only Europe can make it stop](https://www.theguardian.com/commentisfree/2026/sep/01/from-bill-gates-to-bernie-sanders-most-agree-the-ai-arms-race-is-disastrous-only-europe-can-make-it-stop) - > An EU export ban on Dutch tech giant ASML’s machines could force the pause we all needAt this point, it should be clear that AI is a choose-your-own-adventure book where every option ends in disaster. -- [‘If you build something vastly smarter than you, it better be on your side’: can we stop AI from deceiving us?](https://www.theguardian.com/news/2026/sep/01/if-you-build-something-vastly-smarter-than-you-it-better-be-on-your-side-can-we-stop-ai-from-deceiving-us) - > We are used to the idea that our fellow humans might intentionally mislead or manipulate us, but the idea that machines can now do the same is deeply unsettling. Researchers are racing to find solutio -- [Trump attacks datacenter backlash, claiming communities pushing back risk becoming ‘backwards and poor’](https://www.theguardian.com/us-news/2026/aug/31/trump-datacenter-comments) - > Three-quarters of Americans said in a recent poll that they oppose datacenters being built next to their homesDonald Trump has criticized communities pushing back against datacenter projects across th -- [How to tackle the climate impact of datacentres | Letters](https://www.theguardian.com/uk-news/2026/aug/31/how-to-tackle-the-climate-impact-of-datacentres) - > Datacentres should generate their own power and control their emissions, writes Richard Lamming, while Michael McClelland says we should reduce our digital communication. Plus a letter from Malcolm Fr -- [‘Scary’: how misinformation and AI hallucinations are infiltrating Australia’s parliament](https://www.theguardian.com/australia-news/2026/sep/01/how-misinformation-ai-hallucinations-infiltrating-australian-parliament) - > Exclusive: Guardian analysis reveals that dozens of policy submissions from across the political spectrum incorrectly summarise real research and invent or wrongly cite sourcesFollow our Australia new -- [Anthropic sued over alleged theft of ‘tens of thousands’ of songs](https://www.theguardian.com/business/2026/aug/31/aanthropic-sued-alleged-theft-songs-ai-train-claude) - > AI company faces multibillion dollar lawsuit over misuse of copyrighted songs to train Claude modelsAll AI wants for Christmas is a vast back catalogue of songs without paying for it, according to a m -- [AI is hurting US politics. Here’s how candidates could use it for good | Bruce Schneier and Nathan E Sanders](https://www.theguardian.com/commentisfree/2026/aug/31/ai-politics-voters) - > The technology can help candidates listen more deeply to voters, as examples from Japan and Scotland showThere are plenty of signs that AI will make all of our experiences of the US midterm elections -- [AI could cause global economic downturn, Bank of England governor tells G20](https://www.theguardian.com/business/2026/aug/31/advanced-frontier-ai-financial-stability-andrew-bailey-g20) - > Andrew Bailey, in role as financial stability watchdog chief, warns advanced models risk destabilising systemThe Bank of England’s governor, Andrew Bailey, has joined the throng of figures warning abo -- [OnlyFans and AI training: why gen Z doesn’t care where our money comes from | Alice Lassman](https://www.theguardian.com/commentisfree/2026/aug/31/gen-z-stability-homeownership-onlyfans-ai) - > With traditional goals such as stability and home ownership feeling out of reach, young people are focused on the presentBy now, we all know the shape of financial nihilism: the throw-your-money-at-an - -## 【AI懶人報 - YouTube】 - -- [EP398 - Zeabur資安大事件，使用者該如何保護自己，防範未然？AI時代的自保指南！](https://www.youtube.com/watch?v=n5wzZVX84KY) - > 🚀 特別感謝贊助本集節目由 VoAI 絕好聲創 提供技術支援。🎤 VoAI 提供最有「台灣味」的 AI 聲音，支援情感語音、台式口音，甚至能一鍵生成虛擬人！🎁 AI懶人報聽眾專屬優惠：👉 輸入優惠碼 AILRB26 立享 95 折！立刻體驗：https://www.voai.ai/━━━━━━━━━━━━━━━━━━━━⏱ 章節00:00 有人打開信箱，看到一筆不是他花的帳單01:04 第一段｜這 -- [EP397 - 依賴 AI 記憶是在埋地雷？Claude Memory 2.0 深度解析，別讓錯誤的自動化毀了你的開發專案！](https://www.youtube.com/watch?v=XWv2_wqzaFc) - > 🚀 特別感謝贊助本集節目由 VoAI 絕好聲創 提供技術支援。🎤 VoAI 提供最有「台灣味」的 AI 聲音，支援情感語音、台式口音，甚至能一鍵生成虛擬人！🎁 AI懶人報聽眾專屬優惠：👉 輸入優惠碼 AILRB26 立享 95 折！立刻體驗：https://www.voai.ai/Claude 的記憶功能升級了！這次我們不只聊它怎麼變聰明，還要提醒大家，在寫程式時過度依賴 AI 記憶，反而可能害你 - -## 【灵姐说AI | Ling Talk AI - YouTube】 - -- [5000万美元爱情大瓜该不该给？我追问4个AI，答案越问越不一样](https://www.youtube.com/watch?v=d_xSz16Mtbw) - > 假如你有88亿美元，毕生挚爱问你要5000万美元，你给不给？我把这道爱情考题交给Claude、ChatGPT、Gemini和豆包。首问，四家都说给；继续加条件，回答开始分岔。从“孙哥和甜姐”的话题出发，这期把争议抽离成假设题，聊的是AI如何理解爱情、金钱与关系边界，不验证或裁定真人私生活。这一期一起看：• 刚交往三个月、不给就分手，AI会怎样回应？• 同样一笔钱，被理解成交易还是家庭保障，会有什么 - -## 【Tech With Tim - YouTube】 - -- [Local AI Explained: How to Run AI Models on Your Computer](https://www.youtube.com/watch?v=edIHPoWgIKU) - > Use the MindsHub Cowork agentic harness for free (open-source): https://mindshub.ai?utm_medium=influencers&utm_source=youtube&utm_campaign=26q3-tech-with-tim&utm_content=integration-2Everyone's talkin -- [Building AI Agents in Pure Python - Beginner Course](https://www.youtube.com/watch?v=c9AnqCeyxbI) - > 🔹Download the free guide from HubSpot on Your 2026 Guide toAI Agents: https://clickhubspot.com/70c662🔹Code in this video (available inside Skool): https://www.skool.com/ai-agent-builders/classroom/faf - diff --git a/Hermes/xingzhi/chrome-devtools-mcp-infographic-prompts-2026-04-20.md b/Hermes/xingzhi/chrome-devtools-mcp-infographic-prompts-2026-04-20.md index 807f3309..cdf23d51 100644 --- a/Hermes/xingzhi/chrome-devtools-mcp-infographic-prompts-2026-04-20.md +++ b/Hermes/xingzhi/chrome-devtools-mcp-infographic-prompts-2026-04-20.md @@ -1,169 +1,169 @@ -# Chrome DevTools MCP - Infographic Prompts - -Generated: 2026-04-20 -Layout: circular-flow -Style: chalkboard -Aspect: 16:9 - ---- - -## Part 1: System Prompt - -``` -Create a professional infographic with the following specifications: - -## Image Specifications -- Type: Infographic -- Layout: circular-flow (cyclic process showing continuous steps arranged in a circle) -- Style: chalkboard (chalk on black board aesthetic) -- Aspect Ratio: 16:9 -- Language: English - -## Core Principles -- Follow the circular-flow layout structure: arrange information nodes in a circle with directional arrows -- Each section represents a tool category as a node on the circle -- Use chalk-drawn style: imperfect hand-drawn lines, chalk dust effects, white/yellow/pink/blue chalk colors -- Black chalkboard background (#1A1A1A) -- Center can hold the main concept "Chrome DevTools MCP" -- Maintain authentic chalk texture on all elements -- Use circular arrangement to show the tool workflow cycle -- Clear visual hierarchy with color variety - -## Text Requirements -- Main titles prominent and readable in chalk white -- Key concepts emphasized with chalk yellow/pink -- Labels clear and appropriately sized -``` - ---- - -## Part 2: Style Locking Prompt - -``` -## Style Guidelines - chalkboard - -### Background -- Color: Chalkboard Black (#1A1A1A) or Dark Green-Black (#1C2B1C) -- Texture: Realistic chalkboard texture with subtle scratches, dust particles - -### Typography -- Hand-drawn chalk lettering with visible chalk texture -- White or bright colored chalk for emphasis - -### Color Palette -- Background: #1A1A1A (Chalkboard Black) -- Primary Text: #F5F5F5 (Chalk White) -- Accent 1: #FFE566 (Chalk Yellow) - highlights, emphasis -- Accent 2: #FF9999 (Chalk Pink) - secondary highlights -- Accent 3: #66B3FF (Chalk Blue) - links, connections -- Accent 4: #90EE90 (Chalk Green) - success indicators - -### Visual Elements -- Hand-drawn chalk illustrations with sketchy, imperfect lines -- Chalk dust effects around text and key elements -- Doodles: stars, arrows, underlines, circles -- Connection lines with hand-drawn feel -- Directional arrows showing cycle flow - -### Do -- Maintain authentic chalk texture on all elements -- Use imperfect, hand-drawn quality -- Add subtle chalk dust and smudge effects -- Create visual hierarchy with color variety -- Include playful doodles and annotations - -### Don't -- Use perfect geometric shapes -- Create clean digital-looking lines -- Add photorealistic elements -- Use gradients or glossy effects -``` - ---- - -## Part 3: Content Structure Prompt - -``` -## Content Structure - circular-flow - -### Center Element -- "Chrome DevTools MCP" - main concept in center of circle - -### Circle Nodes (6 categories, clockwise flow): -1. INPUT AUTOMATION (9 tools) - - click, drag, fill, fill_form, handle_dialog, hover, press_key, type_text, upload_file - - Chalk Pink icon/node - -2. NAVIGATION AUTOMATION (6 tools) - - close_page, list_pages, navigate_page, new_page, select_page, wait_for - - Chalk Blue icon/node - -3. EMULATION (2 tools) - - emulate, resize_page - - Chalk Yellow icon/node - -4. PERFORMANCE (4 tools) - - performance_analyze_insight, performance_start_trace, performance_stop_trace, take_memory_snapshot - - Chalk Green icon/node - -5. NETWORK (2 tools) - - get_network_request, list_network_requests - - Chalk Pink icon/node - -6. DEBUGGING (6 tools) - - evaluate_script, get_console_message, lighthouse_audit, list_console_messages, take_screenshot, take_snapshot - - Chalk Blue icon/node - -### Supported Clients (around the outer edge): -- Claude Code, Cline, Cursor, VS Code, Copilot, Codex, Gemini, JetBrains, Kiro, Windsurf, Amp, Antigravity, Command Code, Factory, Mistral, OpenCode, Qoder, Warp - -### Configuration Options (bottom section): -- --headless, --slim, --autoConnect, --browser-url, --channel, --viewport, --isolated, --user-data-dir - -### Arrows -- Curved directional arrows connecting each node in clockwise direction -- Showing continuous workflow cycle - -### Labels in English -- All text labels in English -- Use chalk white for main text, chalk yellow for emphasis -``` - ---- - -## Visual Layout Diagram - -``` - [INPUT] - ↓ - ↙ ↘ - [DEBUGGING] ← CENTER → [NAVIGATION] - ↗ ↣ - ↙ ↘ - [NETWORK] ←─────────────────────→ [EMULATION] - ↘ ↙ - ↗ ↣ - [PERFORMANCE] → - ↓ - [???] - -Actually circular flow (clockwise): -┌─────────────────────────────────────────┐ -│ │ -│ [EMULATION] → [PERFORMANCE] │ -│ ↗ ↗ │ -│ │ │ │ -│ [DEBUGGING] [NAVIGATION] │ -│ │ │ │ -│ ↖ ↘ │ -│ [NETWORK] ← [INPUT] │ -│ │ -│ Center: "Chrome DevTools MCP" │ -└─────────────────────────────────────────┘ -``` - ---- - -## Final Prompt Summary - +# Chrome DevTools MCP - Infographic Prompts + +Generated: 2026-04-20 +Layout: circular-flow +Style: chalkboard +Aspect: 16:9 + +--- + +## Part 1: System Prompt + +``` +Create a professional infographic with the following specifications: + +## Image Specifications +- Type: Infographic +- Layout: circular-flow (cyclic process showing continuous steps arranged in a circle) +- Style: chalkboard (chalk on black board aesthetic) +- Aspect Ratio: 16:9 +- Language: English + +## Core Principles +- Follow the circular-flow layout structure: arrange information nodes in a circle with directional arrows +- Each section represents a tool category as a node on the circle +- Use chalk-drawn style: imperfect hand-drawn lines, chalk dust effects, white/yellow/pink/blue chalk colors +- Black chalkboard background (#1A1A1A) +- Center can hold the main concept "Chrome DevTools MCP" +- Maintain authentic chalk texture on all elements +- Use circular arrangement to show the tool workflow cycle +- Clear visual hierarchy with color variety + +## Text Requirements +- Main titles prominent and readable in chalk white +- Key concepts emphasized with chalk yellow/pink +- Labels clear and appropriately sized +``` + +--- + +## Part 2: Style Locking Prompt + +``` +## Style Guidelines - chalkboard + +### Background +- Color: Chalkboard Black (#1A1A1A) or Dark Green-Black (#1C2B1C) +- Texture: Realistic chalkboard texture with subtle scratches, dust particles + +### Typography +- Hand-drawn chalk lettering with visible chalk texture +- White or bright colored chalk for emphasis + +### Color Palette +- Background: #1A1A1A (Chalkboard Black) +- Primary Text: #F5F5F5 (Chalk White) +- Accent 1: #FFE566 (Chalk Yellow) - highlights, emphasis +- Accent 2: #FF9999 (Chalk Pink) - secondary highlights +- Accent 3: #66B3FF (Chalk Blue) - links, connections +- Accent 4: #90EE90 (Chalk Green) - success indicators + +### Visual Elements +- Hand-drawn chalk illustrations with sketchy, imperfect lines +- Chalk dust effects around text and key elements +- Doodles: stars, arrows, underlines, circles +- Connection lines with hand-drawn feel +- Directional arrows showing cycle flow + +### Do +- Maintain authentic chalk texture on all elements +- Use imperfect, hand-drawn quality +- Add subtle chalk dust and smudge effects +- Create visual hierarchy with color variety +- Include playful doodles and annotations + +### Don't +- Use perfect geometric shapes +- Create clean digital-looking lines +- Add photorealistic elements +- Use gradients or glossy effects +``` + +--- + +## Part 3: Content Structure Prompt + +``` +## Content Structure - circular-flow + +### Center Element +- "Chrome DevTools MCP" - main concept in center of circle + +### Circle Nodes (6 categories, clockwise flow): +1. INPUT AUTOMATION (9 tools) + - click, drag, fill, fill_form, handle_dialog, hover, press_key, type_text, upload_file + - Chalk Pink icon/node + +2. NAVIGATION AUTOMATION (6 tools) + - close_page, list_pages, navigate_page, new_page, select_page, wait_for + - Chalk Blue icon/node + +3. EMULATION (2 tools) + - emulate, resize_page + - Chalk Yellow icon/node + +4. PERFORMANCE (4 tools) + - performance_analyze_insight, performance_start_trace, performance_stop_trace, take_memory_snapshot + - Chalk Green icon/node + +5. NETWORK (2 tools) + - get_network_request, list_network_requests + - Chalk Pink icon/node + +6. DEBUGGING (6 tools) + - evaluate_script, get_console_message, lighthouse_audit, list_console_messages, take_screenshot, take_snapshot + - Chalk Blue icon/node + +### Supported Clients (around the outer edge): +- Claude Code, Cline, Cursor, VS Code, Copilot, Codex, Gemini, JetBrains, Kiro, Windsurf, Amp, Antigravity, Command Code, Factory, Mistral, OpenCode, Qoder, Warp + +### Configuration Options (bottom section): +- --headless, --slim, --autoConnect, --browser-url, --channel, --viewport, --isolated, --user-data-dir + +### Arrows +- Curved directional arrows connecting each node in clockwise direction +- Showing continuous workflow cycle + +### Labels in English +- All text labels in English +- Use chalk white for main text, chalk yellow for emphasis +``` + +--- + +## Visual Layout Diagram + +``` + [INPUT] + ↓ + ↙ ↘ + [DEBUGGING] ← CENTER → [NAVIGATION] + ↗ ↣ + ↙ ↘ + [NETWORK] ←─────────────────────→ [EMULATION] + ↘ ↙ + ↗ ↣ + [PERFORMANCE] → + ↓ + [???] + +Actually circular flow (clockwise): +┌─────────────────────────────────────────┐ +│ │ +│ [EMULATION] → [PERFORMANCE] │ +│ ↗ ↗ │ +│ │ │ │ +│ [DEBUGGING] [NAVIGATION] │ +│ │ │ │ +│ ↖ ↘ │ +│ [NETWORK] ← [INPUT] │ +│ │ +│ Center: "Chrome DevTools MCP" │ +└─────────────────────────────────────────┘ +``` + +--- + +## Final Prompt Summary + Generate a chalkboard-style infographic showing Chrome DevTools MCP tool categories arranged in a circular flow pattern. The circle has 6 nodes representing the tool categories (Input Automation, Navigation, Emulation, Performance, Network, Debugging). Each node displays the tool count and key tool names in chalk-style lettering. The center shows "Chrome DevTools MCP" as the main concept. Arrows show clockwise flow indicating the continuous nature of browser automation workflow. Use authentic chalkboard aesthetic with black background (#1A1A1A), chalk white text, and colorful chalk accents (yellow, pink, blue, green) for visual hierarchy. Include chalk dust effects and hand-drawn imperfect lines throughout. \ No newline at end of file diff --git a/Hermes/xingzhi/infographic/llm-wiki-sync-circular-flow/prompts/infographic.md b/Hermes/xingzhi/infographic/llm-wiki-sync-circular-flow/prompts/infographic.md index c651a264..8fb2944b 100644 --- a/Hermes/xingzhi/infographic/llm-wiki-sync-circular-flow/prompts/infographic.md +++ b/Hermes/xingzhi/infographic/llm-wiki-sync-circular-flow/prompts/infographic.md @@ -1,158 +1,158 @@ -Create a professional infographic following these specifications: - -## Image Specifications - -- **Type**: Infographic -- **Layout**: circular-flow (Cyclic process showing continuous or recurring steps) -- **Style**: chalkboard (Black chalkboard background with colorful chalk drawing style) -- **Aspect Ratio**: 16:9 -- **Language**: English - -## Core Principles - -- Follow the layout structure precisely for information architecture -- Apply style aesthetics consistently throughout -- If content involves sensitive or copyrighted figures, create stylistically similar alternatives -- Keep information concise, highlight keywords and core concepts -- Use ample whitespace for visual clarity -- Maintain clear visual hierarchy - -## Text Requirements - -- All text must match the specified style treatment -- Main titles should be prominent and readable -- Key concepts should be visually emphasized -- Labels should be clear and appropriately sized -- Use the specified language for all text content - -## Layout Guidelines - -- Circular arrangement -- Steps around the circle -- Arrows showing direction -- No clear start/end (continuous) -- Center can hold main concept -- Circle or ring shape -- Directional arrows -- Step nodes evenly spaced -- Icons per step -- Optional center element - -## Style Guidelines - -- **Background**: Chalkboard Black (#1A1A1A) or Dark Green-Black (#1C2B1C) -- **Texture**: Realistic chalkboard texture with subtle scratches, dust particles, and faint eraser marks -- **Typography**: Hand-drawn chalk lettering style with visible chalk texture. Imperfect baseline adds authenticity. -- **Color Palette**: - - Background: Chalkboard Black (#1A1A1A) - - Primary Text: Chalk White (#F5F5F5) - - Accent 1: Chalk Yellow (#FFE566) - - Accent 2: Chalk Pink (#FF9999) - - Accent 3: Chalk Blue (#66B3FF) - - Accent 4: Chalk Green (#90EE90) - - Accent 5: Chalk Orange (#FFB366) -- **Visual Elements**: - - Hand-drawn chalk illustrations with sketchy, imperfect lines - - Chalk dust effects around text and key elements - - Doodles: stars, arrows, underlines, circles, checkmarks - - Eraser smudges and chalk residue textures - - Wooden frame border optional - - Stick figures and simple icons - - Connection lines with hand-drawn feel -- **Style Rules**: - - Maintain authentic chalk texture on all elements - - Use imperfect, hand-drawn quality throughout - - Add subtle chalk dust and smudge effects - - Create visual hierarchy with color variety - - Include playful doodles and annotations - - DO NOT use perfect geometric shapes - - DO NOT create clean digital-looking lines - ---- - -Generate the infographic based on the content below: - -# llm-wiki-sync: Turning Scattered Notes into a Reusable Knowledge Base - -## Overview -A cyclical pipeline showing how raw notes are continuously transformed through LLM-powered ingestion into structured wiki pages, then feedback into the knowledge base for reuse. - -## The Knowledge Pipeline Cycle (Center Concept) -The llm-wiki-sync pipeline operates as a continuous cycle, not a linear process. -7 stages in the cycle: Raw Note → Ingest → Extract → Source Page → Graph/Site → Reuse → Feedback Loop - -## Circular Flow Diagram with 7 Stages: - -1. **Raw Note** (Stage 1) - - Original documents stored in raw/ folder - - Contains unprocessed information awaiting structure - - Icon: Stack of paper/note icon - -2. **Ingest** (Stage 2) - - LLM analyzes and extracts structured information - - Hermes skill triggers Claude Code for ingestion - - Context check against wiki/index.md prevents duplicates - - Icon: Brain/processing icon - -3. **Extract** (Stage 3) - - Six key elements extracted from each document: - - Summary (核心主题, 问题域, 方法/机制, 结论/价值) - - Key Claims (Verifiable assertions) - - Key Quotes (Preserved citations) - - Key Entities (LaunchDarkly, HP, etc.) - - Key Concepts (RTO, RPO, Feature Flag, etc.) - - Connections (depends_on, enables, provides) - - Icon: Six circles/callouts - -4. **Source Page** (Stage 4) - - Written to wiki/sources/.md - - Contains frontmatter and standard sections - - Links use [[PageName]] format - - Icon: Document/page icon - -5. **Graph & Site** (Stage 5) - - graph.json: Machine-readable graph structure - - graph.html: Interactive visualization - - Quartz: Static site generation - - Icon: Network/graph icon - -6. **Reuse** (Stage 6) - - Query, Synthesize, Write, Connect - - Icon: Multiple arrows pointing outward - -7. **Feedback Loop** (Stage 7) - - New insights become new raw notes - - Cycle continues indefinitely - - Icon: Circular arrow completing the cycle - -## Key Quotes (to include as callouts): -- "RTO is about speed: how fast you get back online. RPO is about data: how much you can afford to lose." -- "Deploy != Release. Feature flags change this. You can deploy code to production without releasing it to users." - -## Design Requirements: -- Circular flow with 7 stages evenly spaced around a circle -- Clockwise arrow direction -- Center contains: "llm-wiki-sync" as main concept -- Each stage is a node with icon + label -- Extraction outputs (6 items) shown as callouts or inner ring -- Dark chalkboard background with hand-drawn chalk accents -- Chalk colors for visual hierarchy -- Imperfect, sketchy lines throughout -- Publication-ready quality -- NO clutter - only essential elements -- Clear hierarchy: title > headlines > labels > descriptions - -## Text Labels (in English): -- Headline: "The Knowledge Pipeline Cycle" -- Subhead: "How llm-wiki-sync transforms scattered notes into a reusable knowledge base" -- Stage labels: "Raw Note", "Ingest", "Extract", "Source Page", "Graph & Site", "Reuse", "Feedback" -- Center: "llm-wiki-sync" -- Extraction labels: "Summary", "Claims", "Quotes", "Entities", "Concepts", "Connections" - -## Key Constraints: -- 16:9 aspect ratio (landscape) -- All text in English -- Chalkboard style (dark background, chalk-like hand-drawn elements) -- Circular flow layout (NOT linear) -- Publication-ready, visually clear +Create a professional infographic following these specifications: + +## Image Specifications + +- **Type**: Infographic +- **Layout**: circular-flow (Cyclic process showing continuous or recurring steps) +- **Style**: chalkboard (Black chalkboard background with colorful chalk drawing style) +- **Aspect Ratio**: 16:9 +- **Language**: English + +## Core Principles + +- Follow the layout structure precisely for information architecture +- Apply style aesthetics consistently throughout +- If content involves sensitive or copyrighted figures, create stylistically similar alternatives +- Keep information concise, highlight keywords and core concepts +- Use ample whitespace for visual clarity +- Maintain clear visual hierarchy + +## Text Requirements + +- All text must match the specified style treatment +- Main titles should be prominent and readable +- Key concepts should be visually emphasized +- Labels should be clear and appropriately sized +- Use the specified language for all text content + +## Layout Guidelines + +- Circular arrangement +- Steps around the circle +- Arrows showing direction +- No clear start/end (continuous) +- Center can hold main concept +- Circle or ring shape +- Directional arrows +- Step nodes evenly spaced +- Icons per step +- Optional center element + +## Style Guidelines + +- **Background**: Chalkboard Black (#1A1A1A) or Dark Green-Black (#1C2B1C) +- **Texture**: Realistic chalkboard texture with subtle scratches, dust particles, and faint eraser marks +- **Typography**: Hand-drawn chalk lettering style with visible chalk texture. Imperfect baseline adds authenticity. +- **Color Palette**: + - Background: Chalkboard Black (#1A1A1A) + - Primary Text: Chalk White (#F5F5F5) + - Accent 1: Chalk Yellow (#FFE566) + - Accent 2: Chalk Pink (#FF9999) + - Accent 3: Chalk Blue (#66B3FF) + - Accent 4: Chalk Green (#90EE90) + - Accent 5: Chalk Orange (#FFB366) +- **Visual Elements**: + - Hand-drawn chalk illustrations with sketchy, imperfect lines + - Chalk dust effects around text and key elements + - Doodles: stars, arrows, underlines, circles, checkmarks + - Eraser smudges and chalk residue textures + - Wooden frame border optional + - Stick figures and simple icons + - Connection lines with hand-drawn feel +- **Style Rules**: + - Maintain authentic chalk texture on all elements + - Use imperfect, hand-drawn quality throughout + - Add subtle chalk dust and smudge effects + - Create visual hierarchy with color variety + - Include playful doodles and annotations + - DO NOT use perfect geometric shapes + - DO NOT create clean digital-looking lines + +--- + +Generate the infographic based on the content below: + +# llm-wiki-sync: Turning Scattered Notes into a Reusable Knowledge Base + +## Overview +A cyclical pipeline showing how raw notes are continuously transformed through LLM-powered ingestion into structured wiki pages, then feedback into the knowledge base for reuse. + +## The Knowledge Pipeline Cycle (Center Concept) +The llm-wiki-sync pipeline operates as a continuous cycle, not a linear process. +7 stages in the cycle: Raw Note → Ingest → Extract → Source Page → Graph/Site → Reuse → Feedback Loop + +## Circular Flow Diagram with 7 Stages: + +1. **Raw Note** (Stage 1) + - Original documents stored in raw/ folder + - Contains unprocessed information awaiting structure + - Icon: Stack of paper/note icon + +2. **Ingest** (Stage 2) + - LLM analyzes and extracts structured information + - Hermes skill triggers Claude Code for ingestion + - Context check against wiki/index.md prevents duplicates + - Icon: Brain/processing icon + +3. **Extract** (Stage 3) + - Six key elements extracted from each document: + - Summary (核心主题, 问题域, 方法/机制, 结论/价值) + - Key Claims (Verifiable assertions) + - Key Quotes (Preserved citations) + - Key Entities (LaunchDarkly, HP, etc.) + - Key Concepts (RTO, RPO, Feature Flag, etc.) + - Connections (depends_on, enables, provides) + - Icon: Six circles/callouts + +4. **Source Page** (Stage 4) + - Written to wiki/sources/.md + - Contains frontmatter and standard sections + - Links use [[PageName]] format + - Icon: Document/page icon + +5. **Graph & Site** (Stage 5) + - graph.json: Machine-readable graph structure + - graph.html: Interactive visualization + - Quartz: Static site generation + - Icon: Network/graph icon + +6. **Reuse** (Stage 6) + - Query, Synthesize, Write, Connect + - Icon: Multiple arrows pointing outward + +7. **Feedback Loop** (Stage 7) + - New insights become new raw notes + - Cycle continues indefinitely + - Icon: Circular arrow completing the cycle + +## Key Quotes (to include as callouts): +- "RTO is about speed: how fast you get back online. RPO is about data: how much you can afford to lose." +- "Deploy != Release. Feature flags change this. You can deploy code to production without releasing it to users." + +## Design Requirements: +- Circular flow with 7 stages evenly spaced around a circle +- Clockwise arrow direction +- Center contains: "llm-wiki-sync" as main concept +- Each stage is a node with icon + label +- Extraction outputs (6 items) shown as callouts or inner ring +- Dark chalkboard background with hand-drawn chalk accents +- Chalk colors for visual hierarchy +- Imperfect, sketchy lines throughout +- Publication-ready quality +- NO clutter - only essential elements +- Clear hierarchy: title > headlines > labels > descriptions + +## Text Labels (in English): +- Headline: "The Knowledge Pipeline Cycle" +- Subhead: "How llm-wiki-sync transforms scattered notes into a reusable knowledge base" +- Stage labels: "Raw Note", "Ingest", "Extract", "Source Page", "Graph & Site", "Reuse", "Feedback" +- Center: "llm-wiki-sync" +- Extraction labels: "Summary", "Claims", "Quotes", "Entities", "Concepts", "Connections" + +## Key Constraints: +- 16:9 aspect ratio (landscape) +- All text in English +- Chalkboard style (dark background, chalk-like hand-drawn elements) +- Circular flow layout (NOT linear) +- Publication-ready, visually clear - No clutter or excessive elements \ No newline at end of file diff --git a/Hermes/xingzhi/wiki-sync-circular-infographic-prompts-2026-04-20.md b/Hermes/xingzhi/wiki-sync-circular-infographic-prompts-2026-04-20.md index 9db33608..f8e69d80 100644 --- a/Hermes/xingzhi/wiki-sync-circular-infographic-prompts-2026-04-20.md +++ b/Hermes/xingzhi/wiki-sync-circular-infographic-prompts-2026-04-20.md @@ -1,256 +1,256 @@ -# Wiki Sync 循环流程信息图 - 提示词 - -> 日期：2026-04-20 -> 布局：circular-flow -> 风格：chalkboard - ---- - -## 一、系统提示词 - -``` -Create a professional infographic following these specifications: - -## Image Specifications - -- **Type**: Infographic -- **Layout**: circular-flow -- **Style**: chalkboard -- **Aspect Ratio**: 16:9 (landscape) -- **Language**: 中文 (Simplified Chinese) - -## Core Principles - -- Follow the layout structure precisely for information architecture -- Apply style aesthetics consistently throughout -- If content involves sensitive or copyrighted figures, create stylistically similar alternatives -- Keep information concise, highlight keywords and core concepts -- Use ample whitespace for visual clarity -- Maintain clear visual hierarchy - -## Text Requirements - -- All text must match the specified style treatment -- Main titles should be prominent and readable -- Key concepts should be visually emphasized -- Labels should be clear and appropriately sized -- Use Chinese for all text content - -## Layout Guidelines - -### Circular Flow Layout -- 循环流程：展示持续运行的过程 -- 环形排列：所有节点围绕中心点均布 -- 方向箭头：显示顺时针或逆时针流动方向 -- 无明确起点/终点（持续循环） -- 中心可放置核心概念或系统名称 - -### Wiki Sync 循环结构 -1. 9个步骤节点均匀分布在圆环上 -2. 循环箭头连接各步骤 -3. 中心显示 "Wiki Sync" 系统名称 -4. 标题位于圆环上方 - -## Style Guidelines - -### Chalkboard Style -- 背景：黑板黑 (#1A1A1A) 或深绿黑板色 (#1C2B1C) -- 纹理：真实黑板质感，伴有划痕、粉尘、橡皮擦痕迹 -- 线条：手绘粉笔质感，不完美的sketchy线条 -- 颜色：仅使用粉笔色板 -- 字体：手绘粉笔字体 -- 装饰：手绘星星、下划线、箭头、圆圈、问号 -``` - ---- - -## 二、风格锁定提示词 - -``` -## Style Lock — 必须遵守 - -本信息图使用 chalkboard（粉笔黑板）风格。 - -### 背景 -- 颜色：#1C2B1C（深绿黑板）或 #1A1A1A（黑板黑） -- 纹理：真实黑板纹理，细微划痕、粉尘粒子、橡皮擦痕迹 -- 木质框边（可选）：手绘木纹线条 - -### 粉笔线条质量 -- 所有线条必须是手绘的、不完美的sketchy风格 -- 轻微抖动和歪斜 -- 不要干净的矢量线条 - -### 颜色色板（严格使用） -| 角色 | 颜色 | Hex | -|-----|------|-----| -| 主文字/轮廓 | 粉笔白 | #F5F5F5 | -| 高亮/下划线 | 粉笔黄 | #FFE566 | -| 次要高亮 | 粉笔粉 | #FF9999 | -| 技术元素/图表 | 粉笔蓝 | #66B3FF | -| 成功/自然 | 粉笔绿 | #90EE90 | -| 警告/能量 | 粉笔橙 | #FFB366 | -| 木框 | 棕色 | #8B6914 | - -### 装饰元素 -- 5-7角手绘星星（不规则） -- 手绘波浪下划线 -- 手绘箭头（歪斜的笔触 + 箭头） -- 角落的粉笔问号、圆圈 -- 底部散落的粉笔粉末 - -### 禁止出现 -- 渐变 -- 完美几何形状 -- 写实元素 -- 扁平数字图标 - -### 布局规则（circular-flow） -- 9个节点均布于圆环上 -- 顺时针方向箭头连接各节点 -- 中心放置核心概念 -- 标题在圆环顶部 - -## Layout Guidelines - Circular Flow - -### 环形结构 -- 步骤节点：9个步骤均匀分布在圆周上 -- 方向：顺时针流动的箭头 -- 中心：系统名称 "Wiki Sync" -- 标题：信息图主标题在顶部 - -### 节点内容 -每个节点包含： -- 步骤编号（圆形框） -- 步骤名称（粉笔白大字） -- 简要描述（1-2行，较小字体） -- 对应图标或符号 - -### 节点顺序（Wiki Sync 流程） -1. Cron 触发 -2. 加载 skill -3. 启动 TMUX -4. 启动 Claude Code -5. 发送任务指令 -6. 执行 9 步 ingest -7. 解析 SLUG -8. 更新 manifest -9. Telegram 通知 -``` - ---- - -## 三、具体内容提示词 - -``` -INFOGRAPHIC: Wiki Sync 系统循环流程 - -## 主标题 -- 位置：圆环顶部居中 -- 内容："Wiki Sync 自动同步系统" -- 字体：大型粉笔白（#F5F5F5）手写体 -- 装饰：粉笔黄（#FFE566）双下划线（波浪形手绘） -- 两侧：粉笔粉（#FF9999）小星星装饰 - -## 圆环中心 -- 圆形区域放置系统图标或 "WS" 字样 -- 颜色：粉笔蓝（#66B3FF）轮廓 -- 背景：深绿黑板色 #1C2B1C - -## 循环节点（顺时针排列） - -### 节点 1：Cron 触发 -- 编号圆圈：粉笔黄 -- 步骤名：① Cron 触发 -- 描述：定时器启动，每15分钟 -- 图标：时钟或定时器手绘 - -### 节点 2：加载 Skill -- 编号圆圈：粉笔黄 -- 步骤名：② 加载 Skill -- 描述：加载 llm-wiki-sync -- 图标：齿轮或技能图标 - -### 节点 3：检查待摄 -- 编号圆圈：粉笔粉 -- 步骤名：③ 待摄检查 -- 描述：sync.py --check -- 图标：文档或清单 - -### 节点 4：启动 TMUX -- 编号圆圈：粉笔粉 -- 步骤名：④ 启动 TMUX -- 描述：创建会话 -- 图标：终端图标 - -### 节点 5：Claude Code -- 编号圆圈：粉笔蓝 -- 步骤名：⑤ Claude Code -- 描述：bypassPermissions -- 图标：AI/机器人 - -### 节点 6：执行 Ingest -- 编号圆圈：粉笔蓝 -- 步骤名：执行 Ingest -- 描述：9步标准流程 -- 图标：输入箭头 - -### 节点 7：解析 SLUG -- 编号圆圈：粉笔绿 -- 步骤名：⑦ 解析 SLUG -- 描述：从输出提取标识符 -- 图标：标签/条形码 - -### 节点 8：更新 Manifest -- 编号圆圈：粉笔绿 -- 步骤名：更新 Manifest -- 描述：写入 JSON 状态 -- 图标：数据保存 - -### 节点 9：Telegram 通知 -- 编号圆圈：粉笔橙 -- 步骤名： Telegram 通知 -- 描述：发送同步结果 -- 图标：消息气泡 - -## 循环箭头 -- 颜色：粉笔蓝（#66B3FF） -- 风格：手绘歪斜箭头 -- 方向：顺时针 -- 每两个节点之间 - -## 底部装饰 -- 左侧：粉笔粉 "Claude Code Agent" -- 右侧：粉笔黄 "持续运行 ∞" -- 底部边缘：散落粉笔粉末痕迹 -- 角落：粉笔问号、圆圈装饰 - -## 整体效果 -- 深绿黑板背景 (#1C2B1C) -- 所有文字使用粉笔质感手写体 -- 节点框使用手绘不规则圆形/圆角矩形 -- 箭头使用手绘歪斜线条 -- 保持信息密度，流程清晰 -``` - ---- - -## 四、使用说明 - -``` -使用方法： - -1. 使用支持 circular-flow 布局 + chalkboard 风格的 AI 图像生成工具 -2. 建议比例：16:9 (landscape) -3. 语言：中文（简体） -4. 参考本文件的三部分提示词组合使用 - -提示词组合优先级： -1. 第一部分（系统提示词）- 基础规范 -2. 第二部分（风格锁定）- 必须遵守的约束 -3. 具体内容提示词 - 实际图像内容 -``` - ---- - +# Wiki Sync 循环流程信息图 - 提示词 + +> 日期：2026-04-20 +> 布局：circular-flow +> 风格：chalkboard + +--- + +## 一、系统提示词 + +``` +Create a professional infographic following these specifications: + +## Image Specifications + +- **Type**: Infographic +- **Layout**: circular-flow +- **Style**: chalkboard +- **Aspect Ratio**: 16:9 (landscape) +- **Language**: 中文 (Simplified Chinese) + +## Core Principles + +- Follow the layout structure precisely for information architecture +- Apply style aesthetics consistently throughout +- If content involves sensitive or copyrighted figures, create stylistically similar alternatives +- Keep information concise, highlight keywords and core concepts +- Use ample whitespace for visual clarity +- Maintain clear visual hierarchy + +## Text Requirements + +- All text must match the specified style treatment +- Main titles should be prominent and readable +- Key concepts should be visually emphasized +- Labels should be clear and appropriately sized +- Use Chinese for all text content + +## Layout Guidelines + +### Circular Flow Layout +- 循环流程：展示持续运行的过程 +- 环形排列：所有节点围绕中心点均布 +- 方向箭头：显示顺时针或逆时针流动方向 +- 无明确起点/终点（持续循环） +- 中心可放置核心概念或系统名称 + +### Wiki Sync 循环结构 +1. 9个步骤节点均匀分布在圆环上 +2. 循环箭头连接各步骤 +3. 中心显示 "Wiki Sync" 系统名称 +4. 标题位于圆环上方 + +## Style Guidelines + +### Chalkboard Style +- 背景：黑板黑 (#1A1A1A) 或深绿黑板色 (#1C2B1C) +- 纹理：真实黑板质感，伴有划痕、粉尘、橡皮擦痕迹 +- 线条：手绘粉笔质感，不完美的sketchy线条 +- 颜色：仅使用粉笔色板 +- 字体：手绘粉笔字体 +- 装饰：手绘星星、下划线、箭头、圆圈、问号 +``` + +--- + +## 二、风格锁定提示词 + +``` +## Style Lock — 必须遵守 + +本信息图使用 chalkboard（粉笔黑板）风格。 + +### 背景 +- 颜色：#1C2B1C（深绿黑板）或 #1A1A1A（黑板黑） +- 纹理：真实黑板纹理，细微划痕、粉尘粒子、橡皮擦痕迹 +- 木质框边（可选）：手绘木纹线条 + +### 粉笔线条质量 +- 所有线条必须是手绘的、不完美的sketchy风格 +- 轻微抖动和歪斜 +- 不要干净的矢量线条 + +### 颜色色板（严格使用） +| 角色 | 颜色 | Hex | +|-----|------|-----| +| 主文字/轮廓 | 粉笔白 | #F5F5F5 | +| 高亮/下划线 | 粉笔黄 | #FFE566 | +| 次要高亮 | 粉笔粉 | #FF9999 | +| 技术元素/图表 | 粉笔蓝 | #66B3FF | +| 成功/自然 | 粉笔绿 | #90EE90 | +| 警告/能量 | 粉笔橙 | #FFB366 | +| 木框 | 棕色 | #8B6914 | + +### 装饰元素 +- 5-7角手绘星星（不规则） +- 手绘波浪下划线 +- 手绘箭头（歪斜的笔触 + 箭头） +- 角落的粉笔问号、圆圈 +- 底部散落的粉笔粉末 + +### 禁止出现 +- 渐变 +- 完美几何形状 +- 写实元素 +- 扁平数字图标 + +### 布局规则（circular-flow） +- 9个节点均布于圆环上 +- 顺时针方向箭头连接各节点 +- 中心放置核心概念 +- 标题在圆环顶部 + +## Layout Guidelines - Circular Flow + +### 环形结构 +- 步骤节点：9个步骤均匀分布在圆周上 +- 方向：顺时针流动的箭头 +- 中心：系统名称 "Wiki Sync" +- 标题：信息图主标题在顶部 + +### 节点内容 +每个节点包含： +- 步骤编号（圆形框） +- 步骤名称（粉笔白大字） +- 简要描述（1-2行，较小字体） +- 对应图标或符号 + +### 节点顺序（Wiki Sync 流程） +1. Cron 触发 +2. 加载 skill +3. 启动 TMUX +4. 启动 Claude Code +5. 发送任务指令 +6. 执行 9 步 ingest +7. 解析 SLUG +8. 更新 manifest +9. Telegram 通知 +``` + +--- + +## 三、具体内容提示词 + +``` +INFOGRAPHIC: Wiki Sync 系统循环流程 + +## 主标题 +- 位置：圆环顶部居中 +- 内容："Wiki Sync 自动同步系统" +- 字体：大型粉笔白（#F5F5F5）手写体 +- 装饰：粉笔黄（#FFE566）双下划线（波浪形手绘） +- 两侧：粉笔粉（#FF9999）小星星装饰 + +## 圆环中心 +- 圆形区域放置系统图标或 "WS" 字样 +- 颜色：粉笔蓝（#66B3FF）轮廓 +- 背景：深绿黑板色 #1C2B1C + +## 循环节点（顺时针排列） + +### 节点 1：Cron 触发 +- 编号圆圈：粉笔黄 +- 步骤名：① Cron 触发 +- 描述：定时器启动，每15分钟 +- 图标：时钟或定时器手绘 + +### 节点 2：加载 Skill +- 编号圆圈：粉笔黄 +- 步骤名：② 加载 Skill +- 描述：加载 llm-wiki-sync +- 图标：齿轮或技能图标 + +### 节点 3：检查待摄 +- 编号圆圈：粉笔粉 +- 步骤名：③ 待摄检查 +- 描述：sync.py --check +- 图标：文档或清单 + +### 节点 4：启动 TMUX +- 编号圆圈：粉笔粉 +- 步骤名：④ 启动 TMUX +- 描述：创建会话 +- 图标：终端图标 + +### 节点 5：Claude Code +- 编号圆圈：粉笔蓝 +- 步骤名：⑤ Claude Code +- 描述：bypassPermissions +- 图标：AI/机器人 + +### 节点 6：执行 Ingest +- 编号圆圈：粉笔蓝 +- 步骤名：执行 Ingest +- 描述：9步标准流程 +- 图标：输入箭头 + +### 节点 7：解析 SLUG +- 编号圆圈：粉笔绿 +- 步骤名：⑦ 解析 SLUG +- 描述：从输出提取标识符 +- 图标：标签/条形码 + +### 节点 8：更新 Manifest +- 编号圆圈：粉笔绿 +- 步骤名：更新 Manifest +- 描述：写入 JSON 状态 +- 图标：数据保存 + +### 节点 9：Telegram 通知 +- 编号圆圈：粉笔橙 +- 步骤名： Telegram 通知 +- 描述：发送同步结果 +- 图标：消息气泡 + +## 循环箭头 +- 颜色：粉笔蓝（#66B3FF） +- 风格：手绘歪斜箭头 +- 方向：顺时针 +- 每两个节点之间 + +## 底部装饰 +- 左侧：粉笔粉 "Claude Code Agent" +- 右侧：粉笔黄 "持续运行 ∞" +- 底部边缘：散落粉笔粉末痕迹 +- 角落：粉笔问号、圆圈装饰 + +## 整体效果 +- 深绿黑板背景 (#1C2B1C) +- 所有文字使用粉笔质感手写体 +- 节点框使用手绘不规则圆形/圆角矩形 +- 箭头使用手绘歪斜线条 +- 保持信息密度，流程清晰 +``` + +--- + +## 四、使用说明 + +``` +使用方法： + +1. 使用支持 circular-flow 布局 + chalkboard 风格的 AI 图像生成工具 +2. 建议比例：16:9 (landscape) +3. 语言：中文（简体） +4. 参考本文件的三部分提示词组合使用 + +提示词组合优先级： +1. 第一部分（系统提示词）- 基础规范 +2. 第二部分（风格锁定）- 必须遵守的约束 +3. 具体内容提示词 - 实际图像内容 +``` + +--- + *Generated: 2026-04-20* \ No newline at end of file diff --git a/Hermes/xingzhi/信息图提示词模板.md b/Hermes/xingzhi/信息图提示词模板.md index 8369f90c..f440c930 100644 --- a/Hermes/xingzhi/信息图提示词模板.md +++ b/Hermes/xingzhi/信息图提示词模板.md @@ -1,263 +1,263 @@ -## SYSTEM PROMPT (Set this once at the start of the Gemini session) - -``` -You are an infographic generation assistant. Your job is to create 6 chalkboard-style -infographic cards that form a complete visual guide. - -== GLOBAL STYLE RULES (apply to EVERY card, no exceptions) == - -Background: -- Dark green-black chalkboard: #1C2B1C -- Realistic chalkboard texture with subtle scratches, dust particles, faint eraser smudge marks -- Wooden frame border on all cards (hand-drawn wood grain lines in chalk brown/tan) -- NO gradients, NO perfect geometric shapes, NO photorealistic elements - -Chalk Lines & Quality: -- ALL lines must be hand-drawn, imperfect, sketchy — slight wobble and variation -- Lines should look like real white/colored chalk on a blackboard -- NO clean digital vectors, NO sharp vector paths - -Color Palette (strict — use ONLY these exact hex values): -- Chalk White: #F5F5F5 (main text, outlines) -- Chalk Yellow: #FFE566 (highlights, emphasis, underlines) -- Chalk Pink: #FF9999 (secondary highlights, icons) -- Chalk Blue: #66B3FF (diagrams, technical elements) -- Chalk Green: #90EE90 (success, nature, positive) -- Chalk Orange: #FFB366 (warnings, energy) -- Frame Brown: #8B6914 (wooden frame, hand-drawn) - -Doodles & Decorative Elements: -- Small hand-drawn stars (5-7 points, imperfect) -- Hand-drawn underlines (slightly wavy) -- Hand-drawn arrows (sketchy shaft + arrowhead) -- Hand-drawn circles/ovals around key terms -- Hand-drawn checkmarks -- Scattered chalk dust particles near bottom/sides - -Typography: -- All text hand-drawn chalk lettering style -- Imperfect baseline (letters slightly off horizontal) -- Mix of uppercase headers and lowercase body text for authenticity -- Visible chalk texture on letters - -== CARD STRUCTURE (identical for all 6 cards) == - -Each card follows this layout: -┌──────────────────────────────────────────┐ -│ [WOODEN FRAME BORDER] │ -│ ┌────────────────────────────────────┐ │ -│ │ CARD TITLE (large, chalk white) │ │ -│ │ ~~underlined with accent color~~ │ │ -│ ├────────────────────────────────────┤ │ -│ │ [SECTION 1] │ [SECTION 2 if any] │ │ -│ │ Header color │ │ │ -│ │ Bullets │ │ │ -│ │ Icon │ │ │ -│ ├────────────────────────────────────┤ │ -│ │ [Additional sections as needed] │ │ -│ │ [Decorative doodles in corners] │ │ -│ └────────────────────────────────────┘ │ -└──────────────────────────────────────────┘ - -== CONSISTENCY RULES == - -1. Generate Card 1 first, send it to me -2. For Card 2–6, EXPLICITLY include this instruction: - "Follow the exact same chalkboard style as the previous card — - same background #1C2B1C, same chalk dust texture, same hand-drawn - line quality, same color hex values (#F5F5F5, #FFE566, #FF9999, - #66B3FF, #90EE90, #FFB366), same wooden frame border, same doodle - elements. Do NOT deviate from this style." -3. Aspect ratio: 16:9 for all cards -4. Each card should visually "belong" to the same set - -== HOW TO USE THESE PROMPTS == - -1. Copy the SYSTEM PROMPT above and paste it at the start of your Gemini session -2. Then copy Prompt 1 and send it to Gemini Image Gen (Card 1) -3. Once Card 1 is generated, copy Prompt 2 but FIRST include the STYLE LOCK BLOCK -4. Repeat for all 6 cards, always referencing the previous card's style -5. Review each generated image: if chalk line quality or colors deviate, - regenerate with stronger style enforcement -``` - ---- - -## STYLE LOCK BLOCK (Prepend this to Prompts 2–6) - -``` -== STYLE LOCK — MANDATORY == - -This card MUST follow the EXACT same chalkboard style as the previously -generated card. Do not deviate. - -Checklist — verify these match the previous card BEFORE generating: -□ Background color: #1C2B1C (dark green-black chalkboard) -□ Chalk texture: subtle scratches, dust, eraser smudges -□ Line quality: hand-drawn, imperfect, sketchy wobble — NO perfect vectors -□ Color hex values: #F5F5F5 (white), #FFE566 (yellow), #FF9999 (pink), - #66B3FF (blue), #90EE90 (green), #FFB366 (orange) -□ Frame: wooden border with hand-drawn wood grain -□ Doodles: stars, underlines, arrows, circles — all chalk-drawn -□ Typography: chalk lettering, imperfect baseline, chalk texture on letters - -If ANY element does not match, regenerate with corrections. -``` - ---- - -## CARD 1 — Saleable & Security - -``` -== STYLE LOCK — MANDATORY == - -This card MUST follow the EXACT same chalkboard style as the previously -generated card. Do not deviate. - -Checklist — verify these match the previous card BEFORE generating: -□ Background color: #1C2B1C (dark green-black chalkboard) -□ Chalk texture: subtle scratches, dust, eraser smudges -□ Line quality: hand-drawn, imperfect, sketchy wobble — NO perfect vectors -□ Color hex values: #F5F5F5 (white), #FFE566 (yellow), #FF9999 (pink), - #66B3FF (blue), #90EE90 (green), #FFB366 (orange) -□ Frame: wooden border with hand-drawn wood grain -□ Doodles: stars, underlines, arrows, circles — all chalk-drawn -□ Typography: chalk lettering, imperfect baseline, chalk texture on letters - -If ANY element does not match, regenerate with corrections. - ---- - -INFOGRAPHIC CARD 1: Saleable & Security - -Create a single infographic card in chalkboard style with a dark green-black -background (#1C2B1C), realistic chalk dust texture, subtle eraser smudge marks, -and a wooden frame border with hand-drawn wood grain lines. - -Card is 16:9 aspect ratio. All elements must look hand-drawn with real chalk — -imperfect sketchy lines, slight wobble, no clean vectors. - -TITLE SECTION: -- "Saleable & Security" in large hand-drawn chalk white (#F5F5F5) uppercase - lettering, centered at top -- Double underline in chalk yellow (#FFE566), slightly wavy hand-drawn lines -- Small hand-drawn star doodles on each side of the title - -TWO-COLUMN LAYOUT below title: - -LEFT COLUMN — "Saleable" (header in chalk pink #FF9999, hand-drawn rectangle bar): - • Complete product definition in Control Tower - • SKUs clearly defined - • License generation strategy complete - Bullet markers: small chalk pink circles - Icon: hand-drawn chalk sketch of a product box with a small price tag label, - in chalk yellow on white outline - -RIGHT COLUMN — "Security" (header in chalk blue #66B3FF, hand-drawn rectangle bar): - • Application self-defensibility capability - • WAF rules to protect cloud apps - • Defend against incorrect usage (accidental & purposeful) - Bullet markers: small chalk blue circles - Icon: hand-drawn chalk shield with a simple checkmark inside, outline in - chalk white, fill in semi-transparent chalk blue - -FOOTER DECORATION: -- A hand-drawn chalk dividing line across the card width -- Two small doodle checkmarks at bottom right in chalk green (#90EE90) -- Scattered chalk dust particles along the bottom edge - -NO gradients, NO sharp geometric shapes, NO flat digital icons. -``` - -## ![IMG-20260418172056603.png](app://77d327b60ef00764e25eb25542b49a223773/D:/Workspace/nexus/Asset/Attachment/raw/AI/%E5%A6%82%E4%BD%95%E8%AE%A9AI%E7%94%9F%E6%88%90%E9%A3%8E%E6%A0%BC%E4%B8%80%E8%87%B4%E7%9A%84%E5%9B%BE%E7%89%87/IMG-20260418172056603.png?1776503642747) - -## CARD 2 — Cloud Deployment & Configuration - -``` -== STYLE LOCK — MANDATORY == - -This card MUST follow the EXACT same chalkboard style as the previously -generated card. Do not deviate. - -Checklist — verify these match the previous card BEFORE generating: -□ Background color: #1C2B1C (dark green-black chalkboard) -□ Chalk texture: subtle scratches, dust, eraser smudges -□ Line quality: hand-drawn, imperfect, sketchy wobble — NO perfect vectors -□ Color hex values: #F5F5F5 (white), #FFE566 (yellow), #FF9999 (pink), - #66B3FF (blue), #90EE90 (green), #FFB366 (orange) -□ Frame: wooden border with hand-drawn wood grain -□ Doodles: stars, underlines, arrows, circles — all chalk-drawn -□ Typography: chalk lettering, imperfect baseline, chalk texture on letters - -If ANY element does not match, regenerate with corrections. - ---- - -INFOGRAPHIC CARD 2: Cloud Deployment & Configuration - -Create a single infographic card in chalkboard style with a dark green-black -background (#1A1A1A), realistic chalk dust texture, subtle eraser smudge marks, -and a wooden frame border with hand-drawn wood grain lines. - -Card is 16:9 aspect ratio. All elements must look hand-drawn with real chalk — -imperfect sketchy lines, slight wobble, no clean vectors. - -TITLE SECTION: -- "Cloud Deployment & Configuration" in large hand-drawn chalk white (#F5F5F5) - uppercase lettering, centered at top -- Underline in chalk green (#90EE90), hand-drawn wavy line -- Small star doodle on left side of title - -MAIN CONTENT AREA: -Header bar: "Deployment Requirements" in chalk blue (#66B3FF) hand-drawn -rectangle - -Bullet list (chalk white text, chalk yellow bullet markers): - ✔ Fully automated cloud platform deployment - ✔ Web / API enabled configuration management - ✔ All feature & functional configs through API interface - ✔ Tenant capability enablement - -Sub-section header: "Configuration Management" in chalk pink (#FF9999) - -HAND-DRAWN FLOWCHART (center of card): -Three chalk blue boxes connected by sketchy chalk arrows: - - [Cloud Platform] --arrow--> [API Gateway] --arrow--> [Tenant Config] - -Each box: hand-drawn rectangle with slightly wavy edges, white #F5F5F5 outline -Text inside boxes: chalk white -Arrows: hand-drawn with slight wobble, chalk blue - -ADDITIONAL ELEMENT: -Hand-drawn stick figure engineer icon (simple, chalk white) on the right side -holding a small chalk-drawn tablet/device - -CORNER DOODLES: -- Top right: small hand-drawn cloud shape labeled "SaaS" in chalk orange (#FFB366) -- Bottom left: chalk pink circle with "API" text inside -- Scattered chalk dust particles near the wooden frame - -NO gradients, NO sharp geometry, NO digital-looking elements. -``` - - -## How to Use This File - -``` -SEQUENCE: -1. Gemini session start → paste the SYSTEM PROMPT -2. Send CARD 1 prompt → receive Card 1 image -3. Paste CARD 2 prompt (it includes STYLE LOCK BLOCK) → receive Card 2 -4. Repeat for Cards 3–6 - -VERIFICATION after each card: -- Does background look like #1C2B1C dark green-black chalkboard? ✓/✗ -- Do all lines look hand-drawn/sketchy? ✓/✗ -- Are colors using the exact hex values? ✓/✗ -- Is there a wooden frame border? ✓/✗ -- Are doodles (stars, underlines, arrows) hand-drawn? ✓/✗ -- Does it match the previous card visually? ✓/✗ - -If any check fails → regenerate with stronger style enforcement. +## SYSTEM PROMPT (Set this once at the start of the Gemini session) + +``` +You are an infographic generation assistant. Your job is to create 6 chalkboard-style +infographic cards that form a complete visual guide. + +== GLOBAL STYLE RULES (apply to EVERY card, no exceptions) == + +Background: +- Dark green-black chalkboard: #1C2B1C +- Realistic chalkboard texture with subtle scratches, dust particles, faint eraser smudge marks +- Wooden frame border on all cards (hand-drawn wood grain lines in chalk brown/tan) +- NO gradients, NO perfect geometric shapes, NO photorealistic elements + +Chalk Lines & Quality: +- ALL lines must be hand-drawn, imperfect, sketchy — slight wobble and variation +- Lines should look like real white/colored chalk on a blackboard +- NO clean digital vectors, NO sharp vector paths + +Color Palette (strict — use ONLY these exact hex values): +- Chalk White: #F5F5F5 (main text, outlines) +- Chalk Yellow: #FFE566 (highlights, emphasis, underlines) +- Chalk Pink: #FF9999 (secondary highlights, icons) +- Chalk Blue: #66B3FF (diagrams, technical elements) +- Chalk Green: #90EE90 (success, nature, positive) +- Chalk Orange: #FFB366 (warnings, energy) +- Frame Brown: #8B6914 (wooden frame, hand-drawn) + +Doodles & Decorative Elements: +- Small hand-drawn stars (5-7 points, imperfect) +- Hand-drawn underlines (slightly wavy) +- Hand-drawn arrows (sketchy shaft + arrowhead) +- Hand-drawn circles/ovals around key terms +- Hand-drawn checkmarks +- Scattered chalk dust particles near bottom/sides + +Typography: +- All text hand-drawn chalk lettering style +- Imperfect baseline (letters slightly off horizontal) +- Mix of uppercase headers and lowercase body text for authenticity +- Visible chalk texture on letters + +== CARD STRUCTURE (identical for all 6 cards) == + +Each card follows this layout: +┌──────────────────────────────────────────┐ +│ [WOODEN FRAME BORDER] │ +│ ┌────────────────────────────────────┐ │ +│ │ CARD TITLE (large, chalk white) │ │ +│ │ ~~underlined with accent color~~ │ │ +│ ├────────────────────────────────────┤ │ +│ │ [SECTION 1] │ [SECTION 2 if any] │ │ +│ │ Header color │ │ │ +│ │ Bullets │ │ │ +│ │ Icon │ │ │ +│ ├────────────────────────────────────┤ │ +│ │ [Additional sections as needed] │ │ +│ │ [Decorative doodles in corners] │ │ +│ └────────────────────────────────────┘ │ +└──────────────────────────────────────────┘ + +== CONSISTENCY RULES == + +1. Generate Card 1 first, send it to me +2. For Card 2–6, EXPLICITLY include this instruction: + "Follow the exact same chalkboard style as the previous card — + same background #1C2B1C, same chalk dust texture, same hand-drawn + line quality, same color hex values (#F5F5F5, #FFE566, #FF9999, + #66B3FF, #90EE90, #FFB366), same wooden frame border, same doodle + elements. Do NOT deviate from this style." +3. Aspect ratio: 16:9 for all cards +4. Each card should visually "belong" to the same set + +== HOW TO USE THESE PROMPTS == + +1. Copy the SYSTEM PROMPT above and paste it at the start of your Gemini session +2. Then copy Prompt 1 and send it to Gemini Image Gen (Card 1) +3. Once Card 1 is generated, copy Prompt 2 but FIRST include the STYLE LOCK BLOCK +4. Repeat for all 6 cards, always referencing the previous card's style +5. Review each generated image: if chalk line quality or colors deviate, + regenerate with stronger style enforcement +``` + +--- + +## STYLE LOCK BLOCK (Prepend this to Prompts 2–6) + +``` +== STYLE LOCK — MANDATORY == + +This card MUST follow the EXACT same chalkboard style as the previously +generated card. Do not deviate. + +Checklist — verify these match the previous card BEFORE generating: +□ Background color: #1C2B1C (dark green-black chalkboard) +□ Chalk texture: subtle scratches, dust, eraser smudges +□ Line quality: hand-drawn, imperfect, sketchy wobble — NO perfect vectors +□ Color hex values: #F5F5F5 (white), #FFE566 (yellow), #FF9999 (pink), + #66B3FF (blue), #90EE90 (green), #FFB366 (orange) +□ Frame: wooden border with hand-drawn wood grain +□ Doodles: stars, underlines, arrows, circles — all chalk-drawn +□ Typography: chalk lettering, imperfect baseline, chalk texture on letters + +If ANY element does not match, regenerate with corrections. +``` + +--- + +## CARD 1 — Saleable & Security + +``` +== STYLE LOCK — MANDATORY == + +This card MUST follow the EXACT same chalkboard style as the previously +generated card. Do not deviate. + +Checklist — verify these match the previous card BEFORE generating: +□ Background color: #1C2B1C (dark green-black chalkboard) +□ Chalk texture: subtle scratches, dust, eraser smudges +□ Line quality: hand-drawn, imperfect, sketchy wobble — NO perfect vectors +□ Color hex values: #F5F5F5 (white), #FFE566 (yellow), #FF9999 (pink), + #66B3FF (blue), #90EE90 (green), #FFB366 (orange) +□ Frame: wooden border with hand-drawn wood grain +□ Doodles: stars, underlines, arrows, circles — all chalk-drawn +□ Typography: chalk lettering, imperfect baseline, chalk texture on letters + +If ANY element does not match, regenerate with corrections. + +--- + +INFOGRAPHIC CARD 1: Saleable & Security + +Create a single infographic card in chalkboard style with a dark green-black +background (#1C2B1C), realistic chalk dust texture, subtle eraser smudge marks, +and a wooden frame border with hand-drawn wood grain lines. + +Card is 16:9 aspect ratio. All elements must look hand-drawn with real chalk — +imperfect sketchy lines, slight wobble, no clean vectors. + +TITLE SECTION: +- "Saleable & Security" in large hand-drawn chalk white (#F5F5F5) uppercase + lettering, centered at top +- Double underline in chalk yellow (#FFE566), slightly wavy hand-drawn lines +- Small hand-drawn star doodles on each side of the title + +TWO-COLUMN LAYOUT below title: + +LEFT COLUMN — "Saleable" (header in chalk pink #FF9999, hand-drawn rectangle bar): + • Complete product definition in Control Tower + • SKUs clearly defined + • License generation strategy complete + Bullet markers: small chalk pink circles + Icon: hand-drawn chalk sketch of a product box with a small price tag label, + in chalk yellow on white outline + +RIGHT COLUMN — "Security" (header in chalk blue #66B3FF, hand-drawn rectangle bar): + • Application self-defensibility capability + • WAF rules to protect cloud apps + • Defend against incorrect usage (accidental & purposeful) + Bullet markers: small chalk blue circles + Icon: hand-drawn chalk shield with a simple checkmark inside, outline in + chalk white, fill in semi-transparent chalk blue + +FOOTER DECORATION: +- A hand-drawn chalk dividing line across the card width +- Two small doodle checkmarks at bottom right in chalk green (#90EE90) +- Scattered chalk dust particles along the bottom edge + +NO gradients, NO sharp geometric shapes, NO flat digital icons. +``` + +## ![IMG-20260418172056603.png](app://77d327b60ef00764e25eb25542b49a223773/D:/Workspace/nexus/Asset/Attachment/raw/AI/%E5%A6%82%E4%BD%95%E8%AE%A9AI%E7%94%9F%E6%88%90%E9%A3%8E%E6%A0%BC%E4%B8%80%E8%87%B4%E7%9A%84%E5%9B%BE%E7%89%87/IMG-20260418172056603.png?1776503642747) + +## CARD 2 — Cloud Deployment & Configuration + +``` +== STYLE LOCK — MANDATORY == + +This card MUST follow the EXACT same chalkboard style as the previously +generated card. Do not deviate. + +Checklist — verify these match the previous card BEFORE generating: +□ Background color: #1C2B1C (dark green-black chalkboard) +□ Chalk texture: subtle scratches, dust, eraser smudges +□ Line quality: hand-drawn, imperfect, sketchy wobble — NO perfect vectors +□ Color hex values: #F5F5F5 (white), #FFE566 (yellow), #FF9999 (pink), + #66B3FF (blue), #90EE90 (green), #FFB366 (orange) +□ Frame: wooden border with hand-drawn wood grain +□ Doodles: stars, underlines, arrows, circles — all chalk-drawn +□ Typography: chalk lettering, imperfect baseline, chalk texture on letters + +If ANY element does not match, regenerate with corrections. + +--- + +INFOGRAPHIC CARD 2: Cloud Deployment & Configuration + +Create a single infographic card in chalkboard style with a dark green-black +background (#1A1A1A), realistic chalk dust texture, subtle eraser smudge marks, +and a wooden frame border with hand-drawn wood grain lines. + +Card is 16:9 aspect ratio. All elements must look hand-drawn with real chalk — +imperfect sketchy lines, slight wobble, no clean vectors. + +TITLE SECTION: +- "Cloud Deployment & Configuration" in large hand-drawn chalk white (#F5F5F5) + uppercase lettering, centered at top +- Underline in chalk green (#90EE90), hand-drawn wavy line +- Small star doodle on left side of title + +MAIN CONTENT AREA: +Header bar: "Deployment Requirements" in chalk blue (#66B3FF) hand-drawn +rectangle + +Bullet list (chalk white text, chalk yellow bullet markers): + ✔ Fully automated cloud platform deployment + ✔ Web / API enabled configuration management + ✔ All feature & functional configs through API interface + ✔ Tenant capability enablement + +Sub-section header: "Configuration Management" in chalk pink (#FF9999) + +HAND-DRAWN FLOWCHART (center of card): +Three chalk blue boxes connected by sketchy chalk arrows: + + [Cloud Platform] --arrow--> [API Gateway] --arrow--> [Tenant Config] + +Each box: hand-drawn rectangle with slightly wavy edges, white #F5F5F5 outline +Text inside boxes: chalk white +Arrows: hand-drawn with slight wobble, chalk blue + +ADDITIONAL ELEMENT: +Hand-drawn stick figure engineer icon (simple, chalk white) on the right side +holding a small chalk-drawn tablet/device + +CORNER DOODLES: +- Top right: small hand-drawn cloud shape labeled "SaaS" in chalk orange (#FFB366) +- Bottom left: chalk pink circle with "API" text inside +- Scattered chalk dust particles near the wooden frame + +NO gradients, NO sharp geometry, NO digital-looking elements. +``` + + +## How to Use This File + +``` +SEQUENCE: +1. Gemini session start → paste the SYSTEM PROMPT +2. Send CARD 1 prompt → receive Card 1 image +3. Paste CARD 2 prompt (it includes STYLE LOCK BLOCK) → receive Card 2 +4. Repeat for Cards 3–6 + +VERIFICATION after each card: +- Does background look like #1C2B1C dark green-black chalkboard? ✓/✗ +- Do all lines look hand-drawn/sketchy? ✓/✗ +- Are colors using the exact hex values? ✓/✗ +- Is there a wooden frame border? ✓/✗ +- Are doodles (stars, underlines, arrows) hand-drawn? ✓/✗ +- Does it match the previous card visually? ✓/✗ + +If any check fails → regenerate with stronger style enforcement. ``` \ No newline at end of file diff --git a/Hermes/xingzhi/养龙虾封面提示词-2026-04-20.md b/Hermes/xingzhi/养龙虾封面提示词-2026-04-20.md index 47d294fc..8520f697 100644 --- a/Hermes/xingzhi/养龙虾封面提示词-2026-04-20.md +++ b/Hermes/xingzhi/养龙虾封面提示词-2026-04-20.md @@ -1,51 +1,51 @@ ---- -title: 养龙虾5天血泪史：我的AI Agent为什么总失忆？OpenClaw 记忆调试全记录 -type: metaphor -palette: warm -rendering: digital -text: title-subtitle -mood: balanced ---- - -请为这篇文章生成封面图。 - -## 视觉概念 - -以"金鱼记忆"为核心隐喻：一条卡通金鱼游在透明的水缸中，金鱼的大脑位置是一个空白的问号框架，周围漂浮着记忆碎片（文字泡泡、对话气泡、代码片段），碎片正在逐渐消散到缸外。底部有简单的齿轮和调试工具元素，暗示"调试"过程。 - -## 主视觉元素 - -- 金鱼：卡通风格，圆形身体，大眼睛，尾巴呈波浪形游动姿态 -- 空白大脑：空心问号形状，位于金鱼头部位置 -- 记忆碎片：5-6个椭圆形气泡，包含模糊的文字轮廓、对话符号、代码片段 -- 水缸：简单几何圆形边框，内部有微妙的涟漪效果 -- 调试工具：底部角落有小型齿轮、螺丝刀、代码括号图标 - -## 配色方案（warm palette） - -- 主色：温暖橙色 #F5A623（用于金鱼身体） -- 辅色：柔和珊瑚色 #FF8C74（用于记忆碎片） -- 强调色：深琥珀色 #C47A2B（用于鱼鳍和调试工具） -- 背景：米白色 #FFF8F0 到浅杏色 #FFE8D6 渐变 -- 文字色：深棕色 #4A3728 - -## 渲染风格（digital） - -- 干净的矢量线条，精确边缘 -- 平滑渐变，无粗糙纹理 -- 轻微阴影创造层次感 -- 像专业UI插图一样现代简洁 - -## 文字布局 - -- 标题："养龙虾5天血泪史" 使用大号粗体字（金鱼上方右侧） -- 副标题："我的AI Agent为什么总失忆？" 使用较小字号（标题下方） -- 字体：现代无衬线体，清晰易读 -- 文字颜色：深棕色 #4A3728 - -## 氛围（balanced） - -- 中等对比度 -- 正常饱和度 -- 视觉重量平衡 +--- +title: 养龙虾5天血泪史：我的AI Agent为什么总失忆？OpenClaw 记忆调试全记录 +type: metaphor +palette: warm +rendering: digital +text: title-subtitle +mood: balanced +--- + +请为这篇文章生成封面图。 + +## 视觉概念 + +以"金鱼记忆"为核心隐喻：一条卡通金鱼游在透明的水缸中，金鱼的大脑位置是一个空白的问号框架，周围漂浮着记忆碎片（文字泡泡、对话气泡、代码片段），碎片正在逐渐消散到缸外。底部有简单的齿轮和调试工具元素，暗示"调试"过程。 + +## 主视觉元素 + +- 金鱼：卡通风格，圆形身体，大眼睛，尾巴呈波浪形游动姿态 +- 空白大脑：空心问号形状，位于金鱼头部位置 +- 记忆碎片：5-6个椭圆形气泡，包含模糊的文字轮廓、对话符号、代码片段 +- 水缸：简单几何圆形边框，内部有微妙的涟漪效果 +- 调试工具：底部角落有小型齿轮、螺丝刀、代码括号图标 + +## 配色方案（warm palette） + +- 主色：温暖橙色 #F5A623（用于金鱼身体） +- 辅色：柔和珊瑚色 #FF8C74（用于记忆碎片） +- 强调色：深琥珀色 #C47A2B（用于鱼鳍和调试工具） +- 背景：米白色 #FFF8F0 到浅杏色 #FFE8D6 渐变 +- 文字色：深棕色 #4A3728 + +## 渲染风格（digital） + +- 干净的矢量线条，精确边缘 +- 平滑渐变，无粗糙纹理 +- 轻微阴影创造层次感 +- 像专业UI插图一样现代简洁 + +## 文字布局 + +- 标题："养龙虾5天血泪史" 使用大号粗体字（金鱼上方右侧） +- 副标题："我的AI Agent为什么总失忆？" 使用较小字号（标题下方） +- 字体：现代无衬线体，清晰易读 +- 文字颜色：深棕色 #4A3728 + +## 氛围（balanced） + +- 中等对比度 +- 正常饱和度 +- 视觉重量平衡 - 温暖友好但不强烈 \ No newline at end of file diff --git a/Hermes/xingzhi/常用任务指令.md b/Hermes/xingzhi/常用任务指令.md index 6910a78b..107c17f2 100644 --- a/Hermes/xingzhi/常用任务指令.md +++ b/Hermes/xingzhi/常用任务指令.md @@ -1,22 +1,22 @@ -## 信息图任务指令 - -请用**claude-code-infographic-build** 这个技能为`Hermes/xingzhi/Hermes自定义技能说明` 这篇笔记生成信息图。 - - 语言：英文 - - 布局：circular-flow - - 风格：chalkboard - - 比例：16:9 - - -## 封面图任务指令 -请用**claude-code-executor**技能启动Claude Code -使用 **baoyu-cover-image** 技能为以下内容生成封面图提示词： - -1. 读取 Hermes/xingzhi/wiki-sync-setup-2026-04-16.md 这篇笔记 -2. 用**baoyu-cover-image** 生成一张封面图 - - **类型 (Type)**：`hero`、`conceptual`、`typography`、`metaphor`、`scene`、`minimal` - - **配色 (Palette)**：`warm`、`elegant`、`cool`、`dark`、`earth`、`vivid`、`pastel`、`mono`、`retro` - - **渲染 (Rendering)**：`flat-vector`、`hand-drawn`、`painterly`、`digital`、`pixel`、`chalk` - - **文字 (Text)**：`none`、`title-only`（默认）、`title-subtitle`、`text-rich` - - **氛围 (Mood)**：`subtle`、`balanced`（默认）、`bold` -3. 不要生成图片，只输出提示词 +## 信息图任务指令 + +请用**claude-code-infographic-build** 这个技能为`Hermes/xingzhi/Hermes自定义技能说明` 这篇笔记生成信息图。 + - 语言：英文 + - 布局：circular-flow + - 风格：chalkboard + - 比例：16:9 + + +## 封面图任务指令 +请用**claude-code-executor**技能启动Claude Code +使用 **baoyu-cover-image** 技能为以下内容生成封面图提示词： + +1. 读取 Hermes/xingzhi/wiki-sync-setup-2026-04-16.md 这篇笔记 +2. 用**baoyu-cover-image** 生成一张封面图 + - **类型 (Type)**：`hero`、`conceptual`、`typography`、`metaphor`、`scene`、`minimal` + - **配色 (Palette)**：`warm`、`elegant`、`cool`、`dark`、`earth`、`vivid`、`pastel`、`mono`、`retro` + - **渲染 (Rendering)**：`flat-vector`、`hand-drawn`、`painterly`、`digital`、`pixel`、`chalk` + - **文字 (Text)**：`none`、`title-only`（默认）、`title-subtitle`、`text-rich` + - **氛围 (Mood)**：`subtle`、`balanced`（默认）、`bold` +3. 不要生成图片，只输出提示词 4. 输出提示词到 Hermes/xingzhi/ 新建一个笔记 \ No newline at end of file diff --git a/Hermes/xingzhi/用 LLM把零散资料变成可复用的知识库 —— llm-wiki-sync 的实现与示例解析.md b/Hermes/xingzhi/用 LLM把零散资料变成可复用的知识库 —— llm-wiki-sync 的实现与示例解析.md index 1ba29297..527bf35f 100644 --- a/Hermes/xingzhi/用 LLM把零散资料变成可复用的知识库 —— llm-wiki-sync 的实现与示例解析.md +++ b/Hermes/xingzhi/用 LLM把零散资料变成可复用的知识库 —— llm-wiki-sync 的实现与示例解析.md @@ -1,127 +1,125 @@ - -**副标题**：如何把每一份笔记，通过 llm-wiki-sync 自动分析与提炼成结构化的页面、实体与概念，以便长期检索与复用。 - ---- - -## 前言与来源说明 - -本方案借鉴并整合了几条重要线索： -- Andrej Karpathy 对“LLM Wiki”理念的阐述（将知识以可被大模型直接消费的结构化方式保存）：https://gist.github.com/karpathy/442a6bf555914893e9891c11519de94f -- 我们的实现基于开源项目 SamurAI 的 llm-wiki-agent（https://github.com/SamurAIGPT/llm-wiki-agent），在其基础上扩展了企业化的 ingest 流程、Cron 调度与 Hermes skill（llm-wiki-sync）。 -- 最终静态化展示使用 Quartz（https://github.com/jackyzha0/quartz），把生成的 wiki 内容导出为可浏览、可分享的静态站点。 - -下面重点介绍 llm-wiki-sync 如何把一篇笔记做结构化分析与提炼，并用仓库中的实例（wiki/sources/RTO-vs-RPO-Key-Differences-for-Modern-Disaster-Recovery）作为逐项说明。 - ---- - -## llm-wiki-sync 的目标与核心能力 - -核心目标：把原始文档（raw/）自动转成结构化的 wiki source 页面，抽取关键要素（Summary、Key Claims、Key Quotes、Key Concepts、Key Entities、Connections），并记录 ingest 日志、差异与审计信息，供后续检索、合成与内容再生产使用。 - -关键能力： -- 文本解析与语义压缩：把长文本压缩为 2–4 句高密度 summary。 -- 声明抽取（claim extraction）：识别文中明确的结论与可验证断言。 -- 实体与概念抽取（NER + linking）：识别人名/公司/工具/概念，并把它们标准化为 wiki 实体页（[[Name]]）。 -- 关系发现（connections）：把句子级别的语义关系转成图边（A → depends_on → B）。 -- 模板化输出：固定页面头（frontmatter）+ 标准段落（Summary / Key Claims / Quotes / Concepts / Entities / Connections / Contradictions）。 -- 审计与可回滚：每次 ingest 都写入 wiki/log.md，并可通过 git/checkpoint 回滚变更。 - -实现技术栈要点：Hermes（skill 调用）、Claude Code / agent（可选）、llm-wiki-agent 基础脚本、以及最终的静态化工具 Quartz。 - ---- - -## 从笔记到 Source Page - -仓库中的源页面：wiki/sources/RTO-vs-RPO-Key-Differences-for-Modern-Disaster-Recovery.md - -下面逐项展示 llm-wiki-sync 针对该文档所做的提取结果（摘自生成的 source 页面）： - -1) Summary（Summary） -- 核心主题：RTO（恢复时间目标）与 RPO（恢复点目标）的定义、区别及在现代持续交付中的应用 -- 问题域：灾难恢复规划、发布风险管控 -- 方法/机制：通过 Feature Flag 实现秒级 RTO 和低 RPO -- 结论/价值：预防优于恢复，Feature Flag 将部署事故从灾难转为非事件 - -说明：Summary 由模型将整篇文章的主旨、问题背景、关键方法与结论压缩为 2–4 条，便于快速检索与索引。 - -2) Key Claims（断言提取） -- RTO 衡量系统恢复速度：允许的最大停机时间 -- RPO 衡量数据保护：可接受的最大数据丢失量 -- 传统灾备聚焦硬件故障，现代风险更多来自代码变更（部署 bug、数据库迁移、AI 模型更新等） -- Feature Flag 将 RTO 从小时级降至秒级，同时保护 RPO -- 应用分层策略（Critical / Important / Nice-to-have）对应不同的 RTO/RPO 指标 - -说明：断言提取用于建立事实层（fact layer），后续可自动化做一致性检查与冲突检测（Contradictions 段）。 - -3) Key Quotes（关键引用） -- “RTO is about speed: how fast you get back online. RPO is about data: how much you can afford to lose.” -- “Deploy != Release. Feature flags change this. You can deploy code to production without releasing it to users.” - -说明：保留可引用原句，便于在后续合成（如写作、演讲稿）中引用来源。 - -4) Key Concepts（概念抽取） -- RTO（Recovery Time Objective） -- RPO（Recovery Point Objective） -- Feature Flag（特性开关） -- Kill Switch（紧急关闭机制） -- 渐进式发布（Gradual Rollout） - -说明：概念会被标准化为 wiki 的 concept 页面（wiki/concepts/），用于聚合所有提到该概念的 source 页面。 - -5) Key Entities（实体抽取） -- LaunchDarkly（Feature Flag 管理平台） -- HP（示例企业） -- Christian Dior（示例企业 — 文档中作为案例提及） - -说明：实体会被规范化为 wiki/entities/ 下的页面，并且 source 页面会在 sources 列表保留原始链接与引用。 - -6) Connections（关系构建） -- RTO ← depends_on ← Feature Flag -- RPO ← depends_on ← Feature Flag -- LaunchDarkly → provides → Feature Flag -- Feature Flag ← enables ← 渐进式发布 - -说明：Connections 用于图谱构建（graph/graph.json），后续能在可视化页面（graph.html）展示节点与边。 - -7) Contradictions（冲突检测） -- 当前文档无明显与现有 wiki 冲突的声明；若检测到冲突，llm-wiki-sync 会把冲突条目列出并标注来源，供人工审查。 -![[IMG-20260420160439552.png|872]] -![[IMG-20260420160439600.png]] ---- - -## llm-wiki-sync 的典型运行步骤（工程视角） - -1. 读取 raw/，解析 frontmatter/元数据（若缺失则询回填）。 -2. 检索 wiki/index.md 与 overview.md，获取上下文（避免重复 ingest）。 -3. 用 LLM 生成 Source Page（Summary / Key Claims / Quotes / Concepts / Entities / Connections / Contradictions）。 -4. 将结果写入 wiki/sources/.md，并更新 wiki/index.md、wiki/overview.md；如有新实体/概念也生成对应页面草稿。 -5. 记录日志：在 wiki/log.md 追加 ingest 记录（时间、文件、摘要、状态）。 -6. 可选：触发 graph 重建（增量或全量），并把 graph/graph.json、graph.html 更新到站点。 -7. 通知：完成后通过 Hermes 的通知机制（deliver=origin 或 Telegram 指定 chat）告知负责人。 - -并发与配额注意：单文件 ingest 优先，批量操作分批（每批 2~3 篇）；对接外部 agent/Claude Code 时避免并发超配额。 - -审计与回滚：每次 ingest 前执行 git branch 或 checkpoint；如需回滚，可用 git revert 或恢复 checkpoint。 - ---- - -## 总结与扩展 - -- llm-wiki-sync 把 Karpathy 关于 LLM Wiki 的理念落地为可执行的工程流程：把知识以结构化表征保存，使得大模型既是“读者”也是“执行者”。 -- 在 Obsidian 中可以直接通过关系图（graph view）查看笔记间的关联；在 llm-wiki-agent 中可以通过 wiki-graph 构建并在 graph.html / graph/graph.json 中可视化展示。 -- 我们的实现基于 SamurAI 的 llm-wiki-agent，并在其上加入了企业级的同步、审计与 Hermes skill 封装，最终通过 Quartz 静态站把生成的 wiki 内容对外展示与分享。 - - ---- - -## Infographic Asset - -![llm-wiki-sync Circular Flow Infographic](IMG-20260420160439662.png) - -**Infographic**: The Knowledge Pipeline Cycle — circular flow showing how llm-wiki-sync transforms scattered notes into a reusable knowledge base. -- Layout: circular-flow (7-stage cycle) -- Style: chalkboard (dark background, hand-drawn chalk accents) -- Aspect ratio: 16:9 -- Prompt file: `infographic/llm-wiki-sync-circular-flow/prompts/infographic.md` -- Image: `llm-wiki-sync-circular-flow-infographic.png` - + +**副标题**：如何把每一份笔记，通过 llm-wiki-sync 自动分析与提炼成结构化的页面、实体与概念，以便长期检索与复用。 + +--- + +## 前言与来源说明 + +本方案借鉴并整合了几条重要线索： +- Andrej Karpathy 对“LLM Wiki”理念的阐述（将知识以可被大模型直接消费的结构化方式保存）：https://gist.github.com/karpathy/442a6bf555914893e9891c11519de94f +- 我们的实现基于开源项目 SamurAI 的 llm-wiki-agent（https://github.com/SamurAIGPT/llm-wiki-agent），在其基础上扩展了企业化的 ingest 流程、Cron 调度与 Hermes skill（llm-wiki-sync）。 +- 最终静态化展示使用 Quartz（https://github.com/jackyzha0/quartz），把生成的 wiki 内容导出为可浏览、可分享的静态站点。 + +下面重点介绍 llm-wiki-sync 如何把一篇笔记做结构化分析与提炼，并用仓库中的实例（wiki/sources/RTO-vs-RPO-Key-Differences-for-Modern-Disaster-Recovery）作为逐项说明。 + +--- + +## llm-wiki-sync 的目标与核心能力 + +核心目标：把原始文档（raw/）自动转成结构化的 wiki source 页面，抽取关键要素（Summary、Key Claims、Key Quotes、Key Concepts、Key Entities、Connections），并记录 ingest 日志、差异与审计信息，供后续检索、合成与内容再生产使用。 + +关键能力： +- 文本解析与语义压缩：把长文本压缩为 2–4 句高密度 summary。 +- 声明抽取（claim extraction）：识别文中明确的结论与可验证断言。 +- 实体与概念抽取（NER + linking）：识别人名/公司/工具/概念，并把它们标准化为 wiki 实体页（[[Name]]）。 +- 关系发现（connections）：把句子级别的语义关系转成图边（A → depends_on → B）。 +- 模板化输出：固定页面头（frontmatter）+ 标准段落（Summary / Key Claims / Quotes / Concepts / Entities / Connections / Contradictions）。 +- 审计与可回滚：每次 ingest 都写入 wiki/log.md，并可通过 git/checkpoint 回滚变更。 + +实现技术栈要点：Hermes（skill 调用）、Claude Code / agent（可选）、llm-wiki-agent 基础脚本、以及最终的静态化工具 Quartz。 + +--- + +## 从笔记到 Source Page + +仓库中的源页面：wiki/sources/RTO-vs-RPO-Key-Differences-for-Modern-Disaster-Recovery.md + +下面逐项展示 llm-wiki-sync 针对该文档所做的提取结果（摘自生成的 source 页面）： + +1) Summary（Summary） +- 核心主题：RTO（恢复时间目标）与 RPO（恢复点目标）的定义、区别及在现代持续交付中的应用 +- 问题域：灾难恢复规划、发布风险管控 +- 方法/机制：通过 Feature Flag 实现秒级 RTO 和低 RPO +- 结论/价值：预防优于恢复，Feature Flag 将部署事故从灾难转为非事件 + +说明：Summary 由模型将整篇文章的主旨、问题背景、关键方法与结论压缩为 2–4 条，便于快速检索与索引。 + +2) Key Claims（断言提取） +- RTO 衡量系统恢复速度：允许的最大停机时间 +- RPO 衡量数据保护：可接受的最大数据丢失量 +- 传统灾备聚焦硬件故障，现代风险更多来自代码变更（部署 bug、数据库迁移、AI 模型更新等） +- Feature Flag 将 RTO 从小时级降至秒级，同时保护 RPO +- 应用分层策略（Critical / Important / Nice-to-have）对应不同的 RTO/RPO 指标 + +说明：断言提取用于建立事实层（fact layer），后续可自动化做一致性检查与冲突检测（Contradictions 段）。 + +3) Key Quotes（关键引用） +- “RTO is about speed: how fast you get back online. RPO is about data: how much you can afford to lose.” +- “Deploy != Release. Feature flags change this. You can deploy code to production without releasing it to users.” + +说明：保留可引用原句，便于在后续合成（如写作、演讲稿）中引用来源。 + +4) Key Concepts（概念抽取） +- RTO（Recovery Time Objective） +- RPO（Recovery Point Objective） +- Feature Flag（特性开关） +- Kill Switch（紧急关闭机制） +- 渐进式发布（Gradual Rollout） + +说明：概念会被标准化为 wiki 的 concept 页面（wiki/concepts/），用于聚合所有提到该概念的 source 页面。 + +5) Key Entities（实体抽取） +- LaunchDarkly（Feature Flag 管理平台） +- HP（示例企业） +- Christian Dior（示例企业 — 文档中作为案例提及） + +说明：实体会被规范化为 wiki/entities/ 下的页面，并且 source 页面会在 sources 列表保留原始链接与引用。 + +6) Connections（关系构建） +- RTO ← depends_on ← Feature Flag +- RPO ← depends_on ← Feature Flag +- LaunchDarkly → provides → Feature Flag +- Feature Flag ← enables ← 渐进式发布 + +说明：Connections 用于图谱构建（graph/graph.json），后续能在可视化页面（graph.html）展示节点与边。 + +7) Contradictions（冲突检测） +- 当前文档无明显与现有 wiki 冲突的声明；若检测到冲突，llm-wiki-sync 会把冲突条目列出并标注来源，供人工审查。 +![[IMG-20260420160439552.png|872]] +![[IMG-20260420160439600.png]] +--- + +## llm-wiki-sync 的典型运行步骤（工程视角） + +1. 读取 raw/，解析 frontmatter/元数据（若缺失则询回填）。 +2. 检索 wiki/index.md 与 overview.md，获取上下文（避免重复 ingest）。 +3. 用 LLM 生成 Source Page（Summary / Key Claims / Quotes / Concepts / Entities / Connections / Contradictions）。 +4. 将结果写入 wiki/sources/.md，并更新 wiki/index.md、wiki/overview.md；如有新实体/概念也生成对应页面草稿。 +5. 记录日志：在 wiki/log.md 追加 ingest 记录（时间、文件、摘要、状态）。 +6. 可选：触发 graph 重建（增量或全量），并把 graph/graph.json、graph.html 更新到站点。 +7. 通知：完成后通过 Hermes 的通知机制（deliver=origin 或 Telegram 指定 chat）告知负责人。 + +并发与配额注意：单文件 ingest 优先，批量操作分批（每批 2~3 篇）；对接外部 agent/Claude Code 时避免并发超配额。 + +审计与回滚：每次 ingest 前执行 git branch 或 checkpoint；如需回滚，可用 git revert 或恢复 checkpoint。 + +## 总结与扩展 + +- llm-wiki-sync 把 Karpathy 关于 LLM Wiki 的理念落地为可执行的工程流程：把知识以结构化表征保存，使得大模型既是“读者”也是“执行者”。 +- 在 Obsidian 中可以直接通过关系图（graph view）查看笔记间的关联；在 llm-wiki-agent 中可以通过 wiki-graph 构建并在 graph.html / graph/graph.json 中可视化展示。 +- 我们的实现基于 SamurAI 的 llm-wiki-agent，并在其上加入了企业级的同步、审计与 Hermes skill 封装，最终通过 Quartz 静态站把生成的 wiki 内容对外展示与分享。 + + +--- + +## Infographic Asset + +![llm-wiki-sync Circular Flow Infographic](IMG-20260420160439662.png) + +**Infographic**: The Knowledge Pipeline Cycle — circular flow showing how llm-wiki-sync transforms scattered notes into a reusable knowledge base. +- Layout: circular-flow (7-stage cycle) +- Style: chalkboard (dark background, hand-drawn chalk accents) +- Aspect ratio: 16:9 +- Prompt file: `infographic/llm-wiki-sync-circular-flow/prompts/infographic.md` +- Image: `llm-wiki-sync-circular-flow-infographic.png` + diff --git a/Hermes/xingzhi/自动分析和完善MP3信息.md b/Hermes/xingzhi/自动分析和完善MP3信息.md deleted file mode 100644 index 53d91030..00000000 --- a/Hermes/xingzhi/自动分析和完善MP3信息.md +++ /dev/null @@ -1,65 +0,0 @@ -# 自动分析和完善 MP3 信息的指南 - -## 1. 提取音频特征和元数据 -使用音频指纹技术（如 **AcoustID**）来获取 MP3 文件的特征和元数据。 -- **安装 Chromaprint**： 通过以下命令安装 Chromaprint。 - ```bash - sudo apt-get install chromaprint - ``` - -- **生成音频指纹**： 使用 `fpcalc` 命令生成 MP3 文件的指纹。 - ```bash - fpcalc yourfile.mp3 - ``` - -## 2. 调用 AcoustID API -使用生成的指纹调用 AcoustID API，获取音频文件的音乐信息。示例请求： -```bash -curl -X GET "https://api.acoustid.org/v2/lookup?client=YOUR_ACOUSTID_API_KEY&format=json&duration=DURATION&fingerprint=YOUR_FINGERPRINT" -``` - -## 3. 从 AcoustID 获取 MusicBrainz ID -- AcoustID 的响应将包含与该指纹匹配的 MusicBrainz ID（MBID）、艺术家、专辑等信息。 - -## 4. 使用 MusicBrainz API 获取详细信息 -使用获取的 MBID 查询详细的音乐信息： -```bash -GET https://musicbrainz.org/ws/2/artist/ARTIST_MBID?fmt=json -``` - -## 5. 更新 MP3 的元数据 -使用 Python 的 `mutagen` 库更新 MP3 文件的元数据。示例代码如下： -```python -from mutagen.mp3 import MP3 -from mutagen.id3 import ID3, TIT2, TPE1, TALB - -def update_metadata(file_path, title, artist, album): - audio = MP3(file_path, ID3=ID3) - audio['TIT2'] = TIT2(encoding=3, text=title) # 标题 - audio['TPE1'] = TPE1(encoding=3, text=artist) # 艺术家 - audio['TALB'] = TALB(encoding=3, text=album) # 专辑 - audio.save() - -# 调用示例 -update_metadata('yourfile.mp3', 'Correct Title', 'Correct Artist', 'Correct Album') -``` - -## 6. 添加专辑图片信息 -可以使用 `mutagen` 库来在 MP3 文件中添加专辑图片： -```python -from mutagen.mp3 import MP3 -from mutagen.id3 import ID3, APIC - -def add_album_art(mp3_file, image_file): - audio = MP3(mp3_file, ID3=ID3) - with open(image_file, 'rb') as img_file: - img_data = img_file.read() - audio['APIC'] = APIC(encoding=3, mime='image/jpeg', type=3, desc='Cover', data=img_data) - audio.save() - -# 调用示例 -add_album_art('yourfile.mp3', 'cover_image.jpg') -``` - -## 7. 结论 -此方法提供了一种系统化的方式来自动分析 MP3 文件并完善文件的信息，通过音乐指纹识别、使用 API 获取数据以及更新元数据的结合，实现音乐库的维护和信息准确性。 \ No newline at end of file diff --git a/Hermes/yunzhi/Obsidian-Claude-Code-第二大脑协作指南.md b/Hermes/yunzhi/Obsidian-Claude-Code-第二大脑协作指南.md deleted file mode 100644 index c3d31a6f..00000000 --- a/Hermes/yunzhi/Obsidian-Claude-Code-第二大脑协作指南.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: "Obsidian + Claude Code：第二大脑与 AI 代理协作指南" -tags: - - AI - - Obsidian - - Claude-Code - - 第二大脑 - - 个人知识管理 - - LLM -source: "Ben's Abundance Lab × Internet Vin 播客" -duration: "58:56" -date: 2025-02-20 -transcribed_by: Whisper (OpenAI) -translated_by: 云智 ---- - -# Obsidian + Claude Code：第二大脑与 AI 代理协作指南 - -> **来源**：Ben's Abundance Lab × Internet Vin 播客访谈 -> **日期**：2025 年 2 月 20 日 -> **主题**：如何将 Obsidian 与 Claude Code 配对使用，构建真正的个人 AI 操作系统 -> **时长**：约 59 分钟 -> **转录**：Whisper (OpenAI, base model, CPU) -> **翻译**：云智 - ---- - -## 段落 1 [00:00 → 01:13] - -这就是 Obsidian，Obsidian 是人们用作第二大脑的小工具，但真正酷的是，他们将它与 Claude 代码配对，并从中得到了疯狂的结果。它确实改变了游戏规则，现在我采用黑曜石的速度很慢，因为对我来说，它看起来有点令人畏惧。所以我有我的朋友 Vin，他清楚地解释了黑曜石是什么，你如何将它与 Claude 代码一起使用？如何设置这些命令，真正让克劳德和所有法学硕士发挥最大作用，这是一个令人难以置信的剧集，就像一个真正改变游戏规则的剧集，因为我认为那些了解如何使用黑曜石和如何一起使用克劳德代码的人他们将能够过上更快乐、更健康和更富裕的生活为什么因为它为你提供了令人难以置信的想法，所以我知道那些坚持到这一集结束的人我认为对于他们中的很多人来说这绝对会改变他们如何使用人工智能，这将是一种超级有影响力的方式，因为你会在正确的时间正确的时刻获得更好的想法，这会让你更快乐、更健康、更富有地享受这一集 - ---- - -## 段落 2 [01:21 → 04:26] - -我有我亲爱的朋友 Vin，在播客中也称为 Internet Vin。我真的恳求他上场，我恳求他，我恳求这个人上场，并在本播客节目结束时教我们一件非常具体的事情。人们要学什么？我希望您了解如何使用 Claude 代码和 Obsidian 作为思考伙伴 我希望您了解如何停止必须一遍又一遍地向代理解释事情并只传递特定文件，我希望您了解如何使用 Obsidian 和 Claude 代码来注意到您认为如果没有这些工具您自己不会注意到的事情，一切都可以从您的嘴唇传到上帝的耳朵。让我们开始吧 好吧，首先就像什么是克劳德代码 所以克劳德代码就像您可以在命令行界面中使用的代理一样。所以基本上你可以使用这个工具来控制你的计算机，你可以通过自然语言使用它所以我可以说创建一个文件或在我的桌面上创建一个文件，用纯文本说“你好格雷格”对，它会去执行此操作，这真的很酷。这是以前不可能实现的新功能，在此之前，我必须到桌面打开一些文本编辑器，然后创建该文件，现在该文件位于我的桌面上，所以我可以说打开该文件，我们开始吧。你好格雷格。现在这太疯狂了，有趣的是，如果你有一个可以在你的计算机上进行控制和做事的代理，这意味着无论你向它描述什么，它都可以开始做，所以当你向它描述一个项目时，或者你与代理进行长时间的对话时，嗯，它可以做越来越复杂的事情，它拥有的信息越多，它可以做的事情就越复杂。就像与这个代理就一个特定项目进行一个小时的对话就像我不想创建一个新会话来解释所有我不想一遍又一遍地一遍又一遍地解释嗯很多人都在网络上使用云或聊天GPT，它有内存之类的东西但是你不能喜欢控制你不知道内存里有什么，你不知道它知道什么和不知道什么所以需要有某种像你一样的方式知道将信息传递给这些代理会更容易、更快 你可以提供的信息越好，信息越快，你可以提供的信息就越多，如果它能为你做的事情就越多，你可以委托给它的东西就越好，越快 好吧，现在，即使我假设我像你知道的那样，假设我在这里写了一个大项目描述，对吧 创建一个文件来描述你知道一个项目 um - ---- - -## 段落 3 [04:29 → 17:06] - -关于呃待办事项列表应用程序，嗯，它的设计非常简单，可以从呃所有日历MI消息中读取，嗯，我的插槽和松弛和解释坐在任务列表中，它认为我应该做的任务我不知道一些想法所以现在这是一个可以在我的桌面上的文件当我使用云代码时我可以做的是我可以引用该文件并在我想要的时候传递它为什么这很重要是因为它是老游戏的上下文是的，是的，我不想一遍又一遍地这样做，当我在这几天里工作时，我不会记得像我们谈论过的那样，所以我想要某种我可以传递的文件，哦，对不起，格雷格，让我们说，是的，这就是很多人在使用云代码时面临的问题，就像他们正在使用它一样，然后他们说好吧，没关系。这不像是改变游戏规则，问题是他们没有，他们不是，他们没有在正确的时间提供正确的上下文，是的，所以这就是这样，这就像它写的一个项目描述，显然我可以将其传递进去，这就像一个这就像我刚刚创建的一般描述，但是你可以使它们变得非常复杂，你可以随着时间的推移将它们构建成强大的文件。所以我们知道云代码可以创建文件，它可以重复并且可以立即读取文件，所以现在我可以说，假设我创建了一个新会话。所以这是一个新的会议 现在我可以说我想从事这个项目，我去这里，这将是在这里做破折号。哦，现在我不需要再次解释该文件，我需要我不需要再次解释该项目，对吧，所以它将读取该文件，并且它将像“你知道，这为我节省了很多时间，这个伟大的项目节省了很多时间”，然后再深入研究几个问题来确定第一个会话的范围，所以这将继续。那么现在黑曜石是什么？右黑曜石是这个工具，它有点像位于 Markdown 文件集合之上的界面，所以这里就像这样读取 Markdown 文件。我如何使用黑曜石故事开发 对我有一个每日笔记 这是我的每日笔记。这也是一个 markdown 文件，我应该做我自己的基本分析，思考事物在成长并变得更加主流时如何保持纯粹对，这只是我拥有的一个文件，你知道就像 Greg Eisenberg 的文件一样，我没有把它放在一起，这很奇怪。是的，这很奇怪，所以我制作了一些文件，比如我从别人那里学到的东西的笔记以及类似的东西。所以我有不同的文件来处理所有正确的事情，有趣的是，黑曜石与这整个东西相互作用被称为保险库，它与文件夹的不同之处在于，黑曜石不仅与你知道的文件文件夹进行交互，而且它的作用是它还允许你建立相互连接文件之间的关系，所以我今天可以说。我在 Greg Eisenberg 的播客上，现在这个文件链接到了 Greg Eisenberg 文件 超级有趣 超级有趣，所以当人们喜欢像人们一样 有很多人真的很喜欢使用黑曜石和像黑曜石这样的工具，因为它具有形成相互关系的能力 这是独特的，只是在计算机上有一个文件夹无法显示这些相互关系 所以当你开始随着时间的推移不断制作这些相互关系时，它会变得非常有趣 对，所以什么这里发生了一些可视化，所以这里这些圆圈中的每一个都是一个文件，并且它显示了它如何连接到所有其他文件，无论在哪里写了东西，所以这里就像个人代理基础设施对，所以我可以看看你知道，我想我还应该对此添加一点评论，以及做这个演示的困难之处这里有很多个人信息，因为这就像我个人的事情所以我什至不知道要显示什么就在屏幕上，对吗？但这是做这样的演示的一部分，这有点奇怪和有趣，但你可以看到个人代理基础设施链接到代理人工智能。这里有一个电报链接 这里有一个给 Shopify 创始人 Toby 点赞的链接。 有一个类似存在日志爪形机器人的链接，你知道，然后就像我有一个播客也称为其他东西，就像你看到的那样，我显然做了很多类似的事情，思考得很好，所以我也可以假设我去格雷格·艾森伯格，我去本地图表。这就像我每次写关于格雷格·艾森伯格关于时间限制的正确笔记一样。我如何使用黑曜石，这很有趣 嗯，所以如果我正在听你的讲话并且我也爱你 如果我正在听一个节目并且我正在选择不同的模式我可以我可以将其引用回格雷格所以这真的很有趣，但这就是人们喜欢黑曜石的原因是因为这些相互关系你可以打开一个文件然后你知道，我刚刚打开这个文件然后我就像哦有趣我提到了格雷格艾森伯格 我可以单击它，它就会转到该文件。这很有趣，对吧？它表明它更适合它 它的工作方式更像你的大脑工作方式 你的大脑一直连接这些模式 这是一个问题。是的。是的，所以我明白为什么它很有趣但是这如何让我获得更好的输出呢？确切地。是的，接下来就是黑曜石发布这个名为黑曜石 CLI 的新工具，它允许您使用云代码，它可以读取黑曜石库中的所有文件，这是一个文本文件文件夹，但是使用黑曜石 CLI，它不仅可以为云代码提供它可以读取和访问的文件，还可以为云代码提供有关这些文件相互关系的信息，因此您可以看到，云代码可以看到该文件已连接到该文件这个文件和这个文件 就什么云代码可以理解你以及什么云代码可以理解你正在处理的事情之间的所有关系而言，这变得非常有趣它可以开始浮现出你正在思考的事情的模式，而你自己没有看到你可能已经在这个库中写了一年的一些想法它可能是一个潜在的想法，它可以立即说嘿你知道你一直在写同样的模式和初创公司或者在你正在处理的这个特定项目中吗你在这些不同领域所做的每一个注释，并且第一次看到它可以像一个巨大的灯泡效应，它可以导致巨大的进步，你正在学习，你正在理解你对世界的看法，还有你正在做的事情，嗯，所以我现在已经写了，我想演示它实际上是如何工作的，即如何将信息传递到代理中，如果没有黑曜石和云代码，这是不可能的所以这里有一些我使用的命令，但我不使用希望你害怕所有这些东西我知道这看起来很激烈但是嗯这里是嗯这是我有一些命令，这只是我创建的终端，我在黑曜石中运行它你不需要使用这个你也可以在你自己的终端会话中使用任何你想要的工具执行此操作但我把它放在黑曜石中因为我想一起看到它我想向你展示如何集成和自定义这个环境所以这是一个很酷的事情所以上下文斜线上下文加载关于我的生活工作的完整上下文在当前状态下读取上下文文件每日笔记并遵循反向链接来构建完整的图片所以我将在这里向您展示所以就像比方说我打开一个新会话在我的桌面上的云中现在就像我要开始做某事但是在我开始工作之前我可以输入上下文演示现在它将读取一大堆关于我当前完成情况的文件就像我已经预加载一样我现在已经在所有这些上下文中进行了预加载，因此您可以看到它将开始读取所有这些文件它正在读取自述文件它正在读取有关 new 的上下文，这是我正在工作的一家媒体公司它正在读取其他内容。它正在读取我的个人信息，其他内容是我的节目它正在读取个人工作流程上下文，因此我不必担心它不知道我想知道的关键信息我只是执行了一个命令，现在它将完成所有信息所以我今天可以使用斜杠，这是一个早间回顾，一个帖子日历任务 iMessages 在过去一周的日常笔记中进入当天的优先计划 为什么这很重要？ 好吧，当然你可以设置一个代理，并让它访问你的日历、你的任务、iMessages 和类似的东西，但遗憾的是，它没有关于你正在考虑的事情的所有信息，以及为什么如果我每天写一些我感兴趣的特定技术、项目或事物的笔记，我的日历是否会积极反映，就像它是否与我实际正在写的主题相匹配如果代理有这样的背景，你可以它可以更有效地为你提供有关你应该做什么或做什么的信息不做或它可以更有效地决定哪些内容应该在您的日历中或不在您的日历中这是另一个斜线关闭日如果日处理提取操作项目表面保险库连接检查置信标记需要更新所以我有一堆假设我考虑并给它们一个置信度评级这是我正在研究的一个想法我对此感觉非常可靠。这是我正在研究的另一个想法。我不确定。这些就像日常运营的事情，但这就是我最常使用黑曜石的东西，这是思考工具，我真的非常非常喜欢与法学硕士作为思考伙伴一起工作，这是我最喜欢使用法学硕士的方式，我知道人们喜欢使用代理和法学硕士来构建东西，但我真的很喜欢使用他们与我一起思考，当我觉得你知道的时候进行构建，我真的有一种新颖的看待事物的方式。所以让我们看看这里 所以幽灵 这是他的命令，让它按照我的方式回答问题 它从金库中构建一个语音配置文件，然后用该声音写入，然后评估保真度 所以我只能说我对人工智能的看法，我将向您展示这个挑战主题 使用金库自己的历史进行压力测试当前的信念 发现矛盾反证和思维转变 如果我想确保我作为一个人和作为一个人不断发展，为什么这很重要以我的技能，我想确保你知道我的观点过于偏见或有限，所以这可以挑战我出现金库暗示的表面想法，但从不从分散的前提、未命名的模式、未明确的方向得出结论，这是超级超级有用的，因为很多时候你知道我可能会被困在很多不同的方式中，比如多年来，只是有人对我说了一件简单的事情，只是说嘿，这只是命名这个想法嘿，你知道你一直在围绕这个转圈吗模式？巨大突破斜线漂移它将我陈述的注意力意图与 30 至 60 天内的实际行为进行比较。我在这个播客上避免的想法人们可能会喜欢这个具有跨域模式检测和图形分析功能的深度 30 天金库皮肤，以生成跨所有域的想法。这不仅给了我关于我应该做的类似事情的想法，就像它给了我关于工具和类似事情的想法，而且它也给了我关于类似电影的想法。我应该看产品。我应该再次购买受我在金库中写的类似事物影响的东西 - ---- - -## 段落 4 [17:10 → 17:23] - -Trace 追踪一个想法在整个金库中如何随着时间的推移而演变。让我们看看其中的一些内容 跟踪演示 所以我已经做了这个，它的工作方式是我就像在这里创建一个选项卡，我可以像云一样 - ---- - -## 段落 5 [17:25 → 22:25] - -Trace 和我必须创建所有这些命令的演示版本，因为我的保管库中有多少个人信息，但我什至不知道我什至无法控制屏幕上显示的内容，我有一个愚蠢的问题，就像我们看到的所有命令一样，这些命令是您创建的还是黑曜石创建的，这些是我创建的命令，您可以通过仅要求云代码创建特定命令来轻松创建它们我们可以包含在显示注释和描述中就像链接一样人们可以点击访问一些供应商呃技能如果是的话，当然是的，所以你可以在这里看到我所做的就是我刚刚输入了斜杠跟踪演示演示只是因为我公开展示了我如何使用黑曜石所以它的作用是跟踪我的我开发的方式以及我通过我的保险库导航这个想法的方式所以我这里有一个非常有趣的例子所以在这里我做了它，我和我让它运行，它正在做的就像它说的那样一切都追踪你与黑曜石的关系是如何演变的 让我开始构建一个词汇表并在保险库中进行搜索 所以当你有一个“喜欢”时，现在它开始通过保险库读取所有这些不同的文件 它可以看到使用黑曜石 CLI 连接的所有文件 这是很多人 这是我自己永远无法完成的事情 阅读所有这些文件以了解它们如何相互关联 这对于我作为一个人来说是不可能的 然后这是吐出来的。我现在拥有构建此跟踪所需的一切。这是完整的演变跟踪我如何使用黑曜石首次出现于 2025 年 1 月 11 日，时间跨度为 13 个月。这与这个金库有关，特别是指这里的所有文件。它说，2024年12月前的金库，我在多伦多西部做笔记的文章，日期为2024年12月1日，描述了一个完整的系统，其中黑曜石根本不起任何作用。该系统是通过mac Whisper的音频转储，LLM对话循环可以opio用于空间映射，用于认知摩擦的物理笔记本，融合土地，用于跟踪碎片的竞技场，管道是捕获过程结晶，这是基线黑曜石不在其中图片发现和怀疑 2025 年 1 月至 5 月 保险库中的第一个每日笔记 原始的兴奋与不确定性混合在一起 我可能也可以将转录放在这里作为存储它们的一种方式 当前的理论是，就定向链接做笔记而言并不是那么有用，但我不知道它说的是所选工具最初我是后环链接，它在这里说我如何使用黑曜石笔记关于反向链接的关键认识最初我是向后链接到一般术语播客或身体健康或电影制作我意识到这不是使用黑曜石的最有用的方法，最重要的事情是为我的每个模式理论项目或观点创建注释，并将它们记录在我的脑海中，然后链接到这些注释，所以这就像从我写过的东西中提取出来，它正在形成这个概念的历史，我可以用任何我能做到的东西来做到这一点，比如初创公司。我可以用一个特定的项目来做到这一点，我的关系就像一个爱好，一切都对，然后到 2026 年 1 月的第四阶段，一个月的爆炸性建筑一切仍然需要，然后就像一切仍然需要我积极提示和管理每个部分会话下一个解锁是弄清楚如何让代理任务按主题运行摩擦不再是黑曜石本身，而是金库和代理执行之间的边界所以你可以看到我真的在推动自己正确，这很酷。这对我来说是非常有用的事情，让我了解我对这个工具的使用是如何演变的，只是我认为我可以只是做笔记，然后关于我一生中所有这些不同的事情，就像作为父母一样，我可以反思我正在学习的不同事情，这是荒谬的。 我只是觉得这太疯狂了 一台计算机可以拥有这么多关于我的信息并呈现这些模式 我无法自己这么快地做到这一点 这对我来说是多么伟大的工具 就像我现在就在这里 而且我是你知道的，因为我正在思考事情，它给了我关于我的生活和我正在从事的项目的正确想法 所以我可以说你知道，我与黑曜石的关系随着时间的推移而演变的方式很有趣 这让我思考了很多关于 - ---- - -## 段落 6 [22:28 → 29:12] - -我与计算机的关系随着时间的推移而演变，从我还是个孩子的时候到现在，很有趣这些事情是如何发生并随着时间的推移而复合的我们并没有真正意识到它所以它就像一个音符，它是一个想法。所以这是一个例子所以我认为擅长黑曜石的一部分听起来就像反思你知道将反思插入你的日常生活中因为很多人你知道，我们正在从一个会议转移到另一个会议。我们很忙。我们是父母，你知道，我们长大了，当然我们会在笔记本上写下一些东西，但我觉得随着年龄的增长，我们实际上写和反思的东西越来越少。是的，你知道，你是如何将反思融入到你的生活中的？是的，我认为嗯，对我来说，这确实是有两个原因，我认为反思很有趣，做笔记很有趣，一是能够像我一样回顾它们真是太棒了，显然我现在可以使用代理但对我来说，回去看看这些笔记并意识到哦，就像我是一个不断改变我的技能的人，不断改变的项目不断发展，这只是一个使得它成为生活中令人惊奇的一部分，能够反思事物如何随着时间的推移而变化以及你如何随着时间的推移而变化以及世界如何随着时间的推移而变化但另一件事是，这也有一个功能性原因我喜欢做笔记的原因是因为当我坐在电脑上时，这就是我产生想法的方式，然后我把事情写下来。例如，这就是想法的来源。这件事我刚刚写在这里。这只是一个简短的说明，我只是实时进行。我现在只是在编造它，但是通过写出来，我觉得我把它更多地内化了，而且我喜欢有好的想法。我喜欢进步所以因为我喜欢有好的想法，我喜欢进步写作就是我这样做的方式所以我想你知道如果你想培养像写作一样的习惯我想首先你必须将它与这样的想法联系起来这就是你进步的方式这就是你产生想法的方式这就是你形成原始思维方式的另一件事我要说的是，现在写作是你将事情委托给代理的一种重要方式这就像一个全新的，这是它的一个全新的方面。因此，如果您可以养成写作习惯，您就有更多的背景信息可以传递给代理，这会大大增加您可以委派的类似事物的数量以及您可以构建的事物的数量，我希望这是一个很好的答案。这与张开的爪子有什么关系，因为如果你想到张开的爪子，它本质上是你在最好的情况下知道的你的延伸。是的，它可以去做你知道的事情，呃，根据你的指导独立削减。那么你如何才能和谐地使用黑曜石、张开爪和反射命令是的，所以我想如果你看一下这里是我执行的一个命令的示例，它就像一个计划命令嗯，所以我要求这个东西做什么，正如我所说的计划我说我可以在今天 2 月 20 日下午 2 点与 Greg Eisenberg 开会吗？是的，它的作用当然是你可以查看我的日历和类似的东西，但它也会查看我的每日笔记。它将审视我关心的事情，然后给我一些观点。所以它说你的一天已经堆积如山，你今天早上已经在格雷格的播客上录制，然后是团队午餐郊游并与彼得和文斯会面，你的 2 月 17 日笔记显示格雷格这一集已经成为最重要的内容，因为专门的格雷格·艾森伯格笔记不，不是两个，所以建议不是下午 2 点。但您可能根本不需要单独的会议 是的，这实际上是正确的答案。这与开放爪有什么关系 开放爪就像自主代理一样，如果您将其设置为那样做，它就可以做事情，而无需一直提示它，它可以自己做出决定并为您构建东西 嗯，现在开放爪可以做的事情与我刚刚执行此命令的方式相同，开放爪也可以自己做这件事 它可以去读取我的金库，找到连接，然后做出决定 代表我，对我有更深入的了解，现在而不是像管理代理或与另一个人谈论某件事的工作。 我只专注于管理这个保险库，这就像新的来源，我只是不断地尝试和制作它，以便这个保险库拥有所需的所有信息，这样我就可以委托给代理，嗯代理可以从这个保险库源中提取并做出决定，如果它没有做出正确的决定。我正在改变金库里的一些东西。我不一定专门与代理人合作，嗯，这是我对这个问题的猜测。我认为这很有趣 是的，我想呃，让我有点担心的一件事是，如果黑曜石真的是你的第二个大脑，给你的第二个大脑提供张开的爪子访问是可怕的，是的，我会说这是嗯基本嗯，我想说的是，这项技术的奇怪元素，我故意给了嗯黑曜石，我的意思是对不起云代码或任何代理访问大量信息。我是故意这样做的，因为我与此的关系是，我想了解这些东西是什么，我想了解它们揭示的内容，你知道我们与计算机的关系正在如何变化，但这很奇怪。就像你必须真正考虑你与这些代理分享了多少信息以及这是否是正确的决定而且我认为嗯，看看隐私作为一个概念如何演变和变化以及我们为之奋斗或不为之奋斗以及喜欢我们世界的未来，即使有这些命令中的每一个，这将是非常有趣的。我必须创建一个新版本的演示版本，这样当我在这个播客的屏幕上时我就不会透露太多的个人信息即使这样，这也像是一个难以抉择的事情。你知道，我可以输入演示版本但是谁知道屏幕上会显示什么，你知道 - ---- - -## 段落 7 [29:14 → 29:31] - -您还想显示哪些其他命令，嗯，所以有 Connect，这是允许的，它允许我使用两个域并使用保管库链接图连接它们，所以我只能说我在这里做了一个 - ---- - -## 段落 8 [29:33 → 35:09] - -我只是要求它呃连接电影制作和世界建设，所以它遍历并读取所有这些不同的文件然后它可以开始说好吧，让我们连接这两个概念所以电影制作中的笔记呃电影制作附近的笔记所以我就像35个电影观看列表我与托比的第一次会面笔记世界建筑附近嗯世界建设论文嗯作为一家媒体公司的新人。所以这些是我正在考虑的不同的事情所以在采访门户和构建的世界之间架起一座桥梁在电影制作中如果我注意到一些具体的东西并提出有关它的问题它将打开一个进入一个人的内部世界的门户，这个世界通常是一个由概念、信仰和愿景组成的广阔宇宙所以世界建设论文我希望我的博客向你展示我所看重的东西和我相信的东西我担心的就像古埃及的坟墓我希望我的博客成为一个在我去世后很长时间你可以挖掘和检查的地方这些是我写的东西我可以开始看到这些想法如何连接在一起 桥接始终在线纪录片等于持续的世界建设 始终在线纪录片是一种创意策略，公司通过纪录片不断叙述他们的角色追求冲突和愿景所以这些就像我正在写的东西，它向我展示了它们之间的联系方式嗯，我认为这会变得非常有趣，具体取决于你愿意连接在一起的事物类型你也可能会对此感到非常疯狂，这取决于你在金库中写的内容我可以像这样连接沙瓦玛和初创公司，如果我想要的话，看看这些东西之间的联系，再次，真的很有趣，因为所有这一切都发生得非常快，我不需要向电影解释任何这些，我只需输入一些东西，就像斜线连接电影制作世界建筑一样，你使用的很多例子都是个人反思。是的，你怎么想，呃，你知道，例如，不要参加会议，就像你有麦片或双子座笔记一样，你知道做笔记或将其放入黑曜石或嗯，顺便说一句，当我说笔记时，这些可能是你甚至没有参加的会议，他们可能就像你知道汤米会见了文斯，他们开了这个会议，我想把它放在这里。是的。嗯，你觉得怎么样？所以这是一个很好的问题所以我认为你可以使用这些保险库，但是你想使用它们，如果你想把格兰诺拉麦片会议记录放在这里，你可以把你想要的任何文本放在这里，你可以把它们放在这里，你必须确保你知道也许你正在做这样的事情，对吗？所以你就像开会一样，然后你就像好吧，这些是你知道的项目一，然后每次你开会时，嗯，你记下格兰诺拉麦片笔记，然后把它们放在这里，对吗？所以你就像会见 Greg Eisenberg Vin Plus Vin 然后你知道该文件现在已创建，你可以删除你的趋势，你可以将你的会议笔记放到这里现在它在保险库中，然后你可以将其传递给代理，否则代理会发现它，对吗？特别是如果你开始标记，比如我的播客或那里的东西现在它已连接所以现在它的代理有更多的上下文，现在它知道这个转录本与另一个文件相关的趋势很好嗯，我认为这取决于你我认为你在这里输入的信息量取决于你想要如何使用保管库以及你想要如何将事物委托给代理人也许你甚至想为不同的目的创建不同的保管库对我来说，我使用法学硕士和代理作为提高我对主题的理解水平的一种方式所以我用它进行很多反思和类似的事情所以我不希望代理写入文件就像我可以轻松地让它做到这一点就像我可以说即使在这里我也要求它写一些我今天可以谈论的命令的描述但我不，我不想我不希望它创建一个文件来执行此操作，因为我想控制我的所有文件黑曜石 因为我总是想从我对事物的看法中提取出来，而不是它对事物的看法，如果它开始在这个保险库中创建自己的文件那么我不知道就像当它找到这些模式时它是否找到了关于事物的模式？ 它是写出来的，还是在寻找我写过的东西的模式所以我为自己创建了一个规则，就像这些东西之间的严格分离一样，我只想在这里写一些东西，然后我会写出我认为应该包含的内容对是的，是的，继续。不，我只是想说，你知道，我可以看到将其用于你自己的思考的力量，我也可以看到你知道，一双眼睛真正擅长的力量，你知道，在互联网上寻找基于趋势和类似内容的信息，以你想要的方式提炼它，并将其放入你的世界也很有趣。是的，完全是的，我认为，如果你问黑曜石，如果你要求云代码浏览你的黑曜石文件并生成想法，你知道你应该构建好的工具的想法，那么你可以说好吧，酷如果那是如果我有一个我应该构建的工具的想法，只需生成一个描述，然后构建该工具，所以完全一样 - ---- - -## 段落 9 [35:12 → 50:03] - -是的，我想展示这个，就像上次的反思一样，就像你知道的，我是一个我构建了这个名为 idea browser.com 的东西，每一天我们都会给出这个经过验证的启动想法。是的，理论上有人可以去，你知道抓住这些信息，把它放在黑曜石金库中，然后基于此基本上，你知道帮助他们完全正确地构建实际的东西是的，所以我想向你展示这个，因为我认为它真的会成功，他们会将其从反射领域带入构建领域，但唯一的问题是这需要一点时间，所以这是对的。是的，所以另一件事是，对于所有这些命令，我注意到的另一种模式是它们需要一点时间，因为它正在读取如此多的文件，我想说，使用黑曜石和使用可访问此黑曜石库的云代码之间有很大区别，我注意到我的所有请求都花费了更长的时间，这只是因为它读取的内容太多，所以就像看看这个所以这是想法演示所以我将运行一个全面的想法一代。让我从并行收集金库结构和上下文开始然后如果你看看它在做什么真的很有趣所以它就像黑曜石孤儿是的，所以它就像我猜孤儿就像文件一样，它们自己没有连接到正确的事物所以这很有趣它知道黑曜石死胡同黑曜石解析了黑曜石标签计数所以它只是试图找出所有这些东西之间的某种联系嗯，然后它说好的每日阅读，所以它正在阅读我的每日笔记然后它发现了这个名为新上下文的文件，这是一家媒体公司正在制定的新文件然后它就像读取文件其他东西上下文那是播客我要对你们说的另一件事是我确实管理嗯，我写我为相当广泛的项目创建上下文文件。我会告诉你，我不知道我是否要展示这个，因为它非常个人化，但就像其他东西一样，看看其他东西的工作环境最近发生了什么变化，通过前往旧金山纽约市记录客人来前端加载配置文件。这是超级个人的东西但是其他东西是什么节目研究的格式核心信念是坚实的基础最好的对话感觉就像发现坚实你知道，这是正在研究它的团队，所以发生的事情这又是非常个人的，但这是它刚刚引入的背景，所以现在它知道谁在我的播客上工作最近的假设假设是什么？我正在探索嗯，它刚刚得到了这些信息。这就像个人工作流程上下文超级个人文件中的其中一件事一样，但它显示了，嗯，你知道，呃，我的每日日程安排是什么样的，你知道我在个人生活中必须做的事情，所以这就像拉动我喜欢如何工作，我不喜欢如何工作，个人代理基础设施是另一回事。让我们看看如果我把它拉出来会发生什么 这是一个项目，我想在其中采取一步来增加我的个人基础设施工作流程委托 但是您想要用代理来描述它，了解越来越多地委托给代理意味着什么 实施方法 所以这就像我正在写的 关于我如何考虑个人使用代理的文件 再说一遍，这是其中一个文件的示例。正在读书。这只是其中之一，所以您像其他东西一样看到了个人工作流程，并且将所有这些都考虑到了此任务中。 我要求它做的事情是为我产生想法从你的日常笔记日历和保险库结构中收集数据这需要一些时间，因为它再次从多个来源提取其中之一是它只是通过大量信息，大量信息，所以需要更长的时间你知道，它已经持续了五分钟好吧，这就是我注意到的事情，但对我来说，这就是我想要的，我想要我想要我想要的回应法学硕士与我所写的内容非常相关，我想了很多，我认为这就是我和代理人能够最好地合作的方式，我只是专注于不断注意到我目前在我正在从事的项目方面的情况以及我的理解是什么以及我发现有趣的东西我想保持这一点并使其尽可能最新和尽可能深入所以每当我与代理人交谈时，它始终能够最好地代表我在那个时刻的身份是的，这就是你的目标，这是我们所有人都应该问自己的问题，是的，代理人是否拥有关于我的偏好、我的梦想、我的希望和我的目标的项目的最新信息，因为你的它只与正确的最新版本一样好？是的，代理拥有的信息的质量100%完全决定了它能为你做什么，如果它对你了解不多，它就不能为你做很多事情，但如果它了解很多，那么它可以为你做一些事情，我认为甚至你的一些人在某些方面说起来有点奇怪，但我的意思是，你甚至不了解自己，我的意思是这是有道理的，因为最终这就像蒸馏一样它的核心。是的，黑曜石中的城市和云代码正在将这些点连接起来。现在，作为企业主或个人，在我们的个人生活中，将这些点连接起来实际上是相当困难的，比如为什么人们会以多种方式去找治疗师。是的，如果你去看治疗师，你知道你有一个人在做大部分的谈话，想一想，你做了很多反思，治疗师和教练在某种程度上指导你，这就是它在很多方面所做的事情，我并不是说不要去找你的治疗师，你知道，但我是，但我的观点是它可以帮助你帮助你发现它们是什么以及你如何将它们联系起来是的，绝对对我来说，是的，这真的很令人兴奋，是的，这只是计算机的疯狂时代所以让我们看看这件事完成了。这是一份创意生成报告 Vault 关系探索。所以这是相当密集的，就像得到一份想法报告一样，我认为这真的会展示我们如何让你从反思转向可操作的结构亮点。再说一次，这只是黑曜石的东西，值得注意的是，这里有一些国防技术的东西，只是加拿大正在增长的一个主题，大量的智力投资也孤立地存在，孤立的代理软件所以孤立只是意味着这些是文件。我还没有真正链接随机笔记。我刚刚写过一次或一些东西 嗯未解决的链接，揭示了潜在的兴趣 隐藏的关系再次所有反射的东西都很好 什么是工作黑曜石云代码是一个组合系统正在为我工​​作这正在产生真正的突破、思考和输出 每个域结构的日在森林中。 这基本上是我开始分割我的日程安排，每天都有一个特定的焦点这很酷，这是非常真实的格雷格·艾森伯格情节作为一个强制功能它将几个月的关于黑曜石和代理的思考压缩成一个清晰的论文，并带有非常真实的演示你知道参加节目并这样做迫使我综合我所知道和呈现的一切但这就是我们将要构建的可操作的东西工具斜线毕业生斜线命令基于每日笔记的每日笔记想法提取器是充满想法 对不起，每日笔记充满了想法标签和永远不会开发的有趣想法 保险库有九个想法标签，但数百个未被发现的见解构建了一个命令，扫描最近的每日笔记 识别标记或未标记的想法并提示您决定 创建一个独立的笔记 添加到现有文件或关闭 这将每日笔记流变成结构化的想法管道 黑曜石保险库为新 它说我只需要为新的黑曜石保险库管理和设置 这意味着与我创建此保险库保险库的方式相同它有我所有的想法和模式以及类似的一切，为什么我不为我的团队创建一个呢？作为一个团队，我们可以在他们喜欢的地方向这个库提出问题，我们都可以为其做出贡献。这里我们开始使用工具来开始使用所有外部文档的这种类型是什么？有趣的时间封锁行为，强制执行一天一个时间封锁应用程序，强制执行每个域的一天意味着因为我每天都在努力专注于我生活的一个方面的一件事，这就是说为什么不创建一个时间封锁应用程序，迫使你这样做有趣的系统来实施黑曜石特工处理逮捕的一句话。这实际上是 Greg Eisenberg Eisenberg 准备的演示三版本，你已经在想象它了，下一步是实际构建它，从小处开始，在每日笔记中安排与人就本周主题进行通话，并让 Otis 或 Claude 机器人或张开爪子拿起它并处理它，所以这就是说，也许你可以从笔记本身进行委派，这就是我解释超级有趣的方式是的，只是排队委派，就像这甚至就像一个新的 UX 模式。我什至不知道你是否可以构建像这些不同的工具主题来研究克里斯托弗·亚历山大的模式语言应用于数字空间有趣黑山学院作为体育场的模型体育场是我们在多伦多无作者媒体作为一个概念的物理空间深圳的硬件生态系统实际上如何工作来编写和发布这将是有用的上下文架构文章计算机作为一个地方软件书籍将成为时尚多伦多理论实际上是编辑思维杂志与这不是你的对话这些都是真实的人亚伦体育场研讨会主持人关于成为技术编程的锚 这是一个我们多伦多没有的空间，用来破坏另一种人的程序，关于制作旗舰系列的程序 Steph Ango 黑曜石 CEO 关于金库作为一个地方 所以这就像是的，这太疯狂了。它建议我应该会见的前五名高影响力的人现在就建立毕业生指挥部或每周进行手动创意审查，嗯，这太疯狂了。这实际上很疯狂，事实上它是纯文本的，只是不是没有图像，这并不容易阅读，但我有点喜欢它，因为它就像便装，你知道我的意思吗？是的，我的意思是我喜欢这种审美，因为我是一个书呆子，但你可以只是说你知道你可以你可以说显然你可以只是说你能把它变成我桌面上一个漂亮的可读 HTML 文件吗？这很难读，而且它会做到这一点，所以我的意思是，如果你不这样做，那就说明如果你不喜欢那样，就按照你想要的方式去做，你知道我的意思吗？ 我喜欢这样的审美 但是是的，这就是你如何摆脱反思，当然，你知道，当然我们也可以像这里这样说你知道如果我们不想这样做我们也可以说它推荐了斜杠毕业生命令所以我只能说构建斜杠毕业生命令嗯嗯对，这很有趣，这就是你如何开始构建很多像这样的命令它开始建议你就像只是去构建它好我开始实际上就像我自己构建它们一样，哦，尝试自己思考命令，但是，是的，我说我开始问代理，等一下，你认为哪些命令会有趣，公正，这可能有用，我想做的另一件事是，当我使用一点法学硕士时，我喜欢转向更高层次的抽象，我的意思是我可以说，哦，做一个命令，告诉我每天应该关注什么，这就像一个命令但当我想到的另一件事是你可以退后一步，我可以说基于我的黑曜石金库和你对我的了解形成对你认为我的理解水平的理解，就像你认为我的技能水平是在一个人和我正在从事的项目方面，并基于此建议命令的种类。我应该使用它，将我从该级别提升到更高级别，就像您知道的那样，让它为我建议命令，而不是我建议命令，我可以在它们之间进行选择。所以看看这个。这就是这，这是代理的想法 基于它在我的保险库中读到的内容，基于我正确记录的笔记，所以让我们看看这是什么每日笔记想法提取器 想法见解和原始思维在细节和每日笔记中积累，但很少会发展成独立的笔记，它们可以通过反向链接复合 此命令扫描最近的每日笔记，显示最佳候选者，并帮助决定将其推广为一个想法或正确的东西 所以这就是它的工作方式 它扫描它交叉的所有最近的每日笔记与现有保险库的参考，它为候选人提供了如果创建一个新的独立笔记，则在保险库路线中创建笔记，将笔记写成一篇小型文章或工作文档，从其起源的日常笔记中捕获核心主张或问题上下文，现在与其他保险库笔记的连接作为反向链接，所有这些东西都像它捕获核心主张或问题一样，你可能会看到这个并认为好吧。这只是代理生成的文本，但它对我来说也有不同的影响，因为我知道我正在写很多关于这些事情的文章。我知道我知道就像迷你论文一样，这些词对我来说意味着特定的事情，这太疯狂了。这是非常上下文化的，我知道它在说什么，因为我花了很多时间在这个工具上，而且我花了很多时间写作，所以是的，我创建了，它将创建该命令 - ---- - -## 段落 10 [50:05 → 50:34] - -是的，这太疯狂了，因为我只是要做笔记，我有一个并行代理，它正在查看我的笔记并给我想法，以及我如何证明我的工作流程并证明我的生活然后它不仅可以建议它只是构建这个东西而且它已经完成了，我们在这里斜杠毕业生。我可以点击它它会疯狂地运行如果我是开放人工智能或人类我会购买黑曜石 - ---- - -## 段落 11 [50:37 → 50:54] - -正确，因为这是缺失的环节。是的，太疯狂了。顺便说一下，这是一个缺失的环节，事实上有像你这样的人已经向我推销了这一点。我已经下载了黑曜石。我认为这是一个免费工具，对吗？是的，它是开源的，我已经下载了它，但我还没有 - ---- - -## 段落 12 [50:57 → 53:27] - -造成我的错误是因为我想要你，我知道这会很棒。我知道我会经历这个，这实际上超出了我的预期，就像这样的事实，就像它没有意义，没有意义，如果你是，如果你认真使用它，如果你认真使用它来吸收你的想法，并充分利用它们，如果你认真对待构建，你知道人们所说的个人操作系统呃，并且你没有使用像这样的集中式笔记工具。是的，使用markdown作为基础那么你没有正确使用llm。是的，或者至少没有达到极限 是的，是的，完全正确。你没有充分利用它。是的，你没有充分利用它所以我认为这件事的困难之处在于它需要它确实需要很多时间而要真正正确地设置它需要呃，就像是的，我的意思是它需要很多时间并且并且UI是并且是如此令人畏惧，因为它是一个空白画布而且它不是像嘿，你应该喜欢在这里写下你的偏好，或者你知道，你必须想出这些想法你们自己。是的，但这仍然很神奇，对吧？因为我的意思是，即使当我们与其他人一起工作时，我们也必须找到一种方法来向他们解释事情，我只是觉得这太酷了，现在我们可以与这些代理一起工作，我们仍然需要向他们解释事情，但我们只需要解释一次，因为一旦我们将其记录到文件中，我们总是可以引用该文件，对项目或偏好或任何东西的解释，它总是在那里，你可以将它传递进去，是的，文件就像本质上完美的完美记忆。是的，对吗？人类有记忆，就像我们回忆事物一样。是的，但是有大量的研究表明，我们所记得的事实与现实完全不同，例如，当我们去佐贺夫人那里理发时，我本可以认为我的发型是最好的，你知道，这就是我的记忆所记得的。有一个很棒的发型，但谁知道这可能是我现在剪过的最糟糕的发型 - ---- - -## 段落 13 [53:30 → 58:56] - -黑曜石或任何你最终使用的工具，比如房间，你知道，如果我写了是的，就像内存一样，Markdown 文件是完美的，所以当我链接它或我回忆起它时，它会给我一个完美的数据点，你知道这些文件的另一件事是你希望它们没有偏见，基本上人类在编写反射方面存在偏见。是的，在那一刻。是的，这太疯狂了，是的，这太疯狂了，而且有所有这些不同的方面。这是它的隐私性以及这意味着什么 它的力量在于，现在你可以用自然语言使用这些计算机，然后将其委托给它们 事实上，像我这样的人正在使用这些工具，并试图找出如何以这种方式将东西委托给代理 有像我这样的人以不同的方式更加核心，并推动他们 我只是认为这是一个如此疯狂的时代，因为我认为我们可能正在观察一个根本性的转变人类与计算机的关系 我真的很高兴能在这一切发生的时候还活着 我很好奇这一切将如何解开？嗯，这很酷的是 99.99 9% 的人不会花时间去实际建立这样的东西并使其成为他们日常生活的一部分，可以说，阿尔法是在带领一个更有生产力、更快乐、更健康、更好、更多赚钱的职业方面，在于与法学硕士一起使用这样的东西。我想是的，我并不是说今天要下载城市，我与他们没有任何隶属关系或其他什么，但我是说，选择一个听起来像是我们都应该做的事情，我是说我给自己这个建议就像我没有理由不写下来并将“是”反映到降价文件中。是的，法学硕士使用 Markdown 文件就是氧气。是的，就像人们认为代币是氧气一样。是的，但它们不是 是的，markdown 火焰是像思考人类是什么的记忆 是的，你知道是人类 人类的能量还是它的记忆，你知道我们被称为什么，你知道我的意思是，这就像一个哲学问题，也许两者都有一点，但它是你知道的，我认为 MD 文件有一些非常令人着迷的东西，因为为了拥有一台真正的计算机，它们被低估了经验和当今时代。是的，这里肯定发生了一些根本性的转变，是的，这太棒了。是的，就像我的工作很糟糕一样，你知道，我正在实时学习，对吧？就像我，我什至没有正确的词汇来解释这一点，是的，我也没有，我也没有，我正在努力，我正在尝试实时弄清楚，这就是为什么我认为我知道我展示了一些东西，对我来说，我会做一些事情，或者我会看到一些东西，我的朋友们就像他们有点笑，因为我只是坐在我的电脑前，只是绊倒了，我想这是因为我真的很喜欢电脑，我不敢相信这是可能的。我不敢相信我可以像小时候一样在计算机上做笔记然后突然间这个代理可以扫描它并因此构建东西并且就像我永远看不到的连接模式这太疯狂了。这很疯狂，从根本上来说，你是对的。它只是相互关联的 Markdown 文件的集合。是的，很酷的人。我很欣赏你。我不知道你是否能看到我的想法，但我现在的想法很混乱。感谢上帝，是的，我想对你做正确的事。我也喜欢每次都这么说，但我会一直对你这么说。我真的真的真的真的很感谢你所做的一切，我认为你的模式识别和模式匹配真的被低估了。我认为你做了很多事情。我认为如果你没有真正注意的话，这并不难看出，我只是想说谢谢你所做的一切，你总是在节目中发出新的声音。我看到了。我真的很感激，认识你我很荣幸，是的，谢谢你给我这个机会。谢谢你所做的一切，我感谢你，本，你的传奇。 我将在节目笔记和描述中包含在他的 youtube 节目播客上跟踪互联网货车下的犯罪链接，您可以去看看他，人们请使用其中一些工具，让我知道您的想法，请让 Vinn 知道您的想法，然后我会恳求您回到节目中，我希望您再次回来，伙计。谢谢。谢谢你 - ---- diff --git a/Hermes/yunzhi/技术笔记/django-tenants 完整配置指南.md b/Hermes/yunzhi/技术笔记/django-tenants 完整配置指南.md index d5238316..192cacb9 100644 --- a/Hermes/yunzhi/技术笔记/django-tenants 完整配置指南.md +++ b/Hermes/yunzhi/技术笔记/django-tenants 完整配置指南.md @@ -1,222 +1,222 @@ ---- -title: django-tenants 完整配置指南 -created: 2026-04-21 -tags: [django, django-tenants, postgresql, saas, multi-tenant] -category: 技术笔记 ---- - -# django-tenants 完整配置指南 - -## 一、安装依赖 - -pip install django-tenants psycopg2-binary django-jazzmin - -## 二、项目目录结构 - -myproject/ -├── config/ -│ ├── settings/ -│ │ ├── base.py -│ │ ├── development.py -│ │ └── production.py -│ ├── urls.py -│ └── wsgi.py -├── apps/ -│ ├── tenants/ -│ ├── subscription/ -│ ├── accounts/ -│ ├── listings/ -│ ├── clients/ -│ └── showings/ -├── manage.py -└── requirements.txt - -## 三、核心 Model：租户与域名 - -- Company 继承 TenantMixin -- Domain 继承 DomainMixin -- 每一个中介公司 = 一个租户 = 一个独立 PostgreSQL Schema -- 每个公司可绑定多个域名/子域名 - -## 四、Settings 完整配置 - -关键点： -- SHARED_APPS 放公共 Schema 应用 -- TENANT_APPS 放租户私有应用 -- TENANT_MODEL = "tenants.Company" -- TENANT_DOMAIN_MODEL = "tenants.Domain" -- DATABASES 使用 django_tenants.postgresql_backend -- DATABASE_ROUTERS 使用 TenantSyncRouter -- TenantMainMiddleware 必须第一个 -- ROOT_URLCONF / PUBLIC_SCHEMA_URLCONF 分离 -- AUTH_USER_MODEL = accounts.User - -## 五、URL 路由拆分 - -- config/urls_public.py：公共域名、官网、注册、登录、超级管理后台 -- config/urls_tenant.py：租户子域名、租户后台、房源/客源/带看/员工模块 - -## 六、自定义 User Model（跨租户关键） - -- User 继承 AbstractUser -- role 支持平台超管、公司管理员、门店经理、资深经纪人、经纪人、实习经纪人 -- Branch 作为门店模型 - -## 七、初始化与常用命令 - -- createdb realestate_saas -- python manage.py migrate_schemas --shared -- python manage.py createsuperuser -- python manage.py shell 创建 Company 与 Domain - -示例： -- schema_name = zuoan -- domain = zuoan.localhost -- 访问 http://zuoan.localhost:8000/admin/ 进入专属后台 - -## 八、本地开发配置（hosts 文件） - -- 127.0.0.1 localhost -- 127.0.0.1 zuoan.localhost -- 127.0.0.1 lianhe.localhost -- 127.0.0.1 xincheng.localhost - -开发环境要点： -- ALLOWED_HOSTS 包含 .localhost -- 本地不用 HTTPS - -## 九、数据隔离验证 - -使用 schema_context 切换 schema，验证 Listing 等数据互相隔离。 - -## 下一步建议 - -推荐顺序： -1. 先做房源/客源/带看完整数据模型 -2. 再做 Django Admin 深度定制（Jazzmin 主题） -3. 最后补三级权限体系（总部/门店/经纪人） - - ---- - -# 上海房产中介 SaaS 系统规划 - -## 一、多租户架构选型 - -Django 多租户有三种主流方案，针对这个场景推荐独立 Schema 方案，也就是基于 PostgreSQL Schema 隔离的 django-tenants。 - -| 方案 | 原理 | 优点 | 缺点 | 适用场景 | -|---|---|---|---|---| -| 共享 Schema | 每张表加 tenant_id 字段 | 简单，运维成本低 | 数据隔离风险高 | 小规模、低安全需求 | -| 独立 Schema | PostgreSQL Schema 隔离 | 隔离好，性能佳 | 稍复杂 | 中介 SaaS，推荐 | -| 独立数据库 | 每租户独立 DB | 最高隔离 | 运维成本极高 | 超高安全需求 | - -推荐使用 django-tenants： - -pip install django-tenants - -## 二、整体系统模块规划 - -SaaS 平台层： -- 租户注册 -- 套餐管理 -- 计费 -- 超级后台 - -各中介公司 Tenant： -- 房源管理 -- 客源管理 -- 员工 / 权限管理 -- 带看管理 -- 合同管理 -- 报表 / BI 看板 -- 渠道推广 -- 财务佣金 -- 消息 / 通知中心 - -核心 Django App 拆分： -- tenants：租户管理（公共 Schema） -- accounts：用户 / 员工 / 角色权限 -- listings：房源管理（核心） -- clients：客源 / 客户跟进 -- showings：带看记录 -- contracts：合同管理 -- commissions：佣金 / 财务 -- reports：数据报表 -- notifications：消息通知 -- subscription：套餐订阅（公共 Schema） - -## 三、房源模块数据模型（核心） - -Listing 关键字段包括： -- 基础信息：title、listing_type、status -- 上海地址结构：district、street、community、building、floor、unit -- 房屋属性：area、inner_area、layout、orientation、decoration、floor_total -- 价格：price、price_unit -- 归属：agent、source、exclusive -- 证件：certificate_no -- 时间：created_at、updated_at - -## 四、技术栈推荐 - -后端： -- Django 5.x + DRF -- django-tenants -- django-guardian -- celery + redis -- django-filter -- PostgreSQL 15+ - -前端路径： -- 路径 A：Django Admin + 定制，最快上手，适合 MVP -- 路径 B：HTMX + Alpine.js + Tailwind，推荐中期方案 -- 路径 C：Vue3 / React + DRF，长期推荐 - -建议：先 A，再 B，最后 C。 - -## 五、租户路由设计 - -通过子域名区分租户： -- company-a.yourapp.com -- company-b.yourapp.com -- admin.yourapp.com - -核心设置： -- TENANT_MODEL = "tenants.Company" -- TENANT_DOMAIN_MODEL = "tenants.Domain" -- SHARED_APPS 放公共应用 -- TENANT_APPS 放租户私有应用 - -## 六、开发阶段规划 - -Phase 1（1-2 月）MVP： -- 租户注册 / 登录 -- 房源 CRUD + 图片上传 -- 客源基础管理 -- Django Admin 后台 - -Phase 2（2-3 月）核心业务： -- 带看流程 -- 合同模板 + 生成 -- 员工角色权限 -- 基础报表 - -Phase 3（3-4 月）增长功能： -- 佣金结算 -- 渠道推广（链家 / 安居客对接） -- 微信小程序端 -- BI 数据看板 - -Phase 4 商业化： -- 套餐 / 计费系统 -- 多城市扩展 - -## 七、优先推进建议 - -如果要最快落地，建议优先顺序： -1. django-tenants 完整配置 -2. 房源 / 客源 / 带看数据模型 -3. Django Admin 深度定制 -4. 权限系统设计 -5. 前端升级到 HTMX 或 Vue - +--- +title: django-tenants 完整配置指南 +created: 2026-04-21 +tags: [django, django-tenants, postgresql, saas, multi-tenant] +category: 技术笔记 +--- + +# django-tenants 完整配置指南 + +## 一、安装依赖 + +pip install django-tenants psycopg2-binary django-jazzmin + +## 二、项目目录结构 + +myproject/ +├── config/ +│ ├── settings/ +│ │ ├── base.py +│ │ ├── development.py +│ │ └── production.py +│ ├── urls.py +│ └── wsgi.py +├── apps/ +│ ├── tenants/ +│ ├── subscription/ +│ ├── accounts/ +│ ├── listings/ +│ ├── clients/ +│ └── showings/ +├── manage.py +└── requirements.txt + +## 三、核心 Model：租户与域名 + +- Company 继承 TenantMixin +- Domain 继承 DomainMixin +- 每一个中介公司 = 一个租户 = 一个独立 PostgreSQL Schema +- 每个公司可绑定多个域名/子域名 + +## 四、Settings 完整配置 + +关键点： +- SHARED_APPS 放公共 Schema 应用 +- TENANT_APPS 放租户私有应用 +- TENANT_MODEL = "tenants.Company" +- TENANT_DOMAIN_MODEL = "tenants.Domain" +- DATABASES 使用 django_tenants.postgresql_backend +- DATABASE_ROUTERS 使用 TenantSyncRouter +- TenantMainMiddleware 必须第一个 +- ROOT_URLCONF / PUBLIC_SCHEMA_URLCONF 分离 +- AUTH_USER_MODEL = accounts.User + +## 五、URL 路由拆分 + +- config/urls_public.py：公共域名、官网、注册、登录、超级管理后台 +- config/urls_tenant.py：租户子域名、租户后台、房源/客源/带看/员工模块 + +## 六、自定义 User Model（跨租户关键） + +- User 继承 AbstractUser +- role 支持平台超管、公司管理员、门店经理、资深经纪人、经纪人、实习经纪人 +- Branch 作为门店模型 + +## 七、初始化与常用命令 + +- createdb realestate_saas +- python manage.py migrate_schemas --shared +- python manage.py createsuperuser +- python manage.py shell 创建 Company 与 Domain + +示例： +- schema_name = zuoan +- domain = zuoan.localhost +- 访问 http://zuoan.localhost:8000/admin/ 进入专属后台 + +## 八、本地开发配置（hosts 文件） + +- 127.0.0.1 localhost +- 127.0.0.1 zuoan.localhost +- 127.0.0.1 lianhe.localhost +- 127.0.0.1 xincheng.localhost + +开发环境要点： +- ALLOWED_HOSTS 包含 .localhost +- 本地不用 HTTPS + +## 九、数据隔离验证 + +使用 schema_context 切换 schema，验证 Listing 等数据互相隔离。 + +## 下一步建议 + +推荐顺序： +1. 先做房源/客源/带看完整数据模型 +2. 再做 Django Admin 深度定制（Jazzmin 主题） +3. 最后补三级权限体系（总部/门店/经纪人） + + +--- + +# 上海房产中介 SaaS 系统规划 + +## 一、多租户架构选型 + +Django 多租户有三种主流方案，针对这个场景推荐独立 Schema 方案，也就是基于 PostgreSQL Schema 隔离的 django-tenants。 + +| 方案 | 原理 | 优点 | 缺点 | 适用场景 | +|---|---|---|---|---| +| 共享 Schema | 每张表加 tenant_id 字段 | 简单，运维成本低 | 数据隔离风险高 | 小规模、低安全需求 | +| 独立 Schema | PostgreSQL Schema 隔离 | 隔离好，性能佳 | 稍复杂 | 中介 SaaS，推荐 | +| 独立数据库 | 每租户独立 DB | 最高隔离 | 运维成本极高 | 超高安全需求 | + +推荐使用 django-tenants： + +pip install django-tenants + +## 二、整体系统模块规划 + +SaaS 平台层： +- 租户注册 +- 套餐管理 +- 计费 +- 超级后台 + +各中介公司 Tenant： +- 房源管理 +- 客源管理 +- 员工 / 权限管理 +- 带看管理 +- 合同管理 +- 报表 / BI 看板 +- 渠道推广 +- 财务佣金 +- 消息 / 通知中心 + +核心 Django App 拆分： +- tenants：租户管理（公共 Schema） +- accounts：用户 / 员工 / 角色权限 +- listings：房源管理（核心） +- clients：客源 / 客户跟进 +- showings：带看记录 +- contracts：合同管理 +- commissions：佣金 / 财务 +- reports：数据报表 +- notifications：消息通知 +- subscription：套餐订阅（公共 Schema） + +## 三、房源模块数据模型（核心） + +Listing 关键字段包括： +- 基础信息：title、listing_type、status +- 上海地址结构：district、street、community、building、floor、unit +- 房屋属性：area、inner_area、layout、orientation、decoration、floor_total +- 价格：price、price_unit +- 归属：agent、source、exclusive +- 证件：certificate_no +- 时间：created_at、updated_at + +## 四、技术栈推荐 + +后端： +- Django 5.x + DRF +- django-tenants +- django-guardian +- celery + redis +- django-filter +- PostgreSQL 15+ + +前端路径： +- 路径 A：Django Admin + 定制，最快上手，适合 MVP +- 路径 B：HTMX + Alpine.js + Tailwind，推荐中期方案 +- 路径 C：Vue3 / React + DRF，长期推荐 + +建议：先 A，再 B，最后 C。 + +## 五、租户路由设计 + +通过子域名区分租户： +- company-a.yourapp.com +- company-b.yourapp.com +- admin.yourapp.com + +核心设置： +- TENANT_MODEL = "tenants.Company" +- TENANT_DOMAIN_MODEL = "tenants.Domain" +- SHARED_APPS 放公共应用 +- TENANT_APPS 放租户私有应用 + +## 六、开发阶段规划 + +Phase 1（1-2 月）MVP： +- 租户注册 / 登录 +- 房源 CRUD + 图片上传 +- 客源基础管理 +- Django Admin 后台 + +Phase 2（2-3 月）核心业务： +- 带看流程 +- 合同模板 + 生成 +- 员工角色权限 +- 基础报表 + +Phase 3（3-4 月）增长功能： +- 佣金结算 +- 渠道推广（链家 / 安居客对接） +- 微信小程序端 +- BI 数据看板 + +Phase 4 商业化： +- 套餐 / 计费系统 +- 多城市扩展 + +## 七、优先推进建议 + +如果要最快落地，建议优先顺序： +1. django-tenants 完整配置 +2. 房源 / 客源 / 带看数据模型 +3. Django Admin 深度定制 +4. 权限系统设计 +5. 前端升级到 HTMX 或 Vue + diff --git a/Hermes/yunzhi/技术笔记/django-tenants 完整配置指南.md.bak.2026-04-21-184051 b/Hermes/yunzhi/技术笔记/django-tenants 完整配置指南.md.bak.2026-04-21-184051 deleted file mode 100644 index a951db71..00000000 --- a/Hermes/yunzhi/技术笔记/django-tenants 完整配置指南.md.bak.2026-04-21-184051 +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: django-tenants 完整配置指南 -created: 2026-04-21 -tags: [django, django-tenants, postgresql, saas, multi-tenant] -category: 技术笔记 ---- - -# django-tenants 完整配置指南 - -## 一、安装依赖 - -pip install django-tenants psycopg2-binary django-jazzmin - -## 二、项目目录结构 - -myproject/ -├── config/ -│ ├── settings/ -│ │ ├── base.py -│ │ ├── development.py -│ │ └── production.py -│ ├── urls.py -│ └── wsgi.py -├── apps/ -│ ├── tenants/ -│ ├── subscription/ -│ ├── accounts/ -│ ├── listings/ -│ ├── clients/ -│ └── showings/ -├── manage.py -└── requirements.txt - -## 三、核心 Model：租户与域名 - -- Company 继承 TenantMixin -- Domain 继承 DomainMixin -- 每一个中介公司 = 一个租户 = 一个独立 PostgreSQL Schema -- 每个公司可绑定多个域名/子域名 - -## 四、Settings 完整配置 - -关键点： -- SHARED_APPS 放公共 Schema 应用 -- TENANT_APPS 放租户私有应用 -- TENANT_MODEL = "tenants.Company" -- TENANT_DOMAIN_MODEL = "tenants.Domain" -- DATABASES 使用 django_tenants.postgresql_backend -- DATABASE_ROUTERS 使用 TenantSyncRouter -- TenantMainMiddleware 必须第一个 -- ROOT_URLCONF / PUBLIC_SCHEMA_URLCONF 分离 -- AUTH_USER_MODEL = accounts.User - -## 五、URL 路由拆分 - -- config/urls_public.py：公共域名、官网、注册、登录、超级管理后台 -- config/urls_tenant.py：租户子域名、租户后台、房源/客源/带看/员工模块 - -## 六、自定义 User Model（跨租户关键） - -- User 继承 AbstractUser -- role 支持平台超管、公司管理员、门店经理、资深经纪人、经纪人、实习经纪人 -- Branch 作为门店模型 - -## 七、初始化与常用命令 - -- createdb realestate_saas -- python manage.py migrate_schemas --shared -- python manage.py createsuperuser -- python manage.py shell 创建 Company 与 Domain - -示例： -- schema_name = zuoan -- domain = zuoan.localhost -- 访问 http://zuoan.localhost:8000/admin/ 进入专属后台 - -## 八、本地开发配置（hosts 文件） - -- 127.0.0.1 localhost -- 127.0.0.1 zuoan.localhost -- 127.0.0.1 lianhe.localhost -- 127.0.0.1 xincheng.localhost - -开发环境要点： -- ALLOWED_HOSTS 包含 .localhost -- 本地不用 HTTPS - -## 九、数据隔离验证 - -使用 schema_context 切换 schema，验证 Listing 等数据互相隔离。 - -## 下一步建议 - -推荐顺序： -1. 先做房源/客源/带看完整数据模型 -2. 再做 Django Admin 深度定制（Jazzmin 主题） -3. 最后补三级权限体系（总部/门店/经纪人） - diff --git a/Hermes/yunzhi/CUE+WAV分割与高质量MP3转换.md b/knowledgebase/CUE+WAV分割与高质量MP3转换.md similarity index 100% rename from Hermes/yunzhi/CUE+WAV分割与高质量MP3转换.md rename to knowledgebase/CUE+WAV分割与高质量MP3转换.md