360 Secure SkillHub
360 安全技能中心

Design.md Extractor

通过本地 Playwright 打开用户提供的 URL 或本地 HTML，按规则采样计算样式并推断颜色、字体、间距、圆角、阴影与基础组件，输出便于 AI 编码使用的 design.md/DESIGN.md 及 design-snapshot.json；不调用模型 API，不上传页面数据。

liuwei1125
liuwei1125
热度 16.02
最近更新 2026-06-01 19:41:51
分类：效率依赖：代码执行 / 联网浏览搜索 / 读写文件应用场景：UI 原型 / 品牌素材 / 数据处理 / 工作流

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add design-md-extractor
Metadata
name
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 the user-provided URL with Playwright, samples computed styles locally, infers colors, typography, spacing, radius, shadows, and basic components, then writes AI-coding-friendly design documentation without model API calls.

Design.md Extractor

Use this skill to turn a user-provided webpage URL into design.md/DESIGN.md using local deterministic extraction.

Default Workflow

  1. Confirm the user provided a URL or local HTML file path.
  2. From this skill directory, run pnpm install --frozen-lockfile if node_modules/playwright is missing.
  3. Run scripts/extract-design.mjs from this skill directory.
  4. Prefer writing both:
    • design.md for the human/model-facing design guide.
    • design-snapshot.json for evidence and debugging.
  5. Inspect the generated design.md before reporting results.
  6. 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.