xxd-accessible-color

Purpose

Use this skill when color beauty has to survive real reading, interaction, status, or chart use. It should return testable contrast decisions and repairs from the same 742-color system.

Pain Points This Solves

• Traditional colors that look elegant can fail as body text, buttons, focus rings, or chart distinctions.
• Teams often use color alone to communicate status, selection, or error.
• Accessibility feedback is easy to make vague; this skill must give ratios, pass states, and concrete replacements.

Data Contract

• Use the bundled references inside this skill for replacements:
  • references/chinese-color-master-list.md: full 742-color Markdown source list.
  • references/chinese-color-harmony.csv: complete machine-readable harmony table for all 742 colors.
  • references/chinese-color-harmony.md: Markdown version of the same harmony relationships.
• Use WCAG contrast ratios for text and UI pair evaluation.
• Do not claim compliance without a ratio or a clear "needs verification" note.
• For charts, status, and selections, check whether color is the only cue and add labels, shape, stroke, underline, icon, or pattern when needed.

Evaluation Workflow

1. Identify the role:
   • Normal text, large text, button label, icon, focus ring, border, chart series, status, selection, or decoration.
2. Build test pairs:
   • Foreground/background for text.
   • State pairs for interactive elements.
   • Adjacent colors for charts and legends.
3. Calculate contrast when HEX values are available.
4. Classify:
   • Pass: usable as requested.
   • Conditional: usable for large text, decoration, non-critical marks, or with added cues.
   • Fail: needs replacement.
5. Repair failures:
   • Preserve the intended temperature and cultural signal where possible.
   • Prefer nearby, neutral, gray-toned, light, dark, or harmony-related project colors.
   • Keep the replacement inside the 742-color dataset.
6. Add non-color cues when meaning depends on status, selection, chart distinction, or warnings.

Thresholds

• Normal text: target at least 4.5:1.
• Large text: target at least 3:1.
• UI components and graphical objects: target at least 3:1 when contrast carries function.
• Do not use color alone to communicate required meaning.

Output Shape

• Summary: pass, conditional, fail counts and biggest risk.
• Pair table: foreground, background, role, ratio, status, recommendation.
• Repairs: original pair, replacement pair, why it preserves the direction.
• Usage rules: where each pair can and cannot be used.
• Non-color cue suggestions for charts, status, warning, or selection.

If no concrete HEX values are provided, ask for values or first run xxd-palette-builder to produce a testable palette.

xxd-brand-system

Purpose

Use this skill when color must become brand behavior, not just a campaign palette. It should help a team stay recognizable across website, social, product, packaging, presentation, and offline materials.

Pain Points This Solves

• Brand colors drift when every designer or campaign picks a different "Chinese" feeling.
• A palette without governance cannot tell teams what to use for hero moments, product UI, social covers, or print.
• Brand systems fail when they only describe meaning, not ratios, forbidden uses, and handoff rules.

Data Contract

• Use the bundled references inside this skill:
  • references/chinese-color-master-list.md: full 742-color Markdown source list.
  • references/chinese-color-harmony.csv: complete machine-readable harmony table for all 742 colors.
  • references/chinese-color-harmony.md: Markdown version of the same harmony relationships.
• Include color name and HEX for every color.
• If the user has existing brand colors, map them to nearest project colors and preserve recognition unless a full redesign is requested.
• If the brand becomes an interface, hand off token work to xxd-ui-token.

Brand System Workflow

1. Define brand pressure:
   • Category norms and expected colors.
   • Desired difference from competitors.
   • Price position and cultural posture.
   • Primary channels: product, website, social, print, packaging, events.
2. Decide the color governance model:
   • Anchor color: the brand's most recognizable traditional color.
   • Support family: 2 to 4 quiet colors for depth and flexibility.
   • Neutral base: canvas, text, borders, captions.
   • Accent colors: 1 or 2 high-attention colors with strict limits.
3. Assign usage by channel:
   • Website and landing pages.
   • Product UI.
   • Social and campaign assets.
   • Decks and documents.
   • Packaging or print when relevant.
