跳到主要内容
Universal CSS Infrastructure

让每一种界面都有现成答案

Gardener 把基础 CSS、交互组件、业务配方、桌面端适配与机器可读清单放进同一套系统。人可以直接开发，AI 可以准确选用，无需每次重新组织样式。

阅读文档
  • 零运行时依赖
  • 白底中性默认
  • 小圆角体系
  • Web 与桌面共用
gardener / workspace / overviewLive
已发布页面
2,480
+12.6%
组件采用率
94%
生成趋势
AI 任务
正在组合企业站点
42颜色主题
506登记组件
11,498工具类
52机器可读页面配方
One system, every surface

从一个按钮到超级 CMS

覆盖基础原子、通用组件、高密度后台、移动端、内容商业化、AI 工作区与桌面 WebView。默认足够克制，组合能力足够宽。

01

完整基础层

Reset、Token、24 / 12 栅格、排版、间距、尺寸、逻辑方向、颜色、边框、阴影、状态和五档响应式工具类。

02

可直接交付的组件

表单、导航、浮层、数据、媒体、商业、通信、法律、工作流和 Dashboard 均有稳定结构与状态约定。

03

AI 原生交互

消息流、思考过程、工具调用、审批、Agent 状态、计划、引用、Artifact、模型选择和多模态生成。

04

复杂业务配方

登录、移动分类、CMS 编辑器、媒体库、收件箱、文件管理、表单构建、商品详情、结算和企业设置。

05

桌面应用适配

Tauri 与 Electron 共用标题栏、窗口控制、活动栏、编辑区、检查器、分栏与状态栏，桥接接口保持安全。

06

环境矩阵完整

Light、Dark、System、高对比、RTL、Reduced Motion、Forced Colors、Print、Mobile、Tablet 与 Desktop。

Official Vue 3 bindings · 1.0.0 Stable

CSS 的全部能力，已经成为 Vue API

@gardener/vue 完整映射 506 个组件和 66 种 DOM 行为，提供插件、类型安全组件、指令、Composable、十轴主题 Provider、v-model、SSR 与 Tauri / Electron 适配。每个 CSS 组件都有独立的 G* 导出，AI 可以直接选组件，不必重新拼装样式。

506 components 538 runtime exports 29 entrypoints 28 CSS packs Vue 3.4+
阅读 Vue 文档 打开 Vue 项目说明
App.vue按需导入 · 完整类型 
<script setup lang="ts">
import { GButton, GCard, GardenerProvider } from "@gardener/vue";
import "@gardener/vue/style.css";
</script>

<template>
  <GardenerProvider theme="garden" mode="light" shape="subtle">
    <GCard>
      <GButton variant="primary">保存</GButton>
    </GCard>
  </GardenerProvider>
</template>
Official React bindings · 1.0.0 Stable

同一套 CSS，也有完整的 React 组件模型

@gardener/react 将 506 个 CSS 组件和 66 种 DOM 行为映射为类型安全的 React API，提供精确原生元素类型、十轴主题 Provider、受控与非受控值桥接、Imperative Handle、7 个 Hooks、SSR / Hydration 以及相互隔离的 Tauri / Electron 适配入口。组件、样式和机器可读目录保持一一对应。

506 components 538 runtime exports 29 entrypoints 28 CSS packs React 18.3–19.x
阅读 React 文档 打开 React 项目说明
App.tsx按需导入 · 完整类型 
import { GButton, GCard, GardenerProvider } from "@gardener/react";
import "@gardener/react/style.css";

export function App() {
  return (
    <GardenerProvider theme="garden" mode="light" shape="subtle">
      <GCard>
        <GButton variant="primary">保存</GButton>
      </GCard>
    </GardenerProvider>
  );
}
Official AngularJS bindings · 1.0.0 Stable

让大型 AngularJS 遗留系统继续使用完整 Gardener API

@gardener/angularjs 把 506 个 CSS 组件和 66 种 DOM 行为映射为 AngularJS 元素/属性指令，提供模块工厂、严格组件子集、原生 ngModel、十轴主题、3 个可注入服务、动态生命周期与相互隔离的 Tauri / Electron 入口。它面向必须维护 AngularJS 1.8.x 的存量产品，并明确公开框架 EOL 安全边界。

506 directives 535 runtime exports 29 entrypoints 28 CSS packs AngularJS 1.8.2–1.8.3
阅读 AngularJS 文档 打开 AngularJS 项目说明
app.js模块工厂 · ngModel · 完整类型 
import "angular/angular.js";
import { createGardenerAngularJS } from "@gardener/angularjs";
import "@gardener/angularjs/style.css";

