【产品经理原型绘制HTML】从 IDE 到 GitHub 公网部署手册
背景：
本懒惰的产品经理，为提升原型输出效率，本人已完成 Claude 与 IDE 的对接，可通过图片、文字描述及 PRD 直接生成原型 HTML 文件，再也不需要手动绘制原型图啦！但问题来了，研发团队成员如何实时获取原型文件的更新，并便捷访问这些静态页面？
解决方法：
文件上传部署至github，提供公网IP进行访问
第一阶段：本地 IDE 环境准备 (以 Trae 为例)
在开始写代码前，确保你的工具已经“武装到位”。
安装 Git：
在终端输入
git --version确认安装。
配置全局身份 (只需配置一次)：
用户名：
git config --global user.name "用户名"邮箱 (隐私保护版)：
git config --global user.email "隐私保护邮箱"注：使用代号邮箱可以避免 GitHub 拦截你的推送。
网络环境 (针对国内用户)：
若
git push报错，在终端运行代理指令：$env:HTTP_PROXY="http://127.0.0.1:7897"$env:HTTPS_PROXY="http://127.0.0.1:7897"
第二阶段：编写代码与项目初始化
使用 Tailwind CSS：
在 HTML 中通过 CDN 引入：
<script src="https://cdn.tailwindcss.com"></script>。优点：样式直接写在 HTML 的
class里，无需额外维护.css文件，对 AI 极其友好。
本地运行预览：
安装Live Server插件。
右键
index.html选择Open with Live Server进行实时调试。
初始化仓库：
在项目根目录打开终端，输入：
git init。
第三阶段：GitHub 远程仓库配置
创建仓库 (Repository)：
登录 GitHub，点击New。
仓库名（如
chengben-page），必须选Public。
GitHub 里的“文件夹”说明：
误区：GitHub 网页端没有“新建文件夹”按钮。
真相：在本地创建文件夹并放入文件，上传后 GitHub 会自动显示文件夹。
获取远程地址：
复制形如
https://github.com/用户名/test.git的链接。
🔗 关键补丁：建立本地与远端的“初次握手”
当你已经在 GitHub 网页上创建了一个空的仓库（比如test）后，你需要回到本地 IDE 的终端，执行以下动作：
1. 声明身份（关联远程仓库）
你需要告诉本地 Git，这个项目的“云端家园”在哪里
# 语法：git remote add [远程名] [仓库URL] # 我们通常把远程名定为 origin（惯例） git remote add origin https://github.com/用户名/test.git
报错处理：如果提示
remote origin already exists，说明你之前试过但失败了，请先运行git remote rm origin拆掉旧桥，再重新运行上面的命令。2. 同步状态（可选但推荐）
如果你的 GitHub 仓库在创建时勾选了“Add a README”，那么云端现在比本地多一个文件。为了防止冲突，建议先“拉取”一下：
git pull origin main --rebase3. 确立主从关系（初次推送）
第一次推送时，我们需要加上
-u参数，这相当于在本地分支和远程分支之间建立了“长期绑定关系”：git push -u origin main
成功标志：只要这一步成功了，以后你改了代码，只需要简单地输入
git push（不需要再带后面那一串了），Git 就会自动知道该往哪发。📝 修正后的“新手通关”完整指令流：
如果你现在处于一个新项目，直接按这个顺序“无脑执行”：
git init（平地起楼：初始化）
git add .（打包文件：暂存）
git commit -m "first commit"（定格快照：存档）
git remote add origin https://github.com/用户名/项目名.git（架设桥梁：关联）
git push -u origin main（首次过桥：推送并绑定）
第四阶段：代码上传指令集
每次修改完代码，按顺序执行这四行“通关密码”：
| 步骤 | 指令 | 含义 |
| 1. 暂存 | git add . | 把所有修改过的文件打包。 |
| 2. 提交 | git commit -m "描述你的改动" | 给这次改动打上标签（存档）。 |
| 3. 关联 | git remote add origin [URL] | 告诉 Git 代码要发往哪个仓库（仅第一次需要）。 |
| 4. 推送 | git push -u origin main | 把代码正式上传到 GitHub。 |