从零到一:用 AI 打造一张木棉花知识卡片

记录一次完整的 AI 协作设计之旅——四个版本迭代，从 SVG 插画到杂志风长图，再到交互式动画页面。

木棉花（Kapok，学名 Bombax ceiba）是南方春天的标志性景观。每年三四月，木棉先花后叶，满树橙红如火，落花整朵坠地不萎不褪，故称「英雄花」。

我决定用 AI 工具链为木棉花制作一张知识卡片——从植物学知识到文化意蕴，从形态特征到药用价值，做一个完整的信息可视化作品。

工具链准备

AI 助手： Claude Code 作为主控 AI，负责内容策划、代码生成、图片搜索和服务器部署。

ljg-card： 李继刚开发的 Claude Code 技能，专门将内容铸造成 PNG 视觉卡片。

git clone https://github.com/lijigang/ljg-skills.gitcd ljg-skills/ljg-card && npm installnode assets/capture.js input.html output.png 1080 800 fullpage

花叔Design（huashu-design）： 内置从 Anthropic / Apple / Pentagram 运动档案中提炼的动画设计哲学——动画是物理学，不是动画曲线。

V1：SVG 插画风格

在无法获取真实照片的情况下，采用纯 SVG 绘制木棉花 logo 和插画元素。风格定位「文艺清新」，配色木棉红 + 森绿 + 奶白。

画布： 1080px 宽，auto 高度

字体： 衬线（Noto Serif SC）+ 无衬线（Noto Sans SC）双字体

图形： SVG path 绘制木棉花五瓣造型

布局： 单栏纵向滚动，信息密度适中

内容结构： Hero 大标题 → 简介 → 01 形态特征 → 02 花部结构 → 诗词引用 → 03 文化意蕴 → 04 分布与生境 → 图片画廊 → 05 药用价值 → 06 趣味知识 → 07 四季观赏指南 → Footer

评价： 纯代码生成，无需外部素材，信息完整。但 SVG 插画缺乏真实感，视觉冲击力不够。

V2：现代杂志风

用户要求「排版设计有大更新」，引入现代编辑式杂志风格：

编号系统： 01-07 大号编号 + 粗体标题

字重对比： 900 vs 100 的极端反差

非对称布局： 侧边栏数据面板 + 双栏图文

大留白： section 间距 100px

配色升级： 奶白底(#FAFAF5) + 木棉红(#C0392B) + 森绿(#2D5016) + 金色(#B8860B)

问题： 使用了 picsum 随机图片，与木棉花完全无关。图片是知识卡片的灵魂，同样排版，真实照片 vs 随机图片，感受天差地别。

V3：真实照片替换

为了获取真实木棉花照片，尝试了多个渠道：

通过 Bing 图片搜索获取 7 张不同角度的照片：花朵特写、完整花树、花开枝头、落花地面、花蕊细节、近距离特写、全景竖幅。

技术方案： 将所有图片转为 Base64 嵌入 HTML，确保离线渲染和部署稳定性。

评价： 真实照片大幅提升视觉可信度和感染力。但仍是静态长图，缺乏交互性和动感。

V4：交互式动画页面

用户要求：用最高端的设计，变成可以互动的、自带动画的 HTML 页面。

基于花叔Design 动画哲学，实现了以下效果：

花瓣粒子系统

Canvas 2D 绘制 25 片飘落花瓣，贝塞尔曲线造型，正弦波摇摆模拟真实物理运动。每片花瓣有独立的大小、速度、旋转、摆动频率。

// 花瓣形状：贝塞尔曲线ctx.moveTo(0, -s);ctx.bezierCurveTo(s*0.8, -s*0.6, s*0.6, s*0.4, 0, s);ctx.bezierCurveTo(-s*0.6, s*0.4, -s*0.8, -s*0.6, 0, -s);

expoOut 缓动函数

拒绝 linear 和基础 easeOut，使用物理感更强的贝塞尔曲线：

transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),            transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);

给数字元素一种「物理世界的重量感」——元素像是有质量地「落」到位，而不是「停」在那里。

滚动揭示

IntersectionObserver + 30ms stagger 交错延迟，内容随用户滚动逐个浮现，营造「波浪式涌现」的节奏感。

视差滚动

Hero 大图以 0.3 倍速移动，前景文字保持不动，营造纵深层次。

双色调交替

页面交替使用暖白底（#F5F0EB）和深黑底（#1A1612），让长页面有呼吸感。

交互微动效

• • 卡片悬浮：translateY(-8px) + 阴影扩散
• • 图片缩放：hover 时 scale(1.08)
• • 进度条：顶部渐变红金进度指示
• • 编号变色：趣味知识板块 hover 时编号变色

在线体验： https://test.a2a.chat/webchat-lesson/

部署上线

服务器部署到 CentOS，Nginx 服务，域名 test.a2a.chat。

ssh root@8.134.188.14 "mkdir -p /www/wwwroot/profile/webchat-lesson"scp animated.html root@8.134.188.14:/www/wwwroot/profile/webchat-lesson/index.html

踩坑： Nginx 不支持中文文件名（403 错误），所有图片资源必须用英文命名。

经验总结

1. 图片是知识卡片的灵魂。 同样排版，真实照片 vs 随机图片，感受天差地别。

2. AI 图片生成不可用时，Bing 搜索是最可靠的备选。

3. 静态 PNG 用于社交媒体分享，HTML 用于沉浸式体验，两种形式都做。

4. 动画设计核心：

• • expoOut 大于一切
• • 节奏感比炫技重要
• • 粒子系统要克制（25片比100片更有品味）
• • 衬线 + 无衬线，单一字体永远不够好

从 SVG 插画到大师级交互页面，四个版本解决三个核心问题：

V1 → V2：排版升级（从基础布局到杂志风）

V2 → V3：素材升级（从随机图片到真实照片）

V3 → V4：体验升级（从静态长图到交互动画）

AI 不是一键生成完美结果的魔术师——它是陪你走过每一次迭代的协作者。展示过程、展示 tweak、展示 bug 和修复，比直接给最终稿更有价值。

这就是 AI 协作设计的正确打开方式。