借助字节的Trae AI编程助手，搭建一个专属的个人网站！

字节的Trae工具已经上线了很长一段时间，终于有时间下载试用了一下

尝试做了几个HTML页面，整体的实现效果和交互都特别棒，这里和大家分享一下

所有页面已经部署到Github上

个人主页1：https://aibetas-ai.github.io/sanshi_homepage1/

添加图片注释，不超过 140 字（可选）

个人主页2：https://aibetas-ai.github.io/sanshi_homepage2/

添加图片注释，不超过 140 字（可选）

数学演示：https://aibetas-ai.github.io/The-Beauty-of-Mathematics/

添加图片注释，不超过 140 字（可选）

2048小游戏：https://aibetas-ai.github.io/2048/

添加图片注释，不超过 140 字（可选）

灵感来源于前段时间正好看到歸藏大佬发了一个如何将文章转为直观网页的例子

添加图片注释，不超过 140 字（可选）

想起来之前大学刚毕业找工作时，自己还做了一个简陋的个人主页，这次正好借助Trae，重新设计一个个人主页

01 ｜ Trae下载

首先说说Trae的下载，目前Trae提供两个不同版本的下载，分别是国际版和国内版

国际版地址：https://www.trae.ai/

国内版地址：https://www.trae.com.cn/

国内版和国际版功能上没有什么太大的差别，主要是使用的大模型的差异

国际版使用的是Claude和DeepSeek以及GPT-4o，可以白嫖使用Claude-3.7-Sonnet，而且没有限制，真香！

添加图片注释，不超过 140 字（可选）

而国内版使用的是豆包和DeepSeek

添加图片注释，不超过 140 字（可选）

如果条件允许，强烈推荐下载国际版！完全免费，偶尔可能出现排队的情况，但恢复速度也十分迅速

添加图片注释，不超过 140 字（可选）

以下的演示也是基于国际版演示

02 ｜网页生成

下载完成后，打开工具，按照示例注册登录即可

登录后，点击新建文件夹，创建一个新的目录

添加图片注释，不超过 140 字（可选）

Trae的使用十分简单，首先需要选择模型，，默认选择Claude-3.7-Sonnet，目前最强的编程模型

除了提供默认的模型，还支持各大服务商的API

添加图片注释，不超过 140 字（可选）

选好模型，只需要在右侧chat窗口，输入指令，就可以开始直接生成代码

帮我写一个2048小游戏，在html中运行

添加图片注释，不超过 140 字（可选）

生成完成后，点击应用即可自动生成html/CSS/JS文件

添加图片注释，不超过 140 字（可选）

即可完成创建，打开调试代码，看看生成效果

添加图片注释，不超过 140 字（可选）

03 ｜个人主页搭建

需要注意的是，生成代码的时候，不要指望一次性帮你生成完整的代码，可以逐步递进

所以我这里采用的步骤有两步：

1. 先参考歸藏大佬的可视化指令，进行微调，生成一个个人主页粗糙版本

2. 提供额外的信息，要求网页端的内容与自己的要求进行适配

使用以下指令生成一个个人主页基础版

参考比较经典的个人网页设置方式，搭建一个专属的个人主页，请帮我设计一个经典和个性化的html页面，## 内容要求
● 所有页面内容必须为简体中文
● 保持原文件的核心信息，但以更易读、可视化的方式呈现
● 在页面底部添加作者信息区域，包含：
● 版权信息和年份
设计风格
● 整体风格参考Linear App的简约现代设计
● 使用清晰的视觉层次结构，突出重要内容
● 配色方案应专业、和谐，适合长时间阅读
技术规范
● 使用HTML5、TailwindCSS 3.0+（通过CDN引入）和必要的JavaScript
● 实现完整的深色/浅色模式切换功能，默认跟随系统设置
● 代码结构清晰，包含适当注释，便于理解和维护
响应式设计
● 页面必须在所有设备上（手机、平板、桌面）完美展示
● 针对不同屏幕尺寸优化布局和字体大小
● 确保移动端有良好的触控体验
媒体资源
● 使用文档中的Markdown图片链接（如果有的话）
● 使用文档中的视频嵌入代码（如果有的话）
图标与视觉元素
● 使用专业图标库如Font Awesome或Material Icons（通过CDN引入）
● 根据内容主题选择合适的插图或图表展示数据
● 避免使用emoji作为主要图标
交互体验
● 添加适当的微交互效果提升用户体验：
● 按钮悬停时有轻微放大和颜色变化
● 卡片元素悬停时有精致的阴影和边框效果
● 页面滚动时有平滑过渡效果
● 内容区块加载时有优雅的淡入动画
性能优化
● 确保页面加载速度快，避免不必要的大型资源
● 图片使用现代格式(WebP)并进行适当压缩
● 实现懒加载技术用于长页面内容
输出要求
● 提供完整可运行的单一HTML文件，包含所有必要的CSS和JavaScript
● 确保代码符合W3C标准，无错误警告
● 页面在不同浏览器中保持一致的外观和功能

