企业官网建设流程全解析

一、缘起

一位高中老师在微信上问我如何制作词汇思维导图，他想帮助学生通过思维导图来扩展学生单词量。单调的文字很难吸引学生的注意力，如果制作成可视化的思维导图，就可以让学生快速理清词汇之前的联系，同时对比记忆其它词汇。

于是，我问他什么要求，他给我手绘了一个草图，还传给我了一份文件。

二、问题解决

文生图工具很多，我首先想到的还是WPS，我先用WPS打开他给我的文件，复制其中一部分

内容。然后，点击WPSAI——AI生成图片，在右侧窗口中输入以下提示词。

我的提示词也非常简单：

制作适合高中生学习的词汇思维导图，删除三角符号：able adj. 能 反unable;有能力的 ► ably adv. 能干地 ► able-bodied adj. 体格健全的;强壮的 ► enable vt. 使能够;使成为可能(allow) ► unable adj. [不用于名词前]无能力(做某事)的 ► ability n. 能力 反inability;才能 ► inability n. 无能;无力;不能 ► disable vt. 使丧失能力;使伤残;使不能运转 ► disabled adj. 丧失能力的;残疾的;不能运转的 ► disability n. &残疾(状态);缺陷;障碍

经过20秒，WPSAI为我生成的图如下，貌似不是很漂亮，于是，我又对提示词进行了修改。

在第二版提示词中，我对色彩和文字排列进行了要求：

制作适合高中生学习的词汇思维导图，色彩亮丽一点，同一方框里，单词在上，词性和意思在下，删除三角符号：able adj. 能 反unable;有能力的 ► ably adv. 能干地 ► able-bodied adj. 体格健全的;强壮的 ► enable vt. 使能够;使成为可能(allow) ► unable adj. [不用于名词前]无能力(做某事)的 ► ability n. 能力 反inability;才能 ► inability n. 无能;无力;不能 ► disable vt. 使丧失能力;使伤残;使不能运转 ► disabled adj. 丧失能力的;残疾的;不能运转的 ► disability n. &残疾(状态);缺陷;障碍

生成的效果明显好了很多：

图片效果不错，老师直呼完美，不过他又提出新的要求，想把单词隐去留空。于时我又改进了提示词，但效果不理想，我就想到使用WPS灵犀来更加精准地绘制思维导图。

三、WPS灵犀绘制思维导图

我想到是否可以使用html的代码来实现，同时可以设置单词和词义的隐现，这样截图放到word当中也方便。于时，我打开灵犀，经过多次调试，最终生成以下结果，可以通过右上角控制显隐单词，还可以打印网页的方式打印思维导图：

我摘录迭代多次的提示词如下，和大家一起分享。未来替换输入单词数据部分，修改核心词就可以了，喂给WPS灵犀就可以了。

📌
英语词汇思维导图 · 生成提示词（下划线填空版）
请根据以下内容生成一个适合高中生学习的英语词汇思维导图，交付为一个自包含的单文件 HTML（双击即可打开，无任何外部依赖）。
输入单词数据
#单词 absorb vt. ①吸收;吸纳;吸引 ②理解;掌握(take in) ③消减;缓冲;耗费;承受 absorbed adj. 全神贯注的;专心致志的 absorbing adj. 十分吸引人的 self-absorbed adj. 只顾自己的 absorber n. 吸收器/体/剂;汽车减震器 absorbable adj. 可(被身体)吸收的 absorption n. 吸收;吸纳;全神贯注;专心 absorbance n. (光)吸收度;吸光度 absorbent adj. 易吸收(液体等)的
中心为词根 absorb（黄色圆角框突出显示）；数据不带 ► 符号。
布局要求

放射状布局：中心词根用黄色圆角框突出显示，周围卡片用细实线连接到中心，连线要短、紧凑。
连接线用 SVG 静态实线，禁止任何闪烁、动画或高亮光晕。
卡片围绕中心均匀分布；几何位置须保证在「隐藏单词 / 显示单词」两种状态下，卡片之间、卡片与中心框都互不重叠，也不超出画布边界。
每张卡片内：上方是单词（带下划线填空），下方标注词性和词义；词汇和词义不换行。
视觉要求
配色柔和亮丽：纯白背景，每张卡片一种 马卡龙低饱和淡色、深色文字，清晰不刺眼；中心框用黄色。
字号适当放大（外围单词约 20px、词义约 15px、中心词约 34px），保证高中生清晰阅读。
下划线填空 + 交互要求
单词采用「下划线填空」形式：每张卡片（含中心词）在词性词义上方显示一条下划线横线。
隐藏单词时只显示这条横线（填空位，宽度与单词一致），不显示单词文本。
右上角设置一个按钮，点击在「显示单词 / 隐藏单词」之间切换，统一控制所有单词（含中心词）显隐。
显示单词时，单词出现在这条下划线上，下划线保留在单词下方；隐藏时文字不可见但下划线保留。
隐藏/显示用 visibility 实现，不用 display:none，避免布局跳动。
技术约束
单文件 HTML，自包含，双击即可打开；无外部依赖（无 CDN、无网络请求、无外部字体或脚本）。删除所有 ► 符号。反义词 / 近义提示（如 take in）保留在词义里。交付
输出完整可用的.html文件，并说明中心词选择与需用户确认的点（如有）。

四、写在最后

目前借助于WPSAI和WPS灵犀能够完成大部分的教学需求，在不同场景需要采用不同的工具，如果是快速绘制人物，可以用WPS的AI绘图功能，如果是复杂的思维导图则可以借用灵犀生成html代码，再打印或者插入到WPS的文字或幻灯片当中。
最后需要注意的是，制作过程有可能需要反复迭代，最后一步需要让AI帮你把最终的提示词写出来，或者沉淀为Skill, 便于后期复用，这样就可以节省更多的时间。