skills.rest
marpme
marpmeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

i-normalize

Normalize UI elements to align with design system standards and patterns.

1|Updated Feb 6, 2025
Search Tags:#consistency#design system#design tokens#component alignment#ux improvement#ui normalization
One-click install
npx skills add https://github.com/marpme/stimmlage --skill i-normalize
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: i-normalize
Source: https://github.com/marpme/stimmlage/tree/main/.claude/skills/i-normalize
Command: npx skills add https://github.com/marpme/stimmlage --skill i-normalize

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures that a given feature or page adheres strictly to the established design system, resolving inconsistencies and improving overall user experience.

Core Features & Use Cases

  • Design System Adherence: Analyzes and modifies UI elements to match predefined design tokens, components, and patterns.
  • Consistency Enforcement: Identifies and corrects deviations in typography, color, spacing, and layout.
  • Use Case: You've developed a new user onboarding flow, but its visual style doesn't quite match the rest of the application. Use this Skill to automatically adjust the colors, fonts, and spacing to perfectly align with your company's design system.

Quick Start

Normalize the user profile page to match the design system.

Frequently Asked Questions about i-normalize

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I align a new UI page with an existing design system?▼

Design system adherence resolves inconsistencies by analyzing and modifying UI elements to match predefined design tokens, components, and patterns. It corrects deviations in typography, color, spacing, and layout to improve overall user experience and ensure visual consistency across new features.

Can I enforce design token consistency across a user onboarding flow?▼

You can normalize UI responsiveness and accessibility by systematically applying established design tokens and approved UI patterns. This process identifies and corrects layout deviations, ensuring the feature adheres strictly to the design system's accessibility and responsive behavior standards.

What is the best way to fix typography and spacing inconsistencies in a feature?▼

The best way to fix typography and spacing inconsistencies is to normalize the feature against your design system. This approach systematically identifies deviations and applies approved design tokens and patterns to strictly align the visual elements with your established standards.

Does UI normalization require predefined design tokens to work?▼

Yes, UI normalization requires predefined design tokens to work effectively because it relies on established standards to correct deviations. The process applies these specific tokens and approved UI patterns to systematically resolve inconsistencies in typography, color, and spacing.

Related Skills

Explore More Design & Creative Skills→
GyananoGyanano
5

normalize

Audit UI features against design system tokens and generate a normalization plan.

Community
Advanced
petbrainspetbrains
13

frontend-design-review

Review frontend UI/UX designs for accessibility and responsive behavior.

Official
Basic
Higashi-KotaHigashi-Kota

ui-theme

Generate CSS variables and Tailwind theme from JSON design tokens.

Community
Intermediate
mikeparcewskimikeparcewski
8

screenshot

Analyze UI screenshots for layout, color, typography, and design consistency.

Community
Intermediate