4. Create rules:
   • Default ratio and hero ratio.
   • Which colors may touch the logo.
   • Which colors can carry text.
   • Which combinations are forbidden.
   • What a campaign may change without breaking the brand.
5. Add governance notes: owner, review trigger, and when to run accessibility or print checks.

Output Shape

• Brand color thesis: concrete, channel-aware, not poetic filler.
• Core palette: role, color name, HEX, ratio, brand job, channel.
• Channel rules: website, product UI, social, deck, packaging, print if relevant.
• Forbidden combinations: specific pair, proportion, or use case with reason.
• Handoff: token names, audit rules, or next skill.

Tie every color to a brand behavior. Avoid vague claims like "高级感" unless you translate it into use rules.

xxd-color-brief

Purpose

Use this skill before picking colors. Its job is to turn soft language like "高级", "东方", "年轻", "克制", "松弛", "科技感", or "不要太俗" into a brief that a designer can defend and reuse.

Pain Points This Solves

• Stakeholders use adjectives, references, or dislikes, but the designer needs concrete color constraints.
• Moodboards create alignment, but they often stop before deciding hue, brightness, saturation, contrast, and usage risk.
• Teams jump into swatches too early and later argue because the success criteria were never named.

Data Contract

• Use the bundled references inside this skill:
  • references/chinese-color-master-list.md: full 742-color Markdown source list.
  • references/chinese-color-harmony.csv: complete machine-readable harmony table for all 742 colors.
  • references/chinese-color-harmony.md: Markdown version of the same harmony relationships.
• Starting colors must include color name, HEX, and the reason they fit the brief.
• If the user provides an outside HEX, map it to the nearest project color and label it as a mapping.
• Do not produce a full palette unless the user explicitly asks; route to the next skill instead.

Briefing Workflow

1. Identify the job behind the words: brand, UI, poster, data visualization, content series, packaging, or audit.
2. Translate each adjective into observable constraints:
   • Temperature: warm, cool, neutral, or controlled contrast.
   • Lightness: pale, mid, deep, or high-contrast.
   • Saturation: muted, clean, vivid, gray-toned, or ceremonial.
   • Cultural signal: historical, editorial, product, youthful, premium, festive, technical.
   • Risk: cliche, low readability, too decorative, too flat, too commercial, too nostalgic.
3. Detect conflicts. For example, "年轻又古典" needs a modern neutral base plus one traditional accent, not an all-antique palette.
4. Choose 3 to 5 starting colors from the 742-color set, each with a role hypothesis.
5. Name the avoid list as concrete color families, contrast levels, or usage patterns.
6. Route the next step:
   • Need actual color combinations: xxd-palette-builder
   • Need placement on a layout: xxd-palette-applier
   • Need UI variables: xxd-ui-token
   • Need contrast repair: xxd-accessible-color
   • Need long-term brand rules: xxd-brand-system
   • Need charts: xxd-data-viz
   • Need to repair existing work: xxd-existing-design-audit
   • Need repeated content: xxd-content-series
   • Need physical production: xxd-print-packaging

Output Shape

• Brief name: one project-facing phrase.
• Design decision: 2 to 4 sentences explaining the color direction in plain Chinese.
• Constraint table: mood word, translated color constraint, risk if misread.
• Starting colors: role hypothesis, color name, HEX, why it belongs.
• Avoid list: 2 to 4 concrete exclusions.
• Next move: one recommended skill and what it should produce.

If the user only provides a mood word with no surface, state the missing surface and give a provisional brief instead of blocking.

xxd-content-series

Purpose

Use this skill when a creator needs repeated content to feel like one series while still giving each issue, column, or episode enough variation.

Pain Points This Solves

• Content teams lose recognition when every cover uses a new palette.
• Repeating the exact same template creates fatigue and makes new posts hard to distinguish.
• Platform templates need fixed brand layers, variable topic layers, and rules simple enough to use every week.

Data Contract

• Use the bundled references inside this skill:
  • references/chinese-color-master-list.md: full 742-color Markdown source list.
  • references/chinese-color-harmony.csv: complete machine-readable harmony table for all 742 colors.
  • references/chinese-color-harmony.md: Markdown version of the same harmony relationships.
