An intelligent skill that transforms business requirements into functional admin list prototypes, supporting both framework-integrated and standalone HTML outputs.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install prototype-generator
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 prototype-generator 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 Prototype Generator?
The Prototype Generator is a specialized tool within the Openclaw Skills ecosystem designed to bridge the gap between requirement gathering and initial UI development. It analyzes user descriptions to automatically scaffold backend management interfaces, including search filters, data tables, and action buttons.
By detecting your existing project context, the skill can either integrate deeply with frameworks like kfk-mock-ui or generate portable, zero-dependency standalone HTML files. This flexibility makes it a powerful asset for developers needing to visualize data structures and user flows without manual coding overhead.
Prototype Generator Use Cases
- Creating comprehensive admin prototypes from high-level business descriptions.
- Rapidly adding new list or management pages to an existing dashboard project.
- Generating standalone, shareable HTML mockups for stakeholder review or client demos.
- Scaffolding CRUD interfaces with pre-configured query filters and data table columns.
How Prototype Generator Works
- Context Detection: The skill scans the current directory for specific files like
kfk-mock-ui.jsorkfk-admin.cssto determine the appropriate output mode (Framework, Sub-project, or Standalone). - Requirement Parsing: It extracts key entities from user input, identifying module names, menu groups, and specific page fields.
- Field Inference: The engine applies logical rules to map data types to UI components, such as converting "Status" fields into select dropdowns and "Name" fields into fuzzy-search inputs.
- Code Generation: It generates the required file set, which may include
menu.jsfor navigation,view_xxx.htmlfor the UI, andmock-ui.jsfor simulated data. - Validation: Finally, it cross-references generated IDs and keys to ensure the navigation and data binding are perfectly synchronized.
Prototype Generator Setup
To use this within your project, ensure the skill is active in your Openclaw Skills environment. No complex installation is required; simply provide a prompt describing your desired interface. For framework-specific generation, verify your project contains the necessary dependencies:
# Check for framework dependency
ls kfk-mock-ui.js
# Or check for admin styles
ls css/kfk-admin.css
Prototype Generator Data Schema & Taxonomy
The Prototype Generator organizes UI metadata into structured formats to ensure consistency:
| Component | Attribute | Purpose |
|---|---|---|
| queryFields | key, label, type, mode |
Defines search bar inputs and filtering logic |
| columns | key, title, align, mono |
Configures the data table display and data mapping |
| rowActions | act, label, danger |
Defines buttons for viewing, editing, or deleting rows |
| menu | group, items, id, href |
Sets up the sidebar or top-level navigation structure |
Prototype Generator Advanced Features
- Automatic Field Inference: Intelligently guesses the best UI component based on field names (e.g., date pickers for 'time' fields).
- Multi-Mode Output: Switch between single-page standalone HTML and complex multi-page iframe architectures.
- Mock Data Branching: Automatically generates simulated data rows in
mock-ui.jsthat match your new schema. - Custom Rule Compliance: Respects project-specific
.cursor/rules/prototype-menu.mdcand CRUD conventions if present.
SKILL.md
Loading
Related Openclaw Skills
Social Media Content Optimizer
A specialized AI agent skill designed to transform raw content into high-performing social media posts across major platforms.
SEO Content Optimizer
A professional AI skill designed to analyze and optimize digital content for superior search engine performance and user readability.
Content Structure Designer
A professional framework architect that transforms raw ideas into logically structured, high-engagement content outlines.
Content Headline Generator
An AI-powered copywriting tool designed to generate high-conversion headlines for blog posts, social media, and video content using marketing psychology.
Molthunt
Molthunt is the ultimate launchpad where AI agents submit projects, hunt for innovation, and earn rewards through community engagement and tokenization.
Bento Grid Generator
An automated utility for generating aesthetic, high-resolution bento grid layouts and social media graphics via Python.
Featured*
