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.…
以下为摘要预览,完整内容请查看 GitHub 原文。
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.…