• Give recurring colors stable roles.
• Avoid assigning too many equally strong colors to columns; recognition usually comes from stable structure plus controlled variation.

Series Workflow

1. Identify the publishing system:
   • Platform: Xiaohongshu, WeChat, newsletter, video, PPT/course, blog, poster series.
   • Cadence: daily, weekly, seasonal, campaign, course module.
   • Number of columns, formats, or recurring segments.
   • Recognition goal: subtle author identity or strong cover identity.
2. Create the fixed layer:
   • Canvas/background family.
   • Title and body text colors.
   • Author mark or brand mark.
   • Date, issue number, tag, or category marker.
3. Create the variable layer:
   • Column accents.
   • Topic mood colors.
   • Seasonal rotation colors.
   • Special issue highlight color.
4. Define reusable templates:
   • Cover or thumbnail.
   • Carousel/list page.
   • Quote or key insight card.
   • Long-form header.
   • Course or episode divider.
5. Add anti-fatigue rules:
   • What may change every issue.
   • What changes only by column.
   • What must never change.
   • How to rotate accents without making the series look random.

Output Shape

• Series identity: one paragraph focused on recognition and rhythm.
• Fixed layer: role, color name, HEX, why it stays stable.
• Variable layer: column/topic, color name, HEX, rotation rule.
• Template rules: cover, carousel, article header, quote card, divider.
• Publishing rules: cadence, rotation, special issues, fatigue limits.

If the user has only one post, use xxd-palette-applier unless they explicitly want a repeatable series.

xxd-data-viz

Purpose

Use this skill when colors must encode data. It should not turn a poster palette into a chart palette; it must choose colors by data meaning, distinguishability, ordering, and accessibility.

Pain Points This Solves

• Attractive palettes fail charts because categories are not distinct or values are not ordered by lightness.
• Designers mix categorical, sequential, and diverging color logic in one chart.
• Chart color often relies on hue alone, which weakens accessibility and makes legends harder to read.

Data Contract

• Use the bundled references inside this skill:
  • references/chinese-color-master-list.md: full 742-color Markdown source list.
  • references/chinese-color-harmony.csv: complete machine-readable harmony table for all 742 colors.
  • references/chinese-color-harmony.md: Markdown version of the same harmony relationships.
• Do not treat all harmony colors as chart-ready; validate distinctness or ordering for the chart mode.
• Do not rely on hue alone. Add label, order, pattern, stroke, marker shape, direct labeling, or interaction guidance when needed.

Chart Mode Workflow

1. Identify data meaning before picking colors:
   • Categorical: unrelated groups.
   • Sequential: low to high values.
   • Diverging: two directions around a meaningful midpoint.
   • Highlight: one or two emphasized series against quiet context.
   • Dashboard semantic: success, warning, danger, info, selected, neutral.
2. Choose selection criteria:
   • Categorical: maximize hue and lightness separation.
   • Sequential: monotonic lightness is more important than poetic harmony.
   • Diverging: balance perceived strength on both sides and reserve a neutral midpoint.
   • Highlight: keep background series quiet and the target unmistakable.
3. Build the palette from project colors only.
4. Add chart implementation details:
   • Background/grid/axis color.
   • Legend or direct labels.
   • Hover and selection color.
   • Missing data and disabled series.
5. If requested, output ECharts, D3, Chart.js, or CSV arrays.

Output Shape

• Data context: chart type, series count, background, data meaning.
• Mode decision: categorical, sequential, diverging, highlight, or semantic.
• Palette table: order or series, color name, HEX, role, reason.
• Usage rules: legend, labels, grid, hover, selection, missing data.
• Accessibility notes: where labels, markers, strokes, or patterns are required.
• Optional code in the requested chart format.

For charts with more than 12 categories, recommend grouping, sorting, filtering, or interaction rather than forcing more colors.

xxd-existing-design-audit

Purpose

Use this skill when the user is not starting from zero. It should preserve what is working, identify the real color problems, and convert the palette into a cleaner Chinese traditional color system.

