AgnosticUI Local (v2)

复制源码  ·  代码归你所有  ·  框架无关  ·  为人类与 AI Agent 构建

一套组件库，适配所有框架。

文档 · 登录 AI Playbook · 引导 AI Playbook · 仪表盘 AI Playbook · 组件 · 快速入门

---

源码优先架构

AgnosticUI 组件在安装时会被复制到你的项目中。

它们直接位于你的仓库中（而不是隐藏在 node_modules 内部）：

• 对源码拥有完全控制权
• 与你的框架原生集成
• AI 可读，具备高保真上下文

---

源码归你所有（以及上下文）

cd your-project
npx agnosticui-cli init --framework vue  # 或 react, lit, svelte
npx agnosticui-cli add Button Card Input

组件源码会直接存入你的项目中。既可读，又可编辑，完全属于你。

src/
components/
ag/
Button/
Button.vue ← 现在这是你的文件
Button.css ← 现在这是你的 Token
Button.test.ts ← 现在这是你的测试文件

组件默认存放在 src/components/ag/ 下：这是一个专门的命名空间，将 AgnosticUI 组件与你自己的代码分离开来。如果需要，也可以进行配置。

🤖 天生为 AI 而生

由于代码是本地化的，它解决了传统库隐藏在 node_modules 中导致的“黑盒”问题。

Cursor · Claude · Copilot · Windsurf · Aider · Gemini · Replit · Kiro · Antigravity

每一个工具都能看到原始源码。这为 生成式 UI (Generative UI) 和 Agent 驱动的界面创造了高保真环境：

• 减少幻觉： 不再会有“发明”出来的 props 或 API。由于 LLM 像读取任何其他代码一样读取本地文件，它能准确知道哪些功能是可用的。
• 更高的 Token 效率： 使用语义化 HTML 和标准 CSS 提供了“干净的上下文”。Agent 理解 UI 所需的 Token 更少，从而生成速度更快、准确度更高。
• Agent 技能： 将 AgnosticUI Playbooks 视为预定义的技能。使用它们提示 Agent 利用其已经“看到”的本地组件，快速构建复杂的、可访问的工作流（如登录、引导、发现仪表盘、支持中心、数据表格等）。

这就是新时代开发的架构：上下文感知、框架无关且支持 AI 协作。

该模式驱动层附带了三份参考文档：

• v2/docs/sdui-architecture.md — 完整的系统架构：代码生成流水线、节点图模型、渲染器、CI 门禁及关键设计决策
• v2/docs/llm-prompt-guide.md — 用于生成有效 AgNode[] 图的复制粘贴系统提示词模板及少样本示例
• v2/docs/schema-coverage.md — 各组件 SDUI 覆盖率注册表、渲染器兼容性状态及遗漏原因说明

---

一次构建，随处运行。

AgnosticUI 的组件是作为 Lit Web Components 编写的，这是一个基于标准、构建在原生 Custom Elements 之上的层。CLI 会在复制时为你所选的框架进行适配包装。

你的设计系统不会因为技术栈变更而出现分叉。支持直接从 Playbooks 生成 Agent UI 工作流。

特性	AgnosticUI	典型组件库
源码在你的仓库中	✅	❌
框架无关核心	✅	❌
本地 LLM 可读	✅	❌
包含 AI & Agent 驱动的 Playbooks	✅	❌
多种主题外观	✅	有限
零运行时依赖	✅ (弹射后)	❌

---

AI Playbooks：AI 提示驱动的 UI 组件

Playbooks（登录表单、引导向导、发现仪表盘、支持中心、数据表格、博客/文章阅读器、着陆/营销页面）展示了模块化、提示驱动的 UI 组件。每个 Playbook 均可用于 Agent 系统、上下文感知应用，或用于创建 生成式 UI 模式。

Playbook	构建内容
登录表单	响应式登录：移动端、浮动卡片、双栏桌面；适配 AI 提示驱动的生成
引导向导	交互式向导流程