AgentSkillsCN

Ui Design System Adherence

严格遵循UI设计系统

SKILL.md
--- frontmatter
title: UI Design System Adherence
tagline: Translate discovery insights into consistent, system-aligned UI guidance.
slug: ui-design-system-adherence
version: 0.1.0
authors:
  - AiDesigner Design Systems Guild
tags:
  - design-system
  - ux
  - frontend
visibility: private
estimated_duration_minutes: 60
required_tools:
  - design-toolkit
  - aidesigner-cli
related_artifacts:
  - aidesigner-core/templates/front-end-spec-tmpl.yaml
  - aidesigner-core/templates/front-end-architecture-tmpl.yaml
  - front-end/

Overview

Enforce design system rigor by guiding teams through translating discovery learnings into actionable UI specs. This Skill codifies AiDesigner’s front-end template, component governance, and accessibility checklists.

When to Use

  • •Preparing UI deliverables after completing discovery and inspiration sessions.
  • •Auditing an existing interface against the Nano Banana design system.
  • •Onboarding new designers to the project’s component library and rationale.

Workflow

  1. •Review discovery inputs
    • •Import journey insights and tokens generated by the Discovery Journey Skill.
    • •Map user needs to interface surfaces and interaction models.
  2. •Define experience pillars
    • •Document guiding principles, tonal direction, and key flows using aidesigner-core/templates/front-end-spec-tmpl.yaml.
    • •Align with product and engineering stakeholders before moving to components.
  3. •Component mapping
    • •Audit existing components in your project's component library for reuse.
    • •Define new variants or patterns only when gaps exist, capturing rationale in the component inventory table.
    • •Ensure accessibility requirements (WCAG AA minimum) are documented per component.
  4. •Interaction and state detail
    • •Capture responsive breakpoints, error/empty/loading states, and motion cues.
    • •Link to supporting prototypes or Figma files where available.
    • •Validate copy and localization guidance.
  5. •Handoff package
    • •(Note: bin/aidesigner ui export is planned but not yet implemented)
    • •Export the UI spec to your project's documentation directory.
    • •Notify engineering teams and pair with Architecture QA for implementation planning.

Checklists

  • • Principles and experience pillars confirmed with stakeholders.
  • • Component inventory updated with reuse decisions.
  • • Accessibility acceptance criteria documented.
  • • Interaction states covered across responsive breakpoints.
  • • Handoff bundle attached to tracking ticket or sprint board.

Tips

  • •Reference the Architecture QA & Tech Stack Governance Skill to align component decisions with technical constraints.
  • •Invite QA early to validate accessibility and localization impacts.
  • •Maintain a changelog for component updates to inform future Skills.

Next Steps

Transition to the Architecture QA & Tech Stack Governance Skill to verify the implementation plan preserves the design system commitments captured here.