Page Claw is an automated pipeline that transforms structured markdown briefs into sophisticated, single-file static HTML portfolios and personal pages.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install pageclaw
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 pageclaw 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 Page Claw?
Page Claw is a high-performance automation tool designed to bridge the gap between content creation and web development. It takes a specialized page-story markdown file as input and orchestrates a multi-stage pipeline to produce a polished, responsive, and aesthetically unique index.html file. By leveraging the power of Openclaw Skills, it eliminates the manual effort of CSS styling and layout configuration while ensuring high-quality design standards.
The skill is particularly effective for developers, academics, and creatives who need a professional web presence without the overhead of complex frameworks. It doesn't just convert text; it analyzes design signals, generates dynamic aesthetic options (ranging from Brutalist to Glassmorphism), and applies rigorous quality audits to ensure the final output is accessible and performant.
Page Claw Use Cases
- Creating academic homepages or research profiles from simple markdown notes.
- Generating professional portfolio pages for designers and developers.
- Building quick, high-quality landing pages for personal projects.
- Rapidly prototyping web layouts based on existing reference site design signals.
How Page Claw Works
- The skill verifies the presence of a page-story-*.md file or initializes a starter template for the user.
- It gathers design context by analyzing user-provided reference URLs or presenting 4 distinct aesthetic style options.
- It invokes teach-impeccable and ui-ux-pro-max to establish a design system including typography, palette, and CSS signatures.
- A task-by-task implementation plan is generated using the writing-plans Openclaw Skills.
- The build phase executes the plan, rendering semantic content into structured HTML with icon-based links and responsive layouts.
- A final quality pass is performed using polish and audit skills to ensure accessibility and visual excellence.
Page Claw Setup
To start using this skill, ensure you have a page-story markdown file ready in your directory. If you don't have one, the skill will create a starter for you.
# To trigger the conversion pipeline
/page-claw page-story-your-name.md
# If no file exists, the skill will prompt you to create:
# ~/.claude/skills/page-claw/page-story-starter.md
Page Claw Data Schema & Taxonomy
Page Claw organizes its workflow through specific intermediate artifacts to maintain a clear source of truth:
| Artifact | Path | Purpose |
|---|---|---|
| Design Document | docs/plans/YYYY-MM-DD-*-design.md |
Contains design context, system specs, and aesthetic implementation details. |
| Implementation Plan | docs/plans/YYYY-MM-DD-*-impl.md |
Step-by-step build instructions derived from the design doc. |
| Final Output | index.html |
The complete, standalone static webpage. |
| Page Story | page-story-*.md |
The authoritative source for all content and site structure. |
Page Claw Advanced Features
- Design Signal Extraction: Automatically parses CSS signals (color temperature, typography, spacing) from reference URLs using WebFetch.
- Custom CSS Signatures: Generates unique 3-5 line CSS fingerprints for selected aesthetics to ensure non-generic styling.
- Automated Quality Stack: Sequences the polish, audit, and critique Openclaw Skills for a production-ready finish.
- Semantic Rendering: Automatically converts plain text lists into structured visual elements like timelines or icon-based badge systems.
SKILL.md
Loading
Related Openclaw Skills
Full Page Article Translator
A high-fidelity translation engine that converts foreign web content into natural, publication-ready Simplified Chinese markdown.
LinkedIn Post Engine
A professional content creation system designed to generate research-backed, high-engagement LinkedIn posts using proven hooks and narrative structures.
Free Web Search Ultimate
A universal Search-First knowledge acquisition plugin that enables LLMs to access real-time web data, news, and full-page content.
AkShare Fund Analysis
A quantitative data analysis tool for public funds, enabling deep insights into holdings, valuations, and performance tracking via AkShare.
project-narrator
A specialized workflow for maintaining a living PROJECT-NARRATIVE.md file that captures architecture, decisions, and infrastructure to ensure project reconstructability.
Phoenix Iterate
Phoenix Iterate is an AI-driven quantitative strategy workflow that orchestrates briefing, code generation, and forensic diagnosis for QuantConnect strategies.
Featured*
