extract-design 是做什么的？
从任意网站URL提取完整的设计语言。生成8个输出文件，包括AI优化Markdown、可视化HTML预览、Tailwind配置、React主题、shadcn/ui主题、Figma变量、W3C设计令牌和CSS变量。同时运行WCAG无障碍评分。当用户说“提取设计”、“获取设计系统”、“设计语言”、“设计令牌”、“这个网站用了什么颜色/字体”或“/extract-design”时使用。
从任意网站URL提取完整的设计语言。生成8个输出文件，包括AI优化Markdown、可视化HTML预览、Tailwind配置、React主题、shadcn/ui主题、Figma变量、W3C设计令牌和CSS变量。同时运行WCAG无障碍评分。当用户说“提取设计”、“获取设计系统”、“设计语言”、“设计令牌”、“这个网站用了什么颜色/字体”或“/extract-design”时使用。
该技能是一个强大的设计语言提取工具，能够从任意网站URL中自动解析并生成完整的设计系统资源。它支持8种输出格式：AI优化的Markdown文档、可视化HTML预览页面、Tailwind CSS配置文件、React主题组件、shadcn/ui主题、Figma设计变量、W3C标准设计令牌以及原生CSS变量。此外，它还集成了WCAG无障碍评分功能，帮助开发者评估网站的可访问性。适用于Claude Code、Coder、Codex等AI代理平台，当用户以自然语言提出设计相关查询（如“提取设计”或“这个网站用了什么颜色/字体”）时触发。该技能通过自动化分析CSS、字体、颜色、间距等视觉元素，极大简化了从现有网站快速创建设计系统资源的工作流程，无需手动检查元素。
npx skills add https://github.com/manavarya09/design-extract/tree/main/skills/extract-designInstalled? Explore more 图像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →
从任意网站URL提取完整的设计语言。生成8个输出文件，包括AI优化Markdown、可视化HTML预览、Tailwind配置、React主题、shadcn/ui主题、Figma变量、W3C设计令牌和CSS变量。同时运行WCAG无障碍评分。当用户说“提取设计”、“获取设计系统”、“设计语言”、“设计令牌”、“这个网站用了什么颜色/字体”或“/extract-design”时使用。
Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.
Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.
This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.