從任何網站 URL 提取完整的設計語言。生成 8 個輸出檔案，包括 AI 優化的 Markdown、視覺化 HTML 預覽、Tailwind 設定檔、React 主題、shadcn/ui 主題、Figma 變數、W3C 設計權杖和 CSS 變數。同時執行 WCAG 無障礙評分。
此技能可從任何網站 URL 中提取完整的設計語言，並生成多達 8 種不同格式的輸出檔案，包括 AI 優化的 Markdown 文檔、視覺化 HTML 預覽、Tailwind CSS 設定檔、React 主題程式碼、shadcn/ui 主題、Figma 變數、W3C 設計權杖以及 CSS 變數。此外，它還會自動執行 WCAG 無障礙評分，幫助開發者和設計師了解網站的無障礙性表現。該技能支援 Claude Code、Cursor 等 AI 代理平台，並通過分析網站的樣式表、字型和色彩物件來提取設計系統元素。使用者可以透過說出「extract design」、「get design system」、「design language」、「design tokens」或使用「/extract-design」指令來觸發此技能。生成的產出可直接用於前端開發、設計系統遷移、主題設定和無障礙合規性檢查，極大地提升了設計到開發的協作效率。
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」、「get design system」、「design language」、「design tokens」、「what colors/fonts does this site use」或「/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.