Communitygithub.com

Ezra-Y/design-tools-index

Claude Code Skill – Kategorisierter Index von Design-Tools (Animation, Farbe, Prototyping, Handoff, Design-to-Code, UI und mehr).

Was ist design-tools-index?

Dieses Skill bietet einen umfassenden, nach Kategorien geordneten Index von Design-Tools, der speziell für die Nutzung mit Claude Code optimiert ist. Es deckt 12 Hauptkategorien wie Animation, Farbe, Prototyping, Design Handoff, Design-to-Code, Icons, Schriftarten, Illustrationen, Mockups, UI-Design und Wireframing ab – jeweils mit 2-3 der bekanntesten Tools und Links zu detaillierteren Referenzlisten in `references/`. Darüber hinaus enthält es einen Abschnitt mit 24 weiteren Kategorien (z. B. Barrierefreiheit, Benutzerforschung, Zusammenarbeit, Designsysteme, Medien-Assets, 3D/AR), die bei Bedarf aus den entsprechenden Referenzdateien geladen werden können. Die Einträge basieren auf der kuratierten Sammlung [Awesome-Design-Tools](https://github.com/goabstract/Awesome-Design-Tools). Entwickler und Designer können so schnell das passende Werkzeug für ihre Aufgabe finden, ohne lange suchen zu müssen – ideal für schnelle Tool-Recherchen während der Arbeit mit Claude Code.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add Ezra-Y/design-tools-index
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-tools-index?

Navigieren Sie durch Design-Tools, kategorisiert nach Verwendungszweck: Jeder Eintrag besteht aus einem externen Link und einer kurzen Beschreibung, um eine schnelle Auswahl zu ermöglichen. Die folgenden 12 häufig genutzten Kategorien enthalten jeweils 2-3 der bekanntesten Tools und verweisen auf vollständigere Listen in references/. Die restlichen 24 Kategorien finden Sie am Ende unter „Weitere Kategorien“ – öffnen Sie bei Bedarf einfach die entsprechende Referenzdatei. Die Einträge stammen aus Awesome-Design-Tools.

Animationswerkzeuge

Erstellen von Animationen und interaktiven Bewegungen für Oberflächen/Produkte (Mikrointeraktionen, Übergänge, Motion).

  • Lottie – Parst aus After Effects exportierte JSON-Animationen und rendert sie nativ auf Mobilgeräten und im Web.
  • GSAP – Eine Suite von Tools für skriptbasierte, leistungsstarke HTML5-Animationen in allen gängigen Browsern.
  • After Effects – Adobes App für Bewegungsgrafiken, visuelle Effekte und Compositing. → Vollständige Liste (Haiku, Flare, Kite, Keyshape usw.) in references/prototyping-and-animation.md

Farbgebung

Erstellen oder Auswählen von Farbschemata und Paletten.

  • Coolors – Der superschnelle Farbschema-Generator.
  • Adobe Color – Erstellen Sie Schemata mit dem Farbrad oder durchsuchen Sie Community-Kombinationen.
  • Color Hunt – Tausende handverlesene, trendige Farbpaletten zur Inspiration. → Vollständige Liste (Khroma, Paletton, Sip, Pigment usw.) in references/color.md

Verläufe

Generieren von CSS/Hintergrundverläufen.

  • UI Gradients – Eine handverlesene Sammlung schöner Farbverläufe.
  • CSS Gradient – Ein kostenloser CSS-Verlaufsgenerator für farbenfrohe Hintergründe.
  • Web Gradients – 180 kostenlose lineare Verläufe, die als Hintergründe für Inhalte verwendet werden können. → Vollständige Liste (Grabient, CoolHue, Gradienta usw.) in references/color.md

Prototyping

Erstellen interaktiver High-Fidelity-Prototypen.

  • Framer – Visuelles Design realistischer interaktiver Prototypen.
  • InVision – Plattform für Prototyping, Zusammenarbeit und Workflow.
  • ProtoPie – Erstellen Sie in Minuten hochauflösende Interaktionen und sensorunterstützte Prototypen. → Vollständige Liste (Marvel, Origami, Principle, Axure, UXPin usw.) in references/prototyping-and-animation.md

Designübergabe (Design Handoff)

Übergabe von Designspezifikationen, Assets und Code-Snippets an die Entwicklung.

  • Zeplin – Übergabe von Designs und Styleguides mit genauen Spezifikationen, Assets und Code-Snippets.
  • Avocode – Öffnen Sie Designs ohne Design-Tools; klicken Sie auf Ebenen, um Code zu erhalten.
  • InVision Inspect – Bereiten Sie Designs für die Entwicklung vor. → Vollständige Liste (Sympli, Sketch Measure, Flawless App, Specctr usw.) in references/handoff-and-code.md

Design zu Code

Konvertieren von Designentwürfen in ausführbaren Code oder Websites.

  • Webflow – Erstellen Sie responsive Websites im Browser und hosten oder exportieren Sie den Code.
  • Anima – Ein Sketch-Plugin/Web-App, das Sketch-Designs in HTML konvertiert.
  • Supernova Studio – Konvertieren Sie Sketch-Designs in Android-, iOS- oder React Native-Code. → Vollständige Liste (PaintCode, Pinegrow, Tilda, Draftbit usw.) in references/handoff-and-code.md

Symbole

Symbolbibliotheken und -werkzeuge.

  • Feather Icons – Symbole auf einem 24x24-Raster, die Wert auf Einfachheit, Konsistenz und Lesbarkeit legen.
  • Font Awesome – Das beliebteste Open-Source-Symbolset und Toolkit im Web.
  • Material Design Icons – Kostenlose Material-Design-Symbole durch Open-Source-Beiträge. → Vollständige Liste (Flaticon, Icons8, Simple Icons, SVGRepo usw.) in references/graphic-assets.md

Schriftarten

Schriftartressourcen, -verwaltung und -kombinationen.

  • Google Fonts – Das Web durch großartige Typografie schöner und offener machen.
  • Adobe Fonts – Tausende schöner Schriftarten von Adobe.
  • FontPair – Hilft Ihnen, Google Fonts miteinander zu kombinieren. → Vollständige Liste (DaFont, FontBase, Font Squirrel, RightFont usw.) in references/graphic-assets.md

Illustrationen

Illustrationsbibliotheken und -generatoren.

  • unDraw – Eine Sammlung schöner SVG-Bilder.
  • Blush – Erstellen, mischen und anpassen Sie Illustrationen von Künstlern weltweit.
  • Humaaans – Eine kostenlose Bibliothek zum Mischen und Kombinieren von Personenillustrationen. → Vollständige Liste (ManyPixels, Open Doodles, Blobmaker, IRA Design usw.) in references/graphic-assets.md

Mockups

Produkt-/Gerätemockup-Darstellungen.

  • Smartmockups – Erstellen Sie Produkt-Mockups mit nur wenigen Klicks.
  • Artboard Studio – Online-Grafikdesign-App mit Fokus auf Produkt-Mockups.
  • Rotato – Animierte 3D-Mockups für App-Designs. → Vollständige Liste (Device Shots, Mockup World, Mockuuups, Threed usw.) in references/mockup.md

UI-Design

Werkzeuge für Oberflächen- und visuelles Design.

  • Figma – Browserbasiertes Design und Prototyping mit Echtzeit-Zusammenarbeit.
  • Sketch – Ein Design-Toolkit für den Mac.
  • Adobe XD – Designen, Prototypen und Teilen von UX für Web, Mobilgeräte und Sprache. → Vollständige Liste (Photoshop, Illustrator, Affinity, Inkscape, Photopea usw.) in references/ui-and-wireframe.md

Wireframing

Low-Fidelity-Drahtmodelle und Strukturskizzen.

  • Balsamiq Cloud – Müheloses UI-Skizzieren mit Zusammenarbeit.
  • Wireframe.cc – Ein einfaches Wireframing-Tool, das nicht im Weg ist.
  • Whimsical Wireframes – Sofortiges Wireframing mit einer umfangreichen Elementbibliothek. → Vollständige Liste (Pidoco, Gliffy, Layoutit, BLOKK usw.) in references/ui-and-wireframe.md

Weitere Kategorien (nach Bedarf aus References lesen)

Die folgenden Kategorien sind nicht in der Hauptauswahl enthalten. Öffnen Sie bei Bedarf direkt die entsprechende Referenzdatei; jede Datei ist oben nach Kategorien organisiert.

  • Barrierefreiheitswerkzeuge (WCAG-Prüfung, Kontrast, Farbenblindheitssimulation) → references/accessibility.md
  • Benutzerforschung / Informationsarchitektur / User Flows / Erlebnisüberwachung (Rekrutierung von Interviews, Kartensortierung, Sitemaps, User-Flow-Diagramme, Heatmaps, Ereignisanalyse) → references/user-research-and-ia.md
  • Zusammenarbeit / Design-Feedback / Design-Versionierung (Teamzusammenarbeit, Anmerkungen und Überprüfungen, Design-Datei-Git) → references/collaboration-feedback-vcs.md
  • Designsysteme / Entwicklerwerkzeuge / visuelles Debugging / No-Code (Komponentenbibliotheksdokumentation, Entwickler-Browser, Web-Inspektion, No-Code-Baukästen) → references/design-systems-and-dev.md
  • Medien-Assets (Kostenlose Bild-/Video-/Audio-Archive, Screenshot-Software) → references/media-assets.md
  • Kreation / Inspiration / Lernen (Inspirationsseiten, Design-Kurse, Logos, Social-Media-Design, Handskizzen, Pixel-Art) → references/creation-and-inspiration.md
  • 3D-Modellierung / Augmented Reality → references/3d-and-ar.md

Ein umfassenderes Awesome-Design-Gesamtverzeichnis finden Sie unter https://github.com/sindresorhus/awesome

Verwandte Skills

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community