Make software by describing it
BBuilt with Prompts

Make software by describing it

Build a QR Code Generator With an AI Assistant

You can build a QR code generator by asking an AI assistant for a single HTML page that turns text or a web address into a scannable code. The sensible approach is to use a small, well-known QR library rather than having the assistant write the encoding math from scratch. The page itself is simple, and you can test it with the camera on your phone.

This project is a good step up from a calculator because it introduces an important idea: using code written by other people.

Why a library is the right choice

A QR code encodes data using error-correction schemes and layout rules defined in an international standard. Writing that from nothing is a poor use of your time and an easy place for subtle errors. Libraries exist that do it correctly and are used widely.

When you ask an AI assistant for this tool, tell it to use a library. A good request names the approach without insisting on one product: “Use a popular, maintained QR code library loaded from a CDN, and tell me which one you chose and where it comes from.”

A CDN is a service that hosts shared code files so your page can load them with one line. That means your page needs an internet connection to work, which is a tradeoff you should know about. If you want it to work offline, ask the assistant to explain how to download the library file and place it in your project folder instead.

The prompt

Create a QR code generator as a single HTML file.
Include a text field for a URL or message, a Generate button, and a place to show the QR code.
Use a well-known QR code library; tell me its name and the exact script line you used.
Add a Download PNG button that saves the code as an image.
Add a size option (small, medium, large) and an error-correction option (low, medium, high) with a one-line explanation of each.
If the field is empty, show a friendly message instead of a blank code.
Plain design that works on a phone.

Asking for the library name and the script line gives you something to verify. Search for the library’s official page and confirm it exists and is maintained before you rely on it.

Test with a real scan

QR codes have a built-in way to check your work: scanning them. Open the page, enter a web address you know, and generate the code. Point your phone camera at the screen. The phone should offer to open the exact address you typed.

Test several cases:

  1. A short address, such as your own website’s home page.
  2. A long address with query parameters. Longer data makes a denser code.
  3. Plain text with spaces and punctuation.
  4. Text with non-English characters, if you plan to use them.
  5. Each size and error-correction setting.

Higher error correction lets a code survive smudges or a logo placed over it, but it makes the pattern denser, which can be harder to scan at small sizes. The scan tests show you which setting works for your use.

Keep the code readable when printed

If your code will end up on paper, test that too. Download the PNG, print it at the size you plan to use, and scan the printed copy from the distance people would use. Keep a clear blank margin around the code, and use dark modules on a light background. Inverted colors fail with some scanners. Ask the assistant to enforce a margin and to avoid low-contrast color options.

Be careful what you encode

A QR code is just a way to carry text. The risk lies in what that text does after someone scans it. Only encode addresses you control and trust. If you share codes with other people, they may assume the destination is safe because it came from you.

Also avoid encoding private information, such as a Wi-Fi password you do not want shared, anywhere codes might be photographed. Anyone with a camera can read what a code contains.

If the destination address ever changes, a printed code pointing to the old address will fail. A common solution is to point codes at a stable address you control and update where that address leads. Ask the assistant to explain how redirects work if this is relevant to your plan.

Fix problems efficiently

If nothing appears when you click Generate, open the browser console and look for red text. A frequent cause is that the library failed to load, either because of a typo in the script line or because you are offline. Paste the exact error to the assistant.

If the code appears but will not scan, try larger size, higher error correction, or shorter input. Report which of those you tried, so the assistant does not repeat your tests.

Know the limits of what a code can hold

A QR code can hold a few thousand characters at most, and the more it holds, the denser and harder to scan it becomes. For most uses, a short web address is the right content. If you want to share a long message or a large block of contact details, consider putting the information on a web page and encoding that page’s address instead. The code stays simple, scans reliably, and you can update the page later without printing a new code.

Test this yourself by generating a code from a two-hundred-character message and then from a short address. Compare how easily each scans from a distance, and keep the result in mind when you design anything meant to be printed.

Extend it carefully

Once the generator works, small additions are safe: a dropdown for preset content types (web address, email, phone number), a color picker limited to high-contrast pairs, or a history of the last five items kept in the browser. Add one at a time and retest scanning after each.

Next steps

Build the page, then scan at least five different codes from it with your phone. Print one and test it at the real size. Write down which error-correction level and size worked best, since that becomes your default. If you plan to publish the tool, read our guide to hosting a static site for free, and add a note on the page naming the QR library you used.