Setup & Installation
Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:
What This Skill Does
Local web workbench with a React frontend and Express backend for editing and rendering JSON schemas to images. The server uses declare-render to produce PNG or JPG files and materials-agents, backed by OpenAI, to generate or refine schemas on request.
Combines a visual schema editor, AI-assisted schema generation, and live image rendering in one local environment, removing the need to switch between separate tools.
When to use it
- Editing render schemas and previewing image output in real time
- Generating a new schema layout with AI from a text description
- Iterating on layer composition for image templates
- Exporting PNG or JPG assets from JSON schema definitions
- Running a local dev environment for schema-based image creation
Example Workflow
Here's how your AI assistant might use this skill in practice.
User asks: generate a banner schema with a title and background color, then render it to PNG
- 1Starts the workbench server and client with `pnpm run dev`
- 2Sends the user's description to the AI schema generation endpoint
- 3Receives a declare-render JSON schema with text and shape layers
- 4Renders the schema to PNG via the Express server's render endpoint
- 5Displays the image preview in the React client UI
A PNG image rendered from the AI-generated declare-render schema
Requirements
Accounts, API keys, or tools you or your AI assistant may need to set up while using this skill.