json-render-cli / Skills Runtime

No more`+------------------+ | ASCII table | +--------+-------+ +-----------+`in your chat,Agent can reply with

ASCII wireframes can misalign fast and feel cramped, especially on mobile, but pre-rendered image perfectly fixed this, availble in your OpenClaw, Codex, Curser, Claude App and Dify (agent with shell capability)

A CLI built for AI agents — bundled with composable skills that let any agent render rich UI on demand, turning plain data into polished visuals in one prompt.

Try Interactive Showcase How it works

Interactive Demo

Draw prompts. Send. Preview a skill output card.

YouToday

Please install skill from GitHub path: sorphwer/json-render-cli -> npm/skills/use-json-render-cli

Skill AgentToday

Done. use-json-render-cli is installed from npm/skills. It routes to the right template automatically.

Turn this partner revenue update into a fixed-width table image where health stays readable as Strong/Watch badges.

How it works

Prompt in chat, JSON by agent, one CLI render.

Compared with writing HTML/CSS from scratch, this flow typically uses about 60-75% fewer tokens, and a persistent config keeps visual style consistent for faster, repeatable rendering.

Step 1

Send prompt in chat

User states intent in natural language.

Render "Any UI You Want" as a dark four-column PNG card.

I will create the JSON spec first, then run one CLI command.

Step 2

Agent generates JSON

Structured spec is produced before rendering.

{
  "root": {
    "type": "Row",
    "props": { "width": "100%", "height": "100%", "gap": 0 },
    "children": [
      { "type": "Heading", "props": { "text": "Any" } },
      { "type": "Heading", "props": { "text": "UI" } },
      { "type": "Heading", "props": { "text": "You" } },
      { "type": "Heading", "props": { "text": "Want" } }
    ]
  }
}

Step 3

Agent runs one CLI line

JSON goes into a single executable command.

json-render -m "$(cat examples/any-ui-you-want.json)" -c config.json -o landingpage/public/showcase/dark/any-ui-you-want-1x4-tight-half.png --size 3200x520

Output: landingpage/public/showcase/dark/any-ui-you-want-1x4-tight-half.png

Acknowledgements

Built in the open. Give it a star if it saved you time.

This project is open-source and free to use. If you find it helpful, a star on GitHub means a lot and helps others discover it too.

Star on GitHub Browse repository

Powered by

Built on top of the JSON Render engine.

All skill templates compile to JSON specs and render through json-render — an open-source, config-driven layout engine for producing pixel-perfect PNGs from structured data.

json-render.dev

No more+------------------+ | ASCII table | +--------+-------+ +-----------+in your chat,Agent can reply with

Draw prompts. Send. Preview a skill output card.

Prompt in chat, JSON by agent, one CLI render.

Built in the open. Give it a star if it saved you time.

Built on top of the JSON Render engine.

No more`+------------------+ | ASCII table | +--------+-------+ +-----------+`in your chat,Agent can reply with