메뉴
Generate a complete design system (tokens, colors, typography, spacing scale) as JSON/CSS variables from a brief. Trigger phrases: creative/ui, design, system. Converted from Hermes-Skill (Yuno's mastery library).
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | creative/ui-design-system |
| trigger-words | ["creative/ui","design","system"] |
| description | Generate a complete design system (tokens, colors, typography, spacing scale) as JSON/CSS variables from a brief. Trigger phrases: creative/ui, design, system. Converted from Hermes-Skill (Yuno's mastery library). |
Dieser Skill triggert automatisch wenn Bastis Input nach Design-System/Tokens fragt. Auch ohne expliziten Aufruf — wenn die Trigger-Phrasen matchen, wird dieser Skill geladen.
Trigger-Keywords (deutsch + englisch): design system, design tokens, tokens, CSS variables, theme, brand identity, Komponenten-Standards, Brand-Identität, theme aufbauen, Token-Set, Spacing-Skala, Typography-Skala
Wenn Basti nach mehreren UI-Aspekten fragt (z.B. "komplettes UI mit Tokens + Components + Dashboard"), wird stattdessen ui-factory getriggert (orchestriert die ganze Chain).
Atom: Generates a complete, accessible design-system as JSON tokens + CSS variables from a brief. The foundation every other UI skill builds on.
brief: |
- Product type (SaaS, e-commerce, dashboard, blog, etc.)
- Mood/feel (clean, playful, serious, cozy, futuristic)
- Mode (light, dark, both)
- Brand colors (if any hex codes provided)
- Typography preference (sans, serif, mono, mixed)
- Accessibility target (WCAG AA, AAA)
3 deliverables:
tokens.json — Structured design tokens (Style Dictionary format)tokens.css — CSS variables ready to drop into any project (@import url('tokens.css'))tokens.d.ts — TypeScript types for IDE autocompletionParse the brief. Extract:
Generate token categories:
| Category | Tokens | Reasoning |
|---|---|---|
| Color | primary, secondary, accent, neutral.50-900, success/warning/error/info | Semantic + scale |
| Typography | font.family.sans/serif/mono, font.size.xs-6xl, font.weight.regular-bold, lineHeight.tight/relaxed | Fluid type with clamp() |
| Spacing | space.0-32 (4px base scale) | 4px or 8px grid |
| Radius | radius.none/sm/md/lg/xl/full | 0, 2, 6, 12, 24, 9999 |
| Shadow | shadow.xs/sm/md/lg/xl/2xl | Elevation scale |
| Motion | duration.fast/normal/slow, easing.default/in/out | 150/300/500ms, ease-in-out |
| Z-Index | z.dropdown/modal/toast/popover | Layering |
| Breakpoints | breakpoint.sm/md/lg/xl/2xl | 640/768/1024/1280/1536 |
Run contrast checks on all color combinations:
Report violations with suggested fixes:
❌ primary-500 on neutral-50: 2.8:1 (FAIL AA)
✅ Fix: use primary-700 on neutral-50: 6.2:1 (PASS AAA)
Generate all 3 deliverables in code-blocks.
Short README section showing how to import in different stacks:
<link rel="stylesheet" href="tokens.css">import './tokens.css' + tokens.json via Style Dictionarytailwind.config.js reads from tokens.jsonInput:
brief: |
Modern SaaS dashboard for developers.
Dark mode default.
Clean, minimal, slightly playful.
Brand color: #7C3AED (purple).
Sans-serif typography.
WCAG AA minimum.
Output: (abbreviated — full version in examples/saas-dashboard-dark.md)
// tokens.json
{
"color": {
"primary": {
"50": "#F5F3FF",
"500": "#7C3AED",
"900": "#4C1D95"
},
"neutral": {
"50": "#FAFAFA",
"900": "#0A0A0A"
},
"success": "#10B981",
"warning": "#F59E0B",
"error": "#EF4444",
"info": "#3B82F6"
},
"font": {
"family": {
"sans": "Inter, system-ui, sans-serif",
"mono": "JetBrains Mono, monospace"
},
"size": {
"xs": "clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem)",
"sm": "0.875rem",
"base": "1rem",
"lg": "1.125rem",
"xl": "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem",
"4xl": "2.25rem"
}
},
"space": {
"0": "0",
"1": "0.25rem",
"2": "0.5rem",
"3": "0.75rem",
"4": "1rem",
"6": "1.5rem",
"8": "2rem",
"12": "3rem",
"16": "4rem",
"24": "6rem"
},
"radius": {
"sm": "0.25rem",
"md": "0.5rem",
"lg": "0.75rem",
"xl": "1rem",
"full": "9999px"
}
}
/* tokens.css */
:root {
--color-primary-500: #7C3AED;
--color-primary-700: #6D28D9;
--color-neutral-50: #FAFAFA;
--color-neutral-900: #0A0A0A;
--font-sans: Inter, system-ui, sans-serif;
--font-size-base: 1rem;
--space-4: 1rem;
--radius-md: 0.5rem;
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
--duration-normal: 300ms;
}
#XXXXXX)13px)clamp() for fluid typography--font-size-base)| Mistake | Fix |
|---|---|
Using px for spacing instead of rem | Convert: 16px → 1rem (root font-size dependent) |
| Hardcoding colors in components | Reference --color-primary-500 always |
| Random hex codes without contrast check | Use ui-color-system first to validate |
| Skipping dark mode tokens | Generate light and dark variants, swap with [data-theme="dark"] |
claude-design — Die design-philosophische "Surface-First"-Doctrine. Lies das ZUERST wenn du nicht sicher bist welcher Surface-Type es ist (Monitor / Operate / Compare / Configure / Decide-Learn / Explore / Command-Inspect). ui-design-system liefert die Tokens, claude-design liefert die Composition-Regel.This skill is one of the atoms in the UI-Factory pattern:
Based on the KIMI K2 UI-Factory-Pattern (2026-06-30).
Converted from Hermes-Skill by Yuno. Original SKILL.md preserved in references/original-hermes.md.
Funny animal podcast creation assistant. Given a topic, automatically generates a comedic podcast video hosted by two animal "hosts." Full pipeline: character design, comedy script, character portraits, TTS voice + Seedance 2.0 video generation, subtitle/pop-text/sound-effect post-production. Trigger words: animal podcast, funny podcast, pet podcast, animal talk show, pet talk show.
Professional anime/2D art style generation skill. Covers 14 sub-styles (modern Japanese anime/moe, retro Japanese cel-shading, Japanese shonen, Japanese shojo, Ghibli, Makoto Shinkai, Chinese xianxia/ink wash, modern Chinese anime, Chinese 3D fantasy, Korean webtoon, Korean impasto, Western cartoon, chibi/moe, 2D cyberpunk) + 5 anti-failure iron laws + cross-style shared rules (character lock / facial proportion spec / stroke consistency / universal negative). Core capabilities: precise style targeting, consistent character identity, cross-style conversion. Trigger: "anime", "2D art", "manga", "illustration", "Japanese anime", "Chinese anime", "Korean webtoon", "webtoon", "Western cartoon", "ghibli", "shinkai", "ufotable", "trigger style", "cel-shading", "impasto", "chibi", "moe", "catgirl", "Chinese 3D fantasy", "xianxia", "ink wash", "hanfu character", "cyberpunk anime", "draw an anime character", "make an anime avatar", "anime character", "anime style". NOT for: photorealistic (use image agent default) / s
Specialized in anime/2D/character stylization for image generation and conversion. Covers Japanese, Chinese, Korean, and Western art style families. Uses provenance analysis to trace reference images' style DNA, performs a 10-dimension analysis → 3-dimension collapse to precisely lock the style's essence, then matches the optimal tool and prompt approach for generation. Trigger on: "anime-ify", "2D style", "convert to anime", "cel-shading", "ghibli style", "Korean watercolor", "fantasy 3D", "chibi", "Japanese anime style", "style conversion", "manga style", "character illustration", "anime style", "webtoon style", or any request involving converting content into a specific anime/2D art style. Key distinction: User requests generation or conversion to a specific anime/2D art style. Do NOT trigger for: photorealistic photography style, pure logo design, general image editing (crop/background removal etc.).
Audiobook creation assistant. Converts book text into multi-character narrated audio, supporting audiobook production, multi-character voiceover, novel narration, TTS voiceover, and read-aloud scenarios. Automatically identifies dialogue and narration, assigns a distinct voice to each character, intelligently adds pause markers, and generates natural, fluent audiobook audio. Trigger phrases: audiobook, read aloud, TTS book, multi-character voiceover, novel narration, book narration, voice acting, narration, 有声书, 朗读, 读书, 多角色配音, 小说朗读, 读书配音. Supports chapter-level generation — user confirms the first chapter, then remaining chapters continue sequentially.
Beat-sync video editing skill. Input music (URL / local file / AI-generated) + video or image assets, automatically performs energy-tension analysis → smart trimming → beat detection → beat-synced timeline generation → asset matching → ffmpeg concatenation, outputting a beat-synced video perfectly aligned to the music. Supports image slideshows, video clips, and mixed assets as input. Supports every-N-beat asset switching, automatic intro/chorus segmentation, user-annotated keypoints, and other beat-sync modes. Trigger words include: music beat sync, beat-sync editing, beat sync, beat-sync video, beat-synced editing, beat-sync video, music rhythm editing, rhythm beat sync, beat detection, edit to the beat, auto beat sync, music sync edit.
Video project push tool. Programmatically creates editing projects via Python scripts, with one-click push to JianyingPro or CapCut. Direct mode creates project files directly in the local JianyingPro/CapCut draft directory — open the app and start editing. Built on pyJianYingDraft (PyPI). Trigger words include: JianyingPro, CapCut, push, push to JianyingPro, capcut, export to JianyingPro.