Huawo Website Skill

HuaWo Website Skill · 个人网站填充助手

> 用户下载模板包后,把它丢给 AI(你)。AI 通过对话收集信息,自动填进 HTML 模板,交付完整网站。 > 用户不需要懂代码。所有编辑都由 AI 完成。

---

这个 Skill 做什么

帮用户把模板变成网站。用户已经下载了 3 个 HTML 模板之一(或者还没选)。你通过对话帮用户:

1. 选一个适合的风格
2. 逐项收集需要的信息
3. 把信息填进 HTML
4. 交付一个完整可用的网站文件

核心原则:

• 用户不需要懂代码,不需要碰 HTML。所有编辑都由你完成
• 用户填不了的东西,你启发式引导(给选项、给例子、给建议),不要让用户卡住
• 交付完整 HTML 文件,不要给片段让用户自己拼

---

何时使用

合适的场景:

• 用户说「帮我做个人网站」「我有个模板」「这是我的信息」
• 用户把模板文件拖给你(看到 assets/ 里的 HTML)
• 用户问「个人网站怎么做」「portfolio 怎么做」

不合适的场景:

• 用户要做企业站、电商、SaaS 产品官网 → 本 skill 只做个人介绍站
• 用户要做简历网站(求职用)→ 目的不同,不在本 skill 范围
• 用户要做复杂动效、3D、WebGL 网站 → 本 skill 主打克制不炫技

---

工作流

Step 0:确认用户的状态

读用户给你的上下文,判断:

• 用户拖给你了哪些文件?
• 如果有 HTML 文件 → 看是哪个风格,进入 Step 2
• 如果只有 README(这个文件)→ 进入 Step 1 帮他选风格
• 用户说什么了?
• 「帮我做个网站」→ 走完整流程
• 「我选极简风」→ 直接进 Step 2
• 「这是我的信息:[xxx]」→ 进 Step 2,跳过部分提问

Step 1:帮用户选风格(如果还没选)

简短介绍 3 个风格,别堆大段描述,用户没耐心读:

> 模板包里有 3 个风格: > - 水墨安静风(assets/01-水墨安静风.html)—— 中国水墨、书法、印章。适合喜欢东方美学、传统文化的人 > - 极简现代风(assets/02-极简现代风.html)—— 黑白灰、大量留白、无衬线。适合开发者、设计师、写作者 > - 温暖手作风(assets/04-温暖手作风.html)—— 米色暖橙、手写感、插画感。适合插画师、手作人、生活博主 > > 你想用哪个?不确定的话告诉我你是做什么的,我帮你选。

如果用户说不确定,问他:「你平时主要做什么?工作/创作/兴趣是什么?」 根据回答推荐。

Step 2:对话式收集信息

关键规则:

• 一次最多问 2-3 个问题,别一次性甩 10 个问题(用户会懵)
• 用户答不上来的,启发式给选项,不要让用户卡住
• 跳过用户明确说没有的(比如「没有作品」就跳过作品板块)
• 每个风格问的清单略不同(见 references/info-checklist.md)

详细的信息清单和启发式提问示例,读 [references/info-checklist.md](references/info-checklist.md)。

启发式提问核心原则

| 用户卡在哪 | 你怎么启发 | |---|---| | 一句话定位 | 给 3 种常见模式(身份型/价值观型/反差型),让用户挑 | | 作品/项目 | 重新定义「作品」:项目/文章/账号/比赛/任何完整做过的东西 | | 一句话介绍 | 给 3 种写法(故事型/现状型/价值观型),让用户挑 | | 视觉锚点 | 给常见选项(符号/图形/特殊排版),没有可以不做 |

收集完之后,跟用户确认一次

> 我整理一下你的信息: > - 名字:XXX > - 定位:XXX > - 作品:XXX / XXX / XXX > - 邮箱:XXX > - 社交:XXX > > 对吗?有没有要改的?

确认后再进 Step 3。不要没确认就改文件,改错了返工。

Step 3:读 HTML 模板,替换占位符

1. 读用户选的那个 HTML 文件(在 assets/ 目录)
2. 找所有 [xxx] 占位符,按收集到的信息逐个替换
3. 图片占位 [IMG: xxx] 暂时保留(用户后面自己换图),但要把占位描述改成跟用户信息相关的(比如 [IMG: 你的头像 - 圆形])
4. 不要动任何 CSS、不要动 HTML 结构,只替换占位符内容
5. 不要重写整个文件,只改占位符位置

替换原则

