# 用一个精美的个人网站包装你自己

<title>用一个精美的个人网站包装你自己</title>

想做个人网站的人，常常卡在第一步。照片还没挑好，项目介绍没写完，连一句怎么介绍自己都要改上好几遍，网页也就一直停在“等准备好了再做”。

其实可以先从一个更简单的问题开始。你希望谁看到这个网站，他看完以后记住什么，又愿意继续做什么？把这几件事说清楚，后面的内容和设计就有了方向。

**design-led-website-builder** 这个 Skill，就是想把起点往前挪一点。你不用先写出一份完整需求文档。只要说清楚你是谁、网站为什么存在、准备展示什么，它就能先确认网站真正要完成的任务，再去研究同类网站、寻找合适的视觉素材、确定设计方向，随后把网页做出来。

# 这个 Skill 到底在解决什么

AI 很容易生成一个“能打开”的网页。真正麻烦的地方，是它也很容易生成一个换掉名字以后还能交给任何人的网页。白底、通用字体、几张等宽卡片，再放一个醒目的按钮，页面看着完整，却没有多少属于你的东西。

**design-led-website-builder** 把设计研究放在写代码之前。它的完整流程有七步，而且顺序固定。

1. 接收你已经提供的材料，判断你带来的是现成品牌、零散个人内容，还是一个参考网站。
2. 锁定网站用途。个人博客可能是以阅读和归档为主的出版型网站，也可能是强调作品与个人气质的视觉型网站。需求确实有分叉时，它只问一轮，等你选定以后再继续。
3. 研究三到五个用途相近的真实网站。研究对象跟着网站任务走，不会拿炫技作品集去指导一个需要长期阅读的博客。
4. 寻找三到八份可用素材。纸张、木纹、插画、公开授权照片和生成的氛围图都可以承担视觉材料。真实头像、真实作品、客户案例和成绩只能使用你提供或确认过的内容。
5. 用一小段话说明设计方向、参考网站、已经找到的素材、不会照抄的部分，以及接下来准备实现什么。
6. 开始搭建网站。它会先确定字体、颜色、间距、图片裁切和交互规则，再把这些规则落实到页面中。
7. 完成检查。首屏要让人很快看懂这是谁的网站、这里有什么、下一步能做什么。移动端、键盘操作、动效降级、图片来源和页面性能也在检查范围里。

参考网站只用来理解层级、排版、图片裁切和交互，不能直接复制它有辨识度的布局与素材。生成图片可以负责气氛和插画，不能冒充你的照片、产品界面、客户或奖项。

# 先把 Skill 安装到豆包工作

直接告诉豆包工作，把skill安装一下

```text
请安装这个个人网站设计skill，https://github.com/liucongg/liucong-skills/tree/main/skills/design-led-website-builder
```

# 用一个个人网站需求跑一遍

```text
$design-led-website-builder 我想制作一个自媒体博主的个人网站，我全网ID都是刘聪NLP，主要想展示我之前分享的一系列文章内容
```

这份提示词已经交代了人、目的，Skill 可以直接进入研究。如果你只写“帮我做一个个人网站”，它会先判断可能存在的几种产品，再用一轮问题请你锁定方向。

::video[20260830172659.mp4](/media/LpIOw0Y6-video-Zjrrbca55o7g-web.mp4)

# 把网站部署到 GitHub Pages

```Plain Text
帮我把这个网站，通过 github 部署到 github page 中
```

这里注意，如果你没有登录github，会让你先登录github，

最终，在github上部署，

::video[20260830175019.mp4](/media/LpIOw0Y6-video-KngVberEtocA.mp4)