← Back to Skills Marketplace
Design.md Extractor
by
Liuwei1125
· GitHub ↗
· v1.0.0
· MIT-0
48
Downloads
0
Stars
0
Active Installs
1
Versions
Install in OpenClaw
/install design-md-extractor
Description
Use when the user wants to generate DESIGN.md or design.md from a webpage URL by running a local, rule-based design token extraction script. The skill opens...
README (SKILL.md)
Design.md Extractor
Use this skill to turn a user-provided webpage URL into design.md/DESIGN.md using local deterministic extraction.
Default Workflow
- Confirm the user provided a URL or local HTML file path.
- From this skill directory, run
pnpm install --frozen-lockfileifnode_modules/playwrightis missing. - Run
scripts/extract-design.mjsfrom this skill directory. - Prefer writing both:
design.mdfor the human/model-facing design guide.design-snapshot.jsonfor evidence and debugging.
- Inspect the generated
design.mdbefore reporting results. - If extraction fails, report the exact failure and whether it was navigation, browser, sampling, dependency installation, or generation.
Commands
Generate from a URL:
pnpm install --frozen-lockfile
node scripts/extract-design.mjs --url https://example.com --out ./design.md --snapshot ./design-snapshot.json
Generate from a local HTML file:
pnpm install --frozen-lockfile
node scripts/extract-design.mjs --url file:///absolute/path/to/page.html --out ./design.md --snapshot ./design-snapshot.json
The script is self-contained and loads its bundled extractor core from lib/design-extractor-core. It auto-detects common macOS browser executables. If Playwright cannot find a browser, pass one explicitly:
node scripts/extract-design.mjs --url https://example.com --out ./design.md --snapshot ./design-snapshot.json --executable-path "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
Rules
- Analyze only URLs or files explicitly provided by the user.
- Do not crawl additional pages.
- Do not use AI/model APIs.
- Do not upload page HTML, CSS, DOM, screenshots, browsing history, or extracted data.
- Do not infer login-only or hidden states unless the loaded page visibly exposes them.
- Treat generated design tokens as a practical starting point, not a hand-authored brand book.
References
- Read
references/snapshot-schema.mdwhen you need the DesignSnapshot shape. - Read
references/extraction-rules.mdwhen modifying extraction behavior or explaining confidence limits.
Usage Guidance
Install only if you are comfortable letting the skill inspect the visible page you provide. Avoid running it on sensitive logged-in dashboards, customer data, internal tools, or pages with secrets unless local design.md and snapshot files may safely contain page metadata, CSS identifiers, and short visible text evidence.
Capability Assessment
Purpose & Capability
The Playwright browser access, DOM/style sampling, and DESIGN.md generation match the stated design-extraction purpose.
Instruction Scope
Instructions limit use to explicit user-provided URLs or local files, forbid crawling, model APIs, and uploads, but do not fully spell out that snapshots can include titles, URLs, CSS identifiers, selector hints, and short visible text evidence.
Install Mechanism
Installation uses a standard locked pnpm dependency on Playwright; no hidden install hooks or suspicious dependency patterns were found.
Credentials
The skill opens the requested URL in a local headless browser and writes local output files, which is proportionate, but users should avoid private or authenticated pages unless they are comfortable with extracted evidence being saved locally.
Persistence & Privilege
No background persistence, privilege escalation, credential access, destructive behavior, or external exfiltration was found; persistence is limited to the requested design.md and optional snapshot output.
How to Use
- Make sure OpenClaw is installed (local or Docker)
- Run the install command in chat:
/install design-md-extractor - After installation, invoke the skill by name or use
/design-md-extractor - Provide required inputs per the skill's parameter spec and get structured output
Version History
v1.0.0
- Initial release of design-md-extractor.
- Generate DESIGN.md or design.md from any user-provided webpage URL or local HTML file.
- Uses Playwright to sample computed styles and extract design tokens (colors, typography, spacing, radius, shadows, components) locally.
- No model API calls or external uploads; fully deterministic and privacy-respecting.
- Outputs both a human/model-friendly design.md and a design-snapshot.json for evidence and debugging.
- Detailed error reporting on navigation, browser, sampling, dependency installation, or generation failures.
Metadata
Frequently Asked Questions
What is Design.md Extractor?
Use when the user wants to generate DESIGN.md or design.md from a webpage URL by running a local, rule-based design token extraction script. The skill opens... It is an AI Agent Skill for Claude Code / OpenClaw, with 48 downloads so far.
How do I install Design.md Extractor?
Run "/install design-md-extractor" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.
Is Design.md Extractor free?
Yes, Design.md Extractor is completely free, licensed under MIT-0. You can download, install and use it at no cost.
Which platforms does Design.md Extractor support?
Design.md Extractor is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).
Who created Design.md Extractor?
It is built and maintained by Liuwei1125 (@liuwei1125); the current version is v1.0.0.
More Skills