skillhub-082-social-media-dashboard
wehub-skill-sync
113 行
5.8 KiB
Markdown
113 行
5.8 KiB
Markdown
---
|
||
name: social-media-dashboard
|
||
description: |
|
||
面向创作者的社交媒体分析仪表盘，单 HTML 文件实现。
|
||
包含平台切换器（X / LinkedIn / YouTube / Instagram）、一行 KPI
|
||
卡片（关注者数、互动率、点赞数、转推数）、关注者增长
|
||
图表、「本周最佳帖子」预览，以及趋势话题 / 热门评论
|
||
侧边面板。当需求中提到「社交媒体仪表盘」、
|
||
「创作者分析」、「社交分析」，或同时提及特定平台
|
||
（X、Twitter、LinkedIn、YouTube、Instagram、TikTok）
|
||
与关注者、互动、点赞、转推等指标时使用。
|
||
triggers:
|
||
- "social media dashboard"
|
||
- "social analytics"
|
||
- "creator dashboard"
|
||
- "creator analytics"
|
||
- "social media analytics"
|
||
- "社媒后台"
|
||
- "创作者后台"
|
||
- "社交媒体仪表盘"
|
||
od:
|
||
mode: prototype
|
||
platform: desktop
|
||
scenario: creator
|
||
preview:
|
||
type: html
|
||
entry: index.html
|
||
design_system:
|
||
requires: true
|
||
sections: [color, typography, layout, components]
|
||
example_prompt: "Create a social media analytics dashboard using my Design System. Show X, LinkedIn, YouTube, Instagram with follower counts, engagement rate, likes, reposts, trending topics, and top comments."
|
||
---
|
||
|
||
# Social Media Dashboard Skill
|
||
|
||
制作一个单屏、面向创作者的社交媒体分析仪表盘。
|
||
|
||
## 工作流程
|
||
|
||
1. **读取当前生效的 DESIGN.md**（已注入到上方）。颜色、字体、
|
||
间距、圆角和组件样式均从中获取。不要发明新的 token；不要硬编码平台的品牌色——让
|
||
DESIGN.md 承载视觉身份，仅通过名称和缩写来引用平台。
|
||
2. **识别**需求中提到的平台。若未指定，默认使用
|
||
X / LinkedIn / YouTube / Instagram。平台切换器保持单行，最多 5 项。
|
||
3. **生成合理的数据**，绝不使用 `Metric A / Metric B` 占位符。
|
||
选择一个创作者人设（默认：「AI / 设计类独立创作者」），并确保页面各处的数据一致——例如，
|
||
切换器中 X 的关注者数必须与选中 X 时的 KPI 行匹配。
|
||
4. **从上到下布局**页面：
|
||
- **顶栏**：品牌标识 + 区域标签（"ANALYTICS"）、
|
||
深色/浅色切换开关、时间范围标签（7D · 30D · 90D · YTD），以及右侧的创作者头像区域。
|
||
- **英雄条**：用展示字体书写的一句话摘要
|
||
（"You shipped 14 posts on X this week."）、一行辅助元数据，
|
||
以及两个行动号召按钮（"Export report", "New post →"）。
|
||
- **提问栏**：样式为搜索框的单行输入，带有幽灵文字建议
|
||
（"top performing last week"、
|
||
"comments from verified accounts"）。
|
||
- **平台切换器**：一行内 4 张卡片，每张包含平台
|
||
缩写、名称、关注者数以及 `+X.XK this week` 的增量。当前
|
||
平台使用 DESIGN.md 中的抬升表面样式。
|
||
- **KPI 行**：4 张卡片——关注者数（Followers）· 互动率（Engagement Rate）· 点赞数（Likes (7D)）·
|
||
转推数（Reposts (7D)）。每张卡片包含标签（大写，label-md）、大号数值
|
||
（display 或 headline-lg）、与上期的对比增量，以及
|
||
一行小字脚注（"vs. 4.4% last week"、"Aug 9–17 · 14 posts"）。
|
||
- **主网格（2/3 + 1/3）**：
|
||
- 左侧：**关注者增长 · 30 天**——一个全宽内联 SVG 折线
|
||
图，下方带有柔和区域填充，在起点 /
|
||
中点 / 终点处有坐标轴刻度，以及两个带标签的标注圆点
|
||
（"Newsletter drop +842"、"Viral thread +1.2K"）。
|
||
- 右侧：**本周最佳帖子**——一张卡片展示渲染后的
|
||
帖子（头像、用户名、正文、可选 16:9 媒体块），顶部
|
||
使用 DS 强调色显示标签"click-through rate 5.6%"。
|
||
- **下方网格（1/2 + 1/2）**：
|
||
- **该平台的热门话题**：5–7 行芯片式条目，包含
|
||
话题名称 + 帖子数量 + 24 小时增量迷你趋势图（10 个折线
|
||
点，无标签）。
|
||
- **热门评论**：3 张卡片，每张包含头像、用户名（必要时带认证标记）、评论正文（最多 2 行，超出省略），以及
|
||
一行小字 `❤ 312 · 💬 18`（使用弱化文字）。
|
||
5. **编写**一份自包含的 HTML 文档：
|
||
- 从 `<!doctype html>` 到 `</html>`，CSS 放在一个内联 `<style>` 块中。
|
||
- 页面级布局使用 CSS Grid；卡片内使用 Flexbox。
|
||
- 语义化 HTML：`<header>`、`<main>`、`<section>`、`<article>`。
|
||
- 为每个逻辑区域添加 `data-od-id="slug"` 属性以支持评论模式：
|
||
`header`、`hero`、`ask`、`platform-switcher`、`kpis`、
|
||
`follower-growth`、`top-post`、`trending`、`top-comments`。
|
||
6. **图表**：仅使用内联 SVG，不使用 JS 库。
|
||
- 折线图：用 `<path>` 绘制曲线，第二个低透明度 `<path>`
|
||
填充区域，两个带文字标签的 `<circle>` 标注圆点。
|
||
- 迷你趋势图：使用包含 10 个点的 `<polyline>`，无坐标轴，高度约 16px。
|
||
- 使用 DS 强调色进行高亮，使用 DS 的 `on-surface-variant` 显示
|
||
弱化文字。强调色在页面中最多出现三次。
|
||
7. **自查**：
|
||
- 每个颜色都对应到 DESIGN.md 中的 token（或使用文档化的
|
||
`rgba(token, alpha)` 表示毛玻璃表面）。
|
||
- 数据内部一致（切换器中的关注者数必须与
|
||
当前平台的 KPI 匹配）。
|
||
- 顶栏和英雄条固定；主内容可滚动。
|
||
- 密度跟随 DS 情绪：毛玻璃 / 宇宙风格 DS 给更多
|
||
呼吸空间和当前平台的环境光晕；简洁 / 企业风格 DS 缩小
|
||
间距并移除光晕。
|
||
|
||
## 输出约定
|
||
|
||
在 `<artifact>` 标签之间输出：
|
||
|
||
```
|
||
<artifact identifier="social-media-dashboard" type="text/html" title="Social Media Dashboard">
|
||
<!doctype html>
|
||
<html>...</html>
|
||
</artifact>
|
||
```
|
||
|
||
在 artifact 之前输出一句话，之后不输出任何内容。
|