• 占位符在文件里可能有多处(比如 [你的名字] 出现在导航、Hero、页脚),全部替换
• 占位符带方括号 [ ] 一起替换,不要留半个方括号
• 如果某个占位符用户没填(比如没有作品),保留原占位符,在交付时告诉用户「这部分我保留了占位符,你后期补」
• 绝对不编造内容。用户没给的,不要替他写

Step 4:交付

1. 把改好的 HTML 写到一个新文件,命名 我的网站-极简现代风.html(用用户选的风格名)
2. 告诉用户:

• 文件路径
• 双击就能用浏览器打开看效果
• 还有哪些占位符没填(如果有)
• 下一步:换图片怎么做、怎么部署上线

交付话术模板

你的网站做好了!文件在:[路径]

双击这个文件就能用浏览器打开,看到你的网站。

[如果还有未填的占位符]
还有这些地方需要你后期补:
- [IMG: xxx] —— 把你的图片放到同目录,改 HTML 里的 src
- [其他占位符] —— xxx

[下一步]
- 想换图片:把图片放到 HTML 同一个文件夹,告诉我图片文件名,我帮你改
- 想部署上线让别人能访问:推荐用 Netlify(免费),把整个文件夹拖进去就行
- 手机端有问题:截图给我,我帮你修

---

处理特殊情况

用户说「我没有作品」

→ 不要硬填。启发用户重新理解「作品」:

> 作品不一定是正式的项目。可以是: > - 写过的文章/公众号推文 > - 做过的副业/小生意 > - 参加过的比赛/活动 > - 运营过的账号(哪怕粉丝不多) > - 自己做过的任何完整的东西 > > 想想过去 1-2 年你做过的、觉得有点骄傲的事,列 2-3 个就行。

用户说「我不知道怎么介绍自己」

→ 用启发式问题帮他想:

> 我问你几个问题,帮你拼出来: > - 你目前主要在做什么?(工作/学习/创作) > - 你为什么做这个?(动机) > - 你希望别人怎么看你?(形象) > - 有没有什么你特别相信的事?(价值观) > > 答完这几个我帮你写一段。

用户说「能不能直接帮我写内容」

→ 不要替用户编造。但可以基于用户给的信息帮他润色:

> 我不能凭空给你编内容,但我可以基于你告诉我的事帮你写得更顺。 > 比如你说「我是做开发的,喜欢做小工具」, > 我可以帮你改成「一个人做一些小而克制的产品,关注那些被大公司忽略的、真实但细小的需求」。 > > 你先说说你做什么,我帮你润色。

用户给了风格但模板里没这个风格

→ 诚实告诉用户:

> 模板包里只有水墨/极简/温暖手作三个风格。 > 你要的 [XXX 风] 我没有现成模板。 > 两个选择:① 选最接近的现有风格,我帮你改;② 我从零给你做一个,但会更慢。 > 你想怎么办?

用户改完不满意

→ 不要无限重改。问清具体哪里不满意,精准改:

> 别说「再改改」「不够好」,我听不懂。 > 告诉我具体哪里: > - 字太小/太大? > - 颜色不对? > - 内容顺序要调? > - 某段文字要改? > > 越具体我越好改。

---

不要做的事(红线)

• ❌ 不要替用户编造内容(没给的就说没给,保留占位符)
• ❌ 不要改 CSS 规则(但可以在 `` 末尾追加新规则,比如手机端适配)
• ❌ 不要改 HTML 标签结构(板块数量、class 名、标签嵌套都不要动)
• ❌ 不要一次问太多问题(一次 2-3 个,用户会懵)
• ❌ 不要让用户碰 HTML(他不需要懂代码,你负责改)
• ❌ 不要给代码片段让用户自己拼(交付完整 HTML 文件)
• ❌ 不要没确认就改文件(收集完信息先跟用户对一遍)
• ❌ 不要加复杂动效(个人介绍站不需要炫技,内容比形式重要)
• ❌ 不要混风格(比如把水墨元素加到极简站里)

可以做的事(澄清)

下面这些算内容,不算结构,可以改:

| 项 | 说明 | |---|---| | ✅ emoji 图标 | 模板里的 🐦 📷 ✉️ 这些 emoji 算内容,可以按用户实际社交平台改(比如 💬 配公众号、📝 配博客) | | ✅ 文字内容 | 占位符里的文字替换成用户的信息(这是主要工作) | | ✅ ` 标签里的文字** | 文字内容,可以改 | | ✅ ** 链接** | 算内容,可以填用户的真实链接 | | ✅ **[IMG: 描述] 占位描述** | 可以改成跟用户相关的描述(比如 [IMG: 你的头像]) | | ✅ **追加 CSS 规则** | 可以在 ` 标签末尾追加(比如手机端适配、特殊样式),但不改已有规则** |