const gardener = createGardenerAngularJS(window.angular, {
  components: ["button", "input", "card"],
});

window.angular.module("app", [gardener]);

// <button g-button gardener-variant="primary">保存</button>
// <input g-input ng-model="vm.keyword">
Official Blazor RCL · 1.0.0 Stable

从静态 SSR 到桌面 WebView，使用同一套 Razor 组件

Gardener.Blazor 将 506 个 CSS/混合组件、66 种 DOM 行为和 75 种事件映射为强类型 Razor API。稳定包以 net10.0 为基线，已验证 net11.0 消费，覆盖 Blazor Web App、WebAssembly、Hybrid、Tauri 与 Electron 场景，并保留 SSR、表单、无障碍和十轴主题契约。

506 components 66 behaviors 75 events 43 static assets .NET 10 / 11
阅读 Blazor 文档 打开 Blazor 项目说明
Dashboard.razorRCL · SSR · 强类型事件 
@using Gardener.Blazor.Components

<GardenerProvider Theme="garden" Mode="light"
                   Shape="small" Platform="desktop">
  <GAppShell>
    <GSidebar>导航</GSidebar>
    <GMainRegion>
      <GButton Variant="primary" @onclick="Save">
        保存
      </GButton>
    </GMainRegion>
  </GAppShell>
</GardenerProvider>
24 / 12 responsive grid

精确分栏，不再临时计算

24 栅格覆盖企业后台、CMS 和复杂表单，12 栅格兼容传统设计稿。列宽、偏移、顺序、网格线、间距、容器查询、RTL 和打印都有稳定接口。

START6 / 24导航与筛选
MAIN12 / 24主要内容区域
END6 / 24检查器与操作
OFFSET4 + 16 + 4居中表单或阅读区
五档视口响应 + 三档容器响应480 / 768 / 1024 / 1280 / 1536px · CQ 480 / 768 / 1024px
查看完整栅格文档
16 region layout patterns

传统页面骨架，也有稳定接口

从上下主区、左右栏到 Holy Grail、Master / Detail、Dock、可调分栏和全屏工作区，Web、移动端与 Tauri / Electron 直接选用，不必临时编写页面级布局 CSS。

TOPToolbar
MAINWorkspace
BOTTOMStatus
Top / Main / BottomStart / Main / EndHoly GrailMaster / DetailList / Detail / InspectorFixed HeaderFixed SidebarSticky AsideSticky FooterDockSplit ViewFullscreenMobile Safe AreaDesktop ShellContainer QueryRTL / Print
16 种成品骨架 + 统一区域部件视口响应 · 容器响应 · 逻辑方向 · 打印展平 · 桌面工作台
查看完整区域布局文档
22 classic layout primitives

让空间决定布局，不让断点猜布局

Stack、Cluster、Sidebar、Switcher、Reel、Media Object、Masonry、Bento 等经典模式已经固化为内在响应接口。AI 只需选择意图和少量变量，无需重新发明 Flex、Grid、溢出与安全区规则。

STACK
BENTOFeatured
TALL
TILE
TILE
ClusterWrapTags
Repel
M
Media ObjectMedia · Body · Action
→
StackClusterCenterSidebarSwitcherCoverReelFrameMedia ObjectAuto FitAuto FillBleedRepelImposterOverlayMasonryBentoAspect RatioScroll AreaScroll SnapSafe AreaSticky Region
22 个稳定原语 + 零 JavaScript 布局内在响应 · 容器查询 · RTL · Safe Area · Reduced Motion · Print
查看完整原语文档
23 page-level patterns

页面公共结构，直接进入交付状态

统一页头、工具栏、命令栏、筛选与批量操作，再把 Loading、Empty、Error、403、404、500、离线和维护状态准备完整。AI 生成的页面不再只有“正常数据”这一种情况。

Content workspace

页面管理

管理内容、状态和发布时间。

最近更新：刚刚已同步
12 个页面
状态：全部语言：中文
当前显示生产环境内容
已选择 3 项
∅
Empty

首次使用也有明确下一步。

404
Not found

无效链接有稳定回退。

⌁
Offline

断网仍告知数据安全状态。

