审查配色方案 · Color Palette Reviewer

    1

    按对比度、色盲友好与品牌一致逐项审查配色:标出问题等级并给替代色值,输出可直接照改的清单。Audit palettes against contrast, colorblind-friendliness, and brand consistency — severity ratings plus ready-to-use replacement hex codes in one checklist.

    $7

    Secure checkout via Stripe

    30-day refund guarantee

    Converts to your local currency at checkout

    0 installsSecurity scanned

    Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIGitHub CopilotGitHub CopilotGemini CLIGemini CLI+20 more

    审查配色方案 · Color Palette Reviewer

    Example session with this skill installed

    我们金融后台的配色是主色 #0D47A1、点缀色 #FFD600、背景 #F5F5F5，分析师每天用 8 小时。请按对比度、色盲友好和品牌一致逐项审查并给出替代色值。Our fintech admin UI uses #0D47A1 primary, #FFD600 accent on #F5F5F5 background, used 8 hours a day by analysts. Audit contrast, colorblind-friendliness, and brand consistency, and suggest replacement values.

    • Read your context and instructions
    • Compiled the color palette reviewer
    • Generated the design tokens stylesheet

    结论：这套配色方向正确，但有 2 处必修：点缀色 #FFD600 在浅色背景上对比度只有 1.63:1，且会被误认为「警告色」。建议把点缀色换成 #E65100，并补充成功/错误/警告三个语义色。Conclusion: the direction is right, but two issues must be fixed — the accent #FFD600 has only 1.63:1 contrast on the light background and reads as a "warning" color. Replace it with #E65100 and add success/error/warning semantic colors.

    审查报告 · Audit report

    检查项当前值实测结果等级建议改法
    主色对比度#0D47A1 on #F5F5F58.9:1，AA 通过通过保留
    点缀色对比度#FFD600 on #F5F5F51.63:1，未达 3:1严重换成 #E65100(对比度 4.9:1)
    色盲友好蓝+黄红绿色盲可见，蓝黄色盲略弱提示状态色改用「图标+文字」双通道
    长时间使用高亮背景8 小时高亮易疲劳建议提供深色模式,主色降饱和为 #42A5F5

    替代方案 · Replacement palette

    • 主色 Primary: #0D47A1 → 保留 keep
    • 点缀 Accent: #FFD600 → #E65100
    • 语义色 Semantic: 成功 #2E7D32、警告 #F9A825、错误 #C62828
    • 深色模式 Dark mode: 背景 #121212、文字 #E0E0E0、主色 #42A5F5

    修改清单 · Change checklist

    1. 全局替换点缀色并重测对比度。
    2. 给状态提示加上图标,不只用颜色传达。
    3. 在色盲模拟插件下截图复核一遍。
    4. Replace the accent globally and re-test contrast.
    5. Add icons to status messages, never rely on color alone.
    6. Re-check screenshots in a colorblind simulation plugin.

    下一步 · Next steps

    1. 把你们完整的设计变量表发我，我批量重算全部对比度。Send me your full design token sheet and I will recalculate all contrast ratios in bulk.
    2. 告诉我是否已有深色模式，我来检查语义色是否冲突。Tell me if dark mode exists, and I will check semantic color conflicts.
    3. 需要导出成 CSS 变量文件的话回复「导出变量」，我直接生成代码。Reply "export variables" if you want a CSS variable file generated.

    color-palette-reviewer-tokens.css

    CSS · design tokens

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    What you get

    Audit UI palettes for technical depth and WCAG accessibility compliance.Generate structured design critiques for high-end professional audiences.Produce CLI commands for color theme implementation in bash and PowerShell.

    About this skill

    它解决什么问题 · The problem

    配色方案好不好，不能只凭「看着顺眼」。对比度不够会让文字看不清，红绿搭配让色盲用户直接误读。这个技能按对比度、色盲友好与品牌一致逐项审查，标出问题等级，并给出可直接替换的色值。

    A palette that "looks nice" can still fail users: low contrast makes text unreadable, and red-green pairs confuse colorblind users. This skill audits contrast, colorblind-friendliness, and brand consistency item by item, rates each issue, and hands you ready-to-use replacement hex codes.

    这个技能做什么 · What it does

    它先确认品牌定位与使用场景，再输出审查报告：每项给出当前色值、对比度数值、问题等级和替代方案，最后汇总成一份可以直接照改的清单，并附深色模式与色盲模拟的检查要点。

    It first confirms your brand positioning and usage context, then produces an audit report: for each color it shows the current value, measured contrast ratio, severity level, and replacement options — ending with an actionable change list plus checks for dark mode and colorblind simulation.

    为什么比裸提示词强 · Why it beats plain prompts

    • 给出具体对比度数值，而不是「对比再强一点」的空话 / Reports measured contrast ratios, not vague "make it pop" advice
    • 每条问题都标等级，先修会违反 WCAG 的硬伤 / Severity-rated issues, so WCAG violations get fixed first
    • 替代色值现成，不用自己去色板里试 / Ready-to-use replacement hex codes — no manual trial and error
    • 自动检查色盲与深色模式两个盲区 / Automatically covers two blind spots: colorblind users and dark mode

    典型用例 · Use cases

    • 企业后台系统上线前做无障碍(无障碍/accessibility)合规审查 / Pre-launch accessibility audits for enterprise dashboards
    • 品牌换色时评估新方案与旧资产的兼容性 / Evaluating new brand palettes against existing assets
    • 落地页配色调整前先测转化相关元素的可读性 / Checking readability of conversion elements before landing page changes
    • 设计系统新增语义色时统一检查状态色 / Auditing semantic status colors when extending a design system

    局限 · Limitations

    输出色值与修改建议，不产出设计稿；屏幕硬件差异可能影响实际观感，正式上线前建议在真机上复核一次。

    Delivers values and recommendations, not finished mockups. Real-world appearance varies by display hardware, so verify on actual devices before shipping.

    How to install

    Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.

    ~30 seconds
    1. 1

      Download the ZIP

      Free skills download straight away. Paid skills unlock right after purchase.

    2. 2

      Unzip into your skills folder

      Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.

    3. 3

      Ask your agent to use it

      Restart the agent if it was already running. It picks the skill up automatically - no config needed.

    Skills folder by agent

    Click the path to copy it. Create the folder if it does not exist yet.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    30-day refund

    Not a fit? Get your money back

    Trust & safety

    Security scanned

    Verified clean today

    • Passed all security checks, Safe to install

    Listedtoday

    Frequently Asked Questions