Automates the creation of professional Word and Markdown documentation for mini-programs and uni-app projects by combining source code with UI screenshots.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install page-doc-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 page-doc-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 Page Doc Generator?
The Page Doc Generator is a specialized automation utility designed for developers working on mini-program and uni-app ecosystems. This skill simplifies the tedious task of technical documentation by automatically scanning your project structure, identifying Vue pages, and pairing them with their corresponding visual screenshots. By leveraging Openclaw Skills, developers can produce high-quality project manuals that include both visual context and technical implementation details.
This tool is particularly valuable for teams that need to maintain synchronized documentation between the UI design and the codebase. It ensures that every page in your application is accounted for, providing a clear map of the project for clients, stakeholders, or new team members.
Page Doc Generator Use Cases
- Generating final project delivery documentation for clients in professional Word format.
- Creating internal technical references for uni-app and mini-program maintenance.
- Streamlining the handoff process between frontend developers and QA teams.
- Documenting UI/UX flows alongside the actual Vue source code for code reviews.
How Page Doc Generator Works
- Scans the project directory to locate all Vue page files within the pages/ folder structure.
- Indexes the screenshots directory to match image files with specific page names based on naming conventions.
- Generates a structured Markdown file that embeds the page metadata, UI screenshots, and source code blocks.
- Invokes Pandoc to convert the intermediate Markdown file into a formatted .docx Word document.
Page Doc Generator Setup
To utilize this skill, you must have Python and Pandoc installed and configured in your system PATH. Follow these steps to generate your documentation:
# 1. Generate the initial Markdown and structure
python scripts/generate_page_doc.py "/your/project/path" "/your/screenshots/dir"
# 2. Convert the generated Markdown into a Word document
python scripts/convert_to_docx.py "/your/project/path/project_name_页面文档.md"
Page Doc Generator Data Schema & Taxonomy
The skill organizes data by mapping project files to a documentation hierarchy. The output consists of the following structure:
| Data Type | Description | format |
|---|---|---|
| Source Code | Vue files from the /pages directory | .vue |
| Screenshots | Images matching page filenames (PNG, JPG, WebP) | .png/.jpg |
| Markdown Source | Intermediate documentation file with embedded code | .md |
| Final Document | Professional Word document for distribution | .docx |
Note: For files exceeding 500 lines, the tool automatically truncates the code to maintain document readability.
Page Doc Generator Advanced Features
- Fuzzy matching for screenshots, allowing for multiple variations like index.png or index01.png.
- Automatic source code truncation for large files to prevent document bloat.
- Integrated Pandoc resource path handling for seamless image rendering in Word.
- Support for multiple image formats including WebP and GIF.
- Dual-output generation providing both raw Markdown and final Word formats via Openclaw Skills.
SKILL.md
Loading
Related Openclaw Skills
Session Snapshot
An automated state management tool that periodically captures AI agent session data to support breakpoint recovery and historical backtracking.
Memory Compactor
A specialized utility that automatically organizes and compresses long-term AI memory to prevent context bloat and maintain agent efficiency.
Humanizer
A technical writing editor designed to identify and remove stylistic signs of AI-generated text to produce natural, human-sounding content.
Tool Permission Manager
A security-first management layer that provides granular authorization and access control for every tool used by an AI agent.
Task Router
An intelligent orchestration layer that automatically analyzes task intent and routes requests to the most specialized Agent or Skill.
Get My Location
A zero-dependency geolocation utility for Openclaw Skills that retrieves IP-based location data with a reliable multi-source fallback system.
Featured*
