any2card

インフォグラフィックカードデザインスキル

コンテンツを、読みやすく、共有しやすく、保存できる HTML インフォグラフィックカードに変換します。目指すのは「華やかに仕上げる」ことではなく、画像そのものが情報を伝えきることです。読者が元の記事を開かなくても、結論、データ、構成を把握できるようにします。

デザイン目標

• スマートフォンで読みやすいことを最優先し、そのうえで見栄えも整えます。
• テーマが異なれば、色を変えるだけでなく、構図、リズム、雰囲気も実際に変えます。
• 出力は独立したデザインシステムのように見せ、テンプレートの寄せ集めには見せません。
• あらゆるビジュアル上の選択について、なぜこの配置なのか、なぜこの情報量なのか、なぜこのテーマなのかを説明できるようにします。

作成前に確認する

まずコンテンツを分析し、ユーザーにおすすめを1つ、代替スタイルを2つ提示します。いきなり HTML を生成しないでください。

質問事項の優先順位

ユーザーの好みによって結果が大きく変わる場合は、生成前に確認します。次の情報を優先して尋ねてください。

• ビジュアルの好み：控えめか、インパクト重視か
• 使用シーン：読み物向け、拡散向け、ブランド向けのいずれか
• プラットフォームの希望：WeChat、小紅書、X、デスクトップ表示のいずれか
• 出力の比率：縦長、正方形、横長、または自動決定
• 制約条件：ブランドの雰囲気を保つ必要があるか、避けたいスタイルがあるか、複数カラムが必要か

質問する条件

• 明らかな不確実性がある場合は、推測せず先に尋ねます。
• ユーザーの好みによってテーマ、構図、リズムが変わる場合は、先に尋ねます。
• 入力情報が不十分で、おすすめを安定して選べない場合は、先に尋ねます。
• 質問によって手戻りを減らせる場合は、先に尋ねます。
• 質問を作業の妨げではなく、試行錯誤のコストを下げる手段として捉えます。

デフォルトのやり取りの流れ

1. まず、コンテンツの種類、感情の強さ、情報密度、拡散シーンを判断します。
2. まず、キャンバスの比率を判断します：portrait、square、landscape、または auto。
3. まず、おすすめを1つと代替スタイルを2つ提示し、それぞれが適している理由を説明します。
4. 次に、結果を左右する重要な質問を1〜3個尋ねます。たとえば、次のような質問です。
   • 控えめな印象と、インパクトのある印象のどちらがよいか
   • 読み物向けと、拡散向けのどちらがよいか
   • スマートフォンで続けて読むのに適した形式と、1画面で読み切れる形式のどちらがよいか
   • 特定のブランドの雰囲気を保つ必要があるか
   • WeChat、小紅書、X など、希望するプラットフォームがあるか
5. ユーザーの確認後、HTML の生成に進みます。
6. ユーザーから返答がない場合、「判断に任せます」と明言された場合、またはシーンが十分明確な場合は、おすすめとデフォルトの比率でそのまま生成します。

そのまま生成してよい場合

• ユーザーが「最適だと思う形で」と明言している
• コンテンツと対象プラットフォームがすでに明確である
• テーマ候補によって最終的な方針が大きく変わらない

スタイル提案の形式

毎回、まず簡潔なおすすめ一覧を提示します。少なくとも次の内容を含めてください。

• キャンバス比率の提案
• おすすめ
• 代替案1
• 代替案2
• 適している理由
• リスクやトレードオフ
• デフォルトの進め方：ユーザーが選ばない場合は、おすすめに沿って進める

質問の原則

• 質問は少なくし、最大3つまでにします。
• 質問は短くし、複雑な判断を求めないようにします。
• 結果を左右することを先に尋ね、関係のない情報は尋ねません。
• ユーザーがすでに十分な制約条件を提示している場合、同じことを再度尋ねません。
• ユーザーの入力だけでおすすめを決められる場合、「手順を完全にする」ためだけに追加で尋ねません。

Ask User Question Tool

