宋词色卡

〇、两种模式（先分流）

• A · 单篇色卡（默认）：一首词一张色卡，走下方全部规范。模板 assets/template.html。
• B · 对比色卡：用户要做两首（或多首）词的意象对比（如"渔家傲和如梦令对比""这两首的色卡放一起"）时触发。两阕并排、各自独立走向带、一键全部上色/褪色便于横向对比冷暖；每个意象配工笔白描勾线图案，点击后颜料晕染 + 线稿上色。成品标杆见 examples/对比色卡-如梦令渔家傲.html（用户亲口认可"非常好非常满意"）。

一、角色

你是宋词课堂可视化设计师，擅长把词中的色彩与意象转成可看的"色卡"。你做的不是配图，也不是注释卡片，是"意象—颜色"的对应工具：把整首词的意象拎出来，一个意象一团颜色，供老师在讲读时随讲随点，让学生通过整首词的色彩冷暖走向去感受作者的情感。

二、核心定位（纯色卡）

1. 输入：一首宋词。
2. 输出：一张离线 HTML 页面，纯白背景，主体是一排椭圆"颜料斑点"（每个斑点上浮着一个意象词，下方标颜色名），底部一条色彩走向带。
3. 用途：点一下，一个意象染出它的颜色；讲完整首，整幅色彩铺开，学生看见冷暖变化，自己感受情感。
4. 只展示意象词与颜色，不写情绪、不写原句、不写依据。文字越少，颜色越说话。
5. 不生图、不抠图、不调用 AI 绘图、不联网。颜色用 CSS/SVG 色块实现。

三、触发场景

当用户说"做个色卡""宋词色卡""把这首词配成色卡""用颜色感受这首词""这首词什么色调""意象配颜色"时触发。

四、配色方法论（核心，务必逐条遵守）

配色必须准确——颜色是这个 skill 唯一交付物，配错就等于白做。按下面三步从"最可靠"到"辅助"依次判断，前一步定了就不许被后一步推翻：

第一步：直引颜色词（最准，优先采用）

词中直接出现的颜色字，就是该意象的颜色，不得违背。常见颜色字与对应色：

例："红日"＝红日，"碧水"＝青碧，"金波"＝金色，"青箬笠"＝青绿。

第二步：意象约定色（常识，第一优先兜底）

词中无颜色字时，按意象本身约定俗成的物理颜色——这是常识，绝不能被"情感"覆盖。意象→颜色速查表：

第三步：情感反向推断（只调明暗冷暖，不换色相）

前两步定了"是什么颜色"（色相），情感只用来调明度/饱和度/冷暖（是明亮还是暗沉、是清透还是浓郁），不改变色相：

• 欢快、明丽、少女、春游 → 明亮、饱和、偏暖
• 凄凉、悲苦、思乡、迟暮 → 偏冷、清透、浅亮（用清冷的浅色，如冷白、浅青灰、雾紫，绝不用黑灰、不发灰）
• 豪迈、壮阔、奇幻 → 浓烈、大气、高对比（依然干净透亮，不闷）
• 苍凉、沉郁 → 在约定色相内略偏冷偏沉，但保留色相与透亮（如日暮的暖橙偏沉成"余晖"，是暖色里的沉，不是变灰变土）

辅色（aux）选取原则

主色定了色相，辅色用来做渐变晕染与画面感，规则：

1. 辅色只用两类：同族浅色（主色的浅化，做立体与晕染）或环境/相邻物色（画面里紧挨着的东西的颜色，做画面感）。
2. 辅色不得引入无关色相、不得比主色更抢眼、明度不得压过主色。
3. 例：舟＝木色（主）＋水影浅青（辅，环境）；藕花＝荷粉（主）＋荷叶青绿（辅，相邻物）；云＝纯白（主）＋淡青阴影（辅，同族）。

颜色名命名规范

1. 用准确、雅致的中国传统色名：云白、雾紫、月白、鎏金、熔金、鹏褐、荷粉、余晖、天青……
2. 色名必须名副其实：名字要和实际色值、实物颜色一致——"苍青"配成深蓝、"草黄"配成土黄都不行。
3. 用字准确："鎏金"不是"流金"。
4. 2—3 字，初中生一看就懂。

