visual-design

针对产品与品牌目标相契合的颜色、排版、间距与构图语言进行定义的视觉设计工作流程。当UX、交互、视觉或设计治理相关产物为主要交付成果时使用；切勿用于后端数据模型或部署流水线的决策。

SKILL.md

--- frontmatter

name: visual-design
description: "Visual design workflow for defining color, typography, spacing, and compositional language aligned with product and brand goals. Use when UX, interaction, visual, or design-governance artifacts are the primary deliverable; do not use for backend data-model or deployment pipeline decisions."

Visual Design

Trigger Boundary

•Use when visual hierarchy, consistency, or brand alignment is unclear.
•Do not use for interaction flow state logic; use interaction-design.
•Do not use for accessibility audit execution only; use accessibility-design.

Goal

Deliver coherent visual language that improves clarity and trust.

Shared Design Contract (Canonical)

•Use ../design-principles/references/design-governance-contract.md as the single schema and gate source.
•Track visual specs with VIS-SPEC-* IDs.
•Run machine validation: python3 ../design-principles/scripts/validate_design_contract.py --manifest <path/to/manifest.json>.

Inputs

•Brand direction and product context
•Existing UI artifacts and inconsistency reports
•Accessibility contrast and readability constraints

Outputs

•Visual spec set with VIS-SPEC-* IDs
•Typography, color, spacing, and hierarchy rules
•Component-level visual usage guidance

Workflow

•Define visual hierarchy objectives by task criticality.
•Build typography and spacing scales.
•Define color role system and usage constraints.
•Apply rules to representative screens.
•Validate readability and contrast compliance.

Quality Gates

•Visual hierarchy supports task prioritization.
•Spec set is consistent and reusable.
•Contrast and legibility pass required thresholds.
•Visual decisions map to principle and token systems.

Failure Handling

•Stop when visual rules rely on one-off overrides.
•Escalate when contrast or readability fails baseline gates.