制作扫得出来的二维码：纠错等级、印刷尺寸与条形码
传单、名片、菜单、包装上到处都是二维码，但印出来手机却很难扫的情况出奇地常见。下面介绍如何制作一扫就能识别的二维码。
QR 码于 1994 年由日本电装公司(Denso Wave)为追踪汽车零件而开发，并以 ISO/IEC 18004 标准化。角上的三个大方块(定位图形)让扫描器可以从任何角度快速读取。
二维码的结构、如何选择纠错等级(L、M、Q、H)、最小印刷尺寸与静区、扫码失败的原因，以及二维码与商品条形码的区别。阅读指南 →
- 免费
- 登录: 无需登录
- 二维码与条形码
// about
工具介绍
可根据文本、商品编号、网址或标识符生成条形码图片。下载前可选择码制并精确设置图片尺寸。
如何使用
- 输入要编码的内容并选择条形码格式。
- 以像素为单位设置宽度和高度，然后点击“生成条形码”。
- 预览条形码并下载图片文件。
人们为何使用此工具
- 支持常见的零售、物流、开发及二维条码格式。
- 自定义宽度和高度，便于用于标签、文档和屏幕。
- 无需账号，生成后即可立即下载图片。
用 AI 自己做
用 AI 亲手打造这个工具
想要自己的版本？把下面的任务提示词粘贴到 AI 聊天中，或将技能文件保存到 AI 编程助手。其中包含我们开发此工具时整理的功能、边界情况和测试用例。
提示词和技能以英文提供，AI 工具在任何语言环境下都能很好地理解。
AI 任务提示词
直接粘贴到 Claude、ChatGPT、Gemini 等 AI 聊天中即可。
You are an experienced full-stack web developer. Build a web tool called "条形码生成器" 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.md)
在 Claude Code 等 AI 编程助手中保存为 .claude/skills/build-barcode-generator/SKILL.md，以后开发或修改此工具时可重复使用。
---
name: build-barcode-generator
description: Use when building or changing a 条形码生成器 tool. Build a tool that renders linear barcodes such as Code 128 and EAN-13 at a chosen size.
---
# Build: 条形码生成器
## 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
交给 AI 时的小技巧
- 在第一行写明技术栈（如 React、Vue 或纯 HTML），生成的代码会更贴合你的项目。
- 在接受代码前，请让 AI 运行列出的测试用例并展示结果。
- 不要把真实密码、客户数据或 API 密钥粘贴到提示词中，请用示例值代替。