Barcode-Generator

Erzeugen Sie Code 128, EAN, UPC, QR-Codes und weitere Barcodes.

Tool öffnen Zurück zu den Tools
// about

Über dieses Tool

Erstelle ein Barcode-Bild aus Text, Produktnummern, URLs oder Kennungen. Wähle eine Symbologie und lege vor dem Download die genauen Bildmaße fest.

So verwenden Sie es

  1. Gib den zu codierenden Wert ein und wähle das Barcode-Format.
  2. Lege Breite und Höhe in Pixeln fest und klicke auf „Barcode erzeugen“.
  3. Sieh dir den Barcode in der Vorschau an und lade die Bilddatei herunter.

Warum dieses Tool genutzt wird

  • Unterstützt gängige Handels-, Logistik-, Entwickler- und 2D-Barcode-Formate.
  • Eigene Breite und Höhe machen das Bild für Etiketten, Dokumente und Bildschirme geeignet.
  • Das erzeugte Bild lässt sich ohne Konto sofort herunterladen.
Ratgeber · QR- & Barcodes · 8 Min. Lesezeit

QR-Codes, die sich scannen lassen: Fehlerkorrekturstufen, Druckgröße und Barcodes

QR-Codes finden sich auf Flyern, Visitenkarten, Speisekarten und Verpackungen — doch gedruckte Codes, mit denen Smartphones Mühe haben, sind erstaunlich häufig. So erstellen Sie Codes, die beim ersten Versuch funktionieren.

Der QR-Code wurde 1994 vom japanischen Unternehmen Denso Wave zur Verfolgung von Autoteilen entwickelt und ist als ISO/IEC 18004 standardisiert. Die drei großen Quadrate in den Ecken (Positionsmarkierungen) ermöglichen es Scannern, ihn aus jedem Winkel schnell zu lesen.

Aufbau von QR-Codes, Fehlerkorrekturstufe (L, M, Q, H), Druckgröße und Ruhezone, warum Codes nicht gelesen werden, und QR vs. Produkt-Barcodes.
Ratgeber lesen →
Mit KI bauen

Dieses Tool selbst mit KI bauen

Sie möchten eine eigene Version? Kopieren Sie den Arbeitsauftrag in einen KI-Chat oder speichern Sie die Skill-Datei für einen KI-Coding-Agenten. Beide enthalten die Funktionen, Sonderfälle und Testfälle, die wir verwendet haben.

Prompt und Skill sind auf Englisch, das KI-Tools in jeder Sprache gut verstehen.

KI-Arbeitsauftrag (Prompt)

Unverändert in Claude, ChatGPT oder Gemini einfügen.

You are an experienced full-stack web developer. Build a web tool called "Barcode-Generator" 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)

Als .claude/skills/build-barcode-generator/SKILL.md speichern, damit Agenten wie Claude Code es bei jeder Änderung am Tool wiederverwenden.

---
name: build-barcode-generator
description: Use when building or changing a Barcode-Generator tool. Build a tool that renders linear barcodes such as Code 128 and EAN-13 at a chosen size.
---

# Build: Barcode-Generator

## 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

Tipps für die Arbeit mit KI

  • Nennen Sie in der ersten Zeile Ihren Stack (React, Vue oder reines HTML), damit der Code passt.
  • Lassen Sie die KI die Testfälle ausführen und die Ergebnisse zeigen, bevor Sie den Code übernehmen.
  • Fügen Sie keine echten Passwörter, Kundendaten oder API-Schlüssel ein; nutzen Sie Beispielwerte.