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

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

但是也有很多人反馈不支持移动端，所以这次我打算用 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>