Web Studio

Web Studio 是前端的工作空间。智能由引擎提供，智能体可端到端地操作它。从左侧边栏（Alt+Shift+W）或主页上的 设计一个界面 打开。

前端索引

Yuli 会为项目的前端建立索引：

• React、Vue、Angular、HTML 和 JSP 组件。
• CSS、SCSS 和 LESS 样式。
• 路由、HTTP 调用和微前端。
• 与后端的关联。

架构与影响

• 组件、文件、路由、API 和样式的关系图，以及页面、组件、服务、API、后端和数据的统一视图。
• 影响分析：修改某个文件、组件、选择器、样式变量或路由时，哪些部分会受影响。
• 无障碍：基于 WCAG 的静态审计。

Design Studio

先设计，再写代码。

• 按设备划分的页面和画框。
• 标注和状态流程：草稿 → 评审 → 已批准 → 已实现。
• 带 diff 的版本管理，支持撤销和重做。
• 内置 AI 工具栏。

Design System

颜色、字体、间距、圆角、阴影、断点和动效的 token。可从代码中导入，并会校验对比度。

从设计到代码

新组件会复用项目中已有的组件，并采用无障碍、响应式的标记。Yuli 还能根据现有代码重建设计，并对比设计与代码。

两个聊天，两种上下文

• 主聊天处理代码。
• Web Studio 的聊天处理设计，直接在画布上实时进行。

二者从不共享对话线程。如果你在主聊天中输入的内容听起来像界面设计，会出现 “在 Web Studio 中设计”，将该需求发送到画布。如果有打开的设计，主聊天会提供 “前往设计的聊天”。

免运行预览

无需启动应用或开发服务器，即可显示组件、页面、设计或刚写好的代码。

• 使用项目自身的工具（包括 SCSS 和 LESS）只编译该组件，并用示例 props 挂载。
• 未安装依赖时，会根据标记绘制一个近似草图。
• 保存代码或修改设计时自动更新。

JSP 应用

同样适用于 JSP Web 应用（Maven 或 Gradle，搭配 Struts 1 或 2、Spring MVC 或纯 Servlet）：它会找到 Web 根目录、web.xml 中的首页和 action 路由，并解析 include、消息和 taglib。

免运行查看完整项目

整个应用无需开发服务器、无需后端、也无需打开任何窗口：

• 使用打包工具（Vite、webpack、CRA 和微前端）会用到的入口、HTML 页面、基础路由和 .env 配置，且不暴露机密。
• 如果项目使用其他工具，则使用 Yuli 自带的 esbuild。
• node_modules 中的依赖只编译一次，只要 lockfile 不变就会复用。

API 模拟器

应用发出的每个请求都会由以下来源响应：

• 项目中的 OpenAPI 或 Swagger 契约。
• REST Client 中保存的响应。
• 自定义规则：状态码、响应体和延迟。

你可以实时看到所有调用，更改会直接作用到页面上，无需刷新。

保存的路由

按项目保存带名称和参数的路由。将其中一个标记为起始路由，应用打开时即处于有用的状态。

分屏视图

• 设计 + 代码：你编辑代码，视图会自动重新编译。
• 设计 + AI：需求会附带路由、元素、其代码以及失败的调用。

内嵌预览

始终在 IDE 内部，绝不使用外部浏览器：

• 项目的开发服务器、单个组件或任意 URL。
• 通过一个选择器，可让同一组件在“未运行”和“运行”之间切换。
• 元素 ↔ 组件 ↔ 代码行检查器。
• 控制台、网络、截图和视觉对比。

Compound

Compound 可启动完整的全栈应用：

• 按依赖顺序启动，并执行 health check。
• 统一日志和级联重启。
• 端口已为调试准备就绪。
• 机密始终以掩码形式显示。

其定义保存在 .ai/compound.yaml 中。

与智能体协作

智能体通过 yuli_front_*、yuli_design_*、yuli_preview_* 和 yuli_compound_* 工具操作 Web Studio：它可以检查视图、截图并在其上迭代，而无需创建或运行应用。只有当项目包含前端时，Web Studio 的工具才会发送给模型。