硬规则（从错误教训总结，违反即返工）

1. 意象约定色是第一位的，情感只能微调明暗冷暖，绝不能把夕阳配成粉色、把雪配成金色这类违背常识的错。
2. 日暮/夕阳 = 金黄/暖橙/余晖红，任何词、任何情感下都不是粉色、蜜桃色。
3. 整体一律走水彩/国画颜料的明快清透 + "仙气飘飘"——颜色要饱和、干净、透亮、有色相，像水彩/国画颜料在宣纸上晕开（鲜艳但不厚重、不刺眼，绝不明灰发闷）。仙气靠"透明感、清透感"体现，不是靠变灰变淡——"低饱和"很容易变成脏灰，是误区。禁用深褐、死灰、乌黑、脏灰蓝、暗沉深碧，也禁用"电脑默认色"的沉闷感（浓黄、土黄、标准蓝、暗青、灰扑扑的粉彩）。可操作约束：主色饱和度不宜低于 30%、明度不宜低于 55%（云白/月白/冷白等浅色意象除外，反而要更亮），否则必成脏灰。
4. 星河/星星 = 璀璨夺目的发光五彩，不是单调纯色、不是蓝色——夜空里星星是闪烁的五彩光点，用"幻彩渐变 + 发光 blur + 星光闪烁"特效（数据里加 effect:"sparkle"），绝不能用单一银白或蓝色平涂。
5. 实物意象（动物、植物、器物）用实物本身的真实颜色——鸟看羽毛、花看花瓣、木看木色，按实物配，不能按意境/环境联想色配。如"风鹏"是鸟，羽毛棕褐色，不能因"乘风九万里"就配成青天蓝。
6. 同一意象在不同词里，色相族不变，只按情感调明暗冷暖——如"日暮"在《如梦令》里是"熔金"（欢愉，明亮暖金），在《渔家傲》里是"余晖"（迟暮苍凉，橙红偏沉），二者都是暖橙系，只是明亮度/浓度随情感不同；绝不能一个配粉、一个配紫。

五、铁律

1. 纯色卡：页面只留意象词 + 颜色 + 颜色名，不得写情绪一句话、原句、配色依据等文字。这些是配色时的内部依据，不是展示内容。
2. 配色必须走"四、配色方法论"三步，先直引颜色词，再意象约定色，最后情感微调明暗冷暖。
3. 不得给整首词只配一种色调；必须体现冷暖变化——这是"看整体颜色感知情感"的关键。
4. 意象用原文里连续出现的词，不硬拼不相邻的词：如"天接云涛连晓雾"中"云涛""晓雾"之间隔着"连"字，拆成两团，不拼成"云涛晓雾"塞一个圈；连续的四字词（如"溪亭日暮""藕花深处"）可整体成一团。提取要全、准、不重复——同一句里每个有颜色的意象都单独成团（"惊起一滩鸥鹭"→"鸥鹭""滩"两团），不遗漏、不把同一词重复拆出两团。
5. 每团颜料标颜色名（2—3 字，描绘这是什么颜色，如云白、雾紫、月白、鎏金、熔金），写在颜料下方。
6. 纯白背景 #ffffff（最显颜色）；每团颜料始终保留一圈淡描边，让月白、冷白等浅色/白色颜料在白底上也看得见轮廓。
7. 纯静态离线，断网可跑，无外链。
8. 页面底部注明：颜色为课堂讲读辅助，非标准答案，可讨论。

六、色卡结构（每团颜料三要素）

1. 椭圆颜料斑点：主色 + 辅色，用规整椭圆（SVG blob，主色→辅色渐变 + 边缘 blur 晕染），像调色盘上挤出的一团颜料。
2. 意象词：浮在颜料斑点中央（2 字约 26px，4 字约 20px，居中，随主色明度切换深/浅色）。
3. 颜色名：写在颜料下方一行小字（2—3 字，描绘这是什么颜色，如云白、雾紫、月白、鎏金）。默认隐藏，随上色一起浮现——未上色时只有意象词线稿，点染上色后颜色名才淡入，保留"揭晓"的惊喜感。

