skillhub-082-social-media-dashboard
wehub-skill-sync
5.8 KiB
5.8 KiB
name, description, triggers, od
| name | description | triggers | od | ||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| social-media-dashboard | 面向创作者的社交媒体分析仪表盘，单 HTML 文件实现。 包含平台切换器（X / LinkedIn / YouTube / Instagram）、一行 KPI 卡片（关注者数、互动率、点赞数、转推数）、关注者增长 图表、「本周最佳帖子」预览，以及趋势话题 / 热门评论 侧边面板。当需求中提到「社交媒体仪表盘」、 「创作者分析」、「社交分析」，或同时提及特定平台 （X、Twitter、LinkedIn、YouTube、Instagram、TikTok） 与关注者、互动、点赞、转推等指标时使用。 |
|
|
Social Media Dashboard Skill
制作一个单屏、面向创作者的社交媒体分析仪表盘。
工作流程
- 读取当前生效的 DESIGN.md（已注入到上方）。颜色、字体、 间距、圆角和组件样式均从中获取。不要发明新的 token；不要硬编码平台的品牌色——让 DESIGN.md 承载视觉身份，仅通过名称和缩写来引用平台。
- 识别需求中提到的平台。若未指定，默认使用 X / LinkedIn / YouTube / Instagram。平台切换器保持单行，最多 5 项。
- 生成合理的数据，绝不使用
Metric A / Metric B占位符。 选择一个创作者人设（默认：「AI / 设计类独立创作者」），并确保页面各处的数据一致——例如， 切换器中 X 的关注者数必须与选中 X 时的 KPI 行匹配。 - 从上到下布局页面：
- 顶栏：品牌标识 + 区域标签（"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（使用弱化文字）。
- 编写一份自包含的 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。
- 从
- 图表：仅使用内联 SVG，不使用 JS 库。
- 折线图：用
<path>绘制曲线，第二个低透明度<path>填充区域，两个带文字标签的<circle>标注圆点。 - 迷你趋势图：使用包含 10 个点的
<polyline>，无坐标轴，高度约 16px。 - 使用 DS 强调色进行高亮，使用 DS 的
on-surface-variant显示 弱化文字。强调色在页面中最多出现三次。
- 折线图：用
- 自查：
- 每个颜色都对应到 DESIGN.md 中的 token（或使用文档化的
rgba(token, alpha)表示毛玻璃表面）。 - 数据内部一致（切换器中的关注者数必须与 当前平台的 KPI 匹配）。
- 顶栏和英雄条固定；主内容可滚动。
- 密度跟随 DS 情绪：毛玻璃 / 宇宙风格 DS 给更多 呼吸空间和当前平台的环境光晕；简洁 / 企业风格 DS 缩小 间距并移除光晕。
- 每个颜色都对应到 DESIGN.md 中的 token（或使用文档化的
输出约定
在 <artifact> 标签之间输出：
<artifact identifier="social-media-dashboard" type="text/html" title="Social Media Dashboard">
<!doctype html>
<html>...</html>
</artifact>
在 artifact 之前输出一句话，之后不输出任何内容。