之前写过一个中国历朝代历史视频讲解的网站，受到了很多人的喜欢。
但是也有很多人反馈不支持移动端，所以这次我打算用 react+tailwind 写一个支持移动端和 web 端的历史卡片站点。
所有的历史卡片都是借助 AI 进行生成的。兼具了美感和可读性。
做这个站点的目的是为了让大家花费少量的时间，随手滑一滑看一看，就能够了解中国历史朝代的大概脉络。
下面图片是从掘金复制过来的，有水印，请勿介意。
效果预览
网站地址
也可以手机扫码访问
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>
目前尚无回复
Select Language