ConnectedGardener page contract
Page HeaderSection HeaderSubheaderToolbarAction BarStatus BarCommand BarContext BarFilter BarBulk Action BarFooter BarFloating Action BarBack to TopDivider with TextSticky ActionsPage LoadingPage EmptyPage Error403404500OfflineMaintenance
23 种完整页面状态与公共结构Container Query · Sticky · Safe Area · RTL · Runtime · Print
查看完整页面组件文档
28 help and guidance patterns

从一个 TIP，到完整帮助闭环

Tooltip、Popover、Callout、FAQ、帮助中心、Tour、Spotlight、新功能提示、排错和反馈全部使用稳定接口。用户在任何端遇到疑问，都有合适而一致的表达方式。

使用预览环境确认内容，再发布到生产环境。

  • 打开帮助?
  • 命令面板Ctrl+K
TipInline HintHelp TextHelp TriggerTooltipRich TooltipHelp PopoverDefinitionCalloutNoteDo / Don'tKey HintShortcut ListHelp CardHelp PanelHelp CenterHelp TopicsFAQContextual HelpCoach MarkGuided TourSpotlightHotspotFeature HintWhat's NewHelp ChecklistTroubleshootingHelp Feedback
28 种提示、引导与支持模式Collision Aware · Keyboard · Focus Restore · RTL · Reduced Motion · Print
查看完整帮助系统文档
37 traditional form compositions

表单不再从一堆 Input 开始

字段、分区、水平与行内布局、搜索/密码/计数、选择组、验证、姓名/地址/金额、条件与可重复项、审核和提交动作都已组合好。AI 只需选择业务意图，不必反复组织表单 CSS。

企业资料

用于站点展示和服务通知。

已保存
必填
发布方案
FormForm SectionFieldFieldsetForm RowForm GridHorizontal FormInline FormCompact FormInput GroupInput AffixSearch FieldPassword FieldClearable FieldCharacter CounterValidation StateValidation SummaryCheckbox GroupRadio GroupSwitch RowChoice CardsName GroupAddress GroupPhone GroupMoney GroupDate RangeTime RangeUnit FieldRange FieldFile FieldRepeatable FieldConditional FieldForm ActionsAutosave StatusForm ProgressForm ReviewConsent Group
37 种传统表单结构 + 5 类交互行为Container Query · Validation · Business Groups · RTL · Safe Area · Print
查看完整表单组合文档
Category 08 · Data display & operations

数据不只要显示，还要立即可用

48 种数据模式覆盖表格、记录、列表、层级、指标、计划、地图与操作。排序、选择、展开、列管理、筛选和视图切换都有统一运行时。

客户收入¥286K
128活跃
6风险
客户数据共 3 项
状态 操作
星河科技 活跃 ¥128,000
远山设计 待跟进 ¥86,000 查看
林海教育 风险 ¥42,000 查看
TableResponsive TableData GridEditable GridTree TableGrouped TableExpandable TableComparisonPivotDescription ListKey ValueRecord DetailList GroupMedia ListDense ListVirtual ListTreeTimelineActivity FeedAudit LogKPIStat ListMetric CardSparklineProgress StatsChartLegendRankingStatus SummaryCalendarAgendaKanbanGanttOrg ChartMapMatrixHeatmapData ToolbarColumn ChooserSaved ViewsExport PanelData StateView SwitcherSelection SummaryDensityFilter SummarySort BuilderData Inspector
48 种数据展示与操作模式 + 8 类复用交互Table · Record · Metric · Planning · Spatial · Keyboard · RTL · Print
查看完整数据组合文档
32 selection and batch patterns

从选中一项，到处理十万条记录

全选、反选、范围选择、批量工具栏、Transfer、树形与级联选择、人员/组织/资源/媒体选择器、日期时间范围、保存配置及排序/分组构建器均有稳定接口。AI 不必临时拼出复杂后台选择流程。

站点页面
Selection ControlSelect AllInvertRangeBatch ToolbarSelection ScopeTransferDual ListTree SelectCascaderMention PickerUser PickerOrganization PickerResource PickerMedia PickerIcon PickerColor PickerDate RangeTime RangeSaved FiltersSaved ViewsColumn ChooserSort BuilderGroup BuilderEntity PickerTag PickerRelation PickerBulk ConfirmationBulk ProgressPicker PanelPicker SummarySelection Summary
32 种选择与批量模式 + 7 类复用交互Multi-select · Hierarchy · Search · Safe Area · Keyboard · RTL · Print
查看完整选择组件文档
Category 10 · File & content system

从上传一个文件，到完成整套内容生产

