痛点与思路
对于工作三年的开发者而言，技术栈本身往往不再是瓶颈。掌握一门语言后，迁移到另一门语言或技术栈通常只需一两周。无论是前端、移动端还是后端，有了基础再学新的会快很多。很多时候缺的不是技术能力，而是实战经验和规模化用户反馈。不过在 AI 时代，这些障碍正在被打破。
AI IDE（如 Cursor、Trae）能让我们仅通过自然语言描述需求，就快速实现对应端的工程代码甚至部署。技术难题绝大部分都能由 AI 协助解决。真正卡住全栈开发的往往是 UI 设计稿环节。尤其是移动端开发，强依赖设计稿来实现美观的应用。从工程师跨越到 UI 设计师的门槛太高，难以快速补齐。市面上虽有生成设计稿的 AI 工具，但效果常不尽如人意。
这里分享一种'曲线救国'的设计稿生成方式：先生成 H5 页面，再转为 Figma 设计稿。
用 Claude 生成骑行应用 H5
直接用 Claude 生成 Figma 设计稿比较困难，但可以通过提示词生成 H5 页面，再将网页转为设计稿。
国内无法直接使用 Claude API，我们可以借助 Cursor、Trae 或 GitHub Copilot 中集成的 Claude 能力。以 VSCode 中的 GitHub Copilot 为例，输入以下提示词：
你是一位全栈工程师，同时精通产品规划和 UI 设计，请根据下面需求文档生成设置移动端的 html 网页，页面扁平，图标精致 # 产品需求文档（PRD） ## 项目名称 骑士圈 — 专业骑行社交与路线推荐 App ## 一、项目背景 ## 二、产品目标 ## 三、核心用户群 ## 四、功能模块设计 ### 4.1 路线推荐模块 ### 4.2 轨迹记录模块 ### 4.3 社交互动模块 ### 4.4 路线上传与审核模块 ### 4.5 用户个人中心
提交后，AI 会自动生成工程代码。针对页面中出现的问题，可以在 Chat 模式下与 Claude 交互，让它自动修正。生成完整页面后，直接在浏览器预览并根据需求调整内容。
将 H5 页面转为 Figma 设计稿
部署静态页面
H5 页面生成后，需要借助 Figma 插件实现转换。使用前需先将 H5 部署到云端供访问。这里使用 Vercel，它能直接将 GitHub 上的项目进行远程部署。
首先将代码上传到 GitHub，随后用账号登录 Vercel，即可找到对应项目并导入。导入完成后，系统会生成对应的访问地址。
选择我们上传的项目进行导入，导入完成后生成对应地址：
安装 Figma 插件
在 Figma 中安装 html.to.design 插件。打开插件，输入刚才生成的页面地址，点击导入。
导入完成后，即可查看页面的标注等信息。
