extract-site

extract Convert any website into a complete design system document, or convert between design token formats (DESIGN.md, tokens.json, variables.css, theme.css).

WHAT

Purpose và context

• Purpose: từ một website công khai, trích design system (màu, typography, spacing, radius, shadow, component + state) thành tài liệu/token (DESIGN.md, preview.html, tokens.json, variables.css, theme.css); hoặc chuyển đổi giữa các định dạng token đó.
• Trigger (when to use): hai mode kích hoạt — Mode 1 lệnh tường minh tiền tố rico (rico DESIGN.md [url], rico tokens [url], rico 全部输出 [brand], rico 把 DESIGN.md 转为 tokens…), Mode 2 ngôn ngữ tự nhiên ("Create a DESIGN.md for linear.app", "Extract design tokens from stripe.com"…). Use cases: cần design system doc cho website có sẵn · trích token để implement · chuyển đổi định dạng token · trang tham chiếu trực quan cho design system một brand.
• Non-goals: KHÔNG dựng lại nguyên trang thành code chạy được (pixel-perfect) — đó là /web-clone Mode B (reconstruct), xem "Mode 3: Full-Clone"; không áp theme vào website của user (đó là rico-ui-ux-themes, xem FAQ); không trích trang cần đăng nhập.

Mental model

URL (hoặc file token có sẵn) → gather visual data (screenshot + DevTools) → tokens ngữ nghĩa (colors · typography · spacing · radius · shadows) → components + states → brand voice + Do's/Don'ts → file đầu ra trong themes/{brand-slug}/. Chuyển đổi định dạng = parse file nguồn → sinh file đích, bỏ bước gather.