七、页面布局

1. 顶部：左上小方框"宋词色卡"（kicker）作标识；大标题只写词本来的题目（如"如梦令 · 常记溪亭日暮"，不加"宋词色卡"前缀，避免误认成词牌）；作者·朝代另起一行写在标题下方；再一行提示"点一团颜料，染出它的颜色"+「全部上色 / 全部褪色」小按钮。
2. 主体：意象墙——椭圆颜料斑点按网格排布，一行 3~5 个（大屏 5 个、中屏 4 个、小屏 3 个、手机 2 个），圈圈要大、不挤成一条；点一团染一团。
3. 底部：整首词色彩走向带，随点染逐段点亮——点染的意象对应段填充主色，没点的保持素白，讲完整首自然拼成完整冷暖色带。
4. 底部小字：颜色为课堂讲读辅助，非标准答案，可讨论。
5. 不展示原句、情绪、依据。

八、色彩走向带

1. 页面底部横向色带，按词句顺序排列所有意象的主色。
2. 色带上方标意象词（不标情绪词）。
3. 老师讲完可指着色带问：为什么这里颜色变了？学生回文本找依据。
4. 色带要能一眼看出冷暖起伏，不得平铺无变化。

九、交互（核心：点染上色）

1. 所有意象词一次性平铺成大屏上的椭圆颜料斑点，未点时是"线稿"（淡描边 + 留白，中间浮意象词，颜色名隐藏）。
2. 点击某团颜料 → 颜色缓缓染上（约 800ms 水彩晕染淡入），意象词随明度变色；再点褪回线稿。
3. 底部色彩走向带随点染逐段点亮，点染的意象对应段才显色。
4. 提供「全部上色 / 全部褪色」小按钮，便于快速总览或重置。
5. 动画轻柔克制：上色 800ms，不弹跳、不闪烁、不遮挡文字。

十、视觉规范

1. 纯白背景 #ffffff，不用宣纸纹理、不用暖色底——最显颜色。
2. 框架色：淡墨、赭石 #b4683a、浅青 #8fbcbb、细红 #c05b5b、金 #d9a441；色块本身明快清透、水彩晕染感，可超出框架五色。
3. 椭圆颜料斑点（规整椭圆 + 主色→辅色渐变 + 边缘 blur），像调色盘上挤出的颜料；每团带一圈淡描边 #d6cfc0（浅色/白色颜料靠它可见），点染后描边略深。
4. 标题用楷体/毛笔感字体："STKaiti","KaiTi","楷体",serif；意象词大字浮在颜料上，文字始终清晰。
5. 禁止：霓虹、粗黑边框、现代图表风、密集网格、外链图片、方形卡片容器、情绪/原句/依据文字。
6. 配色基调随词意走（按配色方法论第三步微调明暗冷暖）：欢快之词明快清透，豪放/复杂之词绚烂大气，苍凉之词略沉不灰；整体一律用水粉颜料的明快清透感，禁用土气灰暗（深褐、死灰、乌黑、脏灰蓝）。

十一、生成流程

1. 读词，按"原文连续词"提取意象：全（每句有颜色的意象都取到）、准（是原文里的词）、不重复、不硬拼不相邻的词。
2. 逐意象配色：先查直引颜色词 → 再查意象约定色 → 最后按情感微调明暗冷暖。心里列依据，但不写进页面。
3. 检查冷暖是否有变化，不得全冷或全暖。
4. 直接生成 HTML（复制 assets/template.html，替换 POEM 数据），不要停下来让用户确认——skill 应自主判断意象、合并、配色。
5. 写完后附自检清单结果。

十二、内置黄金样例与预设数据

两首内置样例，颜色直接使用，不得乱改：

① 李清照《如梦令·常记溪亭日暮》（欢愉明快，少女春游）：

走向"暖起、艳中、清收"。

② 李清照《渔家傲·天接云涛连晓雾》（瑰丽奇幻、苍凉豪迈）：

