YOHO AI

标签： 生成式UI

  • Open Design：开源版 Claude Design，把你的编码智能体变成设计引擎

    Open Design：开源版 Claude Design，把你的编码智能体变成设计引擎

    ⭐ 79.6K Stars  ·  Apache-2.0  ·  TypeScript  ·  本地优先桌面应用

    项目简介

    Open Design 是 Anthropic Claude Design 的开源替代方案——一个本地优先（local-first）的桌面应用，让你的 Claude Code / Codex / Cursor / Gemini 等编码智能体直接化身”设计引擎”，生成网页、桌面、移动端原型、实时仪表盘、演示文稿、图片与视频，并导出为 HTML / PDF / PPTX / MP4 真实文件。

    Open Design 工作台

    安装要求与过程

    环境要求

    • 桌面应用：macOS（Apple Silicon / Intel x64）、Windows（x64）、Linux（AppImage）——无需 Node / pnpm / 克隆仓库。
    • 自托管：Docker + Docker Compose；源码运行需 Node 24、pnpm 10.33.x。
    • 编码智能体：Claude Code、Codex、Cursor、Copilot、OpenClaw、Gemini、Hermes、Kimi、Trae、OpenCode 等 25+ 本地 CLI，或任意 OpenAI 兼容端点（BYOK）。

    快速安装

    1. 下载桌面应用（推荐，零配置）：前往官网或 GitHub Releases 下载对应平台安装包；安装后自动检测 PATH 上的编码智能体，加载 100+ 功能技能、渲染模板目录与 151 套设计系统。
    2. 装进编码智能体（无界面）：od mcp install <agent>（<agent> = claude | codex | cursor | copilot | gemini | hermes | kimi | trae | opencode …）；或用托管脚本 curl -fsSL https://open-design.ai/install.sh | sh -s <agent>。
    3. Docker 自托管： 
      git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
cp .env.example .env
echo "OD_API_TOKEN=$(openssl rand -hex 32)" >> .env
docker compose up -d
# 打开 http://localhost:7456
    4. 源码运行： 
      git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

    核心功能

    内置 151 套品牌级设计系统

    1. 智能体原生、模型无关：不绑定任何厂商 Agent，你 PATH 上已有的 claude / codex / cursor / copilot / hermes / kimi 就是设计引擎，一键切换；一条 od mcp install <agent> 把 MCP 服务器接入 25+ 编码智能体。
    2. 品牌级 DESIGN.md 设计系统：每一帧渲染都读取当前包的 DESIGN.md 作为品牌契约；仓库内置 151 套品牌级设计系统（Claude、Stripe、Figma、Apple、NVIDIA…），丢进文件夹即被识别。
    3. 多形态产物，单一项目：Studio 支持原型（web / desktop / mobile 单页）、实时仪表盘 / artifact、演示文稿（deck）、图片、视频与 HyperFrames 动态图形，统一导出 HTML / PDF / PPTX / MP4。
    4. 四层可组合：插件（可运行工作流）+ 功能技能（Agent 行为）+ 设计模板（渲染蓝图）+ 设计系统（品牌），全部用可移植、可版本化的目录，任何人都能创作与发布；官方 277 个插件 + 183 个可复用示例。
    5. 本地优先 + BYOK 隐私：原生桌面应用（macOS / Windows）+ Docker + Vercel；所有数据在你本机、团队服务器或部署项目里运行，BYOK 代理具备 SSRF 防护，沙箱 iframe 预览。

    Open Design 支持的 25 个编码智能体 CLI

    典型使用场景

    • 一句话生成落地页：在入口视图输入 brief，智能体结合 saas-landing 模板与 Linear 设计系统，流式生成带 hero / 特性 / 定价 / CTA 的可运行着陆页，直接导出 HTML 部署。
    • 实时数据仪表盘：用 dashboard 模板生成带侧边栏的管理 / 分析看板，作为 live artifact 实时刷新，而非静态截图。
    • 品牌统一的演示文稿：用 guizang-ppt / html-ppt 模板生成杂志风 Web PPT；或把现有 git 仓库 + DESIGN.md 交给智能体，自动把真实组件重构到品牌规范（含 Figma / Pencil → React / Next / Vue 迁移插件）。

    演示文稿 / Deck 产物

    插件与集成生态

    推荐理由

    作为天天和编码智能体打交道的人，最打动我的是它把”设计”从闭源付费的云端玩具，变成了你笔记本上的文件系统——你的 CLI 是引擎，笔记本是工作室，团队的 DESIGN.md 是品牌契约。相比 Claude Design 的封闭锁定，Open Design 的 agent-native + 模型无关 + Apache-2.0，让我可以随意换模型、自托管、调用 151 套现成设计系统，还能用 277 个插件把 Figma 工作流迁到 React。对想把”vibe coding”从代码延伸到 UI / 海报 / 演示的人来说，这是目前最完整、最开放的一个选择。

    下载地址

  • 124K Star 的「AI 应用宝库」：awesome-llm-apps，100+ 个拿来即跑的 LLM / RAG 项目

    124K Star 的「AI 应用宝库」：awesome-llm-apps，100+ 个拿来即跑的 LLM / RAG 项目

    awesome-llm-apps 项目预览

    一、项目简介

    awesome-llm-apps 是一个收录了 100+ 个端到端测试过、Apache-2.0 协议的开源 AI Agent、Agent Skills 与 RAG 应用的精选仓库——clone、定制、上线，全部免费。它兼容 Claude、Gemini、GPT、DeepSeek、Llama、Qwen 以及各类本地开源模型，是当下 GitHub 上星标增长最快的 LLM 应用模板库之一（124K+ Star）。

    二、安装要求和过程

    环境要求

    • Python 3.8+（多数模板基于 Streamlit / 各厂商官方 SDK）
    • 一个 LLM API Key（Claude / Gemini / GPT / DeepSeek / Llama / Qwen 均可，部分模板支持本地模型）
    • Git 与可联网环境

    快速开始（跑一个 Agent，约 30 秒）

    git clone https://github.com/Shubhamsaboo/awesome-llm-apps.git