给出指令后，即可自动开始生成，点击应用即可创建文件，并将html代码粘贴到上面

添加图片注释，不超过 140 字（可选）

不过需要注意的是，由于有上下文长度的限制，一次行可生成的代码长度大概在200～300行，

如果超过这个长度，可能出现如下的提示，我们只需要输入继续即可，就会自动从上次结束的位置开始生成

添加图片注释，不超过 140 字（可选）

但每次出现暂停，建议都点击应用按钮，将代码插入到html中，再继续生成，否则可能断的次数过多，出现分不清代码的情况

最后将代码统一到index.html中以后，点击左侧的调试按钮，即可调试代码

添加图片注释，不超过 140 字（可选）

第一步生成的代码如图

添加图片注释，不超过 140 字（可选）

我个人觉得生成的内容不够完整，所以我让DeepSeek帮我整理了一份个人主页需要包含的信息，然后同步进去

移除欢迎来到主页这个板块，包含以下信息：一、基础信息模块

● 个人简介（About Me / Bio）

○ 姓名（中英文）：三石

○ 职业或身份标签（例如：设计师/开发者/学生）

○ 简短的自述（核心技能、兴趣、价值观）

○ 个人头像或标志性形象图

● 联系方式（Contact）

○ 邮箱（非公开可设置联系表单）

○ 社交媒体（LinkedIn/GitHub/Twitter等，选择性展示）: 包含github：https://github.com/AIBetas-ai

○ 职业类平台（如 Behance/Portfolio 链接

○ 地址（可选，仅需大致位置，如“上海”）

● 教育背景与经历（Education & Experience）

○ 学校、专业、学位

○ 工作经历（公司名称、职位、关键成就）

○ 实习或志愿者经验（适合学生或转行者）

二、核心展示模块

● 技能列表（Skills）

○ 按照类别分组（如技术栈：Python/AI工具；设计技能：Figma/Photoshop）

○ 可视化能力条或技能标签（避免过度自信的百分比量化）

● 作品集（Portfolio）

○ 精选项目（每个项目配标题+简短说明+成果截图/链接）

○ 分类标签（如「UI设计」「数据分析」「开源代码」）

● 简历下载（Resume/CV）

○ 提供 PDF 版本（确保信息与内容一致）

○ 中英文版本分开（根据目标受众）

三、进阶个性化内容

● 博客或文章（Blog/Articles）

○ 专业性文章（技术分享、行业分析）

○ 生活类内容（旅行、兴趣探索，适合塑造立体形象）

● 动态更新（Updates）

○ 最新成就（获奬、演讲、项目上线）

○ 参与的活动（会议、比赛、工作坊）

完成这一步之后，整体样式就基本八九不离十了，接下来主要是微调，

主页生成的过程，也是一个抽盲盒的过程，需要不断的尝试，反复的迭代，找到自己一个最满意的效果

04 ｜主页图片/文件托管

我们注意到生成的页面，图片部分暂时都没有，如果要将我们的页面分发出去，需要在一个线上的地址存储我们的图片

比较常规的方案是找一些图片托管服务工具，postimages目前使用中最好用的一款，支持直接上传，而且完全免费无广告！

图片托管：https://postimages.org/

还有一个比较偷懒的方案，将图片上传到Github 仓库，直接使用Github链接

首先将图片上传到自己GitHub仓库，然后打开图片，复制图片链接

添加图片注释，不超过 140 字（可选）

将图片链接中的blob修改为raw，继续访问链接，则会301跳转，即可得到图片在github的存放地址

https://raw.githubusercontent.com/AIBetas-ai/sanshi/main/AI%E5%B7%A5%E5%85%B7%E6%B1%87%E6%80%BB.png

十分简单方便，上传完成后，将我们个人主页的图片替换为GitHub图片地址即可