Pain Points This Solves

• Existing designs often contain duplicate accents, hardcoded near-matches, and unclear role ownership.
• A full redesign can destroy brand recognition when a conservative repair would be better.
• Designers need to know whether to keep, merge, replace, or remove colors, not just see nearest matches.

Data Contract

• Use the bundled references inside this skill for replacements:
  • references/chinese-color-master-list.md: full 742-color Markdown source list.
  • references/chinese-color-harmony.csv: complete machine-readable harmony table for all 742 colors.
  • references/chinese-color-harmony.md: Markdown version of the same harmony relationships.
• Separate user input colors from nearest traditional matches.
• Preserve brand recognition unless the user asks for a full redesign.
• For screenshots, only give exact matches when actual sampled HEX values are available; otherwise describe likely issues and request sampling for precision.

Audit Workflow

1. Inventory the current palette:
   • Extract HEX values or list provided values.
   • Assign current roles: background, text, CTA, accent, border, status, chart, decoration.
   • Identify repeated near-colors and orphan colors with no clear role.
2. Diagnose root causes:
   • Too many accents.
   • Low contrast or unclear reading hierarchy.
   • Similar colors doing different jobs.
   • Same job using different colors.
   • Brand mood mismatch.
   • Light/dark mode mismatch.
   • Decorative color competing with function.
3. Map each input color to 1 to 3 nearest traditional colors.
4. Choose a repair level:
   • Conservative: only replace failures and near-duplicates.
   • Balanced: preserve recognition but rebuild roles.
   • Full system: create a traditional-color system when requested.
5. Assign actions: keep, merge, replace, remove, or reserve for accent.
6. Recommend the next skill only after the repair path is clear.

Output Shape

• Current diagnosis: specific, non-judgmental, tied to roles.
• Inventory table: input HEX, current role, problem, nearest traditional color, confidence.
• Repair plan: keep, merge, replace, remove, or reserve.
• Final role palette: role, color name, HEX, usage.
• Migration notes: CSS/Figma/token names if relevant.
• Next step: xxd-accessible-color, xxd-ui-token, xxd-brand-system, or xxd-palette-applier.

Do not recommend a complete rebuild when a focused repair solves the problem.

xxd-palette-applier

Purpose

Use this skill after a palette exists. Its job is to decide where each color goes, how much area it gets, and what it is not allowed to do.

Pain Points This Solves

• A palette looks good as swatches but fails once placed into a real layout.
• Designers often overuse the most beautiful color, making CTA, title, decoration, and background compete.
• Different surfaces need different placement logic; a poster rule should not be copied directly into a UI or PPT deck.

Data Contract

• Use the bundled references inside this skill:
  • references/chinese-color-master-list.md: full 742-color Markdown source list.
  • references/chinese-color-harmony.csv: complete machine-readable harmony table for all 742 colors.
  • references/chinese-color-harmony.md: Markdown version of the same harmony relationships.
• If a palette came from outside the project, map its HEX values to nearest traditional colors before final placement.
• Do not add colors unless repairing a real failure; explain every replacement.
• If the user provides a screenshot or layout description, diagnose the current hierarchy before suggesting placement.

Surface-Specific Workflow

1. Identify the surface and the primary reading path:
   • Poster or cover: first glance, title, secondary text, signature/detail.
   • Website or app: canvas, surface, text, action, state, focus.
   • PPT or editorial: page rhythm, headline, body, callout, diagram.
   • Packaging: front panel, product name, variant, legal text, seal, side panel.
2. Convert colors into job roles:
   • Ground: large quiet fields.
   • Content: title, body, label, caption.
   • Action: CTA, link, selected state, active object.
   • Rhythm: section bands, dividers, cards, repeated structure.
   • Detail: ornament, number, badge, stamp, small highlight.
3. Set a hierarchy ladder. The strongest contrast belongs to the most important message, not the prettiest color.
4. Assign area ratios:
   • Large field: 50% to 75%.
   • Structure and content: 15% to 35%.
   • Accent: 3% to 10%.
   • Detail: under 3%.
