← 返回 Skills 市场

Design.md Extractor

Name: Design.md Extractor
Author: liuwei1125

作者 Liuwei1125 · GitHub ↗ · v1.0.0 · MIT-0

cross-platform ✓ 安全检测通过

总下载

当前安装

版本数

在 OpenClaw 中安装

/install 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...

使用说明 (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-lockfile if node_modules/playwright is missing.
Run scripts/extract-design.mjs from this skill directory.
Prefer writing both:
- design.md for the human/model-facing design guide.
- design-snapshot.json for evidence and debugging.
Inspect the generated design.md before 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.md when you need the DesignSnapshot shape.
Read references/extraction-rules.md when modifying extraction behavior or explaining confidence limits.

安全使用建议

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.

能力评估

✓ 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.

如何使用

确保已安装 OpenClaw（本地或 Docker 部署）
在对话框中输入安装命令：/install design-md-extractor
安装完成后，直接呼叫该 Skill 的名称或使用 /design-md-extractor 触发
根据 Skill 的参数说明提供必要输入，即可获得结构化输出

版本历史

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.

元数据

Slug design-md-extractor

版本 1.0.0

许可证 MIT-0

累计安装 0

当前安装数 0

历史版本数 1

常见问题