materials-workbench

TotalClaw 作者 totalclaw v1.0.0

材质编辑器工作台 — React UI 和 Express 服务器将 JSON 模式渲染为图像并使用 AI 生成模式（声明渲染 + 材料代理）。

安装 / 下载方式

TotalClaw CLI推荐

totalclaw install totalclaw:totalclaw~cai-zhuo-materials-workbench

cURL直接下载，无需登录

curl -fsSL https://skills.taituai.com/api/skills/totalclaw%3Atotalclaw~cai-zhuo-materials-workbench/file -o cai-zhuo-materials-workbench.md

## 概述（中文）

材质编辑器工作台 — React UI 和 Express 服务器将 JSON 模式渲染为图像并使用 AI 生成模式（声明渲染 + 材料代理）。

## 原文

# 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:

```bash
pnpm install
pnpm run install:all # install root, server, and client deps
pnpm run dev # start server + client (concurrently)
```

- 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).
- `server/` — 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.).