QR-Code-Generator

Konvertieren Sie Text, URLs und Kontaktdaten sofort in PNG-QR-Codes.

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

Über dieses Tool

Erstellt QR-Code-Bilder für Webseiten-Links oder Text. Jeder kann den QR-Code mit der Smartphone-Kamera scannen und den Link sofort öffnen.

So verwenden Sie es

  1. Geben Sie Ihren Link oder Text ein.
  2. Wählen Sie Größe und Fehlerkorrekturstufe.
  3. Klicken Sie auf 'Generieren' und laden Sie den QR-Code herunter.

Warum dieses Tool genutzt wird

  • Macht aus Links scannbare Grafiken für Visitenkarten oder Flyer.
  • Einfaches Anpassen von Bildgröße und Fehlerkorrektur.
  • Kostenloser Download hochauflösender PNG-Dateien.

Häufig gestellte Fragen (FAQ)

Laufen die erstellten QR-Codes irgendwann ab?

Nein, statische QR-Codes bleiben dauerhaft gültig.

Welche Größe eignet sich für den Druck?

Für Visitenkarten empfiehlt sich eine Auflösung von mindestens 300x300 Pixeln.

Kann jedes Smartphone diesen QR-Code lesen?

Ja, die normalen Kamera-Apps von iPhone und Android erkennen ihn automatisch.

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 "QR-Code-Generator" that meets the requirements below.

## Goal

Build a tool that creates print-ready QR codes from text, URLs, Wi-Fi details and more.

## Core features

- Types: URL, text, Wi-Fi, contact (vCard)
- Error correction level L/M/Q/H
- Size, quiet zone and colour settings
- Download PNG and SVG
- Optional centre logo (level H recommended)

## Inputs

- Content and type
- Error level, size, colours, logo

## Outputs

- QR preview
- PNG/SVG files

## Edge cases and handling rules

- Warn about low contrast between modules and background
- Explain capacity errors and how to shorten content
- Escape special characters (; ,) in Wi-Fi strings
- Warn when the quiet zone is under four modules

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

- 'https://example.com' decodes back to the same text with a scanner library
- Level H uses at least as many modules as level L
- SVG stays sharp when scaled

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-qr-code-generator/SKILL.md speichern, damit Agenten wie Claude Code es bei jeder Änderung am Tool wiederverwenden.

---
name: build-qr-code-generator
description: Use when building or changing a QR-Code-Generator tool. Build a tool that creates print-ready QR codes from text, URLs, Wi-Fi details and more.
---

# Build: QR-Code-Generator

## Goal

Build a tool that creates print-ready QR codes from text, URLs, Wi-Fi details and more.

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

- Types: URL, text, Wi-Fi, contact (vCard)
- Error correction level L/M/Q/H
- Size, quiet zone and colour settings
- Download PNG and SVG
- Optional centre logo (level H recommended)

## Inputs

- Content and type
- Error level, size, colours, logo

## Outputs

- QR preview
- PNG/SVG files

## Rules

- Warn about low contrast between modules and background
- Explain capacity errors and how to shorten content
- Escape special characters (; ,) in Wi-Fi strings
- Warn when the quiet zone is under four modules
- 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

- [ ] 'https://example.com' decodes back to the same text with a scanner library
- [ ] Level H uses at least as many modules as level L
- [ ] SVG stays sharp when scaled

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.