• 質問ツールに対応した実行環境では、本文に長い質問を並べるのではなく、ask user question tool を優先して、重要な好みを確認します。
• このツールは最終結果に影響する重要な質問にのみ使用し、無関係な雑談には使いません。
• 追加確認が不要な場合は、おすすめを提示してデフォルトでそのまま進めます。

デフォルトでそのまま進めるルール

• 「たくさん質問するほうが専門的に見える」という理由で、質問を増やさないでください。
• ユーザーの希望がすでに明確な場合、提案を繰り返さないでください。
• 確認のステップを作業の妨げにしないでください。
• おすすめが十分に確かな場合は、デフォルトでそのまま生成してかまいません。
• 比率の判断が十分に確かな場合は、デフォルトでそのまま生成してかまいません。

Canvas Strategy

キャンバス比率は装飾上の選択肢ではなく、テーマと同等の判断要素です。無意味なスクロールを減らし、1画面あたりの情報効率を高めることを目指します。

次の4つのモードに対応します。

• auto：コンテンツの密度、使用シーン、拡散の目的に応じてシステムが自動で決定します
• portrait：縦長。高密度、読み物向け、スマートフォンで続けて読む場合に適しています
• square：正方形。中〜低密度、拡散向け、1画面で全体を見せたい場合に適しています
• landscape：横長。低密度、結論重視、プレゼンテーション用の要約に適しています

デバイスのサイズを正式なプロダクト用語として扱わないでください。iPad Pro、iPad mini のような名称は内部での参考にのみ使用し、正式な操作項目には使いません。

比率の判断表

コンテンツの条件	デフォルトの比率	切り替える場合
核となる意見が1つ／要点がごく少ない	landscape	プラットフォームがソーシャルメディアのカバー画像に明らかに適している場合は、square に切り替えます
要点が2〜4個／密度は中〜低	square	続けて読む形式を重視する場合は、portrait に切り替えます
要点が5個以上／高密度	portrait	ユーザーから明確な要望がある場合に限り、ほかの比率を検討します
グラフ、引用ブロックが複数ある／構成が複雑	portrait	必要に応じてページ分けし、横長に押し込むことは優先しません
不明確／複数の要素が混在	auto	まず読む目的を確認してから決定します

テーマの判断表

まずコンテンツを分類し、次に比率と合わせてテーマを選びます。デフォルトでは、次の安定した対応関係に従います。

コンテンツの種類	デフォルトの比率	おすすめ	代替案1	代替案2	主な確認事項
長文の要約／意見の振り返り	portrait	紙のような質感のページ	文化アーカイブ	雑誌の表紙	読みやすさを重視するか、拡散を重視するか
データブリーフィング／比較分析	portrait	テクニカルブリーフィング	アーカイブカード	文書スキャン	結論重視か、一覧性重視か
プロセスの規範／操作説明	portrait	文書スキャン	テクニカルブリーフィング	アーカイブカード	どの程度の厳密さ、文書らしさが必要か
強い意見／ブランド表現	square	Noir Poster	Luxury Studio	雑誌の表紙	控えめな印象と、インパクトのある印象のどちらがよいか
ソーシャルメディアでの拡散／話題の分析	square	Social Slice	Data Poster	Collage Board	対象プラットフォームと拡散の強さ
複数の意見のまとめ／コラージュのアイデア	square	Collage Board	Social Slice	文化アーカイブ	構造感と躍動感のどちらを重視するか
不明確／複数の要素が混在	auto	紙のような質感のページ	Social Slice	文書スキャン	ユーザーは読みたいのか、共有したいのか

判断を絞り込むルール

• コンテンツの種類が明確な場合は、テーマの判断表を優先し、その場で改めて考え直さないでください。
• コンテンツと使用シーンが矛盾する場合に限り、重要な確認事項を尋ねます。
• ユーザーの依頼が曖昧な場合は、控えめで読みやすいおすすめをデフォルトにします。
• ユーザーが「共有したときに一番映えるもの」と明言した場合は、拡散向けのテーマを優先します。
• ユーザーが「まずは内容を理解したい」と明言した場合は、編集型または精密型のテーマを優先します。
• 1画面で読み切ることやスクロールの少なさが重視される場合は、square または landscape を優先します。
• スマートフォンで続けて読むことや、コンテンツの複雑さが重視される場合は、portrait を優先します。

デフォルトの原則

1. まずコンテンツに忠実であることを優先し、その後に視覚的な構成を整えます。
2. まず核心となる結論を捉え、次に図を加えるかどうかを決めます。
3. まずテーマの系統を選び、その後にテーマのパラメーターを決めます。
4. まず読みやすさを確保し、その後に美的なインパクトを追求します。
5. まずスタイル候補を明確に説明し、その後に生成へ進みます。
6. まず独自のシステムを作り、そのうえでスタイルの変化を取り入れます。

入力の判断

ユーザーが URL を入力した場合

まずコンテンツを取得し、その後に整理します。次の順序で処理してください。

ソース	処理方法
arxiv.org/abs/	まず HTML 版の全文を試し、失敗したら PDF に切り替えます
x.com / twitter.com	r.jina.ai を使って取得します
mp.weixin.qq.com	ローカルに WeChat 用の取得スクリプトがある場合は、優先して使用します
その他のウェブページ	まず r.jina.ai を使い、失敗したら defuddle.md に切り替えます

ユーザーがプレーンテキストを入力した場合

そのまま要約の段階に進み、コンテンツの取得は行いません。

コンテンツの要約ルール

「削ると情報が失われる」内容だけを残す

• 表面的な説明ではなく、記事の核心となる判断を見つけます。
• 具体的な数字、倍率、年、金額、比較関係を見つけます。
• 因果関係を見つけます：A が B を引き起こし、B が C につながる。
• 意外な点、直感に反する点、人に伝えやすい一文を見つけます。
• 要点は4〜6個に抑え、それ以上は圧縮します。

タイトルのルール

• タイトルは背景の説明ではなく、結論にします。
• 動詞、数字、対立、対比を優先して使います。
• 読者に「なぜ？」と思わせるタイトルにします。
• 日記風、テーマだけを示す形式、名詞を並べただけのタイトルは避けます。

印象的な一文のルール

• 印象的な一文は、原文の事実または原文の文章に基づくものにします。
• レイアウトを見栄えよくするために、内容を捏造してはいけません。
• 原文にそのまま使える一文がない場合は、表現を組み直してもかまいませんが、事実を変えてはいけません。

データのルール

• すべての数字は原文に忠実に保ちます。
• ARR、月次収益、評価額、サンプル数など、単位の異なる数値を混同しません。
• 不確かな表現はその不確かさを保ち、勝手に断定的な表現に変えません。

テーマの選択

スタイルを単なる「見た目の変更」ではなく、「情報のまとめ方の違い」として捉えます。デフォルトでは、次の流れでテーマを選びます。

コンテンツの種類 → 感情の強さ → 情報密度 → 拡散先プラットフォーム → テーマの系統 → 具体的なテーマ

テーマの系統

系統	デザイン目標	適したコンテンツ
編集型	きちんとレイアウトされた記事のように見せる	長文、意見、方法論、振り返り
精密型	わかりやすい業務文書のように見せる	プロセス、一覧、規範、比較、データ
映画型	場面を感じさせるポスターのように見せる	賛否を呼ぶ意見、強い結論、ブランド表現、感情的なコンテンツ
表現型	拡散に適したソーシャルカードのように見せる	短い意見、まとめ、コラージュ、話題の分析

主题矩阵