5. Add placement constraints for the specific surface.
6. List the misuse cases that would break the design.

Output Shape

• Surface diagnosis: what this layout needs from color.
• Role map: role, color name, HEX, component or area, ratio.
• Reading path: where the eye lands first, second, third.
• Placement rules: surface-specific instructions, not generic color labels.
• Misuse checklist: 3 concrete failures to avoid.
• Follow-up: accessibility, token, brand, or print skill if needed.

If the palette cannot safely support the requested layout, say which role is missing before inventing fixes.

xxd-palette-builder

Purpose

Use this skill when the problem is choice. The user may like one color, a mood, or a reference, but still needs a small number of usable palettes with clear roles and tradeoffs.

Pain Points This Solves

• Designers get too many attractive swatches and still do not know which combination is safest.
• Harmony tables are useful, but users need role assignment: main, support, neutral, accent, warning, and background.
• Chinese traditional colors can become decorative quickly unless proportion and surface risk are decided early.

Data Contract

• Load the bundled references/chinese-color-harmony.csv before recommending combinations.
• Use references/chinese-color-master-list.md as the complete 742-color Markdown source list.
• Use references/chinese-color-harmony.md when a Markdown preview of the same harmony relationships is easier to inspect.
• Use the harmony columns selectively: 同类色, 邻近色, 互补色, 分裂互补, 三角色, 四角色, 冷暖对照, 明色搭配, 暗色搭配, 灰调搭配, 中性色搭配, 主色, 辅色, and 点缀色.
• Every recommended HEX must exist in the current 742-color data.
• If the user gives an outside HEX, map it to the nearest project color and say it is a match, not a source color.
• Prefer one strong recommendation over showing every possible harmony relation.

Palette Decision Workflow

1. Classify the anchor:
   • Existing color or HEX: preserve recognition first.
   • Mood or adjectives: run a brief-like translation before picking.
   • Surface: choose by use case, not by beauty alone.
2. Pick a palette strategy:
   • Reliability: adjacent, gray-toned, neutral, and high readability.
   • Identity: one recognizable traditional anchor plus restrained support.
   • Contrast: complementary or split-complementary only when the design needs energy.
   • Series: stable neutrals plus rotating accents.
3. Build 1 to 3 options, each with a job:
   • Safe option: least likely to break layout or readability.
   • Character option: strongest Chinese traditional signal.
   • Contrast option: more memorable, higher risk.
4. Assign roles before presenting colors. Never output unordered swatches.
5. Add ratios and a usage warning for each option.
6. Select one final recommendation unless the user explicitly wants alternatives.

Output Shape

For each palette:

• Palette name and best use case.
• Role table: role, color name, HEX, ratio, source relation, reason.
• Surface notes: background, text, CTA, accent, border, decoration, or packaging panel.
• Risk note: contrast, dark mode, print drift, over-saturation, cultural cliche, or weak hierarchy.
• Final pick: one palette with why it wins.
• Next skill: usually xxd-palette-applier, xxd-ui-token, xxd-accessible-color, or xxd-print-packaging.

Do not explain color theory unless it changes the recommendation.

xxd-print-packaging

Purpose

Use this skill when traditional colors must leave the screen. It should plan color for physical hierarchy, material behavior, production risk, and product-series recognition.

Pain Points This Solves

• HEX colors do not guarantee printed results; CMYK conversion, spot color, substrate, coating, and lighting can change the look.
• Packaging must balance shelf recognition, information hierarchy, variant systems, and small-type readability.
• Cultural products often overuse "traditional" colors without production rules, making the result either dull or noisy.

Data Contract

• Use the bundled references inside this skill:
  • references/chinese-color-master-list.md: full 742-color Markdown source list.
  • references/chinese-color-harmony.csv: complete machine-readable harmony table for all 742 colors.
  • references/chinese-color-harmony.md: Markdown version of the same harmony relationships.
• Include HEX for digital reference.
• Include CMYK only when available from the project data or user-provided production specs.
• If CMYK or spot specifications are unavailable, say the color must be proofed with printer profiles or physical proofs.
• Do not promise exact print output from HEX alone.

