Generador de códigos de barras

Genera códigos Code 128, EAN, UPC, QR y Data Matrix.

Abrir herramienta Volver a las herramientas
// about

Sobre esta herramienta

Crea una imagen de código de barras a partir de texto, números de producto, URL o identificadores. Elige una simbología y define las dimensiones exactas antes de descargarla.

Cómo usarla

  1. Introduce el valor que quieres codificar y elige el formato del código de barras.
  2. Define el ancho y el alto en píxeles y pulsa «Generar código de barras».
  3. Previsualiza el código de barras y descarga el archivo de imagen.

Por qué usar esta herramienta

  • Admite formatos habituales de comercio, logística, desarrollo y códigos 2D.
  • El ancho y el alto personalizados sirven para etiquetas, documentos y pantallas.
  • La imagen generada se descarga al instante, sin necesidad de cuenta.
Guías · QR y códigos de barras · 8 min de lectura

Cómo crear códigos QR que se escaneen: niveles de corrección de errores, tamaño de impresión y códigos de barras

Los códigos QR están en folletos, tarjetas de visita, menús y envases, pero son sorprendentemente habituales los códigos impresos que los móviles leen con dificultad. Así puedes crear códigos que se escaneen a la primera.

El código QR lo desarrolló en 1994 la empresa japonesa Denso Wave para rastrear piezas de automóvil, y está estandarizado como ISO/IEC 18004. Los tres cuadrados grandes de las esquinas (patrones de localización) permiten que los lectores lo lean rápido desde cualquier ángulo.

Cómo funcionan los códigos QR, nivel de corrección (L, M, Q, H), tamaño de impresión y zona de silencio, fallos de lectura y códigos de barras.
Leer guía →
Créalo con IA

Crea esta herramienta tú mismo con IA

¿Quieres tu propia versión? Copia el prompt en un chat de IA o guarda el archivo de skill para un agente de programación. Incluyen las funciones, casos límite y pruebas que usamos al crearla.

El prompt y la skill están en inglés, que las herramientas de IA entienden perfectamente.

Prompt de instrucciones para IA

Pégalo tal cual en Claude, ChatGPT o Gemini.

You are an experienced full-stack web developer. Build a web tool called "Generador de códigos de barras" that meets the requirements below.

## Goal

Build a tool that renders linear barcodes such as Code 128 and EAN-13 at a chosen size.

## Core features

- Formats: Code 128, EAN-13, UPC-A, Code 39
- Width and height in pixels
- Optional human-readable text below
- Download SVG/PNG
- Automatic EAN-13 check digit

## Inputs

- Value to encode
- Format, width, height

## Outputs

- Barcode image
- Final value including check digit

## Edge cases and handling rules

- Validate allowed characters and lengths per format (EAN-13: 12–13 digits)
- Error when a supplied check digit is wrong
- Output exactly the requested dimensions
- Note that retail EAN numbers must be issued by GS1

## Implementation requirements

- Build it as a single page (HTML, CSS, JavaScript) that runs entirely in the browser, and never send the user's input to a server.
- Make the UI responsive and easy to use on mobile; label every input and keep everything keyboard accessible.
- Add a Copy button for results and show clear, friendly error messages for invalid input.
- Keep the core logic in functions separate from the UI so it can be unit-tested.

## Definition of done (test cases)

- Code 128 '123456789012' at 500×160 gives an SVG with width=500 and height=160
- Check digit is computed for EAN-13 '880123456789'
- Invalid characters raise an error

First outline your implementation plan in at most five lines, then write the complete code, and finally explain how to check the test cases above.

Skill (SKILL.md)

Guárdalo como .claude/skills/build-barcode-generator/SKILL.md para que agentes como Claude Code lo reutilicen cada vez que crees o cambies la herramienta.

---
name: build-barcode-generator
description: Use when building or changing a Generador de códigos de barras tool. Build a tool that renders linear barcodes such as Code 128 and EAN-13 at a chosen size.
---

# Build: Generador de códigos de barras

## Goal

Build a tool that renders linear barcodes such as Code 128 and EAN-13 at a chosen size.

## Workflow

1. Review the required features, inputs and outputs below and ask about anything missing first.
2. Implement the core logic as pure functions separate from the UI.
3. Check the logic against the test cases in the verification list.
4. Build a responsive UI with an input form, a result area and a Copy button.
5. Reproduce each edge case listed under Rules and refine the error messages.

## Core features

- Formats: Code 128, EAN-13, UPC-A, Code 39
- Width and height in pixels
- Optional human-readable text below
- Download SVG/PNG
- Automatic EAN-13 check digit

## Inputs

- Value to encode
- Format, width, height

## Outputs

- Barcode image
- Final value including check digit

## Rules

- Validate allowed characters and lengths per format (EAN-13: 12–13 digits)
- Error when a supplied check digit is wrong
- Output exactly the requested dimensions
- Note that retail EAN numbers must be issued by GS1
- Build it as a single page (HTML, CSS, JavaScript) that runs entirely in the browser, and never send the user's input to a server.

## Verification

- [ ] Code 128 '123456789012' at 500×160 gives an SVG with width=500 and height=160
- [ ] Check digit is computed for EAN-13 '880123456789'
- [ ] Invalid characters raise an error

Consejos para trabajar con IA

  • Indica tu stack (React, Vue o HTML puro) en la primera línea para obtener código adecuado.
  • Pide que ejecute las pruebas listadas y muestre los resultados antes de aceptar el código.
  • No pegues contraseñas reales, datos de clientes ni claves de API; usa valores de ejemplo.