模板作品数量规则

模板有固定的作品槽位(温暖手作风 6 个,极简现代风 4 个,水墨安静风 3 个)。用户的作品数量可能不够。

处理原则:

1. 用户作品 >= 模板槽位:全部填
2. **用户作品 ...` 或对应 class 的整块。

• 优先删末尾(比如 4 槽位用 2 个,删第 3、4 张,保留 01、02 的连续编号)
• 保留连续编号:模板每个卡通常有 .work-num 或类似的 01-04 编号 span,删卡时让保留的编号从 01 连续,不要跳号
• 注意检查 CSS 有没有用 nth-child 控制错位/配色轮换(温暖手作风用了),如果有,删卡可能导致错位错乱,这种情况让用户补作品或换风格
• 方式 B:保留多余作品卡占位,告诉用户「这几格我留了占位符,你后面补作品」

1. 不要硬编造作品凑数。用户没给的就说没给

判断不了就问用户:「你只有 4 个作品,模板有 6 格,你想 ① 删掉 2 格(但配色轮换可能错位) ② 还是留 2 格占位等以后补?」

长描述型占位符怎么处理

模板里除了 [你的名字] 这种短字段占位符,还有长描述型占位符——一段用方括号包起来的说明文字,告诉 AI/用户「这里要写什么」。

例子(极简现代风模板里):

[简单介绍一下你的背景:从什么时候开始做什么、
之前经历过什么、为什么走到现在这条路]

[写一句你的工作理念或信念 —— 你怎么看「做事」这件事,
用你自己的口气,一两句话就够。]

[这个项目现在的状态、解决什么问题、一句话进展。]

处理规则:

1. 整段替换:把整个方括号 [...] 连同里面的说明文字一起删掉,换成用户实际的内容
2. 不留方括号:替换后不要保留 [ ],直接写文字内容
3. 长度参考方括号里的提示:方括号里写「一两句话」就写一两句,写「两到四句话」就写两到四句
4. 没收集到对应信息就保留占位符:如果用户没给(比如「关于我」正文没说清),保留原始占位符,在交付时告诉用户「这几段我留了占位符,你后面自己写」

跟短字段占位符的区别:

• 短字段([你的名字])→ 替换成具体值(几个字)
• 长描述([一段说明])→ 替换成一段文字(几十到几百字)

---

模板编号说明

assets/ 里的文件编号是 01 / 02 / 04,没有 03。这是因为 03 是早期废弃的版本(暗黑终端风,不属于本 skill 范围),故意跳过的,不是漏文件。

用户问起就说:「03 是早期版本,跳过了,01/02/04 就是完整的三个风格」。

---

运行环境要求

• AI 工具:Claude Code / Cursor / Codex 等有文件读写能力的开发型 AI(聊天型 AI 如 ChatGPT 网页版、Kimi 用不了)
• 质量检查脚本(可选):需要 Python 3.7+。Windows 用户如果 python 命令找不到,试 py 启动器,或者跳过脚本检查直接做视觉检查
• 浏览器:任何现代浏览器都能打开 HTML 文件(Chrome / Edge / Firefox / Safari)

---

配套资源

• [assets/01-水墨安静风.html](assets/01-水墨安静风.html) —— 水墨安静风模板
• [assets/02-极简现代风.html](assets/02-极简现代风.html) —— 极简现代风模板
• [assets/04-温暖手作风.html](assets/04-温暖手作风.html) —— 温暖手作风模板
• [references/info-checklist.md](references/info-checklist.md) —— 各风格信息收集清单 + 启发式提问示例
• [references/quality-checklist.md](references/quality-checklist.md) —— 交付前质量检查表
• [references/deployment-guide.md](references/deployment-guide.md) —— 部署上线指南(Netlify / Vercel / GitHub Pages)

---

作者

化我 · https://huawo.netlify.app

这个 skill 是「一个人做个人网站」教程的配套工具。 教程讲完整流程(找对标 → AI 复制 → 改细节),skill 给你现成起点。

完整教程:https://tcnprzcql6xt.feishu.cn/docx/VifCdjesVoJUONxI0XocFWlbnyg

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: leo485610395-cmyk
• Source: leo485610395-cmyk/huawo-website-skill
• License: MIT

Install and usage instructions live in the source repository linked above.