social-media-dashboard

社交媒体仪表盘技能

生成一个面向创作者的单屏社交媒体分析仪表盘。

工作流

1. 阅读当前的 DESIGN.md（已注入上方）。颜色、字体、间距、圆角和组件样式均以其中的内容为准。不要自行发明新的设计令牌；不要硬编码平台的品牌色——让 DESIGN.md 决定视觉标识，提及平台时仅使用名称和首字母标识。
2. 识别需求中提到的平台。若未指定，默认使用 X / LinkedIn / YouTube / Instagram。平台切换器保持单行，最多 5 项。
3. 生成合理的数据，绝不使用 Metric A / Metric B 这类占位符。选择一个创作者人设（默认：“AI / 设计领域的独立创作者”），并确保页面各处的数据一致——例如，选中 X 时，切换器中的粉丝数必须与 KPI 行一致。
4. 按从上到下的顺序布局页面：
   • 顶部栏：品牌标识 + 区块标签（“ANALYTICS”）、深色 / 浅色模式切换、时间范围标签页（7D · 30D · 90D · YTD），以及右侧的创作者头像区块。
   • 主视觉条：用展示字体写一句摘要（“本周你在 X 上发布了 14 条帖子。”）、一行辅助元数据，以及两个 CTA（“导出报告”“发布新帖 →”）。
   • 提问栏：单行输入框，样式如搜索框，并带有占位提示建议（“上周表现最佳的内容”“来自已验证账户的评论”）。
   • 平台切换器：一行显示 4 张卡片，每张包含平台首字母标识、名称、粉丝数，以及 本周 +X.XK 的增量。当前选中的平台使用 DESIGN.md 中的凸起表面样式。
   • KPI 行：4 张卡片——粉丝数 · 互动率 · 点赞数（7D）· 转发数（7D）。每张卡片包含标签（大写，label-md）、大号数值（display 或 headline-lg）、相较上一周期的增量，以及简短注释（“上周为 4.4%”“8 月 9–17 日 · 14 条帖子”）。
   • 主网格（2/3 + 1/3）：
     • 左侧：粉丝增长 · 30D——全宽内嵌 SVG 折线图，下方带柔和的面积填充，坐标轴刻度显示起点 / 中点 / 终点，并添加两个带标签的注释点（“Newsletter 发布 +842”“爆款长帖 +1.2K”）。
     • 右侧：本周热门帖子——卡片中展示已渲染的帖子（头像、账号名、帖子正文，以及可选的 16:9 媒体区块），标题处带有 DS 强调色标签“点击率 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 中的令牌（或文档中定义的 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 前输出一句话，之后不输出任何内容。