CommunityBildgithub.com

manavarya09/design-extraktion

Extrahiert die vollständige Designsprache von jeder Website-URL. Erzeugt 8 Ausgabedateien, darunter KI-optimiertes Markdown, visuelle HTML-Vorschau, Tailwind-Konfiguration, React-Theme, shadcn/ui-Theme, Figma-Variablen, W3C-Design-Tokens und CSS-Variablen. Führt auch WCAG-Barrierefreiheitsbewertung durch. Verwenden, wenn der Benutzer sagt: 'Design extrahieren', 'Designsystem abrufen', 'Designsprache', 'Design-Tokens', 'welche Farben/Schriftarten verwendet diese Seite?' oder '/extract-design'.

Was ist design-extraktion?

Dieses Skill ermöglicht es einem KI-Agenten, die vollständige Designsprache einer beliebigen Website zu analysieren und zu extrahieren. Es unterstützt Plattformen wie Claude Code, Cursor, Codex und GitHub Copilot und erzeugt bis zu 8 verschiedene Ausgabeformate (Markdown, HTML, Tailwind-Konfiguration, React-Theme, shadcn/ui, Figma-Variablen, W3C-Design-Tokens und CSS-Variablen) sowie eine WCAG-Barrierefreiheitsbewertung. Der Agent extrahiert Farben, Schriftarten, Abstände, Schatten, Übergänge und andere Design-Elemente, um Designer oder Entwickler bei der Nachbildung oder Analyse eines visuellen Stils zu unterstützen. Das Skill ist besonders nützlich für Reverse Engineering von Design-Systemen, Wettbewerbsanalysen oder die schnelle Erstellung konsistenter UI-Komponenten.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/manavarya09/design-extract/tree/main/skills/extract-design

Installed? Explore more Bild skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Was macht design-extraktion?

Extrahiert die vollständige Designsprache von jeder Website-URL. Erzeugt 8 Ausgabedateien, darunter KI-optimiertes Markdown, visuelle HTML-Vorschau, Tailwind-Konfiguration, React-Theme, shadcn/ui-Theme, Figma-Variablen, W3C-Design-Tokens und CSS-Variablen. Führt auch WCAG-Barrierefreiheitsbewertung durch. Verwenden, wenn der Benutzer sagt: 'Design extrahieren', 'Designsystem abrufen', 'Designsprache', 'Design-Tokens', 'welche Farben/Schriftarten verwendet diese Seite?' oder '/extract-design'.

Verwandte Skills

steipete/songsee

Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.

community

affaan-m/frontend-design

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.

community

mattpocock/improve-codebase-architecture

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

community

lobehub/add-provider-doc

Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.

community

addyosmani/browser-testing-with-devtools

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.

community

bytedance/chart-visualization

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.

community
← More Bild skills