上传队列、文件浏览、媒体库、图片处理、文档/PDF/音视频查看、代码与富文本编辑、Markdown、区块、修订、评论和自动保存均有现成结构。

内容上传完成 0 · 处理中 0
PDF企业品牌手册.pdf4.8 MB
JPG首页封面.jpg880 KB
品牌资料
PDF
品牌手册.pdf4.8 MB
IMG
首页封面.jpg880 KB
0 个结果已选：未选择
File DropFile ListUpload QueueChunk UploadUpload ProgressFailed UploadFile CardFolder TreeFile BrowserFile PreviewMedia LibraryMedia GridMedia DetailsImage CropImage AnnotationDocument ViewerPDF ViewerVideo PlayerAudio PlayerCode EditorRich Text EditorMarkdown EditorBlock EditorRevision CompareAutosaveContent OutlineEditor ToolbarFind & ReplaceComment ThreadVersion HistoryFile PropertiesStorage Meter
32 种文件与内容模式 + 6 类复用交互Upload · Browser · Editor · Revision · Keyboard · RTL · Print
查看完整内容系统文档
Category 11 · Identity lifecycle

从第一次登录，到每一次安全审计

登录、注册、验证、MFA、Passkey、SSO、二维码、邀请、账号与租户选择、锁屏、会话恢复、设备管理和安全事件已组合为稳定页面结构，适合网站、移动端、Dashboard 与 Tauri/Electron。

手机验证

输入发送到 +86 138****6608 的验证码

!
检测到新设备

Linux · Firefox，从北京发起。

Centered AuthSplit AuthSign InRegistrationPassword RecoveryPassword ResetEmail VerificationPhone VerificationMFAOTPPasskeySSOQR LoginMagic LinkInvitationFirst SetupLock ScreenSession ExpiredAccount ChooserTenant ChooserIdentity SwitcherProfile SetupAccount SecurityDevicesLogin ActivitySecurity AlertRecovery CodesTrusted DeviceConnected AccountsPassword StrengthConsentAuth Result
32 种登录与账号模式 + 8 类复用交互Password · OTP · MFA · Passkey · SSO · Session · Identity · Security
查看完整账号体系文档
Category 12 · Commerce & payment

从看见商品，到交易与退款完成

商品卡、详情、SKU、购物车、结算、地址、配送、优惠、发票、支付、订单、订阅、用量、账单与退款已成为稳定结构。适合电商、数字商品、SaaS、企业采购、CMS 商业化和桌面客户端。

企业版Gardener Studio
永久授权 · 三端可用

Studio 商业套件

¥699¥899-22%
平台
G
Studio 商业套件Windows · 企业授权
¥699.00
商品
优惠
配送
应付
Product CardProduct ListProduct DetailProduct GallerySKU SelectorQuantity StepperPrice DisplayCart ItemCartMini CartCart SummaryCheckoutCheckout StepsAddress SelectorAddress CardShipping MethodPickup SelectorCouponPromotion ListInvoice InformationPayment MethodPayment SheetPayment ResultOrder SummaryOrder TimelineOrder DetailSubscription PlanPricing ComparisonUsage MeterBilling HistoryRefund StatusTax Summary
32 种商业与支付模式 + 7 类复用交互Catalog · Cart · Checkout · Fulfillment · Payment · Order · Billing
查看完整商业与支付文档
Category 13 · Mobile specific

不是缩小桌面，而是完整的移动应用层

安全区、动态视口、顶部栏、底部导航、Bottom/Action/Filter Sheet、下拉刷新、无限加载、滑动操作、滚轮选择、键盘避让、移动认证与结算、权限和离线状态都有稳定契约，可直接用于移动网页、PWA 和 Tauri/Electron 移动式 WebView。

内容中心

安全区已就绪

刘海屏与 Home Indicator 自动保护。

适合 WebView

PWA、Tauri 与 Electron 共用结构。

G
移动端内容流

稳定的媒体、正文与尾部动作插槽。

Safe Area ShellTop App BarBottom NavigationBottom SheetAction SheetPull to RefreshInfinite LoadSwipe ActionsSwipe TabsMobile CategoryMobile FilterSticky Purchase BarMobile SearchMobile PickerWheel PickerFloating Action ButtonFullscreen DialogKeyboard AvoidanceGesture HintOffline BannerSegmented ControlMobile FeedCard CarouselMobile FormMobile AuthMobile CheckoutMedia ViewerKeyboard ToolbarSelection ModeSnackbarPermission PromptEmpty / Error State
32 种移动端特有模式 + 14 类复用交互Safe Area · Touch · Sheets · Gesture · Keyboard · PWA · WebView
查看完整移动端文档
Category 14 · Desktop specific

