Zhaoyang Wang1. 项目背景与核心需求
最近在开发一个需要集成二维码生成功能的小型Web应用，经过技术选型后决定使用Cursor这个新兴的AI编程工具来快速实现。二维码在现代Web应用中用途广泛，从简单的网址分享到复杂的支付场景都离不开它。传统实现方式往往需要引入第三方库或调用API服务，而这次我想尝试用AI辅助工具来完成全流程开发。
核心需求很明确：构建一个轻量级网页，用户输入文本内容后能实时生成对应的二维码图片，并支持下载功能。这个需求看似简单，但涉及以下几个技术要点：
- 前端界面设计（输入框+生成按钮+展示区域）
- 二维码生成算法实现
- 图片下载功能
- 响应式布局适配不同设备
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术选型与工具准备
2.1 为什么选择Cursor
Cursor作为新一代AI编程助手，相比传统IDE有几个独特优势：
- 上下文感知：能理解整个项目结构，不只是单文件
- 智能补全：根据项目类型自动推荐合适的技术方案
- 对话式调试：遇到问题可以直接用自然语言询问
对于这种小型工具开发，Cursor可以大幅减少样板代码的编写时间。实测下来，用传统方式开发类似功能需要2-3小时，而借助Cursor只需30-45分钟。
2.2 基础技术栈确定
经过与Cursor的多次对话确认，最终技术方案如下：
- 前端框架：纯HTML/CSS/JS（避免框架学习成本）
- 二维码生成：QRCode.js库（轻量级，仅20KB）
- UI组件：Tailwind CSS（快速原型设计）
- 部署方式：Vercel（静态站点托管）
注意：QRCode.js是目前最稳定的纯前端二维码方案，支持Canvas和SVG两种渲染方式。相比后端生成方案，前端实现的优势是零延迟、无需网络请求。
3. 项目实现过程详解
3.1 基础HTML结构搭建
首先用Cursor生成基础HTML骨架：
html复制<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Generator</title>
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.1/build/qrcode.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<div class="container mx-auto px-4 py-8">
<!-- 内容区将在后续步骤填充 -->
</div>
<script src="app.js"></script>
</