感受历史之美，一个高颜值历史卡片站点

之前写过一个中国历朝代历史视频讲解的网站，受到了很多人的喜欢。

但是也有很多人反馈不支持移动端，所以这次我打算用 react+tailwind 写一个支持移动端和 web 端的历史卡片站点。

所有的历史卡片都是借助 AI 进行生成的。兼具了美感和可读性。

做这个站点的目的是为了让大家花费少量的时间，随手滑一滑看一看，就能够了解中国历史朝代的大概脉络。

下面图片是从掘金复制过来的，有水印，请勿介意。

效果预览

网站地址

dynasty-card

也可以手机扫码访问

github 地址

liujuntao123/dynasty-card: 感受中国古代历史之美

卡片生成 prompt 分享

我用的是 claude 生成，其他 AI 效果未知。

我输入朝代信息后，你根据下面的模板生成新的 svg 给我。我会给你标记“生成点”。 生成点说明： [朝代名称] ：朝代名词 [起止年份] ：不要带“公元”两个字 [中心图案] ：注重细节，注重完整性。尺寸：(110x100),x 轴位置：75 ，y 轴位置：110 [文字说明] ：中心图案的文字说明，不多于 10 个字。text-anchor="middle"； font-family="STKaiti, KaiTi"； font-size="12" [开国皇帝] ：开国皇帝 [末代皇帝] ：末代皇帝 [朝代持续时间] ：朝代持续时间 [一句诗总结朝代] ：一句诗总结朝代 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 400"> <!-- 背景 --> <rect width="260" height="400" fill="#f4e4bc"/> <!-- 装饰边框 --> <!-- 主边框 --> <rect x="12" y="12" width="236" height="376" fill="none" stroke="#8b4513" stroke-width="2"/> <!-- 内层装饰边框 --> <rect x="18" y="18" width="224" height="364" fill="none" stroke="#8b4513" stroke-width="1"/> <!-- 四角云纹装饰 --> <!-- 左上角 --> <path d="M18 18 Q25 25 18 32 Q25 39 18 46 M25 18 Q32 25 25 32 Q32 39 25 46" fill="none" stroke="#8b4513" stroke-width="1"/> <!-- 右上角 --> <path d="M242 18 Q235 25 242 32 Q235 39 242 46 M235 18 Q228 25 235 32 Q228 39 235 46" fill="none" stroke="#8b4513" stroke-width="1"/> <!-- 左下角 --> <path d="M18 382 Q25 375 18 368 Q25 361 18 354 M25 382 Q32 375 25 368 Q32 361 25 354" fill="none" stroke="#8b4513" stroke-width="1"/> <!-- 右下角 --> <path d="M242 382 Q235 375 242 368 Q235 361 242 354 M235 382 Q228 375 235 368 Q228 361 235 354" fill="none" stroke="#8b4513" stroke-width="1"/> <!-- 回字纹装饰 - 中点装饰 --> <!-- 左边中点 --> <path d="M12 194 H25 V207 H12" fill="none" stroke="#8b4513" stroke-width="1"/> <!-- 右边中点 --> <path d="M248 194 H235 V207 H248" fill="none" stroke="#8b4513" stroke-width="1"/> <!-- 上边中点 --> <path d="M124 12 V25 H137 V12" fill="none" stroke="#8b4513" stroke-width="1"/> <!-- 下边中点 --> <path d="M124 388 V375 H137 V388" fill="none" stroke="#8b4513" stroke-width="1"/> <!-- 标题 --> <text x="135" y="65" text-anchor="middle" font-family="STXingkai, STLiti, LiSu, 华文行楷, 隶书" font-size="38" font-weight="bold" fill="#8b4513" style="letter-spacing: 6px;"> [生成点：朝代名称] </text> <!-- 年号 --> <text x="130" y="100" text-anchor="middle" font-family="STKaiti, KaiTi" font-size="18" fill="#8b4513"> [生成点：起止年份，不要带“公元”两个字] </text> [生成点：中心图案] [生成点：文字说明] <!-- 开国皇帝 --> <g transform="translate(40, 230) scale(0.65)"> <g transform="translate(35, 15)"> <!-- 冕冠 --> <path d="M10 0 H40 L45 10 H5 Z" fill="#8b4513"/> <path d="M15 5 H35" stroke="#f4e4bc" stroke-width="2"/> <!-- 脸部和身体 --> <circle cx="25" cy="20" r="10" fill="#8b4513"/> <path d="M15 35 L35 35 L40 60 L10 60 Z" fill="#8b4513"/> <!-- 装饰纹样：原始图腾纹样 --> <path d="M20 35 L30 35 M22 45 L28 45" stroke="#f4e4bc" stroke-width="2"/> </g> <text x="60" y="110" text-anchor="middle" font-family="STKaiti, KaiTi" font-size="16" fill="#8b4513"> [生成点：开国皇帝] </text> </g> <!-- 末代皇帝 --> <g transform="translate(155, 230) scale(0.65)"> <g transform="translate(35, 15) rotate(15)"> <!-- 歪斜的冕冠 --> <path d="M10 0 H40 L45 10 H5 Z" fill="#8b4513" style="opacity: 0.7"/> <!-- 脸部和身体 --> <circle cx="25" cy="20" r="10" fill="#8b4513" style="opacity: 0.7"/> <path d="M15 35 L35 35 L38 60 L12 60 Z" fill="#8b4513" style="opacity: 0.7"/> <!-- 破损效果 --> <path d="M8 5 L12 5 M38 8 L42 8 M15 40 L20 40" stroke="#f4e4bc" stroke-width="1"/> </g> <text x="60" y="110" text-anchor="middle" font-family="STKaiti, KaiTi" font-size="16" fill="#8b4513"> [生成点：末代皇帝] </text> </g> <!-- 时间变迁线 --> <g transform="translate(115, 300)"> <path d="M0 0 L40 0" stroke="#8b4513" stroke-width="2" stroke-dasharray="5 3" fill="none"/> <path d="M40 0 L33 -4 L33 4 Z" fill="#8b4513"/> <text x="20" y="-8" text-anchor="middle" font-family="STKaiti, KaiTi" font-size="11" fill="#8b4513"> [生成点：朝代持续时间] </text> </g> <!-- 朝代特点 --> <text x="140" y="340" text-anchor="middle" font-family="STXinwei, STKaiti, 华文新魏, 华文楷体" font-size="15" fill="#8b4513" style="letter-spacing: 1px; text-shadow: 1px 1px 2px rgba(139, 69, 19, 0.3);"> [生成点：一句诗总结朝代] </text> <text x="140" y="360" text-anchor="middle" font-family="STXinwei, STKaiti, 华文新魏, 华文楷体" font-size="15" fill="#8b4513" style="letter-spacing: 1px; text-shadow: 1px 1px 2px rgba(139, 69, 19, 0.3);"> [生成点：一句诗总结朝代] </text> </svg>