ui-ux-creator

Guide UI/UX design for dark fantasy card battle games with color tokens and typography scales.

Updated Nov 27, 2025

Search Tags:#typography #ui #animations #ux #color-system #card-battle #dark-fantasy

Ready to run

npx skills add https://github.com/sunbreak-pro/original-card-battle --skill ui-ux-creator

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-ux-creator
Source: https://github.com/sunbreak-pro/original-card-battle/tree/main/.claude/skills/ui-ux-creator
Command: npx skills add https://github.com/sunbreak-pro/original-card-battle --skill ui-ux-creator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This design skill provides cohesive UI/UX guidelines to craft readable, atmospheric interfaces for dark fantasy card battle games, unifying visuals across screens and interactions.

Core Features & Use Cases

Color system and tokens for consistent theming across surfaces (base, depth-based, and accents).
Typography guidelines for display, body, and numeric data with scalable, readable hierarchy.
Card layout and interaction patterns for battle screens, including animation cues and feedback.
Design considerations for depth visualization, momentum, and psychological tension through minimal, purposeful UI.

Quick Start

Design the next battle screen UI using the provided color, typography, and animation guidelines.

Frequently Asked Questions about ui-ux-creator

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

FAQPage Schema

How do I design a cohesive color system for a dark fantasy card battle UI?▼

Design a dark fantasy card battle UI color system by defining consistent theming tokens across base, depth-based, and accent surfaces. This ensures cohesive visuals and accessible contrast across all game interfaces and interaction states.

What typography guidelines should I use for card battle game interfaces?▼

Typography guidelines for card battle game interfaces require a scalable, readable hierarchy for display, body, and numeric data. A structured typography scale ensures clear information communication and legibility across atmospheric dark fantasy screens.

How do I add animation patterns to battle card UI to convey psychological tension?▼

Add animation patterns to battle card UI through minimal, purposeful cues that visualize depth, momentum, and psychological tension. Interaction patterns provide clear user feedback, ensuring readable interfaces during combat sequences.

Can I use this design system for standard mobile game UI, or is it only for dark fantasy card battles?▼

This design system is specifically structured for dark fantasy card battle games. It uses targeted color tokens, typography scales, and interaction guidelines to ensure cohesive, atmospheric visuals and readable interfaces tailored to that genre.

What's the best way to structure card layout and interaction patterns for battle screens?▼

Structure card layout and interaction patterns for battle screens using provided design component guidelines. These patterns define animation cues and user feedback mechanisms, ensuring consistent implementation and cohesive visuals across combat interfaces.