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.

주요 기능

01Detailed guidelines for archetypal typography and spacing

02Motion and animation principles mapped to psychological drives

03Comprehensive design specs for 12 Jungian archetypes

04Support for archetype blending to create nuanced brand personalities

05Ready-to-use Tailwind CSS component patterns

062 GitHub stars

사용 사례

01Refining micro-interactions and animations to evoke specific emotional responses

02Building brand-specific landing pages that resonate with a target user persona

03Developing cohesive design systems for specialized SaaS platforms

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hermeticormus/libreuiux-claude-code jungian-archetypes

For use in Claude.ai and ChatGPT

Download Skill