多套 MaaS 平台 UI 模板。 提示词如下:
我们的任务是交付多套 maas 平台 ui 模板并提炼 ui 风格 skills,供领导选择。
1. 学习现实中的 maas 平台设计一个通用的样板页面结构
2. 结合现实中的 maas 平台的设计风格,和 github 上热门的 ui 模板和设计风格提示词,按照第一步设计的页面结构开发模板
3. 在一个仓库下启动多个不同的模板项目,每个模板项目为skill和ts混合项目结构,每个项目下直接包括一个可以直接被其他AI学习和复用、且框架无关的components目录,样板项目使用vite+ts开发,不使用vue或react等框架
4. 每个模板都需要部署到Serverless服务上,包括cloudflare和阿里云esa.
5. 每个模板在readme中都需要提供screenshots和两个serverless的访问地址。
工作模型为 Chatgpt5.6 sol ultra,这个项目只有readme开头到这里的文字是我写的。
安静、克制的开发者控制台。以清晰层级、充足留白和低干扰组件作为中性比较基准,让模型选择、 提示词实验和生产状态始终处于视觉中心。
关键特点:轻量导航、信息渐进披露、面向开发者的 Playground,以及贯穿部署与请求调查的明确操作流。
Cloudflare Demo · 阿里云 ESA Demo
温暖的深色研究环境,将 Prompt 和回答视为可反复推敲的文档,同时让原始消息、事件和 Trace 保持 随时可检查。适合研究、评测和长时间沉浸式调试。
关键特点:文档式 Prompt 编辑、同步的 Message / Code / Events 检查器、模型决策对比,以及从评测 坏例到 Playground 重放的闭环。
Cloudflare Demo · 阿里云 ESA Demo
Prompt-first 的多模态创作空间。大尺寸 Composer、模式感知输入与实时结果舞台构成主要体验,让文本、 图像和 Embedding 实验在同一个工作流中自然切换。
关键特点:多模态模式切换、参数与内容并行编辑、实时输出反馈,以及从实验结果直接进入部署和请求 追踪的连续路径。
Cloudflare Demo · 阿里云 ESA Demo
面向企业团队的模型生命周期门户,以项目、环境、资源和治理关系组织页面。它强调平台级全局上下文, 适合需要权限、合规、资产管理和跨角色协作的 MaaS 场景。
关键特点:企业资源导航、生命周期阶段视图、部署向导、评测与可观测性联动,以及清晰的项目和环境 作用域。
Cloudflare Demo · 阿里云 ESA Demo
为中国企业平台工程师设计的高密度中文控制台,将模型服务与生产运营组织成两条紧密关联的工作轨道。 在有限屏幕空间内兼顾信息密度、状态可扫读性和关键操作效率。
关键特点:中文业务语境、模型与运维双轨导航、密集数据表格、区域和环境上下文,以及符合国内云产品 使用习惯的部署流程。
Cloudflare Demo · 阿里云 ESA Demo
以 API Event 为核心的蓝紫色调试工作台。回答片段与产生它的流式事件双向联动,帮助开发者从最终输出 快速下钻到原始载荷,并保留评测、Trace 与重放来源。
关键特点:输出片段与事件高亮联动、原始事件检查、请求 Trace 重放、评测坏例回放,以及面向工程排障 的高效信息布局。
Cloudflare Demo · 阿里云 ESA Demo
深色、高密度的模型市场和路由决策界面。核心 Route Lens 将价格、延迟、吞吐、可用性和数据保留策略 放在统一决策面板中,使模型发现、Provider 选择和请求调查共享同一套判断依据。
关键特点:模型与 Provider 横向比较、路由指标可视化、成本和性能情报、透明的 Provider 决策,以及 从市场发现到生产请求的连续分析路径。
Cloudflare Demo · 阿里云 ESA Demo
多媒体优先的可执行模型实验室。每个模型页面都像一份可运行文档:结构化参数与大尺寸结果样本并置, 代码、事件、Prediction 来源、Endpoint 和成本信息始终保持连接。
关键特点:Schema 驱动输入、突出媒体结果、Prediction 生命周期、模型页即实验环境,以及从创意试验 平滑进入专用 Endpoint 和生产分析的路径。
Cloudflare Demo · 阿里云 ESA Demo
apps/
01-openai-neutral/ # 独立 TypeScript 应用、SKILL、组件契约与部署配置
02-anthropic-workbench/
03-google-ai-studio/
04-microsoft-foundry/
06-alibaba-bailian/
07-volcano-ark/
08-openrouter-intelligence/
11-replicate-lab/
packages/
maas-core/ # 共享业务类型、路由契约与虚构样例数据
references/ # 统一产品规格与视觉方向说明
scripts/ # 校验、截图与 CF / ESA 部署脚本
每个应用内部均遵循相同的可移植分层:
components/ # 框架无关的语义组件与设计令牌
src/ # 可运行的 Vite + TypeScript 参考适配器
SKILL.md # 供 AI 学习、选取和复用该视觉方向的说明
wrangler.jsonc # Cloudflare Workers 静态资源配置
esa.jsonc # 阿里云 ESA 静态 SPA 配置
完整产品与交互规格见 implementation-brief.md,各视觉方向的 边界说明见 visual-directions.md。
要求 Node.js 20+ 与 pnpm 10+。
pnpm install
pnpm check
pnpm build
# 单独运行一个样板
pnpm --filter @maas/01-openai-neutral dev所有页面都使用可直接访问和刷新的 ?view=<route> URL;每个应用目录中的 README 还包含该风格的
独立运行和组件复用说明。
scripts/apps.mjs 是应用名称、端口和域名的唯一来源:
# 单个项目,可使用 ID 或 slug
pnpm deploy:cf -- 01
pnpm deploy:esa -- openai-neutral
# 全部项目
pnpm deploy:cf -- all
pnpm deploy:esa -- allCloudflare 部署使用 Wrangler 当前登录态。ESA 支持 ESA_STS_TOKEN,或
ESA_ACCESS_KEY_ID / ESA_ACCESS_KEY_SECRET。凭证只通过环境变量或密钥管理服务注入,不应写入仓库。
MIT