cd awesome-llm-apps/starter_ai_agents/ai_travel_agent
pip install -r requirements.txt
streamlit run travel_agent.py

    或者，给编码助手装一个 Skill（约 10 秒）

    npx skills add https://github.com/Shubhamsaboo/awesome-llm-apps/tree/main/agent_skills/project-graveyard

    模板每周持续更新；项目模型无关，支持 Ollama 等本地推理，方便对比与替换。

    三、核心功能

    1. 100+ 端到端验证的开源应用：不是 demo 片段，而是每个都能 pip install && run 的完整项目，统一 Apache-2.0，可商用可修改。
    2. 15 大场景全覆盖：从单文件 Starter Agent，到多智能体团队、语音 Agent、MCP 工具调用、RAG 检索、记忆、微调、生成式 UI，再到 Autonomous 游戏 Agent。
    3. Agent Skills 一键安装：把可复用能力直接装进 Claude Code / Codex / Cursor，每条 Skill 都带真实代码并通过「安全 + 评测」CI 门禁。
    4. 模型无关：Claude、Gemini、GPT、DeepSeek、Llama、Qwen 乃至本地模型通吃，方便横向对比。
    5. 自带框架速成课：Google ADK、OpenAI Agents SDK 的 Crash Course，边抄边学编排范式。

    Project Graveyard Agent Skill

    Project Graveyard —— 帮你复盘每个弃坑副业、并找出最值得捡回来的那个的 Agent Skill

    四、典型使用场景

    • 30 分钟搭一个 AI 应用：想做旅行助手、数据分析 Agent、博客转播客？直接 clone 对应 starter 模板、改个 API Key 即可运行。
    • 给编码助手加能力：团队要一个「Scope Creep Detector（范围蔓延检测）」或「Commit Archaeologist（提交考古）」？npx skills add 一行搞定，立刻在 Claude Code / Cursor 里可用。
    • 系统学习 RAG / 多智能体：仓库内含 20+ 个 RAG 教程与多智能体团队模板，即开即用，省去从零搭脚手架。

    Always-on HN Briefing Agent

    Always-on HN Briefing Agent —— 按日程巡逻、把每天值得看的 Hacker News 推送到 Slack / 邮箱的后台 Agent

    Insurance Claim Live Agent Team

    Insurance Claim Live Agent Team —— 基于 Gemini Live 的实时语音理赔 Agent 团队

    五、推荐理由

    对一个想动手做 AI 应用、又不想从零啃文档的人，这是目前质量最高、最「能跑」的 LLM 应用模板库之一。每个模板都是真实可运行代码，省去脚手架与踩坑成本；模型无关意味着你可以拿自己的 Key 直接试；Agent Skills 的设计尤其实用——把沉淀下来的工程能力变成可复用 Skill，正好契合当下 coding agent 的工作流。

    Self-Improving Agent Skills

    Self-Improving Agent Skills —— 用 Gemini + ADK 让 Skill 针对评测自我重写的进阶玩法

    唯一要注意的是：部分模板依赖特定商业模型的 API，跑之前看一眼 requirements.txt 与 README 里的模型说明即可。

    六、下载地址

  • 【开源推荐】CopilotKit：34.8K+ Stars！面向AI Agent与生成式UI的前端技术栈

    【开源推荐】CopilotKit：34.8K+ Stars！面向AI Agent与生成式UI的前端技术栈

    ⭐ GitHub 34.8K+ Stars · MIT 开源

    CopilotKit

    The Frontend Stack for Agents & Generative UI

    📌 项目简介

    CopilotKit 是专为 AI Agent 和 生成式 UI 打造的前端技术栈，支持 React、Next.js、Angular、Vue、React Native 及 Slack 等多端场景。它不仅是 SDK，更是 AG-UI 协议 的发起方，已被 Google、LangChain、AWS、Microsoft 等主流厂商采用。

    🚀 核心功能

    ① 全场景聊天 UI

    完全可定制的聊天界面组件，支持消息流式传输、工具调用可视化、Agent 响应实时渲染，接入仅需几行代码。

    ② 生成式 UI（Generative UI）

    Agent 可在运行时根据用户意图动态生成、更新 UI 组件，支持三种模式：静态模式（AG-UI 协议）、声明式模式（A2UI）、开放式模式（MCP Apps）。

    ③ 共享状态层

    Agent 和 UI 组件可同时读写同一份状态，实现真正的双向交互——UI 可以驱动 Agent，Agent 也可以更新 UI。

    ④ 人在回路（Human-in-the-Loop）

    Agent 执行过程中可暂停，等待用户确认、修改输入后再继续，确保关键操作始终在人的掌控之下。

    ⑤ 自学习 Agent（Beta）

    基于人类反馈的持续学习（CLHF）能力，无需微调模型即可通过用户交互自动优化行为，支持按用户偏好个性化适配。

    ⚙️ 安装要求与步骤

    环境要求

    • Node.js 18+（React/Next.js 项目）
    • 一个 LLM API Key（OpenAI / Anthropic / Gemini 等）
    • 现有前端项目或新建 Next.js 项目

    ① 快速初始化项目（5分钟内启动）

    npx copilotkit@latest create

    按提示输入 LLM 密钥，自动完成项目脚手架搭建。

    ② 安装 Agent 技能包（支持 Claude Code / Cursor / Codex）

    npx copilotkit@latest skills install

    可重复运行，随时更新到最新版技能包。

    💡 典型使用场景

    🤖

    AI 聊天助手集成

    为现有 SaaS 产品嵌入智能聊天界面，支持流式输出和工具调用展示，用户体验媲美 ChatGPT。

    📊

    动态数据仪表盘

    Agent 根据用户问题动态生成图表和可视化组件，用户可与生成的内容实时交互。

    🔄

    跨平台 Agent 应用

    同一套 Agent 后端同时支持 Web、移动端和 Slack，无需重复开发，大幅降低维护成本。

    🌐 AG-UI 协议：Agent 与原生 UI 的桥梁

    CopilotKit 是 AG-UI 协议的发起方。该协议定义了 Agent 与工作流如何与用户端应用无缝连接，已被 Google、LangChain、AWS、Microsoft、Mastra、PydanticAI 等主流厂商采用。

    npx create-ag-ui-app my-agent-app

    ✨ 推荐理由

    如果你正在开发 AI Agent 产品，CopilotKit 几乎是前端层的最佳选择。它解决了 Agent 与 UI 之间的核心痛点——如何让 LLM 的推理过程优雅地呈现在用户界面上。

    最打动我的是它的 生成式 UI 能力：Agent 不再只能返回文字，而是可以动态生成真正可交互的 UI 组件。结合 AG-UI 协议，你的 Agent 可以无缝对接任意前端框架。

    另外，CopilotKit 对 人在回路 的支持也非常完善，这对于企业级应用场景至关重要——让 AI 处理繁琐操作，关键决策点由人确认，既提高效率又保障安全。

    适合人群：AI 产品前端开发者、SaaS 创业者、企业数字化转型团队。

  • CopilotKit：32.7K Stars！构建Agent原生应用的最佳SDK，让AI真正融入你的产品

    CopilotKit：32.7K Stars！构建Agent原生应用的最佳SDK，让AI真正融入你的产品

    项目简介

    做AI应用开发的朋友，大概率都遇到过一个尴尬：

    你接了LLM，写了Prompt，聊天窗口跑起来了。然后用户说”帮我查订单”，你的Agent调用了工具，返回一段文字——但用户真正想要的，是一个可以点击的订单卡片、一个可以筛选的表单、一张可以交互的图表。

    CopilotKit 要解决的，就是这个问题。32.7K Stars，MIT协议，一句话说清楚：它是构建Agent原生应用的全栈SDK，让AI不仅能”说”，还能”做界面”。

    安装要求和过程

    环境要求

    • Node.js 18+
    • React 18+（React版本）；Angular/Vue也已支持
    • TypeScript（推荐）

    快速开始（新项目）

    npx copilotkit@latest create -f nextjs

    已有项目接入

    npx copilotkit@latest init

    执行后自动完成：核心包安装、Provider配置、Agent与UI连接、部署就绪配置。

    安装React核心包

    npm install @copilotkit/react-core @copilotkit/react-ui

    核心功能

    1. 生成式UI（Generative UI）

    这是CopilotKit最招牌的能力。传统聊天AI返回的是文字，CopilotKit让Agent在运行时动态生成前端组件。比如用户说”画一个销售漏斗图”，Agent可以直接生成一个React组件渲染在聊天窗口里，而不是返回一段描述。

    2. AG-UI协议的主导者

    CopilotKit主导了AG-UI协议的制定，这个协议已经被Google、LangChain、AWS、Microsoft、Mastra、PydanticAI等主流AI厂商采纳。它的作用是实现Agent与用户界面的标准化通信——你可以理解为”AI界面的HTTP协议”。用了CopilotKit，你的Agent天然支持这个协议，未来对接其他厂商的生态会很顺畅。

    3. 人机协同工作流

    有些操作，AI不能自己拍板。CopilotKit支持Agent执行过程中主动暂停，请求人工确认后再继续。比如”我准备删除这三条数据，确认？”——用户点确认，Agent再执行。这个能力在金融、医疗、企业审批等场景里几乎是必需的。

    4. 共享状态管理

    Agent和UI组件之间有一层可实时读写同步的状态层。Agent更新了状态，UI立刻响应；用户在UI上操作，Agent也能立刻感知。这种双向实时交互，是”真正Agent原生应用”和”套壳聊天窗口”之间最本质的差别。

    5. 自学习Agent（早期访问）

    通过人类反馈持续学习（RLHF），Agent可以不用微调模型，就能通过用户反馈自动优化行为。而且支持按用户偏好做个性化适配——也就是说，同一个Agent，给不同用户用，会越来越”懂”那个用户。

    典型使用场景

    场景一：AI客服系统

    用户在聊天窗口说”查我的订单”。传统方案：Agent返回一段文字”您的订单号是xxx，状态是已发货”。

    用了CopilotKit：Agent动态生成一个可交互的订单卡片，用户可以直接在聊天窗口里点击”退款”、”查看物流”、”联系卖家”。整个过程不需要跳转页面，也不需要用户去别的地方操作。

    场景二：企业知识库助手

    结合RAG，用户问”帮我分析Q1各区域的销售趋势”。Agent不仅返回文字结论，还直接生成一张交互式图表，用户可以在聊天窗口里筛选区域、切换时间维度、导出数据。这种体验，是传统”一问一答”的AI客服完全给不了的。

    推荐理由

    我自己试CopilotKit最直接的原因是：受够了”AI聊天窗口”的局限。

    接LLM很方便，但接完之后你会发现，用户真正想要的不是”聊天”，而是”完成任务”。查订单、填表单、看报表——这些事情，纯文字交互的效率是很低的。

    CopilotKit的Generative UI把这个问题解决了。Agent可以动态生成界面，用户可以在聊天窗口里直接操作，整个体验是对话式+界面式的混合——这其实更像人跟人打交道的方式，而不是人跟搜索引擎打交道的方式。

    另外一点是AG-UI协议。现在AI应用开发有个痛点：每接一个平台（Web、移动端、Slack、Teams），都要重新写一套UI逻辑。CopilotKit的AG-UI协议让同一套Agent逻辑可以同时驱动多个平台的UI——这个在多端部署的场景下，省的工作量是很可观的。

    下载地址

    GitHub仓库：https://github.com/CopilotKit/CopilotKit（32.7K+ Stars）

    官方网站：https://www.copilotkit.ai/

    开发文档：https://docs.copilotkit.ai/

    npm安装：npm install @copilotkit/react-core @copilotkit/react-ui