Materials Workbench
Use this skill when the user wants to run the materials editor workbench: a local web app with a React client and Express server that renders JSON schemas to images (declare-render) and can generate or edit schemas using AI (materials-agents).
What it is
- - Client — React + Vite app for editing and previewing render schemas.
- Server — Express API that renders schemas to PNG/JPG and uses materials-agents (OpenAI) for schema generation or refinement.
When to use
- - User wants to "run the workbench", "start the materials editor", or "open the schema editor UI".
- User needs a local dev environment for rendering schemas and AI-assisted schema creation.
Run
From the workbench root:
CODEBLOCK0
- - Client usually: http://localhost:5173
- Server usually: http://localhost:3000 (or port in server config)
Set OPENAI_API_KEY for AI/generate features.
Project layout
- -
client/ — React frontend (Vite). - INLINECODE2 — Express backend (declare-render, materials-agents, canvas).
Schema format
Same as materials-cli: declare-render format with id, width, height, layers (text, image, container, shape, etc.).
材料工作台
当用户想要运行材料编辑器工作台时使用此技能：一个本地Web应用，包含React客户端和Express服务器，可将JSON模式渲染为图像（declare-render），并可使用AI生成或编辑模式（materials-agents）。
功能说明
- - 客户端 — 用于编辑和预览渲染模式的React + Vite应用。
- 服务器 — 将模式渲染为PNG/JPG的Express API，并使用materials-agents（OpenAI）进行模式生成或优化。
使用场景
- - 用户想要运行工作台、启动材料编辑器或打开模式编辑器界面。
- 用户需要用于渲染模式和AI辅助模式创建的本地开发环境。
运行方式
在工作台根目录下：
bash
pnpm install
pnpm run install:all # 安装根目录、服务器和客户端依赖
pnpm run dev # 同时启动服务器和客户端
- - 客户端通常位于：http://localhost:5173
- 服务器通常位于：http://localhost:3000（或服务器配置中的端口）
设置OPENAIAPIKEY以使用AI/生成功能。
项目结构
- - client/ — React前端（Vite）。
- server/ — Express后端（declare-render、materials-agents、canvas）。
模式格式
与materials-cli相同：declare-render格式，包含id、width、height、layers（文本、图像、容器、形状等）。
