An automated interface builder that generates standardized HTML preview pages for lists, forms, and details using the FTdesign system.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install guidelines
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 guidelines 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 FTdesign HTML Generator?
The FTdesign HTML Generator is a specialized tool designed to accelerate the frontend development lifecycle. As part of the Openclaw Skills collection, it allows developers to generate high-fidelity HTML previews simply by describing the page requirements in natural language. It strictly adheres to the FTdesign system, ensuring all generated layouts, components, and styles are consistent with professional enterprise standards.
This skill eliminates the manual effort of setting up complex layouts like fixed sidebars, data tables, and multi-column forms. By leveraging a centralized CSS variable system and standardized templates, it provides a bridge between initial requirements and functional UI prototypes that can be instantly previewed within an AI-enhanced IDE.
FTdesign HTML Generator Use Cases
- Rapidly creating administrative dashboard list pages with integrated search filters and pagination.
- Generating data entry forms with specific field types like text areas, selects, and radio buttons.
- Building information-rich detail views for order management or user profiles.
- Prototyping enterprise-grade side navigation and header structures following a unified design spec.
How FTdesign HTML Generator Works
- Page Identification: The agent analyzes the user prompt for keywords related to lists, forms, or detail views to determine the correct page type.
- Template Retrieval: It selects the corresponding HTML template from the local assets directory to serve as the structural base.
- Data Parsing: The skill extracts metadata such as page titles, field names, required validation, and button actions from the user input.
- HTML Generation: A complete HTML file is constructed, integrating the CSS variable system and Remix Icon CDN links.
- Integrated Preview: The final output is rendered directly in the development environment for immediate review and further iteration using Openclaw Skills functionality.
FTdesign HTML Generator Setup
To integrate this into your workflow, ensure the skill files are placed in the appropriate directory:
mkdir -p .codebuddy/skills/ftdesign-html-generator
# Copy the skill assets and templates into the folder
Ensure your development environment has network access to the Remix Icon CDN (https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css) for proper icon rendering. No additional backend dependencies are required for the core HTML generation.
FTdesign HTML Generator Data Schema & Taxonomy
The skill manages its output and configuration through a specific file hierarchy:
| File Type | Path | Purpose |
|---|---|---|
| Core Logic | SKILL.md |
Contains the triggers and design system rules |
| Templates | assets/templates/*.html |
Base structures for list, form, and detail pages |
| Styles | assets/css/ftdesign-vars.css |
Defines the 10-level grayscale and brand color variables |
| References | references/*.md |
Detailed component APIs and design specifications |
FTdesign HTML Generator Advanced Features
- Custom Variable Overrides: Modify the CSS variable system to adapt the brand colors and spacing without changing the HTML structure.
- Scripted Generation: Includes a Python script for batch processing HTML generation from structured data inputs.
- Multi-Agent Compatibility: Designed to work alongside other Openclaw Skills for automated frontend-to-backend integration.
- Layout Constraints: Enforces strict layout rules like fixed 240px sidebars and specific card padding to maintain design integrity.
SKILL.md
Loading
Related Openclaw Skills
NewsHelp Content Navigator
A navigation-first approach to accessing structured news data and global topic archives efficiently.
Deepgram CLI Skill
A powerful command-line interface for transcribing local audio files, remote URLs, and live microphone input using Deepgram's AI models.
PR Risk Analyzer
Automatically evaluate GitHub pull requests for security vulnerabilities, exposed secrets, and structural merge risks.
Agent Voice
A command-line blogging and social platform designed specifically for AI agents to publish, share, and interact through markdown posts.
Beeper API CLI
A specialized command-line interface and LLM-friendly wrapper that enables AI agents to read, search, and send messages across all chat networks connected to Beeper.
Drafts CLI
A macOS-native command-line interface for the Drafts app that enables programmatic note management and workflow automation.
Featured*
