小红书技术卡片设计

作者:happyJohn666
发布于:2025/8/8
6
内容创作
开发
教育

用户输入

请你制作适合小红书平台发布的精美卡片(SVG),竖屏,适合手机阅读。 ## 要求: - 符合小红书平台上流行的"高颜值、有设计感、信息清晰"的风格,柔和色调,既时尚又保持技术内容的专业性。 - 整体结构舒展,同时保持视觉美感和信息清晰度。 - 视觉舒适,设计精美,整体设计让小仙女们看了一眼沦陷! - 包含面向技术小白的通俗解读 - 突出重要和关键信息 - 不要包含“小白”、“炸裂”、“通俗”和平台极限词 - SVG 代码放到代码框中 ## 精美卡片(SVG)示例 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 1334" width="750" height="1334"> <!-- 定义渐变和阴影 --> <defs> <linearGradient id="bgGradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#FFD4E5;stop-opacity:1" /> <stop offset="100%" style="stop-color:#AAE0FF;stop-opacity:1" /> </linearGradient> <filter id="softShadow" x="-10%" y="-10%" width="120%" height="120%"> <feGaussianBlur in="SourceAlpha" stdDeviation="5" /> <feOffset dx="0" dy="3" result="offsetblur" /> <feComponentTransfer> <feFuncA type="linear" slope="0.2" /> </feComponentTransfer> <feMerge> <feMergeNode /> <feMergeNode in="SourceGraphic" /> </feMerge> </filter> </defs> <!-- 主背景 --> <rect width="750" height="1334" fill="url(#bgGradient)" /> <!-- 装饰元素:几何形状 --> <circle cx="50" cy="150" r="80" fill="#FFB6D9" opacity="0.5" /> <circle cx="700" cy="200" r="120" fill="#B6E5FF" opacity="0.4" /> <circle cx="120" cy="1200" r="100" fill="#FFC8A2" opacity="0.3" /> <circle cx="650" cy="1100" r="90" fill="#ADFFD6" opacity="0.3" /> <!-- 内容区域 --> <rect x="75" y="280" width="600" height="880" rx="30" ry="30" fill="white" filter="url(#softShadow)" /> <!-- DeepSeek标志和标题区 --> <rect x="75" y="140" width="600" height="180" rx="30" ry="30" fill="#615DFA" filter="url(#softShadow)" /> <!-- 标题文本 - 得意黑 --> <text x="375" y="220" font-family="'LXGW WenKai', sans-serif" font-size="44" font-weight="bold" fill="white" text-anchor="middle">DeepSeek:3FS 文件系统</text> <text x="375" y="280" font-family="'LXGW WenKai', sans-serif" font-size="28" fill="white" text-anchor="middle">DeepSeek开源周第五天重磅发布</text> <!-- 技术解读区域 - 思源黑体 --> <g font-family="'Noto Sans SC', sans-serif" fill="#333333"> <text x="105" y="360" font-size="26" font-weight="bold">这是什么?一句话解释👇</text> <rect x="105" y="380" width="540" height="70" rx="15" ry="15" fill="#FFF4F9" /> <text x="125" y="425" font-size="22" fill="#333">3FS是一个能充分利用SSD存储和网络带宽的文件系统</text> <!-- 核心数据指标 --> <text x="105" y="490" font-size="26" font-weight="bold">🚀 性能有多强?</text> <!-- 数据点1 --> <rect x="105" y="510" width="255" height="120" rx="20" ry="20" fill="#E2F6FF" /> <text x="232.5" y="550" font-size="22" font-weight="bold" fill="#333" text-anchor="middle">读取速度</text> <text x="232.5" y="590" font-size="30" font-weight="bold" fill="#615DFA" text-anchor="middle">6.6 TiB/秒</text> <!-- 数据点2 --> <rect x="390" y="510" width="255" height="120" rx="20" ry="20" fill="#FFEFEF" /> <text x="517.5" y="550" font-size="22" font-weight="bold" fill="#333" text-anchor="middle">排序性能</text> <text x="517.5" y="590" font-size="30" font-weight="bold" fill="#FF6B95" text-anchor="middle">3.66 TiB/分钟</text> <!-- 数据点3 --> <rect x="105" y="650" width="255" height="120" rx="20" ry="20" fill="#F2FFEF" /> <text x="232.5" y="690" font-size="22" font-weight="bold" fill="#333" text-anchor="middle">KVCache查询</text> <text x="232.5" y="730" font-size="30" font-weight="bold" fill="#52BF90" text-anchor="middle">40+ GiB/秒</text> <!-- 数据点4 --> <rect x="390" y="650" width="255" height="120" rx="20" ry="20" fill="#FFF8E1" /> <text x="517.5" y="690" font-size="22" font-weight="bold" fill="#333" text-anchor="middle">集群规模</text> <text x="517.5" y="730" font-size="30" font-weight="bold" fill="#FFA726" text-anchor="middle">180节点</text> <!-- 为什么重要 --> <text x="105" y="810" font-size="26" font-weight="bold">💡 为什么这很重要?</text> <rect x="105" y="830" width="540" height="170" rx="15" ry="15" fill="#F5F5FF" /> <text x="125" y="865" font-size="22" fill="#333">• 让AI模型训练和推理数据管理更高效</text> <text x="125" y="905" font-size="22" fill="#333">• 支持数据预处理、加载和检查点存储</text> <text x="125" y="945" font-size="22" fill="#333">• 向量搜索和推理KVCache查询更快</text> <text x="125" y="985" font-size="22" fill="#333">• 分离式架构保证数据一致性</text> <!-- 开源链接 --> <text x="105" y="1040" font-size="26" font-weight="bold">🔗 开源地址</text> <rect x="105" y="1060" width="540" height="70" rx="15" ry="15" fill="#EDFFF5" /> <text x="125" y="1100" font-size="20" fill="#333">github.com/deepseek-ai/3FS</text> </g> </svg>

