social-media-dashboard

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Social Media Dashboard Skill

社交媒体仪表盘技能

Produce a single-screen, creator-facing social media analytics dashboard.

制作单屏、面向创作者的社交媒体分析仪表盘。

Workflow

工作流程

Read the active DESIGN.md (injected above). Colors, typography, spacing, radii, and component styling all come from it. Do not invent new tokens; do not hard-code brand colors of the platforms — let the DESIGN.md carry the visual identity, and reference platforms only by name and monogram.
Identify which platforms the brief calls out. Default to X / LinkedIn / YouTube / Instagram if unspecified. Keep the platform switcher to a single row, max 5 entries.
Generate plausible data, never
```
Metric A / Metric B
```
placeholders. Pick a creator persona (default: "AI / design indie creator") and derive consistent numbers across the page — e.g. follower counts on the switcher must match the KPI row when X is selected.
Lay out the page top-to-bottom:
- Header bar: brand mark + section label ("ANALYTICS"), a dark/light toggle, time-range tabs (7D · 30D · 90D · YTD), and a creator avatar block on the right.
- Hero strip: a one-sentence summary in display type ("You shipped 14 posts on X this week."), one supporting line of metadata, and two CTAs ("Export report", "New post →").
- Ask bar: a single-line input styled as a search field, with ghost-text suggestions ("top performing last week", "comments from verified accounts").
- Platform switcher: 4 cards in one row, each with platform monogram, name, follower count, and a
```
+X.XK this week
```
  delta. The active platform uses an elevated surface from DESIGN.md.
- KPI row: 4 cards — Followers · Engagement Rate · Likes (7D) · Reposts (7D). Each card has a label (uppercase, label-md), a big value (display or headline-lg), a delta vs prior period, and a small footnote ("vs. 4.4% last week", "Aug 9–17 · 14 posts").
- Main grid (2/3 + 1/3):
  - Left: Follower Growth · 30D — a full-width inline SVG line chart with a soft area fill underneath, axis ticks at start / midpoint / end, and two labelled annotation dots ("Newsletter drop +842", "Viral thread +1.2K").
  - Right: Top Post · This Week — a card showing the rendered post (avatar, handle, post body, optional 16:9 media block), with a header tag "click-through rate 5.6%" in the DS accent.
- Lower grid (1/2 + 1/2):
  - Trending topics on this platform: 5–7 chip-style rows with topic name + post count + 24h delta sparkline (10 polyline points, no labels).
  - Top comments: 3 cards, each with avatar, handle (verified check if relevant), comment body (2 lines max, ellipsised), and a small
```
❤ 312 · 💬 18
```
    row in muted text.
Write one self-contained HTML document:
- ```
<!doctype html>
```
  through
```
</html>
```
  , CSS in one inline
```
<style>
```
  block.
- CSS Grid for page-level layout; Flexbox inside cards.
- Semantic HTML:
```
<header>
```
  ,
```
<main>
```
  ,
```
<section>
```
  ,
```
<article>
```
  .
- Tag each logical region with
```
data-od-id="slug"
```
  for comment mode:
```
header
```
  ,
```
hero
```
  ,
```
ask
```
  ,
```
platform-switcher
```
  ,
```
kpis
```
  ,
```
follower-growth
```
  ,
```
top-post
```
  ,
```
trending
```
  ,
```
top-comments
```
  .
Charts: inline SVG only, no JS libraries.
- Line chart:
```
<path>
```
  for the curve, a second
```
<path>
```
  with low-alpha fill for the area, two
```
<circle>
```
  annotation dots with text labels.
- Sparklines:
```
<polyline>
```
  with 10 points, no axes, ~16px tall.
- Use the DS accent for highlights and the DS
```
on-surface-variant
```
  for muted text. Accent appears at most three times on the page.
Self-check:
- Every color resolves to a DESIGN.md token (or a documented
```
rgba(token, alpha)
```
  for glass surfaces).
- Numbers are internally consistent (switcher follower count matches the active platform's KPI).
- Header bar and hero strip are sticky; main content scrolls.
- Density follows the DS mood: glass / cosmic DSes get more breathing room and ambient glow on the active platform; clean / corporate DSes tighten gaps and drop the glow.

读取当前的DESIGN.md（已注入上方）。颜色、排版、间距、圆角和组件样式均来自该文件。不要创建新的样式变量；不要硬编码平台的品牌颜色——让DESIGN.md承载视觉标识，仅通过名称和缩写指代平台。
确定需求中指定的平台。若未指定，默认使用X / LinkedIn / YouTube / Instagram。平台切换器保持单行，最多5个选项。
生成合理数据，绝不要使用
```
Metric A / Metric B
```
这类占位符。选择一个创作者角色（默认：“AI/设计独立创作者”），并确保页面上的数字保持一致——例如，切换器上的粉丝数必须与选中X时的KPI行数据匹配。
页面布局从上到下依次为：
- 标题栏：品牌标识 + 板块标签（"ANALYTICS"）、深色/浅色模式切换按钮、时间范围标签（7天·30天·90天·年初至今），以及右侧的创作者头像区块。
- 主横幅：一句展示级别的总结性文字（“本周你在X平台发布了14条帖子。”）、一行辅助元数据，以及两个CTA按钮（“导出报告”、“发布新帖子 →”）。
- 查询栏：一个样式为搜索框的单行输入框，带有占位文本提示（“上周表现最佳内容”、“认证账号的评论”）。
- 平台切换器：一行4张卡片，每张包含平台缩写、名称、粉丝数，以及“本周新增X.XK”的增量数据。当前激活的平台使用DESIGN.md中定义的悬浮样式。
- KPI行：4张卡片——粉丝数·互动率·7天点赞数·7天转发数。每张卡片包含标签（大写，label-md样式）、大数值（display或headline-lg样式）、与上期对比的增量，以及一行小字注释（“对比上周4.4%”、“8月9日-17日 · 14条帖子”）。
- 主网格（2/3 + 1/3）：
  - 左侧：粉丝增长·30天——一个全宽内嵌SVG折线图，下方带有柔和的填充区域，坐标轴刻度位于起点/中点/终点，以及两个带标注的点（“通讯发布 +842”、“爆款帖子 +1.2K”）。
  - 右侧：本周热门帖子——一张展示已渲染帖子的卡片（头像、账号名、帖子内容、可选16:9媒体区块），顶部带有DS强调色的标签“点击率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>
```
  作为标注点并附带文本标签。
- 迷你折线图：用
```
<polyline>
```
  绘制10个点，无坐标轴，高度约16px。
- 使用DS强调色作为高亮，DS的
```
on-surface-variant
```
  作为浅色文本。强调色在页面上最多出现三次。
自检：
- 所有颜色均对应DESIGN.md中的样式变量（或使用文档化的
```
rgba(token, alpha)
```
  实现玻璃效果）。
- 数字保持内部一致（切换器上的粉丝数与激活平台的KPI数据匹配）。
- 标题栏和主横幅固定；主内容可滚动。
- 布局密度符合DS风格：玻璃/宇宙风格的DS需要更多留白和激活平台的环境光晕；简洁/企业风格的DS需缩小间距并移除光晕。

Output contract

输出约定

Emit between

<artifact>

tags:

<artifact identifier="social-media-dashboard" type="text/html" title="Social Media Dashboard">
<!doctype html>
<html>...</html>
</artifact>

One sentence before the artifact, nothing after.

在

<artifact>

标签内输出：

<artifact identifier="social-media-dashboard" type="text/html" title="Social Media Dashboard">
<!doctype html>
<html>...</html>
</artifact>

在artifact前写一句话，之后不要添加任何内容。