ds-visual-design
CommunityPolish UI with color, spacing, and depth.
AuthorConradmaker
Version1.0.0
Installs0
System Documentation
What problem does it solve?
UI design teams often struggle with inconsistent color systems, spacing, depth cues, typography decisions, and brand tone, which leads to flat interfaces and weak visual coherence.
Core Features & Use Cases
- Establishes a scalable color system (neutral foundation + semantic colors + dark mode strategy) to create cohesive surfaces.
- Defines spacing, depth, and typography rules to support legibility and visual hierarchy across product surfaces, dashboards, and marketing pages.
- Provides practical references and craft guidelines to prevent Anti-AI-Slop, ensuring distinctive and intentional visuals.
- Use case: When auditing a screen, apply the ds-visual-design guidelines to select a palette and adjust depth for emphasis and readability.
Quick Start
Apply these guidelines to the next UI screen by establishing a neutral base, defining an accent ramp, and tuning depth for hierarchy.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 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: ds-visual-design Download link: https://github.com/Conradmaker/copilot-cockpit/archive/main.zip#ds-visual-design 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.