菜单
Design a dark mode that pairs with an existing light mode, including color mapping, contrast adjustments, and surface elevation. Use whenever the user mentions dark mode, dark theme, theme switching, or wants to add dark mode to an existing design.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Audit a brand's full identity (logo, typography, color, voice, visual language) for consistency, distinctiveness, and gap. Use when the user asks for a brand audit, identity review, brand health check, or wants to evaluate how a brand shows up across surfaces.
Plan a content calendar tied to product, brand, or marketing goals. Use when the user asks for a content plan, editorial calendar, content strategy, posting schedule, or wants to map content to themes and audiences over a period of time.
Write a sequence of emails for onboarding, nurture, sales, lifecycle, or launch. Use when the user asks for a drip campaign, email sequence, welcome series, onboarding emails, sales cadence, or any multi-email flow tied to a goal.
Design an a/b test or experiment including hypothesis, metrics, sample size, and analysis plan. Use whenever the user mentions a/b test, experiment, split test, multivariate test, or needs to design a test that produces a decision-quality result.
Audit a design or component for WCAG accessibility compliance. Use whenever the user mentions a11y, accessibility audit, WCAG check, contrast issues, keyboard navigation, screen reader support, focus order, or asks if a design is accessible.
Extract a brand voice guide from existing copy samples. Use whenever the user shares past copy and asks to define a voice, document a voice, create voice guidelines, or wants to make their existing voice teachable and repeatable.
| name | dark-mode-pairing |
| description | Design a dark mode that pairs with an existing light mode, including color mapping, contrast adjustments, and surface elevation. Use whenever the user mentions dark mode, dark theme, theme switching, or wants to add dark mode to an existing design. |
dark mode is not "invert the light mode". it's a parallel design with its own rules.
for each light-mode token, define a dark-mode counterpart:
background
light: #ffffff
dark: #0a0a0c (off-black, slight cool tint)
surface (cards, panels)
light: #fafafa
dark: #15151a (one elevation up)
surface elevated (modals, popovers)
light: #ffffff (above background)
dark: #1f1f25 (two elevations up)
text primary
light: #111
dark: #f0f0f3
text secondary
light: #555
dark: #a8a8b0
border
light: #e5e5e8
dark: #2a2a32
accent (brand color)
light: full saturation
dark: reduce saturation 10-20%, increase lightness 5-10%
semantic colors (success, warning, error, info)
each gets its own dark variant. usually less saturated, slightly lighter.
in dark mode, shadows are subtle and often replaced by surface elevation. use a 1px lighter border on the top edge of elevated surfaces as a substitute for the top highlight that natural light would create.
before shipping: