SuperAPI AI 工具集

create-visual-card

前端与建站

查看项目

更新于 10-15 22:15

技能介绍

用途:把要点转成一张杂志质感的可视化卡片,产出单个自包含 HTML(内嵌 CSS),并渲染为可分享的 PNG。

主要能力与设计系统:采用瑞士国际主义结构加现代杂志视觉冲击,暖纸底色 #f5f3ed、噪点纹理叠加、强调色分隔条与背景块。字体通过 Google Fonts CDN 加载(Noto Serif SC、Noto Sans SC、Oswald、Inter)。排版层级分超级标题 72–84px/900、章节 56px/700、子章节 32px/700、正文 18–20px/400、说明 15–16px、标签 13px/700 大写。间距:容器内边距 40–50px,段落间距 ≤1.5em,组件间距 30–40px。

布局策略按内容密度选择:低密度用大字号(标题 80px+、核心数据 120px+);中密度用强调条与背景块平衡分区;高密度用 2–3 栏报纸式网格加竖向分隔。

使用方式:先一句话判断内容密度,选定布局,从模板骨架写出完整 HTML 到工作区,然后用捆绑脚本截图:node scripts/screenshot.mjs <file>.html .card 1024。该脚本用 Playwright 直接打开文件(无需服务器),以 2x DPR 渲染,在 HTML 旁生成同名 .png 并打印路径。若缺少 chromium,先运行 npx playwright install chromium。最后以内联方式展示 PNG,并给出 HTML 与 PNG 的绝对路径,按 references/output-template.md 的四项 QA 自检。

限制:卡片宽度需与截图宽度参数(默认 1024px)保持一致,否则出现不均边距;仅适用于单帧装饰性卡片,不适用多段长报告、交互页面/应用/组件或打印海报。