Are the included design presets accessible?

Yes, all presets are built with accessibility-first principles, ensuring WCAG AA/AAA contrast ratios and readable typography scales.

Can I use this skill with an existing project?

Yes, the Design Preset System is designed to work with refactoring workflows to analyze your current UI and map styles to a chosen preset.

Which frameworks are supported by these presets?

The system provides native support for React Native styling and Next.js environments, specifically optimized for Tailwind CSS integration.

Can I mix elements from different presets?

While the system allows for hybrid token mapping, it is generally recommended to stick to one preset to maintain visual cohesion and consistent user experience.

Modular UI Design Presets

Name: Modular UI Design Presets
Author: apexscaleai

byapexscaleai

•

デザインツール

Applies curated design systems and tokens to React Native and Next.js applications using pre-configured aesthetic presets.

概要

The Design Preset System is a specialized Claude Code skill that enables developers to rapidly implement or switch between diverse design aesthetics—ranging from professional minimalism to experimental brutalism. By providing a comprehensive system of tokens for colors, typography, and spacing, it ensures visual consistency and accessibility across React Native and Next.js projects. Whether starting a greenfield project or refactoring an existing application, this skill automates the application of design philosophies like Glassmorphism, Neumorphism, and Bold Brutalism while maintaining production-grade quality and WCAG compliance.

主な機能

Built-in accessibility guidelines and contrast-checked color palettes
4 GitHub stars
Six distinct pre-configured design themes including Minimalist, Glass, and Brutalist styles
Smart switching logic to migrate existing applications between design systems
Automated token mapping for consistent colors, typography, and spacing scales
Support for both React Native StyleSheet and Next.js Tailwind CSS configurations

ユースケース

Rapidly prototyping multiple design directions for stakeholders using pre-built aesthetics
Establishing a professional-grade design foundation for cross-platform mobile and web apps
Modernizing legacy UI by refactoring components to a new, consistent design language

概要

主な機能

Built-in accessibility guidelines and contrast-checked color palettes
4 GitHub stars
Six distinct pre-configured design themes including Minimalist, Glass, and Brutalist styles
Smart switching logic to migrate existing applications between design systems
Automated token mapping for consistent colors, typography, and spacing scales
Support for both React Native StyleSheet and Next.js Tailwind CSS configurations

ユースケース

Rapidly prototyping multiple design directions for stakeholders using pre-built aesthetics
Establishing a professional-grade design foundation for cross-platform mobile and web apps
Modernizing legacy UI by refactoring components to a new, consistent design language