모든 웹사이트 URL에서 전체 디자인 언어를 추출합니다. AI 최적화 마크다운, 시각적 HTML 미리보기, Tailwind 설정, React 테마, shadcn/ui 테마, Figma 변수, W3C 디자인 토큰 및 CSS 변수를 포함한 8개의 출력 파일을 생성합니다. 또한 WCAG 접근성 점수를 실행합니다. 사용자가 'extract design', 'get design system', 'design language', 'design tokens', 'what colors/fonts does this site use' 또는 '/extract-design'이라고 말할 때 사용하십시오.
이 스킬은 주어진 웹사이트 URL에서 완전한 디자인 언어를 추출하는 강력한 도구입니다. 디자이너와 개발자가 모든 웹사이트의 시각적 정체성을 분석하고 재사용 가능한 형식으로 변환할 수 있도록 도와줍니다. 주요 출력물로는 AI 에이전트가 쉽게 처리할 수 있는 마크다운, 시각적 확인을 위한 HTML 미리보기, Tailwind CSS 및 React 프로젝트에 바로 적용 가능한 설정 파일, shadcn/ui 및 W3C 표준 디자인 토큰, Figma 변수, 그리고 CSS 변수 등 8가지 형식을 제공합니다. 또한 WCAG 접근성 점수 평가를 통해 색상 대비 등의 접근성 문제를 자동으로 진단합니다. 사용자는 'extract design' 또는 'design tokens' 같은 자연어 명령어를 통해 쉽게 이 스킬을 호출할 수 있으며, 다양한 개발 환경(Claude Code, Cursor 등)에서 사용할 수 있습니다. 스킬의 작동 방식은 입력된 URL을 방문하여 색상, 폰트, 간격, 그림자 등 주요 디자인 속성을 추출하고, 이를 표준화된 형식으로 변환하여 파일로 저장합니다.
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에서 전체 디자인 언어를 추출합니다. AI 최적화 마크다운, 시각적 HTML 미리보기, Tailwind 설정, React 테마, shadcn/ui 테마, Figma 변수, W3C 디자인 토큰 및 CSS 변수를 포함한 8개의 출력 파일을 생성합니다. 또한 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.