Background
Traditional design systems have heavily relied not only on standard UI/UX theories but also on arbitrary visual consistency (color palettes, padding values, etc.) or transient design trends. This introduced subjective bias when designing component naming conventions and visual hierarchies.
This project was initiated to validate a core hypothesis: "Can abstract philosophical frameworks (Yin-Yang and Wuxing) logically and precisely structure modern UI/UX design rules?"
Furthermore, it aimed to eliminate dependency on specific JavaScript frameworks to secure universal compatibility and establish a machine-friendly system easily interpreted within AI Agent environments.
Problem Solved
- Securing Objectivity in Design Decisions: Mapped Wuxing (the Five Elements)—which governs the cosmic order—to functional UI roles: Wood (Action), Fire (Danger), Earth (Surface), Metal (Border), and Water (Info). This eliminated subjective color choices and established a strictly rule-governed semantic token layer.
- Eliminating Framework Lock-in: Design systems dependent on a specific library cannot be reused when the underlying technology stack changes. By leveraging standard Web Components and Shadow DOM, I developed an isolated core system completely free from style interference, achieving seamless multi-framework compatibility.
- DX Innovation for AI Collaboration: Transformed the design system from a simple code repository into a machine-readable format by formalizing design token specifications and component behaviors into an 'Agent Skill Guide'. This establishes the foundational infrastructure enabling Large Language Models (LLMs) to fully comprehend system constraints and stroke dynamics to synthesize layouts automatically.
Technical Decisions
- Philosophy-Driven Architecture: Defined light mode (Yang) surfaces reflecting Hanji paper textures and deep dark mode (Yin) tones mimicking traditional ink fields based on Yin-Yang theory. Interaction motion guidelines were codified into interface physics modeled after cyclical generation (Sangsaeng Flow) and overcoming control (Sanggeuk Feedback).
- Web Components & Shadow DOM: Adopted to build immutable custom elements that exhibit identical behavior across any web environment (React, Vue, Vanilla JS) while ensuring absolute browser-level style isolation.
- Style Dictionary & Semantic Tokens: Established an automated build and transformation pipeline that converts atomic JSON data into Web CSS variables and cross-platform targets, ensuring stable version management for the v2.0.x product line.
- AI Agent Skill Integration: Anticipating the shift toward AI Agent-centric development ecosystems, I successfully verified frontend productivity enhancements by linking the design system's semantic scale and constraints directly with prompt structures.
🖋️ Project Journey: 'asharyu' Design System
Core Objective: Testing Philosophy as a Structural Rule
The ultimate goal of asharyu was a design experiment: Can we build a complete user interface system governed entirely by cosmic balance laws rather than arbitrary visual trends?
- The Spatial Order (Yin-Yang): Establishes the relationship between space and information. Yang rules light-mode surfaces inspired by Hanji texture, while Yin defines deep dark-mode ink fields.
- The Functional Order (Wuxing): Eliminates loose naming categories. Component behaviors are rigorously mapped to the elements, creating an organic hierarchy where every color and weight holds semantic purpose.
Technical Accomplishments & Strengths
1. True Universal Compatibility
Rather than tailoring systems for individual environments, asharyu provides a single, immutable source of truth written in standard Web Components. It treats React, Vue, and Angular merely as consumer environments, easily connecting via lightweight wrappers using the Adapter Pattern to deliver identical behavior everywhere.
2. Ready for the AI-Agent Era
By transforming design parameters into semantic JSON token layers and encapsulating the design system's behavioral logic into a concrete Agent Skill Guide, the system functions as an AI-native workspace. Autonomous coding agents can read these token schemas to generate layout modules that maintain exact design fidelity, bridging the gap between design theory and automated production.