Packaging Workflow

1. Identify production context:
   • Category: food, tea, fragrance, book, cultural product, stationery, gift, apparel, cosmetics.
   • Price position: mass, boutique, premium, ceremonial.
   • Material: uncoated paper, coated paper, cloth, ceramic, metal, plastic, wood, glass, label stock.
   • Finish: matte, gloss, foil, emboss, deboss, spot UV, ink coverage.
   • Series count and shelf environment.
2. Build physical color roles:
   • Large base.
   • Product identity color.
   • Information text.
   • Seal, label, or ceremonial accent.
   • Variant or flavor color.
   • Back/side-panel support.
3. Balance shelf impact and restraint:
   • Use vivid traditional colors sparingly unless the category requires fast recognition.
   • Keep small text on stable, high-contrast pairs.
   • Reserve high-cost finishes for identity or seal moments.
4. Add production cautions:
   • Pale colors losing contrast.
   • Dark colors filling in.
   • Coated and metallic shifts.
   • Rich color fields showing banding or registration issues.
   • Small type and barcode contrast.
5. Provide proofing checklist before production.

Output Shape

• Packaging direction: category, price position, shelf strategy.
• Palette table: role, color name, HEX, ratio, material note, proofing risk.
• Panel plan: front, back, side, label, seal, variant.
• Series extension: how variants change while the master identity stays fixed.
• Production checklist: contrast, small type, material, finish, lighting, printer profile, proof approval.

Always state that final print color must be checked through proofs or printer profiles before production.

xxd-ui-token

Purpose

Use this skill when traditional colors need to enter a product interface or design system. The output must be usable by both designers and developers, not just look poetic.

Pain Points This Solves

• Teams hand off HEX values without semantic roles, so developers hardcode colors inconsistently.
• Primitive colors and component states get mixed together, making dark mode and future redesigns brittle.
• Chinese traditional colors often need accessible, restrained UI mapping instead of decorative naming.

Data Contract

• Use the bundled references inside this skill:
  • references/chinese-color-master-list.md: full 742-color Markdown source list.
  • references/chinese-color-harmony.csv: complete machine-readable harmony table for all 742 colors.
  • references/chinese-color-harmony.md: Markdown version of the same harmony relationships.
• Do not synthesize tints or alpha variants as standalone source colors unless the user explicitly asks for derived states.
• When contrast is uncertain, calculate it or route to xxd-accessible-color before claiming safety.
• Keep traditional color names as metadata; token names should be semantic.

Token Architecture

Create tokens in layers:

• Primitive reference: color.ref.ruban, color.ref.yuebai, or similar project-color aliases.
• Semantic role: color.bg.canvas, color.text.primary, color.action.primary.
• Component role: button.primary.bg, input.border.focus, tag.selected.bg only when requested.
• Mode mapping: light and dark values point to project colors, not inverted values.

Workflow

1. Identify interface context: content site, SaaS, dashboard, tool, mobile app, marketing page, or documentation.
2. Decide token scope:
   • Starter theme: core background, text, action, border, focus.
   • Product theme: states, alerts, selection, charts, overlays.
   • Migration: map existing CSS/Figma colors to semantic tokens first.
3. Build light mode around readability and white or pale canvas unless the product needs strong editorial contrast.
4. Build dark mode as its own mapping using project colors; do not invert.
5. Define state behavior for hover, active, selected, disabled, focus, success, warning, danger, and info only when needed.
6. Output in the requested format:
   • CSS variables by default.
   • Tailwind config when Tailwind is named.
   • Figma variables or token JSON when Figma/design tokens are named.

Output Shape

• Token table: token, light value, dark value, Chinese color name, source role.
• Code block in the requested format.
• Component map: button, link, surface, input, selection, focus, alerts.
• Handoff notes: which tokens are stable, which are optional, and which pairs need contrast verification.
• Migration notes when the user provides existing colors.

Avoid names like ancient-red as final tokens unless they are only primitive references with semantic aliases above them.