design

Codify UI/UX design principles into reusable guidance for design teams.

7|Updated Apr 9, 2026
One-click install
npx skills add https://github.com/fatihkan/badi --skill design-fatihkan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/fatihkan/badi/tree/main/.claude/skills/design
Command: npx skills add https://github.com/fatihkan/badi --skill design-fatihkan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design decision fatigue and inconsistent interfaces slow product progress. This skill codifies UI/UX practices into accessible, reusable guidance for teams.

Core Features & Use Cases

  • UI/UX principles coverage: typography, color systems, layout, accessibility, and responsive design.
  • Design system creation and governance across products.
  • Prototyping and usability guidance to iterate on interfaces before development.

Quick Start

Draft a cohesive onboarding screen design spec that aligns with the system's typography, color, and accessibility standards.

Frequently Asked Questions about design

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

FAQPage Schema
How do I create a cohesive UI design system for web and mobile interfaces?▼

Establish a UI design system by codifying typography, color systems, and accessibility standards into reusable guidance. This systematizes UI/UX principles across products to eliminate decision fatigue and ensure consistent mobile and web interfaces.

What is the best way to standardize typography and color systems across product teams?▼

Standardize typography and color systems by transforming UI/UX practices into accessible, reusable governance guidance. This mitigates design decision fatigue and prevents inconsistent interfaces, streamlining product progress across design teams.

How do I align an onboarding screen design spec with accessibility and UX principles?▼

Align an onboarding screen design spec by applying systematized typography, color, and accessibility standards. This ensures the interface meets UI/UX principles and adheres to established design system governance before entering development.

Can I use this design skill for prototyping and usability workflows?▼

Yes, you can use this skill for prototyping and usability workflows to iterate on interfaces before development. It provides actionable guidance to validate UI/UX principles and accessibility standards across web and mobile platforms.

Does this UI/UX design guidance require specific frameworks or dependencies?▼

No specific frameworks or dependencies are required. The UI/UX design guidance operates as runtime instructions loaded into context, needing only a YAML frontmatter with name and description in the SKILL.md file to activate.

Why does inconsistent interface design slow down product progress?▼

Inconsistent interface design slows product progress by causing design decision fatigue and lacking standardized UI/UX practices. Codifying typography, color theory, and accessibility into accessible guidance resolves this workflow bottleneck.