--- 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 文档： - 从 `` 到 ``，CSS 放在一个内联 `