Design Extract
Use this skill to turn an existing public or authorized website into a practical design-language brief for implementation.
This is a local Overdrive compatibility skill. It preserves the useful workflow from the earlier Design Extract integration without depending on any upstream Git source at install time. Do not claim that a tool extraction ran unless you actually ran one.
Safety Rules
- Inspect only public pages or pages the user owns or has permission to analyze.
- Do not use cookies, authenticated browser profiles, scraped private data, paywalled content, or extension state.
- Do not install MCP servers, global CLIs, browser extensions, or packages without explicit user approval.
- Prefer an existing system Chrome/Chromium/Edge browser when tooling supports it.
- Keep trademark/logo usage rights separate from visual inspiration. Do not copy a competitor site too closely.
Workflow
- Clarify the target URL, target product/app, and whether the user wants extraction, redesign inspiration, or implementation tokens.
- Check available tooling:
- If a
designlang, extract-design, or equivalent local tool is already available, run its help/preflight first.
- If browser automation is available, use a public-page screenshot/source/CSS inspection pass.
- If no tool is available, continue manually from fetched HTML/CSS, screenshots, or user-provided reference images.
- Extract:
- Color palette with usage roles, not only hex values.
- Typography scale, weights, line heights, and type personality.
- Spacing rhythm, layout grid, breakpoints, radii, shadows, borders, and density.
- Reusable component patterns, navigation, CTAs, forms, cards, tables, modals, and empty/loading/error states.
- Motion/interaction patterns when visible.
- Convert findings into implementation guidance:
- CSS variables or Tailwind theme tokens when useful.
- Component-level notes for the user's stack.
- What to borrow as inspiration and what to avoid copying.
- Validate:
- Check contrast and responsive implications.
- Flag inaccessible, fragile, or brand-specific patterns.
- Pair with
design-taste-frontend, impeccable, emil-design-eng, or playwright-cli when implementing or verifying UI.
Output
Provide a concise design-language brief:
## Design Language
- Visual direction:
- Colors:
- Typography:
- Spacing/layout:
- Components:
- Interaction/motion:
- Implementation tokens:
- Risks/avoid copying:
- Suggested next skills:
Fallbacks
If the extractor tool is missing, say so and use manual inspection. If the target blocks access or requires authentication, ask the user for screenshots, exported CSS, a public staging page, or permission-safe reference material.
Attribution
Original Overdrive compatibility skill by Stefan / Radu Stefan Dumitru. Inspired by Manav Arya Singh's Design Extract / designlang workflow and public design-system extraction patterns; no upstream code is bundled.
1---2name: design-extract3description: Design Extract4---56# Design Extract78Use this skill to turn an existing public or authorized website into a practical design-language brief for implementation.910This is a local Overdrive compatibility skill. It preserves the useful workflow from the earlier Design Extract integration without depending on any upstream Git source at install time. Do not claim that a tool extraction ran unless you actually ran one.1112## Safety Rules1314- Inspect only public pages or pages the user owns or has permission to analyze.15- Do not use cookies, authenticated browser profiles, scraped private data, paywalled content, or extension state.16- Do not install MCP servers, global CLIs, browser extensions, or packages without explicit user approval.17- Prefer an existing system Chrome/Chromium/Edge browser when tooling supports it.18- Keep trademark/logo usage rights separate from visual inspiration. Do not copy a competitor site too closely.1920## Workflow21221. Clarify the target URL, target product/app, and whether the user wants extraction, redesign inspiration, or implementation tokens.232. Check available tooling:24 - If a `designlang`, `extract-design`, or equivalent local tool is already available, run its help/preflight first.25 - If browser automation is available, use a public-page screenshot/source/CSS inspection pass.26 - If no tool is available, continue manually from fetched HTML/CSS, screenshots, or user-provided reference images.273. Extract:28 - Color palette with usage roles, not only hex values.29 - Typography scale, weights, line heights, and type personality.30 - Spacing rhythm, layout grid, breakpoints, radii, shadows, borders, and density.31 - Reusable component patterns, navigation, CTAs, forms, cards, tables, modals, and empty/loading/error states.32 - Motion/interaction patterns when visible.334. Convert findings into implementation guidance:34 - CSS variables or Tailwind theme tokens when useful.35 - Component-level notes for the user's stack.36 - What to borrow as inspiration and what to avoid copying.375. Validate:38 - Check contrast and responsive implications.39 - Flag inaccessible, fragile, or brand-specific patterns.40 - Pair with `design-taste-frontend`, `impeccable`, `emil-design-eng`, or `playwright-cli` when implementing or verifying UI.4142## Output4344Provide a concise design-language brief:4546```markdown47## Design Language48- Visual direction:49- Colors:50- Typography:51- Spacing/layout:52- Components:53- Interaction/motion:54- Implementation tokens:55- Risks/avoid copying:56- Suggested next skills:57```5859## Fallbacks6061If the extractor tool is missing, say so and use manual inspection. If the target blocks access or requires authentication, ask the user for screenshots, exported CSS, a public staging page, or permission-safe reference material.6263## Attribution6465Original Overdrive compatibility skill by Stefan / Radu Stefan Dumitru. Inspired by Manav Arya Singh's Design Extract / designlang workflow and public design-system extraction patterns; no upstream code is bundled.
radustefandumitru