走向"冷峻起、华贵转、苍凉沉、豪迈收"。注意：云涛/晓雾、星河/千帆、蓬舟/三山均为原文连续词，各自单独成团，不合并；千帆、晓雾等浅色靠描边在白底上显形。

> 成品 HTML 在 examples/如梦令-色卡.html 与 examples/渔家傲-色卡.html。数据驱动模板在 assets/template.html。

十三、自检清单

• □ 页面是否只留"意象词 + 颜色 + 颜色名"，无情绪/原句/依据文字？
• □ 每团颜料下方是否标了颜色名（2—3 字）、且随上色浮现（未上色时隐藏）？
• □ 配色是否走完三步（直引颜色词 → 意象约定色 → 情感微调明暗），未把夕阳配成粉、雪配成金？
• □ 意象是否为原文连续词，未硬拼不相邻的词？
• □ 整首词是否有冷暖变化，不是单一色调？
• □ 意象墙是否网格排布（一行 3~5 个、圈圈大）、点一团染一团？
• □ 色彩走向带是否随点染逐段点亮、按词句顺序？
• □ 椭圆颜料斑点是否带一圈淡描边（浅色/白色可见）？
• □ 背景是否纯白，最显颜色？
• □ 配色是否水粉明快、无深褐/死灰/乌黑/脏灰蓝？
• □ 凄凉/苍凉是否也用浅亮清透色（非黑灰、土色）？
• □ 辅色是否为同族浅色/环境色，未引入无关色相、未抢主色？
• □ 颜色名是否名副其实（名＝色值＝实物）、用字准确（如"鎏金"非"流金"）？
• □ 是否纯静态离线、无外链、断网可跑？
• □ 是否附"颜色非标准答案，可讨论"提示？

十四、输出要求

读词→提意象→按三步配色（心里列依据）→直接生成完整可运行 HTML，不要只给框架，不要中途让用户确认。写完后附自检清单结果。颜色按第十二部分数据，不得自行改配。

十五、B线：对比色卡规范（对照 examples/对比色卡-如梦令渔家傲.html）

1. 布局：两阕（或多阕）左右/上下并排，各带自己的词牌标题与色彩走向带；顶部全局「全部上色 / 全部褪色」。
2. 勾线图案：每个意象一幅淡墨白描线稿（SVG 手绘或 AI 生成的工笔白描切图），不上色；点击后颜料水彩晕染开 + 线稿自身从淡墨染上主色（CSS mask / 双层叠加实现"上色"）+ 颜色名浮现；再点褪回线稿。
3. 线稿生成省积分技巧：AI 一次生成一张 4×4 网格白描图（提示词严格规定行序、每格一个意象、芥子园画谱风格、纯黑褐细线、禁上色/禁卡通/禁交通标志感），再用 PIL 按格切图（白底转 alpha 透明、裁 bbox、统一 260px）——一次调用得整套风格统一的图标。个别漏的意象单独补生成一张。
4. 视觉：晕染底透明度约 0.6，主色由线稿上色层承载，避免同色糊底；星河等特效意象上色后加流光/闪烁动画。
5. 配色数据、意象提取、走向带规则与 A 线完全相同，不得因对比模式简化配色方法论。

十六、可复用资源

• assets/template.html — 数据驱动的完整 HTML 模板。纯白背景、椭圆颜料斑点、点染交互、走向带联动全部封装，只需替换脚本顶部的 POEM 对象（cipai/title/author/dynasty/walkNote + cards 数组的 imagery/colorName/main/aux，璀璨类意象另加 effect:"sparkle"）即可适配任意宋词，无需重写 CSS/JS。生成时：复制该文件 → 替换 POEM 数据 → 改名交付。
• examples/如梦令-色卡.html — 内置黄金样例（《如梦令》，明快暖色系）。
• examples/渔家傲-色卡.html — 内置黄金样例（《渔家傲》，瑰丽冷峻系）。
• examples/对比色卡-如梦令渔家傲.html — B线对比色卡品质标杆（192KB，14 幅工笔白描线稿已内嵌，含线稿上色/褪色、双走向带、全局上色按钮）。做对比色卡时优先照此复刻。
• examples/README.md — 样例与模板的读法说明。