# Huawo Website Skill

> 帮用户做个人介绍网站的 Claude Skill。通过对话收集用户信息,自动填进 HTML 模板,交付完整可用的网站。内置三种风格(水墨安静风/极简现代风/温暖手作风),纯 HTML/CSS 无依赖,中文优先,克制不炫技。当用户说「帮我做个人网站」「我有个模板要填」「做一个 portfolio」「个人介绍站」或把模板文件拖给 AI 时触发。

- **Type:** Skill
- **Install:** `agentstack add skill-leo485610395-cmyk-huawo-website-skill-huawo-website-skill`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [leo485610395-cmyk](https://agentstack.voostack.com/s/leo485610395-cmyk)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [leo485610395-cmyk](https://github.com/leo485610395-cmyk)
- **Source:** https://github.com/leo485610395-cmyk/huawo-website-skill

## Install

```sh
agentstack add skill-leo485610395-cmyk-huawo-website-skill-huawo-website-skill
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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**:保留多余作品卡占位,告诉用户「这几格我留了占位符,你后面补作品」
3. **不要硬编造作品凑数**。用户没给的就说没给

**判断不了就问用户**:「你只有 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](https://github.com/leo485610395-cmyk)
- **Source:** [leo485610395-cmyk/huawo-website-skill](https://github.com/leo485610395-cmyk/huawo-website-skill)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-leo485610395-cmyk-huawo-website-skill-huawo-website-skill
- Seller: https://agentstack.voostack.com/s/leo485610395-cmyk
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.