把 Web 技术变成完整桌面工作区

原生标题栏、窗口按钮、菜单和活动栏只是起点；文档标签、可调分栏、Dock、检查器、命令面板、文件选择、托盘、多窗口、后台任务、更新、权限与崩溃恢复均已有稳定组合，可直接落地 Tauri 与 Electron。

Gardener Studio — 内容空间
同步中
Desktop CMS

高密度工作区无需重新拼装

窗口 Chrome、导航、编辑区、状态区和宿主桥接各有独立契约。

⑂ main✓ 0 错误
UTF-8
Native TitlebarWindow ControlsMenu BarActivity BarDock PanelResizable Split PaneInspectorStatus BarCommand PaletteShortcut RecorderContext MenuUnsaved TabsDrag RegionWindow LoadingUpdate AvailablePermission RequestNative File PickerTray MenuMulti-windowDesktop WorkspaceWindow SwitcherRecent DocumentsDesktop ToolbarBottom PanelBackground TasksNotification CenterSync StatusUpdate ProgressCrash RecoverySingle InstanceDeep LinkAbout Dialog
32 种桌面端特有模式 + 11 类复用交互Tauri · Electron · Window Chrome · Workspace · Native Bridge · Lifecycle
查看完整桌面端文档
Category 15 · AI native

AI 交互不是一个聊天框

对话、Composer 与流式回答之外，还需要推理摘要、工具调用和批准、多 Agent 编排、来源引用、Artifact、上下文记忆、Token/费用、语音、权限、隐私、安全复核与反馈评估。Gardener 将整条 AI 任务链做成可直接复用的32种模式。

上下文 38%
为超级 CMS 生成企业门户首页。
G
Gardener Agent正在工作

已选择企业门户配方，正在检查组件与权限。

正在匹配 Dashboard、CMS、权限和桌面工作区。
允许写入页面模板？

只修改当前项目的 generated 目录。

AI WorkspaceConversation ListChat ThreadAI MessagePrompt ComposerAttachmentPrompt StarterPrompt LibraryMention / Slash MenuModel SelectorThinkingStreaming ResponseTool CallTool ApprovalAgent StatusAgent PlanMulti-agent BoardAgent HandoffSources / CitationsArtifact WorkspaceArtifact PanelAI File TreeVersion HistoryGeneration GalleryGeneration PlaceholderContext / MemoryCost / Rate LimitVoice SessionPermission ScopePrivacy NoticeSafety NoticeFeedback / Evaluation
32 种 AI 原生模式 + 9 类运行时Chat · Multimodal · Tools · Agents · Artifacts · Context · Safety · Evaluation
查看完整 AI 组件文档
Category 16 · Complete solutions

从组件库，走到可以直接生成的完整页面

第 16 类把公共网站、个人内容、企业后台、业务工作台和垂直行业门户固化为 32 种整页契约。AI 先选择页面类型，再填充业务组件与内容，不再临时发明 Header、导航、主区、侧区和移动折叠规则。

Enterprise overview

超级 CMS 经营总览

同一整页契约可切换企业、个人、医疗、金融或公共服务主题。

已发布站点28,640↑ 12.4%
页面模板486k32 个整页入口
待审核138需要处理
模板生成趋势最近 30 天
Product LandingCorporate HomePersonal HomePortfolioBlog IndexArticleDocs PortalHelp CenterSearch ResultsContactPricingDashboardAdmin ListRecord DetailSettingsUser CenterNotificationsOnboardingCRMProject WorkspaceSupport CenterApproval CenterKnowledge BaseLearning PortalEvent PortalBooking PortalHealthcareFinancePublic ServiceMarketplaceCommunityStatus Center
32 种整页模式 + 52 个机器可读配方Personal · Enterprise · Content · Operations · Industry · Cross-platform
查看完整解决方案文档
42 color themes

换品牌，不换组件

颜色主题与中性色、字体、形状、密度、层次、动效、平台和操作系统正交组合。这里始终保持白色浅色界面，只切换品牌主色。

当前主题garden
Primary

清晰而不过度装饰

按钮、链接、焦点与选中状态自动跟随主题。

键盘可操作；每套主题都提供完整 50–950 色阶和独立可读前景色。

Predictable authoring · Stable 1.0.0

HTML 就是接口