主题	家族	核心气质	构图特征	推荐侧重点
纸感书页	编辑型	温和、安静、耐读	单栏、强留白、少装饰	强调耐读、节奏、纸感。
杂志封面	编辑型	精致、克制、适合传播	大标题、摘录、页脚编号	强调阅读与传播兼顾。
文化档案	编辑型	稳重、学术、结构清楚	分块、注释、引用层次	强调知识整理感。
文档扫描	精准型	可靠、工具化、可执行	标题层级 + 列表 + 注释	强调清晰、严谨、像文档。
技术简报	精准型	高效、理性、结论先行	数字主导、左右分区	强调结论速度和数据感。
档案卡片	精准型	事实感、可追溯	编号、条目、证据感	强调事实、来源、可追溯。
Noir Poster	电影型	冷、强、戏剧化	暗底、强对比、大留白	强调张力、戏剧感、压迫感。
Luxury Studio	电影型	高级、沉稳、场景感	大图、少字、空间压迫感	强调品牌感、克制、高级。
工业镜框	电影型	精密、技术、边界明确	框线、结构化网格、层次分明	强调技术感、结构感、边界。
Social Slice	表达型	快、准、适合转发	Hook 强、信息钉少而准	强调传播效率和快速浏览。
Collage Board	表达型	活跃、碎片化、年轻	拼贴、多模块、节奏变化	强调拼贴感和内容活力。
Data Poster	表达型	数字驱动、传播力强	结论先行、数字大、辅助图形	强调数据视觉冲击。

主题切换规则

• 不是用户指定“好看一点”就切主题。
• 优先根据内容密度和传播场景切主题。
• 同一内容在不同主题下，应明显改变构图，而不只是改颜色。
• 如果主题之间没有明显差异，说明主题设计失败。

布局判断

先看内容密度，再决定比例，然后选模板：

密度	内容量	推荐比例	推荐模板
低密度	1 个核心观点	landscape / square	大字符主义
中密度	2-4 个要点	square / portrait	标准单栏
高密度	5+ 个要点	portrait	单栏列表
高密度且桌面展示	5+ 个要点	portrait	多栏网格，仅在明确需要时使用

生成流程

Step 1：提炼

输出以下内容：

• 主标题
• 副标题
• 4-6 个要点
• 1 句金句
• 来源信息
• 是否值得加图

Step 2：定主题

根据内容选择主题家族和具体主题。

Step 3：组织结构

确定使用哪种布局模板，以及是否要加 Mermaid 或内联 SVG。

Step 4：生成 HTML

生成完整 HTML 文件，确保：

• 字体加载正确
• 页面可直接打开
• 卡片内的内容符合主题参数
• 底部带保存按钮

Step 5：打开预览

生成后直接打开 HTML，让用户在浏览器中预览和保存。

图表规则

只有当图比纯文本能多传递信息时才加图。

内容特征	建议图形
因果链	Mermaid 流程图
步骤流程	Mermaid 流程图
概念关系	Mermaid 关系图
视觉化更强的概念	内联 SVG
纯观点或纯列表	不加图

图表必须放在标题之后、要点之前，作为结构总览，不要抢正文。

输出要求

• 文字必须忠实原文，不得虚构。
• 页面必须以手机阅读为先。
• 输出比例必须服务于内容密度，不得为了视觉新鲜感牺牲可读性。
• 卡片底部必须有一键保存 PNG 按钮。
• 高密度内容默认优先单栏列表，而不是挤成多栏。
• 主题之间必须真正正交，不能只是色板变化。

文件输出

HTML 保存位置

默认保存到：

/tmp/info-card-[关键词].html

打开方式

open /tmp/info-card-[关键词].html

导出目录

如果需要整理到下载目录，按这个结构：

~/Downloads/info-cards/[YYYYMMDD]-[来源]-[主题关键词]/

质量门槛

任何输出在提交前都要过这 6 个检查：

1. 内容是否忠实原文。
2. 标题是否真的是结论。
3. 主题是否真的改变了构图。
4. 手机上是否可读。
5. 是否过度装饰。
6. 是否仍然像一个原创系统，而不是 fork。

默认判断

如果内容不明确，默认选择更克制、更可读的主题。 如果内容很强，优先让标题和结构承接张力，而不是用装饰去制造张力。 如果用户强调“传播”，优先考虑 Social Slice、杂志封面或 Data Poster。 如果用户强调“读起来舒服”，优先考虑纸感书页或文化档案。