geekjourneyx

Any2card — Development skill for Claude Code

Development community

把任意文本、文章链接或线程内容,转成一张可以直接发布的 HTML 信息卡.

How to install Any2card

This entry records only its repository, not the path inside it, so there is no exact command to give. Open geekjourneyx/any2card and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Any2card does

把任意文本、文章链接或线程内容,转成一张可以直接发布的 HTML 信息卡。 让卡片本身完成信息传达:先可读,再有审美,再适合传播。

Alternatives in Development

  • Web Artifacts Builder — Build complex claude.ai HTML artifacts using React, Tailwind CSS, and shadcn/ui 94.1k ★
  • HTML Report — /html-report - Generate Application Tracker Dashboard 36.6k ★
  • HTML Ppt Skill — HTML PPT Studio — AgentSkill with 24 themes, 31 layouts, 20+ animations for building professional HTML present 8.1k ★

README

any2card

把任意文本、文章链接或线程内容,转成一张可以直接发布的 HTML 信息卡。 它的目标不是“做漂亮图片”,而是让卡片本身完成信息传达:先可读,再有审美,再适合传播。

安装

通过 `npx` 安装或同步最新 skill:

npx skills add https://github.com/geekjourneyx/any2card

快速开始

  1. 准备一段文本或一个 URL。
  2. 先看 skill 给出的主推荐、备选和取舍,再确认偏好。
  3. 让 skill 提炼核心观点、数字和结构。
  4. 选择合适主题家族与模板。
  5. 打开生成的 HTML,在浏览器中保存为 PNG。

这能做什么

  • 抓取网页、论文、社交线程或纯文本内容。
  • 提炼主标题、副标题、要点、金句和来源。
  • 根据内容密度自动选择合适布局。
  • 生成可直接在浏览器打开的 HTML 卡片。
  • 内置一键保存 PNG 按钮,方便导出分享图。

设计目标

这个 skill 不是单纯的排版工具,而是一套原创主题系统。 它的目标是让同一份内容在不同主题下呈现出不同的构图、节奏和气质,而不是只换颜色。

目标线

维度 目标
原创性 9/10
主题正交性 8.5/10
设计辨识度 9/10
可读性 9.5/10

主题家族

家族 气质 适合内容
编辑型 纸感、温和、耐读 长文、观点、方法论
精准型 工具化、结构清楚、可执行 流程、清单、数据、规范
电影型 高对比、场景感、戏剧性 强结论、品牌、争议话题
表达型 快速、适合传播、视觉冲击 社交传播、合集、热点拆解

使用流程

  1. 输入 URL 或纯文本。
  2. 系统先给出画布比例建议,再给出 1 个主推荐 + 2 个备选,并说明取舍。
  3. 用户确认特殊要求,例如克制 / 张力 / 传播 / 阅读。
  4. 系统提炼核心观点、数字和因果链。
  5. 自动判断是否值得加图。
  6. 选择合适主题家族和模板。
  7. 生成 HTML。
  8. 在浏览器打开并保存为 PNG。

输入示例

把这篇文章做成信息卡
https://x.com/...
把这段内容整理成适合小红书的卡片

内容提炼原则

  • 标题必须是结论,不是背景说明。
  • 只保留会影响理解的内容。
  • 4-6 个要点通常是上限。
  • 数字必须忠实原文,不能改量纲。
  • 金句必须来自原文或基于原文重组,不得虚构。

布局判断

密度 推荐比例 推荐模板
1 个核心观点 landscape / square 大字符主义
2-4 个要点 square / portrait 标准单栏
5+ 个要点 portrait 单栏列表
5+ 要点且明确要求桌面展示 portrait 多栏网格

什么时候加图

只在图比纯文本多传递信息时加图:

  • 因果链清晰时,用 Mermaid 流程图。
  • 有步骤流程时,用 Mermaid 流程图。
  • 概念关系清晰时,用 Mermaid 关系图。
  • 抽象但适合视觉表达时,用内联 SVG。
  • 纯观点、纯列表、纯金句时,不加图。

输出规范

  • 默认输出 HTML 到 /tmp/info-card-[关键词].html
  • 页面必须内置保存 PNG 按钮
  • 默认以手机阅读为先
  • 默认支持 auto、portrait、square、landscape 四种画布比例
  • 高密度内容优先单栏,不为了桌面感牺牲可读性
  • 所有主题必须真正改变构图,不只是改颜色

文档结构

  • SKILL.md:生成规则与主题决策
  • references/design-spec.md:视觉规范与模板库
  • assets/:本地字体资源

阅读顺序

如果你只想快速上手,按这个顺序看:

  1. 安装
  2. 快速开始
  3. 主题家族
  4. 使用流程
  5. 内容提炼原则
  6. 输出规范

设计原则

这个项目吸收了几类成熟设计逻辑:

  • 像 Claude 一样重视纸感、阅读节奏和温暖的内容气质。
  • 像 Vercel 一样重视精确、留白和边界。
  • 像 Notion 一样重视内容优先和结构清晰。
  • 像 BMW、Ferrari 一样重视场景感、对比