Docs Page Designer
Creates a three-column documentation page as a single HTML file, styled from a design system.
- Repository
- nexu-io/open-design
- Stars
- 105,448
- Licence
- Apache-2.0
- Files
- 2 files
What it does
When you ask for a documentation or API reference page, the agent builds one self-contained HTML file laid out like real developer docs: a navigation sidebar on the start side, a readable article in the middle with headings, code blocks, notes and a table, and a table of contents on the end side. It follows a design system file (DESIGN.md) for fonts, colours and spacing, and checks that the layout also works for right-to-left languages and narrower screens.
Great for
- Designers prototyping how a documentation site could look before building it
- Developers who want a realistic-looking docs mockup to share with a team
- Teams exploring layout for API reference or tutorial pages in multiple languages
Skip it if
- Producing a fully working documentation site with a build pipeline, search or live content, since it outputs a static mockup (a single HTML file)
- Publishing real product documentation without review, because the example commands, parameters and API names are generated and may be inaccurate
Try asking
- “Make a documentation page for a fictional REST API with authentication and pagination examples”
- “Create a tutorial-style guide page for a command line tool, with a shell command and a code snippet”
- “Design an API reference page with a table of parameters and a warning callout”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.
docs-page.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip docs-page.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip docs-page.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 3
Ask for the task
No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.
Get better results
- Provide a design system (DESIGN.md) first so colours and type match your brand; the skill depends on it
- Name the product and topic in your brief so the generated commands and API names feel specific rather than generic
- Check every generated command and parameter against the real product before reusing any content
What's inside
- example.html
- SKILL.md
Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.