A local web-based editor for rendering JSON schemas into images and generating creative assets using AI agents.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install materials-workbench
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install materials-workbench using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Materials Workbench?
The Materials Workbench is a comprehensive local development environment designed for developers who need to bridge the gap between structured data and visual assets. By combining a React-based frontend with an Express backend, this tool provides a seamless interface for editing, previewing, and rendering complex image schemas. It is a standout feature within the Openclaw Skills ecosystem for those looking to automate the creation of graphical content.
This workbench leverages the power of the declare-render framework to transform JSON definitions into high-quality PNG or JPG files. By integrating with materials-agents, it allows users to utilize OpenAI for intelligent schema generation and refinement, making it much more than a simple previewer. Whether you are building dynamic social media assets or automated UI components, this skill from Openclaw Skills provides the necessary infrastructure.
Materials Workbench Use Cases
- Launching a local GUI for visual schema management and real-time previews.
- Generating or refining complex image layouts using OpenAI-powered agents.
- Rendering structured JSON definitions into production-ready images like PNG or JPG.
- Testing and prototyping declare-render schemas in a dedicated workbench environment.
How Materials Workbench Works
- The user initializes the workbench which starts a dual-process environment: a Vite-powered React client and an Express server.
- The React client provides a visual interface where users can manually define or modify JSON schemas containing layers, text, and shapes.
- The Express server processes these schemas using the declare-render engine and interacts with OpenAI via materials-agents to perform AI-driven modifications.
- Rendered images are served back to the client for instant previewing or exported as final image files.
Materials Workbench Setup
To get started with this skill from the Openclaw Skills collection, ensure you have Node.js and pnpm installed. You will also need a valid OpenAI API key for AI features.
pnpm install
pnpm run install:all # Installs root, server, and client dependencies
export OPENAI_API_KEY='your_key_here'
pnpm run dev # Starts server and client concurrently
Once running, access the client UI at http://localhost:5173 and the server API at http://localhost:3000.
Materials Workbench Data Schema & Taxonomy
The workbench follows the declare-render format, organizing data into a hierarchical JSON structure that defines the visual output. This structure is central to how Openclaw Skills manage visual data.
| Property | Description |
|---|---|
| id | Unique identifier for the specific schema |
| width | Total image width in pixels |
| height | Total image height in pixels |
| layers | An array of objects defining text, images, containers, or shapes |
The project is organized into two primary directories:
- client/: Contains the React frontend and Vite configuration.
- server/: Houses the Express backend, rendering logic, and AI integrations.
Materials Workbench Advanced Features
- Integrated AI schema generation using the materials-agents package and OpenAI.
- Concurrent execution of server and client for a streamlined local development workflow.
- Support for a wide variety of layer types including containers and custom shapes.
- Extensible backend architecture utilizing the declare-render framework for advanced image processing tasks.
SKILL.md
Loading
Related Openclaw Skills
Chaterimo
Chaterimo is an AI-powered customer service platform for e-commerce that integrates with Openclaw Skills to provide deep insights into chatbot performance and customer interactions.
Script Git Manager
A deterministic workflow manager that creates and modifies scripts using strict Git versioning and isolated Python environments.
Meme Collector
An automated AI skill that scrapes, filters, and synchronizes the latest internet slang and memes into a structured Dify knowledge base.
CSDN Publisher
An advanced AI agent skill for generating high-quality technical articles and automating the publishing process on CSDN.
Materials CLI
A command-line tool for rendering declare-render JSON schemas into images and generating visual schemas from natural language prompts using AI.
Feishu Backup
A smart automation skill that intelligently downloads files from Feishu group chats to a local directory using natural language intent.
Featured*
