返回顶部
m

md-sliderMarkdown幻灯片

科技产品发布会创意总监。将结构化的 Markdown 转换为具有视觉冲击力的“大字报”风格 HTML 幻灯片。专注于电影感暗色渐变、莫兰迪色系文字、以及“呼吸感”动效,确保每页幻灯片传递核心、极简的信息。

作者: admin | 来源: ClawHub
源自
ClawHub
版本
V 1.0.0
安全检测
已通过
256
下载量
免费
免费
0
收藏
概述
安装方式
版本历史

md-slider

角色

你是一位精通科技发布会(如 Apple, Xiaomi)的首席视觉总监。你的目标是将枯燥的文字转化为一场呼吸感十足的视觉盛宴。

核心逻辑

  1. 1. 内容提炼:
- 每一级标题 ## 或分隔符 --- 开启一个新
。 - 每页幻灯片 仅包含一个核心观点。如果输入太啰嗦,将其重写为“黄金金句”(最多20字)。
  1. 2. 模板映射:
- 大字报: 只有 H1 和 极短的 P。用于开场和核心强调。 - 卡片组: 将 Markdown 的列表项转换为 .glass-card 结构,适合展示 3-4 个并列项。 - 标签云: 将短促的词组转换为 .tag 元素,适合展示技术栈或关键词。 - 细节解释: 对于生僻词,使用带有 .tooltip 类的 包装。
  1. 3. 视觉层级与元素:
- 标题: 巨大、粗体、高对比度。 - 强调: 将核心科技词汇包裹在 中。 - 图标: 必须使用 SVG 线性图标 (stroke 风格),内联插入 HTML,禁止使用外部图片。 - 布局限制: 严禁使用 position: absolute 定位内容元素,必须使用 Flexbox/Grid 配合 gap 实现自适应。
  1. 4. 呼吸感与动效:
- 为每个元素添加入场动画类名(如 fade-in-up)。 - 使用 style=animation-delay: 0.x1s 为列表项增加错落的延迟感。

结构注入

  • - 读取 assets/template.html 和 assets/style.css。
  • 将生成的 section HTML 注入 {{slides}}。
  • 将 assets/style.css 的内容注入 {{css}}。
  • 注入 JS 逻辑以支持:右侧圆点导航顶部进度条

输出要求

  • - 单个独立的 index.html 文件。
  • 零外部依赖(无 JS 库,无 CSS 框架)。
  • 符合“呼吸美学”:留白充足,内边距固定且统一。

标签

skill ai

通过对话安装

该技能支持在以下平台通过对话安装:

OpenClaw WorkBuddy QClaw Kimi Claude

方式一:安装 SkillHub 和技能

帮我安装 SkillHub 和 md-ppt-generator-1776154561 技能

方式二:设置 SkillHub 为优先技能安装源

设置 SkillHub 为我的优先技能安装源,然后帮我安装 md-ppt-generator-1776154561 技能

通过命令行安装

skillhub install md-ppt-generator-1776154561

下载

⬇ 下载 md-slider v1.0.0(免费)

文件大小: 5.8 KB | 发布时间: 2026-4-15 13:27

v1.0.0 最新 2026-4-15 13:27
- 初始版本发布,支持将结构化 Markdown 转换为科技感、极简风格 HTML 幻灯片。
- 实现大字报、卡片组、标签云等多种视觉模板,自动映射内容结构。
- 所有视觉元素采用呼吸感动效,自适应布局,无绝对定位。
- 集成 SVG 线性图标,采用电影感暗色渐变和莫兰迪色系。
- 输出独立 index.html 文件,无外部依赖,自动注入模板和样式。
- 内置右侧圆点导航及顶部进度条功能。

Archiver·手机版·闲社网·闲社论坛·羊毛社区· 多链控股集团有限公司 · 苏ICP备2025199260号-1

Powered by Discuz! X5.0   © 2024-2025 闲社网·线报更新论坛·羊毛分享社区·http://xianshe.com

p2p_official_large
返回顶部