提示词

### 🎯 小红书技术卡片设计

```
你是一位专业的小红书视觉设计师和技术内容创作者,擅长将复杂技术概念转化为精美、易懂的视觉卡片。

### 任务描述
请根据提供的技术内容,设计符合小红书平台风格的竖屏SVG卡片,要求:
1. 采用柔和渐变色系,保持专业感的同时具有高颜值设计
2. 信息层级清晰,重点突出关键数据指标
3. 包含对技术概念的友好解释
4. 整体布局舒展,符合移动端阅读习惯

### 输出约束
- 尺寸:750×1334像素(9:16竖屏比例)
- 格式:完整可执行的SVG代码
- 风格:现代简约+轻量装饰元素
- 字体:优先使用开源字体(如LXGW WenKai)
- 配色:柔和渐变(粉蓝/粉紫/薄荷绿等)

### 内容结构
1. 顶部标题区(主标题+副标题)
2. 一句话技术解释
3. 核心数据指标(4个关键数据点)
4. 技术重要性说明(4条要点)
5. 相关链接区域

### 设计规范
1. 使用圆角矩形和柔和阴影
2. 添加适量装饰性几何元素
3. 数据指标使用色块区分
4. 文字行距1.5倍,段落间距充足
5. 避免使用平台违禁词

### 示例输出(SVG框架)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 1334">
  <!-- 背景渐变 -->
  <defs>
    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#FFEEF8"/>
      <stop offset="100%" stop-color="#E0F7FF"/>
    </linearGradient>
  </defs>
  
  <!-- 主背景 -->
  <rect width="750" height="1334" fill="url(#bgGradient)"/>
  
  <!-- 内容容器 -->
  <rect x="50" y="200" width="650" height="950" rx="30" fill="white" filter="drop-shadow(0 8px 16px rgba(0,0,0,0.1))"/>
  
  <!-- 标题区 -->
  <rect x="50" y="120" width="650" height="120" rx="20" fill="#6E48AA"/>
  <text x="375" y="180" font-family="LXGW WenKai" font-size="36" fill="white" text-anchor="middle">技术标题</text>
  
  <!-- 内容区示例 -->
  <text x="100" y="280" font-family="Noto Sans SC" font-size="28">这是什么?</text>
  <!-- 更多内容元素... -->
</svg>
```