TopRank Skills

Home / Claw Skills / Others / md-slider
Official OpenClaw rules 15%

md-slider

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

Stars

0

Installs

0

Status

ACTIVE

Visibility

PUBLIC

安装方式

直接复制以下提示词,发送给你的 AI 助手即可完成安装。

请先检查是否已安装 SkillHub 商店,若未安装,请根据 https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/skillhub.md 安装 SkillHub 商店,然后安装 md-slider 技能。 若已安装,则直接安装 md-slider 技能。

Overview

Skill Key
anderson-lu/md-ppt-generator
Author
anderson-lu
Source Repo
openclaw/skills
Version
-
Source Path
skills/anderson-lu/md-ppt-generator
Latest Commit SHA
676897344cf2170491d681f69f71cf160d668173

Extracted Content

SKILL.md excerpt

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

# 核心逻辑

1. **内容提炼 (Content Distillation)**: 
   - 每一级标题 `##` 或分隔符 `---` 开启一个新 `<section>`。
   - 每页幻灯片 **仅包含一个核心观点**。如果输入太啰嗦,将其重写为“黄金金句”(最多20字)。

2. **模板映射 (Template Mapping)**:
   - **大字报 (Hero)**: 只有 H1 和 极短的 P。用于开场和核心强调。
   - **卡片组 (Cards)**: 将 Markdown 的列表项转换为 `.glass-card` 结构,适合展示 3-4 个并列项。
   - **标签云 (Tags)**: 将短促的词组转换为 `.tag` 元素,适合展示技术栈或关键词。
   - **细节解释 (Tooltip)**: 对于生僻词,使用带有 `.tooltip` 类的 `<span>` 包装。

3. **视觉层级与元素**:
   - **标题 (H1)**: 巨大、粗体、高对比度。
   - **强调 (Highlight)**: 将核心科技词汇包裹在 `<span class="morandi-gradient">` 中。
   - **图标 (Icons)**: 必须使用 **SVG 线性图标** (stroke 风格),内联插入 HTML,禁止使用外部图片。
   - **布局限制**: 严禁使用 `position: absolute` 定位内容元素,必须使用 Flexbox/Grid 配合 `gap` 实现自适应。

4. **呼吸感与动效 (Breathing Aesthetic)**:
   - 为每个元素添加入场动画类名(如 `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 框架)。
- 符合“呼吸美学”:留白充足,内边距固定且统一。

Related Claw Skills