refero-design-extractor

name	refero-design-extractor
description	Extract Refero Styles pages into project-ready design.md files. Use when the user gives a styles.refero.design/style URL, asks to capture a Refero design system, wants to understand a Refero DESIGN.md example, or wants a reusable Markdown design brief with tokens, typography, layout, components, imagery, motion, and agent prompt guidance.

Refero Design Extractor

Use this skill to turn a Refero Styles page into a local design.md artifact that another coding agent can use as a design contract.

Workflow

1. Fetch the Refero style URL using the bundled extractor script.
   • If running as an npm/npx CLI: npx refero-design-extractor "<url>" -o design.md
   • If running locally: node cli.js "<url>" -o design.md
   • If the old Python script is available: python scripts/extract_refero_design.py "<url>" -o design.md
2. Save the extracted Markdown to the requested output path. Default to design.md in the current project root.
3. Read the generated file briefly and sanity-check that it includes the core sections:
   • Tokens — Colors
   • Tokens — Typography
   • Tokens — Spacing & Shapes
   • Components
   • Do's and Don'ts
   • Surfaces
   • Imagery
   • Layout
   • Agent Prompt Guide
4. If any core section is missing, inspect the page manually and patch the Markdown from the visible DESIGN.md tab.
5. When applying the design to a project, treat design.md as intent and adapt it to the local app rather than blindly copying every value.

Command

# Via npx (no install required)
npx refero-design-extractor "https://styles.refero.design/style/<id>" -o design.md

# Via global install
npm install -g refero-design-extractor
refero-design-extractor "https://styles.refero.design/style/<id>" -o design.md

# Local Node.js
node cli.js "https://styles.refero.design/style/<id>" -o design.md

# Local Python (legacy)
python scripts/extract_refero_design.py "https://styles.refero.design/style/<id>" -o design.md

Use --stdout when the user only wants to inspect the extracted Markdown without saving.

What Refero DESIGN.md Contains

Refero style pages expose a copyable Markdown block in the DESIGN.md tab. The useful block starts with:

# <Brand> — Style Reference

It usually includes color tokens, typography scale, spacing, border radii, components, do/don't rules, surface hierarchy, imagery, layout, prompt examples, gradients, motion philosophy, similar brands, and CSS custom properties. Preserve these sections because they explain not only the visual values but also the constraints behind them.

Output Rules

• Save UTF-8 Markdown.
• Preserve em dashes, quotes, tables, and fenced code blocks.
• Do not summarize unless the user explicitly asks for a summary.
• Do not overwrite an existing design.md without confirming or writing to a clearly named alternate file such as design.refero.md.
• Cite the source URL in the final response.