visual-design-system
CommunityCreate production-ready design systems for web
Design & Creative#typography#accessibility#design-system#responsive-design#css-variables#design-tokens#color-system
Authornazlicancaglar
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill converts inconsistent or static brand guidelines into a dynamic, tokenized visual design system that can be implemented reliably across web properties to ensure visual consistency, accessibility, and engineering-ready assets.
Core Features & Use Cases
- Defines a three-layer token architecture (primitive, semantic, component) and produces CSS custom properties ready for web implementation.
- Builds a modular typography scale, spacing system, breakpoints, border-radius and shadow scales, motion presets, and dark-mode token overrides.
- Includes accessibility guardrails such as WCAG contrast checks and reduced-motion support and serves use cases like onboarding a new client, standardizing multiple sites, or preparing a component library for development.
Quick Start
Use the visual-design-system skill to generate a complete token-based CSS :root block, semantic token map, and usage guidelines based on the brand values in shared/brand-config.md.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: visual-design-system Download link: https://github.com/nazlicancaglar/nova-workflow/archive/main.zip#visual-design-system Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.