Does this skill work with Tailwind CSS?

Absolutely. It provides specific Tailwind utility class examples for buttons, cards, and layouts tailored to each of the 12 archetypes.

Can I use multiple archetypes for one project?

Yes, this skill supports 'Archetype Blending,' allowing you to combine two or three archetypes (e.g., 70% Sage and 30% Caregiver) to create a more complex and unique brand personality.

How do I trigger a specific archetypal design in Claude Code?

You can use specific commands like '/archetypal-ui [archetype-name]' to have Claude generate a design system based on that specific psychological profile.

How do Jungian archetypes improve UI/UX design?

Archetypes provide a framework to ensure your design's colors, typography, and interactions align with a specific human motivation, making the interface feel more intuitive and emotionally resonant.

Jungian Archetypes for UI/UX

Name: Jungian Archetypes for UI/UX
Author: HermeticOrmus

byHermeticOrmus

•

设计工具

Translates Jungian psychological archetypes into cohesive UI/UX design systems, including Tailwind patterns, typography, and motion principles.

关于

This skill empowers Claude to move beyond generic frontend components by applying the 12 Jungian archetypes to user interface design. By identifying the core psychological drive of a product—whether it is the Hero's mastery, the Magician's transformation, or the Sage's wisdom—this skill provides specific visual languages, interaction patterns, and Tailwind CSS implementations. It is ideal for developers and designers looking to build emotionally resonant applications that align with brand identity and user motivation through structured design philosophies.

主要功能

Detailed guidelines for archetypal typography and spacing
Motion and animation principles mapped to psychological drives
Comprehensive design specs for 12 Jungian archetypes
Support for archetype blending to create nuanced brand personalities
Ready-to-use Tailwind CSS component patterns
2 GitHub stars

使用场景

Refining micro-interactions and animations to evoke specific emotional responses
Building brand-specific landing pages that resonate with a target user persona
Developing cohesive design systems for specialized SaaS platforms

关于

主要功能

Detailed guidelines for archetypal typography and spacing
Motion and animation principles mapped to psychological drives
Comprehensive design specs for 12 Jungian archetypes
Support for archetype blending to create nuanced brand personalities
Ready-to-use Tailwind CSS component patterns
2 GitHub stars

使用场景

Refining micro-interactions and animations to evoke specific emotional responses
Building brand-specific landing pages that resonate with a target user persona
Developing cohesive design systems for specialized SaaS platforms