A specialized generator for creating Vision Node AI button controls with integrated metadata and interactive logic.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install aibutton
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 aibutton 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 AIButton?
AIButton is a robust skill designed for the Vision Node ecosystem, enabling developers to generate sophisticated AI button controls. It automates the creation of the dual-file structure required for VN AI components: a strictly formatted aiui.json metadata file and a high-performance index.html implementation. This Openclaw Skills utility ensures that generated buttons adhere to complex technical specifications, including transparent backgrounds, precise Flexbox alignment, and seamless parent-window communication protocols.
The skill excels at bridging the gap between high-level design descriptions and low-level technical requirements. By incorporating specific CSS fixes for scaling issues and providing a standardized JavaScript communication layer, AIButton guarantees that controls remain functional and visually consistent across different zoom levels and device types within the Vision Node environment.
AIButton Use Cases
- Generating 3D industrial control buttons for automated systems.
- Creating data-driven UI components that reflect real-time signal states.
- Rapid prototyping of custom AI-driven interface controls for Vision Node.
- Batch production of themed button sets with unique functional identifiers.
How AIButton Works
- The agent analyzes user requirements or generates a unique style description if no prompt is provided.
- Metadata is compiled into the aiui.json file, including unique MD5 hashing for component identification.
- The aiui.json is strictly compressed into a single-line format to ensure compatibility with VN parsing engines.
- An index.html file is generated, containing the layout, CSS scaling fixes, and the mandatory JavaScript communication logic.
- Both files are organized into a specific directory structure named after the component function and MD5 hash.
- The directory is packaged into a ZIP archive and delivered to the user's desktop for immediate deployment.
AIButton Setup
To ensure your Openclaw Skills environment is ready for AIButton, verify your Python and JSON tooling:
# Verify JSON compression capability
python3 -c "import json; print(json.dumps({'test': 'ok'}, separators=(',', ':')))"
# Prepare the output directory
mkdir -p ~/Desktop/VNAIButton/
AIButton Data Schema & Taxonomy
The skill manages data across two primary files within a structured ZIP archive:
| File | Purpose | Format Requirement |
|---|---|---|
aiui.json |
Metadata and technical rules | Single-line, compressed JSON |
index.html |
UI structure and logic | Formatted HTML/CSS/JS (not compressed) |
Directory Structure:
Function_MD5.zipFunction_MD5/aiui.jsonindex.html
AIButton Advanced Features
- Multi-mode state management (Manual vs. Data-driven) via the data-info attribute.
- Real-time signal processing supporting parent-window
postMessageprotocols. - Built-in anti-aliasing and scaling fixes using
box-sizing: border-boxandwhite-space: nowrap. - Automated MD5-based versioning to prevent file collisions during iterative development.
- Support for multiple LLM generators including MiniMax, GPT, and Kimi.
SKILL.md
Loading
Related Openclaw Skills
MemOS: Persistent Local Memory
MemOS provides a robust, private, and local-first memory layer for agents to remember every interaction without cloud dependency.
Backlink Prospector Lite
An AI-driven assistant that automates guest post opportunity discovery and generates personalized outreach emails to scale your link-building efforts.
MCP Security Auditor Lite
A specialized security tool designed to identify critical vulnerabilities within Model Context Protocol server configurations.
Client Proposal Generator Lite
A streamlined business development tool designed to transform project briefs into professional executive summaries and high-level scope outlines.
Alibaba Cloud Content Moderation (Green)
A professional toolset for managing Alibaba Cloud Content Moderation resources via OpenAPI and SDK integrations.
Aliyun OpenAPI Discovery
A specialized toolset for discovering, merging, and analyzing the complete Alibaba Cloud product and OpenAPI landscape.
Featured*
