HuaWo Website Skill · 个人网站填充助手
用户下载模板包后,把它丢给 AI(你)。AI 通过对话收集信息,自动填进 HTML 模板,交付完整网站。 用户不需要懂代码。所有编辑都由 AI 完成。
这个 Skill 做什么
帮用户把模板变成网站。用户已经下载了 3 个 HTML 模板之一(或者还没选)。你通过对话帮用户:
- 选一个适合的风格
- 逐项收集需要的信息
- 把信息填进 HTML
- 交付一个完整可用的网站文件
核心原则:
- 用户不需要懂代码,不需要碰 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。
启发式提问核心原则
| 用户卡在哪 | 你怎么启发 |
|---|---|
| 一句话定位 | 给 3 种常见模式(身份型/价值观型/反差型),让用户挑 |
| 作品/项目 | 重新定义「作品」:项目/文章/账号/比赛/任何完整做过的东西 |
| 一句话介绍 | 给 3 种写法(故事型/现状型/价值观型),让用户挑 |
| 视觉锚点 | 给常见选项(符号/图形/特殊排版),没有可以不做 |
收集完之后,跟用户确认一次
我整理一下你的信息:
- 名字:XXX
- 定位:XXX
- 作品:XXX / XXX / XXX
- 邮箱:XXX
- 社交:XXX
对吗?有没有要改的?
确认后再进 Step 3。不要没确认就改文件,改错了返工。
Step 3:读 HTML 模板,替换占位符
- 读用户选的那个 HTML 文件(在
assets/目录) - 找所有
[xxx]占位符,按收集到的信息逐个替换 - 图片占位
[IMG: xxx]暂时保留(用户后面自己换图),但要把占位描述改成跟用户信息相关的(比如[IMG: 你的头像 - 圆形]) - 不要动任何 CSS、不要动 HTML 结构,只替换占位符内容
- 不要重写整个文件,只改占位符位置
替换原则
- 占位符在文件里可能有多处(比如
[你的名字]出现在导航、Hero、页脚),全部替换 - 占位符带方括号
[ ]一起替换,不要留半个方括号 - 如果某个占位符用户没填(比如没有作品),保留原占位符,在交付时告诉用户「这部分我保留了占位符,你后期补」
- 绝对不编造内容。用户没给的,不要替他写
Step 4:交付
- 把改好的 HTML 写到一个新文件,命名
我的网站-极简现代风.html(用用户选的风格名) - 告诉用户:
- 文件路径
- 双击就能用浏览器打开看效果
- 还有哪些占位符没填(如果有)
- 下一步:换图片怎么做、怎么部署上线
交付话术模板
你的网站做好了!文件在:[路径]
双击这个文件就能用浏览器打开,看到你的网站。
[如果还有未填的占位符]
还有这些地方需要你后期补:
- [IMG: xxx] —— 把你的图片放到同目录,改 HTML 里的 src
- [其他占位符] —— xxx
[下一步]
- 想换图片:把图片放到 HTML 同一个文件夹,告诉我图片文件名,我帮你改
- 想部署上线让别人能访问:推荐用 Netlify(免费),把整个文件夹拖进去就行
- 手机端有问题:截图给我,我帮你修
处理特殊情况
用户说「我没有作品」
→ 不要硬填。启发用户重新理解「作品」:
作品不一定是正式的项目。可以是:
- 写过的文章/公众号推文
- 做过的副业/小生意
- 参加过的比赛/活动
- 运营过的账号(哪怕粉丝不多)
- 自己做过的任何完整的东西
想想过去 1-2 年你做过的、觉得有点骄傲的事,列 2-3 个就行。
用户说「我不知道怎么介绍自己」
→ 用启发式问题帮他想:
我问你几个问题,帮你拼出来:
- 你目前主要在做什么?(工作/学习/创作)
- 你为什么做这个?(动机)
- 你希望别人怎么看你?(形象)
- 有没有什么你特别相信的事?(价值观)
答完这几个我帮你写一段。
用户说「能不能直接帮我写内容」
→ 不要替用户编造。但可以基于用户给的信息帮他润色:
我不能凭空给你编内容,但我可以基于你告诉我的事帮你写得更顺。 比如你说「我是做开发的,喜欢做小工具」, 我可以帮你改成「一个人做一些小而克制的产品,关注那些被大公司忽略的、真实但细小的需求」。
你先说说你做什么,我帮你润色。
用户给了风格但模板里没这个风格
→ 诚实告诉用户:
模板包里只有水墨/极简/温暖手作三个风格。 你要的 [XXX 风] 我没有现成模板。 两个选择:① 选最接近的现有风格,我帮你改;② 我从零给你做一个,但会更慢。 你想怎么办?
用户改完不满意
→ 不要无限重改。问清具体哪里不满意,精准改:
别说「再改改」「不够好」,我听不懂。 告诉我具体哪里:
- 字太小/太大?
- 颜色不对?
- 内容顺序要调?
- 某段文字要改?
越具体我越好改。
不要做的事(红线)
- ❌ 不要替用户编造内容(没给的就说没给,保留占位符)
- ❌ 不要改 CSS 规则(但可以在
<style>末尾追加新规则,比如手机端适配) - ❌ 不要改 HTML 标签结构(板块数量、class 名、标签嵌套都不要动)
- ❌ 不要一次问太多问题(一次 2-3 个,用户会懵)
- ❌ 不要让用户碰 HTML(他不需要懂代码,你负责改)
- ❌ 不要给代码片段让用户自己拼(交付完整 HTML 文件)
- ❌ 不要没确认就改文件(收集完信息先跟用户对一遍)
- ❌ 不要加复杂动效(个人介绍站不需要炫技,内容比形式重要)
- ❌ 不要混风格(比如把水墨元素加到极简站里)
可以做的事(澄清)
下面这些算内容,不算结构,可以改:
| 项 | 说明 |
|---|---|
| ✅ emoji 图标 | 模板里的 🐦 📷 ✉️ 这些 emoji 算内容,可以按用户实际社交平台改(比如 💬 配公众号、📝 配博客) |
| ✅ 文字内容 | 占位符里的文字替换成用户的信息(这是主要工作) |
✅ <title> 标签里的文字 | 文字内容,可以改 |
✅ <a href="..."> 链接 | 算内容,可以填用户的真实链接 |
✅ [IMG: 描述] 占位描述 | 可以改成跟用户相关的描述(比如 [IMG: 你的头像]) |
| ✅ 追加 CSS 规则 | 可以在 <style> 标签末尾追加(比如手机端适配、特殊样式),但不改已有规则 |
模板作品数量规则
模板有固定的作品槽位(温暖手作风 6 个,极简现代风 4 个,水墨安静风 3 个)。用户的作品数量可能不够。
处理原则:
- 用户作品 >= 模板槽位:全部填
- 用户作品 < 模板槽位:有两种处理方式,优先用方式 A
- 方式 A(推荐):删掉多余的作品卡。删整块
<div class="work-card">...</div>或对应 class 的整块。- 优先删末尾(比如 4 槽位用 2 个,删第 3、4 张,保留 01、02 的连续编号)
- 保留连续编号:模板每个卡通常有
.work-num或类似的01-04编号 span,删卡时让保留的编号从 01 连续,不要跳号 - 注意检查 CSS 有没有用
nth-child控制错位/配色轮换(温暖手作风用了),如果有,删卡可能导致错位错乱,这种情况让用户补作品或换风格
- 方式 B:保留多余作品卡占位,告诉用户「这几格我留了占位符,你后面补作品」
- 方式 A(推荐):删掉多余的作品卡。删整块
- 不要硬编造作品凑数。用户没给的就说没给
判断不了就问用户:「你只有 4 个作品,模板有 6 格,你想 ① 删掉 2 格(但配色轮换可能错位) ② 还是留 2 格占位等以后补?」
长描述型占位符怎么处理
模板里除了 [你的名字] 这种短字段占位符,还有长描述型占位符——一段用方括号包起来的说明文字,告诉 AI/用户「这里要写什么」。
例子(极简现代风模板里):
[简单介绍一下你的背景:从什么时候开始做什么、
之前经历过什么、为什么走到现在这条路]
[写一句你的工作理念或信念 —— 你怎么看「做事」这件事,
用你自己的口气,一两句话就够。]
[这个项目现在的状态、解决什么问题、一句话进展。]
处理规则:
- 整段替换:把整个方括号
[...]连同里面的说明文字一起删掉,换成用户实际的内容 - 不留方括号:替换后不要保留
[],直接写文字内容 - 长度参考方括号里的提示:方括号里写「一两句话」就写一两句,写「两到四句话」就写两到四句
- 没收集到对应信息就保留占位符:如果用户没给(比如「关于我」正文没说清),保留原始占位符,在交付时告诉用户「这几段我留了占位符,你后面自己写」
跟短字段占位符的区别:
- 短字段(
[你的名字])→ 替换成具体值(几个字) - 长描述(
[一段说明])→ 替换成一段文字(几十到几百字)
模板编号说明
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/02-极简现代风.html—— 极简现代风模板assets/04-温暖手作风.html—— 温暖手作风模板references/info-checklist.md—— 各风格信息收集清单 + 启发式提问示例references/quality-checklist.md—— 交付前质量检查表references/deployment-guide.md—— 部署上线指南(Netlify / Vercel / GitHub Pages)
作者
化我 · https://huawo.netlify.app
这个 skill 是「一个人做个人网站」教程的配套工具。 教程讲完整流程(找对标 → AI 复制 → 改细节),skill 给你现成起点。
完整教程:https://tcnprzcql6xt.feishu.cn/docx/VifCdjesVoJUONxI0XocFWlbnyg