NocoBase 界面配置 Skill：用自然语言完成页面、区块、弹窗与联动搭建

NocoBase 界面配置 Skill用自然语言完成页面、区块、弹窗与联动搭建【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobase导读本文讲解 NocoBase 中「界面配置ui-builder」这一 AI 搭建 Skill 的能力边界与实战用法。作为 AI 搭建快速开始 体系里的核心 Skill 之一它负责把「用业务语言描述页面」的需求转化为 NocoBase 的页面、区块、字段与操作配置——从表格、筛选表单到详情弹窗、交互联动全程由 AI 处理蓝图生成与布局编排。读完本文你将掌握如何编写高效的界面配置提示词、如何让 AI 优先采用字段弹窗而非操作按钮、如何配置联动规则实现字段显隐与编辑禁用以及如何与数据建模、权限配置等其他 Skill 协作搭建出可直接交付的管理页面。界面配置 Skill 是什么界面配置 Skill 是 NocoBase 提供给 AI Agent 的 9 个领域知识包Skills之一用于创建和编辑 NocoBase 的页面、区块、字段和操作配置。它的定位很明确你用业务语言描述想要的页面它来处理蓝图生成、区块布局和交互联动。在 NocoBase Skills 全景 中界面配置与其他 8 个 Skill 共同覆盖了搭建全流程环境管理env-bootstrap环境检查、安装部署、升级和故障诊断数据建模data-modeling创建和管理数据表、字段、关联关系界面配置ui-builder创建和编辑页面、区块、弹窗、交互联动工作流管理workflow创建、编辑、启用和诊断工作流权限配置acl管理角色、权限策略、用户绑定和风险评估解决方案dsl-reconciler从 YAML 批量搭建整套业务系统插件管理plugin-manage查看、启用和停用插件发布管理publish跨环境发布、备份恢复和迁移版本控制version-control在阶段性成果完成后保存可恢复版本这些 Skills 会通过nb init初始化时自动安装到 AI Agent 中无需手动安装。底层由 skills-manager 统一注册与管理每个 Skill 包含name、scope、description、content即 SKILLS.md 指令、tools可用的工具清单以及introduction等字段注册后会持久化到aiSkills集合中供 AI 加载。能力范围可以做创建完整页面表格、筛选表单、详情弹窗一步到位编辑已有页面添加区块、调整字段、配置弹窗、调整布局设置交互联动默认值、字段显隐、计算联动、操作按钮状态使用模板复用重复的弹窗和区块可以保存为模板支持多页面任务按顺序逐页搭建不能做不能配置 ACL 权限请使用权限配置 Skill不能设计数据表结构请使用数据建模 Skill不能编排工作流请使用工作流管理 Skill不能处理非现代页面v1的导航只支持处理 v2 的页面前置条件阅读本页前请确保你已按照 AI 搭建快速开始 安装了 NocoBase CLI 并完成了初始化。界面配置的底层执行机制界面配置并非「黑盒生成」它依赖 NocoBase AI 能力中的前端工具Frontend Tool体系来读写页面配置。从前端工具的类型定义common/frontend-tools.ts可以看到一个可被 AI 调用的前端工具清单FrontendToolManifest包含以下关键字段字段说明id工具唯一标识格式为${blockUid}:${name}blockUid工具所在区块的唯一 ID定位到具体页面区块name工具名称如addBlock、updateSchema等title工具展示名称description工具用途描述供 AI 理解何时调用permission执行权限ASK需用户确认或ALLOW允许直接执行inputSchema入参的 JSON Schema约束 AI 传参结构其中permission字段直接体现了安全边界被标记为ASK的工具在 AI 调用前会向用户请求确认只有ALLOW的工具才会被静默执行。服务端通过loadFrontendTool与executeFrontendTool两个入口完成工具的加载与调用见 server/frontend-tools.ts而isFrontendToolManifest校验函数则保证了从工作上下文中提取的工具清单结构合法common/frontend-tools.ts。从源码结构看界面配置的执行链路大致是AI 分析用户提示词 → 读取当前页面区块上已注册的前端工具清单 → 按需调用工具读取/写入配置 Schema → 区块在浏览器中实时响应更新。这也解释了文档中的「页面蓝图生成」「区块布局」「交互联动」为何能落地为真实页面状态而不是一次性生成静态代码。提示词示例与实战场景场景 A创建管理页面帮我创建一个客户管理页面包含姓名搜索框和客户表格表格显示名称、电话、邮箱、创建时间Skill 会先读取数据表字段生成页面蓝图并写入最终产出包含搜索框与客户表格的完整管理页面。这里的执行顺序很有讲究AI 需要先确认数据表里存在哪些字段对应 数据建模 Skill 建好的表再把「名称、电话、邮箱、创建时间」映射为表格列同时把「姓名搜索框」实现为筛选表单区块。场景 B配置弹窗点击表格中的客户名称时弹出详情页显示所有字段此处体现了界面配置的一个关键策略会优先用字段弹窗点击即弹出而不是额外添加操作按钮。对于「点击某条记录查看详情」这类诉求NocoBase 支持在字段上直接配置弹窗行为AI 会优先复用该能力避免页面堆砌无意义的按钮保持界面简洁。场景 C设置联动规则为弹窗 /admin/c0vc2vmkfll/view/cec3e7a69ac/filterbytk/1 里的编辑表单增加字段规则 当用户id为1时禁止编辑usernameAI 会通过配置联动规则实现「按条件禁用字段」而不需要手动编写任何配置代码。联动规则可覆盖的能力包括默认值填充、字段显隐、计算联动、操作按钮状态等。这类规则属于页面 Schema 配置的一部分由前端工具写入后即时生效。场景 D多页面搭建帮我搭建一个用户管理系统该系统有两个页面用户管理页面和角色管理页面它们在一个页面分组下。对于多页面任务Skill 会先给出多页面的简单设计人工调整和确认后再进行搭建并支持按顺序逐页完成。这种「先设计、后执行」的模式在 解决方案dsl-reconciler 中体现得更为彻底——先输出包含所有数据表和页面结构的设计方案确认后再分轮次批量搭建。常见问题与最佳实践页面创建后区块里没有数据怎么办先确认对应的数据表里确实有记录。另外检查区块绑定的集合和数据源是否正确。也可以直接使用数据建模 Skill 来创建模拟数据。弹窗里想放多个区块怎么办可以在提示词中描述弹窗内容比如「编辑弹窗里放一个表单和一个关联表格」。Skill 会生成包含多个区块的自定义弹窗布局——表单负责编辑主记录关联表格负责维护子表数据。手动配置页面和 AI 配置页面会互相影响吗如果手动配置和 AI 配置是同时进行的会互相影响如果不是同一时间配置的则不会有影响。因此建议在 AI 搭建期间避免多人同时手动编辑同一页面防止 Schema 冲突。与其他 Skill 的协作边界界面配置与 AI 搭建体系中的其他 Skill 存在明确的分工边界合理组合才能获得最佳效果需求使用的 Skill创建/调整数据表、字段、关联关系数据建模创建/编辑页面、区块、弹窗、联动界面配置本文配置角色与数据访问权限权限配置创建、编辑、启用和诊断工作流工作流管理从 YAML 批量搭建整套系统解决方案搭建完成后保存可回退版本版本控制典型协作流程是先用数据建模 Skill 建表 → 用界面配置 Skill 搭建页面与弹窗 → 用权限配置 Skill 控制谁能访问 → 用版本控制 Skill 在完成一个清晰节点后保存版本配置改坏了随时回退。需要说明的是AI 不会每改一个字段就存一次版本只在完成并验证一个清晰节点后保存这样版本列表更容易读恢复时也更容易判断该回到哪里。另外需要注意整个 AI 搭建过程涉及对真实业务数据的读写建议先阅读 安全与审计 了解 API key / OAuth 认证方式、专用角色绑定与操作审计实践确保 AI 只做该做的事、每一步都有记录。【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考