如何让AI创建自定义小红书卡片样式

我需要在md2card.com实现自定义小红书卡片样式
以下是md2card.com中卡片的HTML结构：

<div class="card">
  <div class="card-header"></div>
  <div class="card-content">
    <div class="card-content-inner">
      <h1 data-text="标题">标题</h1>
      <h2 data-text="标题二">标题二</h2>
      <p>内容</p>
      <ol>
        <li data-index="0">列表</li>
      </ol>
    </div>
  </div>
  <div class="card-footer"></div>
</div>

`card-content-inner`为markdown编译后的内容区域，还包括标题、列表、引用、代码、加粗等常见markdown编译的内容

请为我设计一张卡片，其风格为"[你想要的风格]"，应用于"[你的应用场景]"场景
【设计风格要求】：[可选，添加更具体的要求]
【输入要求】：只需要返回css代码

.card {
  max-width: 440px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  background: #ffffff;
  font-family:
    "PingFang SC",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}

.card-header {
  height: 8px;
  background: linear-gradient(90deg, #ff4f81 0%, #ff9b5e 100%);
}

.card-content {
  padding: 24px 20px;
}

.card-content-inner {
  line-height: 1.6;
  color: #333;
}

.card-content-inner h1 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #111;
  line-height: 1.4;
}

.card-content-inner h2 {
  font-size: 18px;
  font-weight: 500;
  margin: 20px 0 12px;
  color: #222;
}

.card-content-inner p {
  margin: 12px 0;
  font-size: 16px;
}

.card-content-inner ol,
.card-content-inner ul {
  padding-left: 18px;
  margin: 14px 0;
}

.card-content-inner li {
  margin: 8px 0;
  position: relative;
}

.card-content-inner blockquote {
  border-left: 3px solid #ff4f81;
  padding-left: 12px;
  margin: 16px 0;
  color: #555;
  font-style: italic;
}

.card-footer {
  height: 6px;
  background: #f8f8f8;
}