Communitygithub.com

Ezra-Y/design-tools-index

Habilidad para Claude Code: índice categorizado de herramientas de diseño (animación, color, prototipado, entrega, diseño a código, UI y más).

¿Qué es design-tools-index?

Esta habilidad (skill) para Claude Code proporciona un índice categorizado de herramientas de diseño, organizado por casos de uso como animación, color, prototipado, entrega de diseño a desarrollo (design handoff), conversión de diseño a código, iconos, tipografía, ilustraciones, mockups, diseño de interfaz (UI) y wireframing. Cada categoría incluye 2-3 herramientas clásicas con enlaces externos y una breve descripción, además de referencias a archivos `references/` que contienen listas más completas. El índice cubre 12 categorías principales y 24 adicionales que se pueden consultar bajo demanda. Está basado en el repositorio [Awesome-Design-Tools](https://github.com/goabstract/Awesome-Design-Tools) y es ideal para que un agente de IA como Claude Code ayude a desarrolladores y diseñadores a encontrar rápidamente la herramienta adecuada para cada tarea de diseño, ya sea durante el desarrollo de productos, prototipado o diseño de interfaces.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add Ezra-Y/design-tools-index
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Índice de herramientas de diseño

Navegación de herramientas de diseño clasificadas por uso: cada entrada es un enlace externo + una línea de descripción, para una selección rápida. A continuación, 12 categorías de alta frecuencia con 2-3 herramientas clásicas cada una, que apuntan a listas más completas en references/; las 24 categorías restantes se encuentran al final en «Más categorías», abre el archivo de referencia correspondiente según sea necesario. Las entradas provienen de Awesome-Design-Tools.

Herramientas de animación

Crea animaciones y movimiento interactivo para interfaces/productos (microinteracciones, transiciones, Motion).

  • Lottie — interpreta animaciones de After Effects exportadas como JSON y las renderiza de forma nativa en dispositivos móviles y web.
  • GSAP — un conjunto de herramientas para animaciones HTML5 de alto rendimiento y con scripting en todos los navegadores principales.
  • After Effects — aplicación de gráficos animados, efectos visuales y composición de Adobe. → Lista completa (Haiku, Flare, Kite, Keyshape, etc.) en references/prototyping-and-animation.md

Color

Genera o elige combinaciones de colores y paletas.

  • Coolors — el generador de esquemas de color ultrarrápido.
  • Adobe Color — crea esquemas con la rueda de colores o explora combinaciones de la comunidad.
  • Color Hunt — miles de paletas de colores modernas seleccionadas a mano para inspirarte. → Lista completa (Khroma, Paletton, Sip, Pigment, etc.) en references/color.md

Degradados

Genera degradados CSS/fondo.

  • UI Gradients — una colección seleccionada a mano de hermosos degradados de colores.
  • CSS Gradient — un generador de degradados CSS gratuito para fondos coloridos.
  • Web Gradients — 180 degradados lineales gratuitos utilizables como fondos de contenido. → Lista completa (Grabient, CoolHue, Gradienta, etc.) en references/color.md

Prototipado

Crea prototipos interactivos de alta fidelidad.

  • Framer — diseña visualmente prototipos interactivos realistas.
  • InVision — plataforma de prototipado, colaboración y flujo de trabajo.
  • ProtoPie — crea interacciones de alta fidelidad y prototipos con sensores en minutos. → Lista completa (Marvel, Origami, Principle, Axure, UXPin, etc.) en references/prototyping-and-animation.md

Entrega de diseño (Design Handoff)

Entrega especificaciones, activos y fragmentos de código al equipo de desarrollo.

  • Zeplin — entrega diseños y guías de estilo con especificaciones precisas, activos y fragmentos de código.
  • Avocode — abre diseños sin herramientas de diseño; haz clic en capas para obtener código.
  • InVision Inspect — prepara diseños para el desarrollo. → Lista completa (Sympli, Sketch Measure, Flawless App, Specctr, etc.) en references/handoff-and-code.md

De diseño a código

Convierte diseños en código ejecutable o sitios web.

  • Webflow — crea sitios responsivos en el navegador, luego hospeda o exporta el código.
  • Anima — un plugin de Sketch / aplicación web que convierte diseños de Sketch a HTML.
  • Supernova Studio — convierte diseños de Sketch en código para Android, iOS o React Native. → Lista completa (PaintCode, Pinegrow, Tilda, Draftbit, etc.) en references/handoff-and-code.md

Iconos

Bibliotecas y herramientas de iconos.

  • Feather Icons — iconos en una cuadrícula de 24x24 que enfatizan simplicidad, consistencia y legibilidad.
  • Font Awesome — el conjunto de iconos de código abierto más popular de la web y su kit de herramientas.
  • Material Design Icons — iconos de Material Design gratuitos mediante contribuciones de código abierto. → Lista completa (Flaticon, Icons8, Simple Icons, SVGRepo, etc.) en references/graphic-assets.md

Tipografía

Recursos, gestión y combinación de fuentes.

  • Google Fonts — haciendo la web más hermosa y abierta a través de una gran tipografía.
  • Adobe Fonts — miles de hermosas fuentes de Adobe.
  • FontPair — te ayuda a combinar fuentes de Google. → Lista completa (DaFont, FontBase, Font Squirrel, RightFont, etc.) en references/graphic-assets.md

Ilustraciones

Bibliotecas y generadores de ilustraciones.

  • unDraw — una colección de hermosas imágenes SVG.
  • Blush — crea, mezcla y personaliza ilustraciones de artistas de todo el mundo.
  • Humaaans — una biblioteca gratuita para combinar ilustraciones de personas. → Lista completa (ManyPixels, Open Doodles, Blobmaker, IRA Design, etc.) en references/graphic-assets.md

Mockups

Presentación de productos/diseños en dispositivos.

  • Smartmockups — crea mockups de productos en solo unos clics.
  • Artboard Studio — aplicación de diseño gráfico en línea enfocada en mockups de productos.
  • Rotato — mockups 3D animados para diseños de aplicaciones. → Lista completa (Device Shots, Mockup World, Mockuuups, Threed, etc.) en references/mockup.md

Diseño de interfaz de usuario (UI)

Herramientas de diseño de interfaces y visuales.

  • Figma — diseño y prototipado basado en navegador con colaboración en tiempo real.
  • Sketch — un kit de herramientas de diseño creado para Mac.
  • Adobe XD — diseña, prototipa y comparte la experiencia de usuario para web, móvil y voz. → Lista completa (Photoshop, Illustrator, Affinity, Inkscape, Photopea, etc.) en references/ui-and-wireframe.md

Wireframes

Wireframes de baja fidelidad y bocetos estructurales.

  • Balsamiq Cloud — bocetos de IU sin esfuerzo con colaboración.
  • Wireframe.cc — una herramienta de wireframing simple que no se interpone en tu camino.
  • Whimsical Wireframes — wireframing instantáneo con una biblioteca de elementos rica. → Lista completa (Pidoco, Gliffy, Layoutit, BLOKK, etc.) en references/ui-and-wireframe.md

Más categorías (lectura bajo demanda de references)

Las siguientes categorías no están incluidas en la selección principal; cuando surja la necesidad correspondiente, abre directamente el archivo de referencia. Cada archivo está organizado por categorías en su parte superior.

  • Herramientas de accesibilidad (comprobación WCAG, contraste, simulación de daltonismo) → references/accessibility.md
  • Investigación de usuarios / Arquitectura de información / Flujo de usuarios / Monitoreo de experiencia (reclutamiento para entrevistas, clasificación de tarjetas, mapas del sitio, diagramas de flujo de usuario, mapas de calor, análisis de eventos) → references/user-research-and-ia.md
  • Colaboración / Retroalimentación de diseño / Control de versiones de diseño (colaboración en equipo, revisión con comentarios, Git de archivos de diseño) → references/collaboration-feedback-vcs.md
  • Sistemas de diseño / Herramientas de desarrollo / Depuración visual / Sin código (documentación de librerías de componentes, navegadores de desarrollo, inspección web, creación sin código) → references/design-systems-and-dev.md
  • Activos multimedia (bancos de imágenes gratuitos/vídeo/audio/software de captura de pantalla) → references/media-assets.md
  • Creación / Inspiración / Aprendizaje (sitios de inspiración, cursos de diseño, logotipos, diseño para redes sociales, bocetos a mano, pixel art) → references/creation-and-inspiration.md
  • Modelado 3D / Realidad aumentada → references/3d-and-ar.md

Para un directorio completo de Awesome relacionado con diseño, visita https://github.com/sindresorhus/awesome

Skills relacionados

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