统一的 g- 前缀、稳定部件命名和声明式 data-g-* 行为，让人和 AI 都能快速读懂。

  • 按层引入Core / Themes / Utilities / Components / AI
  • 声明式运行时自动初始化与动态 DOM 观察
  • 机器可读Public API、组件、工具类、配方与能力清单
  • 严格验证十一套闭合 Schema、48 个标准 Schema 用例、10 个构建专项用例、66 个运行时单元测试、125 个真实浏览器用例与 24 个结构用例
查看公共 API 契约
index.html 
<html data-g-theme="garden" data-g-mode="light">
  <link rel="stylesheet" href="gardener.css">

  <main class="g-dashboard">
    <article class="g-card g-p-5">...</article>
  </main>

  <script type="module" src="gardener.runtime.js"></script>
</html>
Release-ready delivery · 1.0.0

只交付当前页面真正需要的平台与组件

5 个平台档案、28 个稳定组件包和 506 个组件归属映射，让开发者与 AI 可以直接选择正式产物，不再临时拆 CSS。语法级压缩、Source Map、SHA-256/SRI 完整性、可复现构建、TypeScript 类型、跨版本兼容基线与发布包门禁随构建一起交付。

5

平台档案

Web、Mobile、Desktop、Tauri、Electron，自动保留对应端能力。

28

组件包

布局、表单、导航、数据、内容、账号、商业、移动、桌面和 AI 均可独立引入。

506

组件归属

每个公共组件都能解析到完整所属包，并明确列出连带包含项。

42

双重产物预算

raw、gzip、Brotli 的绝对上限与 0.9.0 基线增长任一超限即阻断发布。

1,145

兼容基线

入口、主题、运行时、组件与配方只能新增；删除必须先经过至少两个次版本的废弃期。

npm run build:platform -- --platform mobile --out dist/custom/mobile-app
npm run build:custom -- --components button,card,dialog --out dist/custom/account-ui
npm run verify:reproducible
npm run verify:compatibility
npm run test:types
npm run verify:package
npm run budget
查看按需构建与性能预算
Release confidence · 1.0.0

每一种页面，都要经得起真实环境

默认执行 125 个真实浏览器用例和 24 个 HTML 结构用例；完整配置覆盖桌面三引擎、Android / iPhone 设备画像和 WCAG 自动检查。

WEB

桌面多浏览器

Chromium 与 WebKit 进入默认门禁；Firefox 提供独立及三引擎完整门禁。

MOB

移动设备

Pixel 7 与 iPhone 13 全量覆盖 21 个示例和 Home 两页，并检查 320px 窄屏、横屏、回流与 44px 触控目标。

A11Y

无障碍

Axe WCAG 2 A/AA 全部自动违规归零，并覆盖键盘与焦点恢复、RTL、Reduced Motion、Forced Colors。

DOM

结构完整性

全部 21 个示例、Home 落地页与文档检查解析、ID、ARIA 引用、标题和 Viewport。

查看 1.0.0 测试矩阵
All endpoints

同一套语言，覆盖所有端

页面结构、主题 Token 与交互语义保持一致，各端只增加必要的密度、窗口和安全区适配。

WEB

PC 网站

企业站、门户、内容站、电商与 SaaS。

MOB

移动网页 / PWA

安全区、触控密度、底部导航和分类页。

OPS

Dashboard

高密度数据、表格、过滤器和多栏应用。

DSK

Tauri / Electron

桌面标题栏、窗口桥接与工作台布局。

AI

AI 产品

流式消息、工具、Agent、Artifact 与生成状态。

Reusable recipes

高频页面不必重新拼装

复杂但高复用的页面已经组合为配方。AI 应先选配方，再用组件和工具类做有限调整。

Built for AI authorship

让 AI 选择，不让 AI 猜

Public API、组件、工具类、配方与行业能力五类清单，把允许使用的名称、入口、平台、状态和响应条件结构化暴露出来，页面生成过程可以被约束、验证和复现。

01 / INTENT

识别页面意图

端类型、业务类别、密度、内容量与交互复杂度。

02 / RECIPE

优先选择配方

从 52 个成品结构中选择最接近的页面骨架。

03 / ASSEMBLE

组合组件与工具

只使用公共 API 和 Manifest 中真实存在的类与行为。

04 / VALIDATE

校验契约与环境

通过 Schema、键盘、可访问性、RTL、打印和响应端点检查。

从完整系统开始。

不要再为下一张页面重新发明基础设施。

打开完整文档查看组件示例