新手入门

ArticleCard / 文章卡片

规范：docs/design-system.md §7.3 卡片 · 改造日期 2026-05-26

1. 默认状态（含 cluster 标签 + type）

ChatGPT 教程 B

ChatGPT Memory 怎么用？让 AI 记住你 5 个技巧

ChatGPT Memory 是 2024 上线的跨会话记忆能力，开启后 AI 会主动记录你的偏好、职业、项目背景，下次对话时自动调用。本文教你 5 个让 Memory 帮你省时间的实用技巧。
Claude 教程 A

Claude 是什么

Anthropic 出品的 AI 助手，写作 + 编程双料强项。
AI 编程 C

Claude Code vs Cursor 选哪个？6 维度对比

Claude Code 和 Cursor 是 2026 年最火两款 AI 编程工具。本文从模型 / 上下文 / 价格 / 适用场景 / 国内可用性 / 生态 6 个维度横向对比，帮你 5 分钟选定。

2. 不含 type（仅 cluster）

Gemini 教程

Gemini Deep Think 怎么用

Google 最新推理增强模式，复杂数学/编程问题 30 秒思考时间。
Kimi 教程

Kimi K2 Turbo 实测

月之暗面 K2 系列最快版本，长文档处理速度提升 3 倍。

3. 不含 cluster（兼容性）

A

测试：未知 cluster 时不显示 badge

兼容性测试 - getCluster() 返回 undefined 时 badge 不渲染，type 标签仍正常。

4. 长标题 / 长描述边界

提示词 D

AI 提示词工程完整教程从零基础入门到高阶变量编排

本文系统讲解 prompt engineering 的所有核心技巧：role / context / instruction / output format / few-shot / chain-of-thought / 等高级模式全覆盖，并给 30 个可直接复制的模板。

5. Hover 状态（鼠标移上）

把鼠标移到上面的卡片即可看 hover 效果（border 加深 + shadow 加重 + translateY(-2px)）

规范引用

  • §7.3 卡片背景 = var(--bg-elevated) = #FAF7F4（比页面 --bg-primary #F6F3F0 亮一档）
  • §7.3 border-radius = var(--radius-lg) = 14px
  • §7.3 hover transform translateY(-2px) + var(--duration-card-hover) 240ms
  • §12.3 标题字重 500（非 600/700）
  • §排版铁律 标题字距 -0.02em / 正文行高 1.6