设计与多媒体

normalize

aladicf/better-web-ui

Audit and realign UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system.

  • 569 次安装
  • 46 星标
  • 收录于

安装命令

npx skills add https://github.com/aladicf/better-web-ui --skill normalize

SKILL.md

Analyze and redesign the feature to perfectly match our design system standards, aesthetics, and established patterns.

Normalization is not just visual cleanup. It is restoring the feature to the system so spacing, type, color, interaction, and hierarchy all speak the same language again.

Consult the design-system alignment reference for tokens vs components vs patterns, drift, and when to normalize locally versus escalate to system work. Consult the interaction design reference when normalization includes restoring familiar patterns, improving target sizing, or removing bespoke interaction behavior from standard controls. Consult the legacy modernization reference when the feature lives inside a legacy system, mixed old/new flow, or partial migration where low-risk upgrade strategy matters as much as visual alignment.

MANDATORY PREPARATION

Users start this workflow with /normalize. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first.


Plan

Before making changes, deeply understand the context: