Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub Β· AI
Distinctive Design Systems
Patterns for creating design systems with personality and distinctive aesthetics. Covers aesthetic documentation, color token architecture, typography systems, layered surfaces, and motion. Use when building design systems that go beyond generic templates. Triggers on design system, design tokens, aesthetic, color palette, typography, CSS variables, tailwind config.
skill openclawclawhub Free
Patterns for creating design systems with personality and distinctive aesthetics. Covers aesthetic documentation, color token architecture, typography systems, layered surfaces, and motion. Use when building design systems that go beyond generic templates. Triggers on design system, design tokens, aesthetic, color palette, typography, CSS variables, tailwind config.
β¬ 0 downloads β
0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- README.md, SKILL.md
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
New install
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete.
Upgrade existing
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.0.0
Provenance
- Publisher
- wpank
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
Distinctive Design Systems
Create design systems with personality that users remember. Move beyond generic templates to build cohesive, emotionally resonant visual languages.
When to Use
Building a new product that needs distinctive visual identity Creating design tokens for Tailwind + CSS variables Documenting aesthetic decisions for consistent implementation Want to go beyond default Bootstrap/Tailwind aesthetics
Core Philosophy
A distinctive design system starts with aesthetic documentation, not color pickers. 1. Define the vibe β What does this look and feel like? 2. Gather references β Mood boards, inspiration, examples 3. Document emotions β What should users feel? 4. Extract tokens β Colors, typography, spacing, motion 5. Build components β Implement the documented vision
Pattern 1: Aesthetic Foundation
Document the vibe before writing CSS:
Example: Retro-Futuristic
The Vibe: Crystalline, luminescent, slightly melancholicβhopeful hues tempered by muted gradients, sharp typography, and CRT textures. Everything references a primary "Crystal" cyan tone. Inspirations: Retro console boot sequences β Futuristic orderly menus JRPG UI panels β Luminous data displays, overlay HUDs Sci-fi terminal interfaces β Elegant decay, monospaced readouts EmotionHow It's AchievedPrecisionSharp typography, tabular numerics, grid patternsNostalgiaCRT scanlines, pixel grain, retro-era color paletteHopeFloating cyan orbs, gentle animations, luminous accentsMelancholyDark gradients, muted backgrounds, soft focus layers
Example: Warm Neutral Cyberpunk
The Vibe: Warm neutral cyberpunk with a terminal feel. Unlike harsh green-on-black hacker aesthetics, uses warm tan/beige as the foundation, creating approachable yet technical atmosphere. Key Differentiation: Most dark UIs go cold with neon accents. This approach uses warmth as its secret weaponβthe neutral tan base creates visual comfort while emerald accents maintain the futuristic aesthetic. EmotionHow It's AchievedTechnical credibilityTerminal typography, mono fonts, glow effectsApproachabilityWarm neutral base instead of cold blackPremium qualityGlass panels, backdrop blur, layered shadowsFuturistic trustCircuit patterns, hex grids, scanlines
The Three-Layer System
CSS Variables (source of truth) β Tailwind Config (utility classes) β TypeScript Tokens (runtime access)
CSS Variables
:root { /* Base tones (use in rgba()) */ --tone-void: 2, 7, 18; --tone-midnight: 6, 12, 32; --tone-cyan: 76, 204, 255; /* Semantic colors (HSL) */ --primary: 216 90% 68%; --success: 154 80% 60%; --destructive: 346 80% 62%; /* Effect variables */ --glow-primary: 216 90% 68%; --glass-bg: 33 18% 71% / 0.8; }
Tailwind Config
// tailwind.config.ts export default { theme: { extend: { colors: { background: 'hsl(var(--background))', foreground: 'hsl(var(--foreground))', primary: { DEFAULT: 'hsl(var(--primary))', foreground: 'hsl(var(--primary-foreground))', }, // Tone palette for rgba usage tone: { void: 'rgb(var(--tone-void))', cyan: 'rgb(var(--tone-cyan))', }, }, }, }, };
TypeScript Tokens
// styles/design-tokens.ts export const colors = { primary: 'hsl(var(--primary))', success: 'hsl(var(--success))', // For rgba usage toneCyan: 'rgb(var(--tone-cyan))', }; export const withOpacity = (token: string, opacity: number) => token.replace('rgb(', 'rgba(').replace(')', `, ${opacity})`);
Font Stack
fonts: { display: ['Orbitron', 'system-ui'], // Headings, labels mono: ['Share Tech Mono', 'monospace'], // Metrics, code sans: ['Inter', 'system-ui'], // Body fallback }
Type Scale with Multiplier
:root { --typo-scale: 0.88; /* Responsive multiplier */ --typo-page-title: calc(1.75rem * var(--typo-scale)); --typo-section-title: calc(1rem * var(--typo-scale)); --typo-metric-lg: calc(1.75rem * var(--typo-scale)); --typo-metric-md: calc(0.96rem * var(--typo-scale)); --typo-body: calc(0.9rem * var(--typo-scale)); } @media (min-width: 640px) { :root { --typo-scale: 1; } }
Typography Patterns
Magazine-Style Numbers: .metric { font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } Labels: .label { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; font-size: 0.72rem; }
Layer Hierarchy
LayerNamePurpose0AmbientFull-viewport gradients, slow motion1Glow FieldFloating orbs, atmospheric effects2TextureCRT scanlines, grain, filters3PanelsElevated cards, section headers4ContentMetrics, charts, tables5DetailsNested sub-panels, rows
Surface Component
interface SurfaceProps { layer?: 'panel' | 'tile' | 'chip' | 'deep' | 'metric'; children: React.ReactNode; } export function Surface({ layer = 'tile', children }: SurfaceProps) { return ( <div className={cn( 'rounded-lg backdrop-blur-sm', layerStyles[layer] )}> {children} </div> ); } const layerStyles = { panel: 'bg-tone-cadet/40 border border-tone-jordy/10', tile: 'bg-tone-midnight/60 border border-tone-jordy/5', chip: 'bg-tone-cyan/10 border border-tone-cyan/20', deep: 'bg-tone-void/80', metric: 'bg-tone-cadet/20', };
Timing Scale
:root { --transition-fast: 0.15s; --transition-default: 0.2s; --transition-medium: 0.25s; --transition-slow: 0.3s; }
Animation Patterns
// tailwind.config.ts keyframes: { 'shimmer': { '0%': { backgroundPosition: '200% 0' }, '100%': { backgroundPosition: '-200% 0' }, }, 'pulse-glow': { '0%, 100%': { opacity: '1', transform: 'scale(1)' }, '50%': { opacity: '0.5', transform: 'scale(1.05)' }, }, 'slide-in': { '0%': { opacity: '0', transform: 'translateY(10px)' }, '100%': { opacity: '1', transform: 'translateY(0)' }, }, 'value-flash': { '0%': { textShadow: '0 0 8px currentColor' }, '100%': { textShadow: 'none' }, }, }, animation: { 'shimmer': 'shimmer 1.5s ease-in-out infinite', 'pulse-glow': 'pulse-glow 1.8s ease-in-out infinite', 'slide-in': 'slide-in 0.2s ease-out', 'value-flash': 'value-flash 0.6s ease-out', }
Glass Panel
.glass-panel { background: linear-gradient(180deg, hsl(var(--glass-bg) / 0.95) 0%, hsl(var(--glass-bg) / 0.85) 100% ); backdrop-filter: blur(16px); border: 1px solid hsl(var(--glass-border)); box-shadow: 0 4px 16px hsl(var(--glass-shadow)), 0 0 0 1px hsl(var(--glass-border) / 0.6) inset, 0 0 20px hsl(var(--glow-primary) / 0.1); }
Neon Border
.neon-border { border: 1px solid hsl(var(--brand-600) / 0.4); box-shadow: 0 0 10px hsl(var(--glow-primary) / 0.3), 0 0 20px hsl(var(--glow-primary) / 0.2), inset 0 0 10px hsl(var(--glow-primary) / 0.1); }
Proven Aesthetic Directions
AestheticInspirationsEmotionsRetro-futuristic glassmorphismRetro console UIs, JRPG HUDs, sci-fi terminalsPrecision, nostalgia, hopeWarm neutral cyberpunkTerminal UIs, sci-fi film interfacesCredibility, approachabilityMagazine-style financialTrading platforms, data dashboardsTrust, clarity, sophistication
Related Skills
Meta-skill: ai/skills/meta/design-system-creation/ β Complete design system workflow design-system-components β CVA component patterns and Surface primitives loading-state-patterns β Skeleton loaders matching your aesthetic
NEVER Do
Use pure black (#000) as base β Always use tinted blacks Use pure white (#fff) for text β Use tinted whites Use Inter/Roboto for headings β Display fonts create distinctiveness Use default Tailwind colors β Define your own palette Skip backdrop-filter blur β Glass panels need blur Apply decorative patterns to readable content β Background only Use high-saturation colors without opacity β Modulate with rgba() Hardcode font sizes β Use tokens with scale multiplier Skip the aesthetic documentation β Vibes before code
File Structure
styles/ βββ globals.css # CSS variables, base styles βββ design-tokens.ts # TypeScript token exports βββ theme.css # Component patterns βββ patterns/ βββ glass.css βββ neon.css βββ backgrounds.css tailwind.config.ts # Token integration
Quick Reference
/* 1. Define CSS variables */ :root { --tone-primary: 76, 204, 255; --primary: 200 90% 65%; } /* 2. Configure Tailwind */ colors: { primary: 'hsl(var(--primary))', tone: { primary: 'rgb(var(--tone-primary))' }, } /* 3. Use in components */ <div className="bg-primary text-tone-primary/80">
Category context
Agent frameworks, memory systems, reasoning layers, and model-native orchestration.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
2 Docs
- SKILL.md
- README.md