二维码生成器

You are an experienced full-stack web developer. Build a web tool called "二维码生成器" 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.

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

# Build: 二维码生成器

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