[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-Michaelliv--pi-generative-ui":3,"tool-Michaelliv--pi-generative-ui":64},[4,17,27,35,43,56],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":16},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,3,"2026-04-05T11:01:52",[13,14,15],"开发框架","图像","Agent","ready",{"id":18,"name":19,"github_repo":20,"description_zh":21,"stars":22,"difficulty_score":23,"last_commit_at":24,"category_tags":25,"status":16},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",138956,2,"2026-04-05T11:33:21",[13,15,26],"语言模型",{"id":28,"name":29,"github_repo":30,"description_zh":31,"stars":32,"difficulty_score":23,"last_commit_at":33,"category_tags":34,"status":16},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",107662,"2026-04-03T11:11:01",[13,14,15],{"id":36,"name":37,"github_repo":38,"description_zh":39,"stars":40,"difficulty_score":23,"last_commit_at":41,"category_tags":42,"status":16},3704,"NextChat","ChatGPTNextWeb\u002FNextChat","NextChat 是一款轻量且极速的 AI 助手，旨在为用户提供流畅、跨平台的大模型交互体验。它完美解决了用户在多设备间切换时难以保持对话连续性，以及面对众多 AI 模型不知如何统一管理的痛点。无论是日常办公、学习辅助还是创意激发，NextChat 都能让用户随时随地通过网页、iOS、Android、Windows、MacOS 或 Linux 端无缝接入智能服务。\n\n这款工具非常适合普通用户、学生、职场人士以及需要私有化部署的企业团队使用。对于开发者而言，它也提供了便捷的自托管方案，支持一键部署到 Vercel 或 Zeabur 等平台。\n\nNextChat 的核心亮点在于其广泛的模型兼容性，原生支持 Claude、DeepSeek、GPT-4 及 Gemini Pro 等主流大模型，让用户在一个界面即可自由切换不同 AI 能力。此外，它还率先支持 MCP（Model Context Protocol）协议，增强了上下文处理能力。针对企业用户，NextChat 提供专业版解决方案，具备品牌定制、细粒度权限控制、内部知识库整合及安全审计等功能，满足公司对数据隐私和个性化管理的高标准要求。",87618,"2026-04-05T07:20:52",[13,26],{"id":44,"name":45,"github_repo":46,"description_zh":47,"stars":48,"difficulty_score":23,"last_commit_at":49,"category_tags":50,"status":16},2268,"ML-For-Beginners","microsoft\u002FML-For-Beginners","ML-For-Beginners 是由微软推出的一套系统化机器学习入门课程，旨在帮助零基础用户轻松掌握经典机器学习知识。这套课程将学习路径规划为 12 周，包含 26 节精炼课程和 52 道配套测验，内容涵盖从基础概念到实际应用的完整流程，有效解决了初学者面对庞大知识体系时无从下手、缺乏结构化指导的痛点。\n\n无论是希望转型的开发者、需要补充算法背景的研究人员，还是对人工智能充满好奇的普通爱好者，都能从中受益。课程不仅提供了清晰的理论讲解，还强调动手实践，让用户在循序渐进中建立扎实的技能基础。其独特的亮点在于强大的多语言支持，通过自动化机制提供了包括简体中文在内的 50 多种语言版本，极大地降低了全球不同背景用户的学习门槛。此外，项目采用开源协作模式，社区活跃且内容持续更新，确保学习者能获取前沿且准确的技术资讯。如果你正寻找一条清晰、友好且专业的机器学习入门之路，ML-For-Beginners 将是理想的起点。",84991,"2026-04-05T10:45:23",[14,51,52,53,15,54,26,13,55],"数据工具","视频","插件","其他","音频",{"id":57,"name":58,"github_repo":59,"description_zh":60,"stars":61,"difficulty_score":10,"last_commit_at":62,"category_tags":63,"status":16},3128,"ragflow","infiniflow\u002Fragflow","RAGFlow 是一款领先的开源检索增强生成（RAG）引擎，旨在为大语言模型构建更精准、可靠的上下文层。它巧妙地将前沿的 RAG 技术与智能体（Agent）能力相结合，不仅支持从各类文档中高效提取知识，还能让模型基于这些知识进行逻辑推理和任务执行。\n\n在大模型应用中，幻觉问题和知识滞后是常见痛点。RAGFlow 通过深度解析复杂文档结构（如表格、图表及混合排版），显著提升了信息检索的准确度，从而有效减少模型“胡编乱造”的现象，确保回答既有据可依又具备时效性。其内置的智能体机制更进一步，使系统不仅能回答问题，还能自主规划步骤解决复杂问题。\n\n这款工具特别适合开发者、企业技术团队以及 AI 研究人员使用。无论是希望快速搭建私有知识库问答系统，还是致力于探索大模型在垂直领域落地的创新者，都能从中受益。RAGFlow 提供了可视化的工作流编排界面和灵活的 API 接口，既降低了非算法背景用户的上手门槛，也满足了专业开发者对系统深度定制的需求。作为基于 Apache 2.0 协议开源的项目，它正成为连接通用大模型与行业专有知识之间的重要桥梁。",77062,"2026-04-04T04:44:48",[15,14,13,26,54],{"id":65,"github_repo":66,"name":67,"description_en":68,"description_zh":69,"ai_summary_zh":69,"readme_en":70,"readme_zh":71,"quickstart_zh":72,"use_case_zh":73,"hero_image_url":74,"owner_login":75,"owner_name":76,"owner_avatar_url":77,"owner_bio":78,"owner_company":79,"owner_location":80,"owner_email":79,"owner_twitter":81,"owner_website":82,"owner_url":83,"languages":84,"stars":89,"forks":90,"last_commit_at":91,"license":79,"difficulty_score":92,"env_os":93,"env_gpu":94,"env_ram":94,"env_deps":95,"category_tags":102,"github_topics":79,"view_count":23,"oss_zip_url":79,"oss_zip_packed_at":79,"status":16,"created_at":103,"updated_at":104,"faqs":105,"releases":106},3953,"Michaelliv\u002Fpi-generative-ui","pi-generative-ui","Claude.ai's generative UI — reverse-engineered, rebuilt for pi. Interactive HTML\u002FSVG widgets in native macOS windows.","pi-generative-ui 是一款专为 macOS 设计的开源扩展，它让 AI 助手 pi 能够像 Claude.ai 一样，直接生成并运行可交互的 HTML\u002FSVG 可视化组件。当你向 pi 提问“演示复利如何运作”或“绘制变压器架构”时，它不再仅返回文字描述或静态代码，而是实时流式渲染出一个包含滑块、动态图表和动画的原生窗口应用。\n\n这一工具解决了传统 AI 交互中可视化能力缺失的痛点，将抽象的数据和逻辑转化为直观、可操作的界面，极大提升了信息传达的效率与体验。它特别适合开发者、数据分析师及教育工作者使用，帮助他们在本地快速原型验证、教学演示或数据探索。\n\n其核心技术亮点在于完美复刻了 Claude 的生成式 UI 机制：通过提取并复用 Anthropic 官方的高质量设计规范（涵盖排版、色彩及图表配置等），结合 morphdom 技术实现 DOM 的平滑增量更新，确保内容随 AI 生成逐字呈现且流畅自然。此外，它利用 WKWebView 提供完整的浏览器能力，并支持双向数据通信，让用户能与生成的界面进行实时互动。只需简单安装，即可让 pi 具备强大的原生可视化能力。","# pi-generative-ui\n\nClaude.ai's generative UI - reverse-engineered, rebuilt for [pi](https:\u002F\u002Fgithub.com\u002Fbadlogic\u002Fpi-mono).\n\nAsk pi to \"show me how compound interest works\" and get a live interactive widget - sliders, charts, animations - rendered in a native macOS window. Not a screenshot. Not a code block. A real HTML application with JavaScript, streaming live as the LLM generates it.\n\n\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FMichaelliv_pi-generative-ui_readme_a0fa1a876c70.gif\" width=\"32%\"> \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FMichaelliv_pi-generative-ui_readme_4bc948f2b385.gif\" width=\"32%\"> \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FMichaelliv_pi-generative-ui_readme_9060060484b8.gif\" width=\"32%\">\n\n## How it works\n\nOn claude.ai, when you ask Claude to visualize something, it calls a tool called `show_widget` that renders HTML inline in the conversation. The HTML streams live - you see cards, charts, and sliders appear as tokens arrive.\n\nThis extension replicates that system for pi:\n\n1. **LLM calls `visualize_read_me`** - loads design guidelines (lazy, only the relevant modules)\n2. **LLM calls `show_widget`** - generates an HTML fragment as a tool call parameter\n3. **Extension intercepts the stream** - opens a native macOS window via [Glimpse](https:\u002F\u002Fgithub.com\u002Fhazat\u002Fglimpse) and feeds partial HTML as tokens arrive\n4. **[morphdom](https:\u002F\u002Fgithub.com\u002Fpatrick-steele-idem\u002Fmorphdom) diffs the DOM** - new elements fade in smoothly, unchanged elements stay untouched\n5. **Scripts execute on completion** - Chart.js, D3, Three.js, anything from CDN\n\nThe widget window has full browser capabilities (WKWebView) and a bidirectional bridge - `window.glimpse.send(data)` sends data back to the agent.\n\n## Install\n\n```bash\npi install git:github.com\u002FMichaelliv\u002Fpi-generative-ui\n```\n\n> macOS only. Requires Swift toolchain (ships with Xcode or Xcode Command Line Tools).\n\n## Usage\n\nJust ask pi to visualize things. The extension adds two tools that the LLM calls automatically:\n\n- **\"Show me how compound interest works\"** → interactive explainer with sliders and Chart.js\n- **\"Visualize the architecture of a transformer\"** → SVG diagram with labeled components  \n- **\"Create a dashboard for this data\"** → metric cards, charts, tables\n- **\"Draw a particle system\"** → Canvas animation\n\nThe LLM decides when to use widgets vs text based on the request. Explanatory\u002Fvisual requests trigger widgets; code\u002Ftext requests stay in the terminal.\n\n## What's inside\n\n### The guidelines - extracted from Claude\n\nThe design guidelines aren't hand-written. They're **extracted verbatim from claude.ai**.\n\nHere's the trick: you can export any claude.ai conversation as JSON. The export includes full tool call payloads - including the complete `read_me` tool results containing Anthropic's actual design system. 72K of production rules covering typography, color palettes, streaming-safe CSS patterns, Chart.js configuration, SVG diagram engineering, and more.\n\nWe triggered `read_me` with each module combination, exported the conversation, parsed the JSON, split the responses into deduplicated sections, and verified byte-level accuracy against the originals. The result: our LLM gets the exact same instructions Claude gets on claude.ai.\n\nFive modules, loaded on demand:\n\n| Module | Size | What it covers |\n|---|---|---|\n| `interactive` | 19KB | Sliders, metric cards, live calculations |\n| `chart` | 22KB | Chart.js setup, custom legends, number formatting |\n| `mockup` | 19KB | UI component tokens, cards, forms, skeleton loading |\n| `art` | 17KB | SVG illustration, Canvas animation, creative patterns |\n| `diagram` | 59KB | Flowcharts, architecture diagrams, SVG arrow systems |\n\n### Streaming architecture\n\nThe extension intercepts pi's streaming events (`toolcall_start` \u002F `toolcall_delta` \u002F `toolcall_end`) to render the widget live as tokens arrive:\n\n```\ntoolcall_start    → initialize streaming state\ntoolcall_delta    → debounce 150ms, open window, morphdom diff\ntoolcall_end      → final diff + execute \u003Cscript> tags\nexecute()         → reuse window, wait for interaction or close\n```\n\nKey details:\n- **Shell HTML + JS eval** - window opens with an empty shell; content injected via `win.send()`, not `setHTML()`, to avoid full-page flashes\n- **morphdom DOM diffing** - only changed nodes update; new nodes get a 0.3s fade-in animation\n- **pi-ai's `parseStreamingJson`** - no need for a partial JSON parser; pi already provides parsed `arguments` on every delta\n- **150ms debounce** - batches rapid token updates for smooth visual rendering\n- **Dark mode by default** - `#1a1a1a` background, designed for macOS WKWebView\n\n### Glimpse\n\n[Glimpse](https:\u002F\u002Fgithub.com\u002Fhazat\u002Fglimpse) is a native macOS micro-UI library. It opens a WKWebView window in under 50ms via a tiny Swift binary. No Electron, no browser tab, no runtime dependencies beyond the system WebKit.\n\nThe Swift source compiles automatically on `npm install` via `postinstall`.\n\n## Project structure\n\n```\npi-generative-ui\u002F\n├── .pi\u002Fextensions\u002Fgenerative-ui\u002F\n│   ├── index.ts              # Extension: tools, streaming, Glimpse integration\n│   ├── guidelines.ts         # 72K of verbatim claude.ai design guidelines\n│   └── claude-guidelines\u002F    # Raw extracted markdown (reference)\n│       ├── art.md\n│       ├── chart.md\n│       ├── diagram.md\n│       ├── interactive.md\n│       ├── mockup.md\n│       └── sections\u002F         # Deduplicated sections\n└── package.json              # pi-package manifest\n```\n\n## How the guidelines were extracted\n\n1. Start a conversation on claude.ai that triggers `show_widget`\n2. Call `read_me` with each module combination (`art`, `chart`, `diagram`, `interactive`, `mockup`)\n3. Export the conversation as JSON from claude.ai settings\n4. Parse the JSON - every `tool_result` for `visualize:read_me` contains the complete guidelines\n5. Split each response at `##` heading boundaries\n6. Deduplicate shared sections (e.g., \"Color palette\" appears in chart, mockup, interactive, diagram)\n7. Verify reconstruction matches the originals (4\u002F5 exact, 1 has a single whitespace char difference)\n\nThe raw `read_me` responses are preserved in [`claude-guidelines\u002F`](.pi\u002Fextensions\u002Fgenerative-ui\u002Fclaude-guidelines\u002F) - the original markdown exactly as claude.ai returned it, before splitting and deduplication. The conversation export JSON is not included in this repo.\n\n## Credits\n\n- [pi](https:\u002F\u002Fgithub.com\u002Fbadlogic\u002Fpi-mono) - the extensible coding agent that makes this possible\n- [Glimpse](https:\u002F\u002Fgithub.com\u002Fhazat\u002Fglimpse) - native macOS WKWebView windows\n- [morphdom](https:\u002F\u002Fgithub.com\u002Fpatrick-steele-idem\u002Fmorphdom) - DOM diffing for smooth streaming\n- Anthropic - for building the generative UI system we reverse-engineered\n\n## License\n\nMIT\n","# pi-生成式-ui\n\nClaude.ai 的生成式 UI——经过逆向工程后，为 [pi](https:\u002F\u002Fgithub.com\u002Fbadlogic\u002Fpi-mono) 重新构建。\n\n只需让 pi 回答“给我展示复利是如何工作的”，你就能获得一个实时交互式组件：滑块、图表、动画——全部渲染在一个原生 macOS 窗口中。这不是截图，也不是代码块，而是一个真正的 HTML 应用程序，带有 JavaScript，并随着 LLM 的生成过程实时流式传输。\n\n\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FMichaelliv_pi-generative-ui_readme_a0fa1a876c70.gif\" width=\"32%\"> \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FMichaelliv_pi-generative-ui_readme_4bc948f2b385.gif\" width=\"32%\"> \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FMichaelliv_pi-generative-ui_readme_9060060484b8.gif\" width=\"32%\">\n\n## 工作原理\n\n在 claude.ai 上，当你请求 Claude 展示某种可视化内容时，它会调用一个名为 `show_widget` 的工具，在对话中内联渲染 HTML。这些 HTML 是实时流式的——随着 token 不断到达，你会看到卡片、图表和滑块逐渐出现。\n\n这个扩展为 pi 复现了同样的系统：\n\n1. **LLM 调用 `visualize_read_me`** —— 加载设计指南（惰性加载，仅加载相关模块）\n2. **LLM 调用 `show_widget`** —— 作为工具调用参数生成一个 HTML 片段\n3. **扩展拦截流式数据** —— 通过 [Glimpse](https:\u002F\u002Fgithub.com\u002Fhazat\u002Fglimpse) 打开一个原生 macOS 窗口，并在 token 到达时逐步注入部分 HTML\n4. **[morphdom](https:\u002F\u002Fgithub.com\u002Fpatrick-steele-idem\u002Fmorphdom) 对 DOM 进行差异比较** —— 新元素平滑淡入，未变化的元素保持不变\n5. **脚本在完成时执行** —— Chart.js、D3、Three.js，以及任何来自 CDN 的库\n\n该组件窗口具备完整的浏览器功能（WKWebView），并提供双向桥接——`window.glimpse.send(data)` 可将数据回传给代理。\n\n## 安装\n\n```bash\npi install git:github.com\u002FMichaelliv\u002Fpi-generative-ui\n```\n\n> 仅适用于 macOS。需要 Swift 工具链（随 Xcode 或 Xcode 命令行工具一起提供）。\n\n## 使用方法\n\n只需让 pi 来进行可视化即可。该扩展添加了两个工具，LLM 会自动调用它们：\n\n- **“给我展示复利是如何工作的”** → 带有滑块和 Chart.js 的交互式解释器\n- **“可视化 Transformer 的架构”** → 带有标注组件的 SVG 图\n- **“为这些数据创建仪表盘”** → 指标卡片、图表、表格\n- **“绘制粒子系统”** → Canvas 动画\n\nLLM 会根据请求的内容决定是使用小部件还是纯文本。解释性或视觉相关的请求会触发小部件；而代码或文本类请求则会保留在终端中。\n\n## 内部构成\n\n### 指南——直接从 Claude 提取\n\n这些设计指南并非手写而成，而是**完全照搬自 claude.ai**。\n\n诀窍在于：你可以将任意 claude.ai 对话导出为 JSON 格式。导出文件包含了完整的工具调用负载——包括 Anthropic 实际设计系统的完整 `read_me` 工具结果。总计 72KB 的生产级规则，涵盖了排版、颜色方案、适合流式的 CSS 模式、Chart.js 配置、SVG 图解设计等。\n\n我们针对每种模块组合触发了 `read_me`，导出了对话，解析了 JSON，将响应拆分为去重后的部分，并与原始内容进行了字节级验证。最终结果是：我们的 LLM 获得了与 Claude 在 claude.ai 上完全相同的指令。\n\n五个按需加载的模块：\n\n| 模块       | 大小   | 涵盖内容                     |\n|------------|--------|------------------------------|\n| `interactive` | 19KB | 滑块、指标卡片、实时计算     |\n| `chart`    | 22KB | Chart.js 设置、自定义图例、数字格式化 |\n| `mockup`   | 19KB | UI 组件样式、卡片、表单、骨架加载 |\n| `art`      | 17KB | SVG 插画、Canvas 动画、创意图案 |\n| `diagram`  | 59KB | 流程图、架构图、SVG 箭头系统 |\n\n### 流式架构\n\n该扩展会拦截 pi 的流式事件（`toolcall_start` \u002F `toolcall_delta` \u002F `toolcall_end`），以便在 token 到达时实时渲染小部件：\n\n```\ntoolcall_start    → 初始化流式状态\ntoolcall_delta    → 延迟 150ms，打开窗口，使用 morphdom 进行差异比较\ntoolcall_end      → 最终差异比较 + 执行 \u003Cscript> 标签\nexecute()         → 重复使用窗口，等待交互或关闭\n```\n\n关键细节：\n- **Shell HTML + JS eval** —— 窗口以空壳打开；内容通过 `win.send()` 注入，而非 `setHTML()`，以避免全页闪烁\n- **morphdom DOM 差异比较** —— 只有发生变化的节点才会更新；新节点会有一个 0.3 秒的淡入动画\n- **pi-ai 的 `parseStreamingJson`** —— 无需部分 JSON 解析器；pi 已经在每个 delta 中提供了解析好的 `arguments`\n- **150ms 延迟** —— 将快速到达的 token 更新批量处理，以实现流畅的视觉呈现\n- **默认深色模式** —— 背景为 `#1a1a1a`，专为 macOS WKWebView 设计\n\n### Glimpse\n\n[Glimpse](https:\u002F\u002Fgithub.com\u002Fhazat\u002Fglimpse) 是一个原生 macOS 微型 UI 库。它通过一个小型 Swift 二进制文件，在不到 50 毫秒内打开一个 WKWebView 窗口。无需 Electron、浏览器标签页，也不依赖系统 WebKit 之外的运行时环境。\n\nSwift 源代码会在执行 `npm install` 时，通过 `postinstall` 自动编译。\n\n## 项目结构\n\n```\npi-generative-ui\u002F\n├── .pi\u002Fextensions\u002Fgenerative-ui\u002F\n│   ├── index.ts              # 扩展：工具、流式处理、Glimpse 集成\n│   ├── guidelines.ts         # 72KB 的 claude.ai 设计指南原文\n│   └── claude-guidelines\u002F    # 原始提取的 Markdown（参考）\n│       ├── art.md\n│       ├── chart.md\n│       ├── diagram.md\n│       ├── interactive.md\n│       ├── mockup.md\n│       └── sections\u002F         # 去重后的部分\n└── package.json              # pi 包清单\n```\n\n## 指南的提取过程\n\n1. 在 claude.ai 上开始一次触发 `show_widget` 的对话\n2. 分别对每个模块组合（`art`、`chart`、`diagram`、`interactive`、`mockup`）调用 `read_me`\n3. 从 claude.ai 设置中将对话导出为 JSON\n4. 解析 JSON——每个 `tool_result` for `visualize:read_me` 都包含完整的指南\n5. 按照 `##` 标题分隔线拆分每条响应\n6. 去除重复的部分（例如，“颜色方案”同时出现在 chart、mockup、interactive 和 diagram 中）\n7. 验证重构内容是否与原文一致（4\u002F5 完全一致，1 个仅有一个空格字符的差异）\n\n原始的 `read_me` 响应被保存在 [`claude-guidelines\u002F`](.pi\u002Fextensions\u002Fgenerative-ui\u002Fclaude-guidelines\u002F) 文件夹中——即 claude.ai 返回的原始 Markdown，在拆分和去重之前的样子。此仓库不包含对话导出的 JSON 文件。\n\n## 致谢\n\n- [pi](https:\u002F\u002Fgithub.com\u002Fbadlogic\u002Fpi-mono) —— 这一可扩展的编码代理使这一切成为可能\n- [Glimpse](https:\u002F\u002Fgithub.com\u002Fhazat\u002Fglimpse) —— 原生 macOS 的 WKWebView 窗口\n- [morphdom](https:\u002F\u002Fgithub.com\u002Fpatrick-steele-idem\u002Fmorphdom) —— 用于平滑流式的 DOM 差异比较\n- Anthropic —— 构建了我们所逆向工程的生成式 UI 系统\n\n## 许可证\n\nMIT","# pi-generative-ui 快速上手指南\n\n`pi-generative-ui` 是一个为 [pi](https:\u002F\u002Fgithub.com\u002Fbadlogic\u002Fpi-mono) 智能体打造的生成式 UI 扩展。它复刻了 Claude.ai 的原生交互体验，让 pi 能够直接在你的 macOS 桌面上渲染出可交互的 HTML 应用（如滑块、图表、动画），而非仅仅输出代码块或文本截图。\n\n## 环境准备\n\n在开始之前，请确保你的开发环境满足以下要求：\n\n*   **操作系统**：仅限 **macOS**。\n*   **核心依赖**：必须安装 **Swift 工具链**。\n    *   如果你已安装完整版的 **Xcode**，则默认包含。\n    *   如果未安装 Xcode，可通过终端安装轻量级的 **Xcode Command Line Tools**：\n        ```bash\n        xcode-select --install\n        ```\n*   **前置软件**：确保已安装并配置好 `pi` 智能体框架。\n\n## 安装步骤\n\n使用 `pi` 包管理器直接从 GitHub 安装该扩展。安装过程中会自动编译所需的 Swift 二进制文件（基于 [Glimpse](https:\u002F\u002Fgithub.com\u002Fhazat\u002Fglimpse) 库）。\n\n```bash\npi install git:github.com\u002FMichaelliv\u002Fpi-generative-ui\n```\n\n> **注意**：首次安装时，系统可能会提示确认 Swift 编译操作，请耐心等待编译完成。\n\n## 基本使用\n\n安装完成后无需额外配置。你只需像平常一样与 `pi` 对话，当请求涉及可视化或交互内容时，扩展会自动拦截并调用原生窗口进行渲染。\n\n### 使用示例\n\n直接在终端向 `pi` 发送以下类型的指令：\n\n**1. 交互式原理解析**\n```text\nshow me how compound interest works\n```\n*效果*：弹出一个原生窗口，展示带有滑块的复利计算器，拖动滑块可实时看到 Chart.js 绘制的曲线变化。\n\n**2. 架构可视化**\n```text\nVisualize the architecture of a transformer\n```\n*效果*：生成一个带有标注组件的 SVG 架构图，支持缩放和悬停交互。\n\n**3. 数据仪表盘**\n```text\nCreate a dashboard for this data\n```\n*效果*：渲染包含指标卡片、动态图表和数据表格的完整仪表盘界面。\n\n**4. 创意动画**\n```text\nDraw a particle system\n```\n*效果*：在窗口中运行基于 Canvas 的粒子系统动画。\n\n### 工作原理简述\n*   **自动触发**：LLM 会根据你的请求意图，自动决定是输出文本还是调用 `show_widget` 工具生成界面。\n*   **流式渲染**：界面随着 Token 的生成实时“流”入窗口，新元素会以淡入动画平滑出现。\n*   **双向交互**：生成的界面是全功能的浏览器环境（WKWebView），支持执行 JavaScript，并可通过 `window.glimpse.send(data)` 将用户交互数据回传给智能体。","一位数据分析师正在向非技术背景的管理层汇报“复利效应”对长期投资的影响，需要直观展示不同利率和时间下的资产变化。\n\n### 没有 pi-generative-ui 时\n- 只能生成静态代码块或文字描述，管理者无法直接看到动态变化，理解门槛高。\n- 若需交互图表，必须手动编写完整的 HTML\u002FJS 文件并在浏览器打开，打断沟通节奏。\n- 修改参数（如调整利率）需重新生成代码并刷新页面，无法实时反馈，演示过程僵硬。\n- 终端输出的纯文本或截图缺乏视觉冲击力，难以生动传达数据背后的趋势。\n\n### 使用 pi-generative-ui 后\n- 直接请求“展示复利如何运作”，pi-generative-ui 即刻在原生 macOS 窗口中渲染出带滑块的交互式 Chart.js 图表。\n- 无需离开对话界面，拖动滑块即可实时观察本金随时间和利率变化的动画曲线，沟通流畅自然。\n- 底层自动流式传输 HTML 片段并利用 morphdom 平滑更新 DOM，新元素淡入效果专业，无闪烁感。\n- 内置从 Claude.ai 提取的生产级设计规范，确保生成的卡片、配色和排版具备商业级美观度。\n\npi-generative-ui 将抽象的数据逻辑转化为可即时操作的原生交互应用，让技术解释变得直观且富有感染力。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FMichaelliv_pi-generative-ui_f9497c93.png","Michaelliv","Michael","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002FMichaelliv_67165b0c.png","Deep in the agentic stack. michaellivs.com",null,"Israel","micLivs","https:\u002F\u002Fmichaellivs.com","https:\u002F\u002Fgithub.com\u002FMichaelliv",[85],{"name":86,"color":87,"percentage":88},"TypeScript","#3178c6",100,875,53,"2026-04-05T08:01:59",4,"macOS","未说明",{"notes":96,"python":94,"dependencies":97},"仅限 macOS 系统运行。必须安装 Swift 工具链（随 Xcode 或 Xcode 命令行工具提供），因为项目依赖原生的 Glimpse 库来创建 WKWebView 窗口。该工具是 pi 编码助手的扩展，通过 npm 安装时会自动编译 Swift 源码。无需额外配置 GPU 或特定 Python 版本，核心功能依赖于系统自带的 WebKit 框架。",[98,99,100,101],"pi-mono","Glimpse (Swift)","morphdom","Xcode Command Line Tools",[26,15,53],"2026-03-27T02:49:30.150509","2026-04-06T05:36:23.545464",[],[107],{"id":108,"version":109,"summary_zh":110,"released_at":111},108490,"v0.2.1","## 修复：SVG 图表以正确颜色渲染\n\n此前，使用预构建 CSS 类（`c-blue`、`c-teal`、`c-purple` 等）的 SVG 图表会显示为纯黑色方框，原因是 WKWebView 中没有定义这些类的样式表。\n\n### 新增内容\n- 向 WKWebView 注入一个完整的样式表，涵盖：\n  - 颜色渐变类（`c-blue`、`c-teal`、`c-purple`、`c-coral`、`c-pink`、`c-gray`、`c-green`、`c-amber`、`c-red`）\n  - 文本类（`t`、`ts`、`th`）\n  - 工具类（`box`、`node`、`arr`、`leader`）\n  - CSS 变量（`--p`、`--s`、`--t`、`--color-text-*`、`--color-background-*` 等）\n  - 预样式化的表单元素（按钮、输入框、滑块）\n\n### 升级\n```bash\npi install git:github.com\u002FMichaelliv\u002Fpi-generative-ui\n```\n\n修复 #2","2026-03-15T19:14:44"]