skills.rest
Conradmaker
ConradmakerCOMMUNITY
Explore all skills by this author →
GitHub

ds-visual-design

Establishes unified UI design systems for color, spacing, depth, and typography.

Updated Apr 27, 2026
Search Tags:#icons#spacing#visual-design#color-system#depth#visual-hierarchy#anti-ai-slop
One-click install
npx skills add https://github.com/Conradmaker/copilot-cockpit --skill ds-visual-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ds-visual-design
Source: https://github.com/Conradmaker/copilot-cockpit/tree/main/.github/skills/ds-visual-design
Command: npx skills add https://github.com/Conradmaker/copilot-cockpit --skill ds-visual-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about ds-visual-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I establish a cohesive color system for UI design?▼

Establish a cohesive color system by defining a neutral foundation, building an accent ramp for semantic colors, and creating a dark-mode strategy to ensure visual coherence across all product surfaces.

What is anti-AI-slop in visual design and how do I prevent it?▼

Anti-AI-slop guardrails prevent generic, flat interfaces by applying craft guidelines and intentional visual hierarchy rules, ensuring your UI maintains distinctive depth cues and brand tone.

How do I use depth and spacing to improve visual hierarchy in dashboards?▼

Improve visual hierarchy in dashboards by applying depth cues for emphasis and using optical spacing corrections, which support legibility and create clear distinctions between different UI elements.

Does this visual design approach work for both marketing pages and product surfaces?▼

Yes, this visual design approach works for marketing pages and product surfaces by applying unified typography, spacing, and depth rules to maintain consistency across diverse UI layouts.

What's the best way to audit a UI screen for flat interfaces and weak visual coherence?▼

Audit a UI screen by applying visual design guidelines to select a palette, adjust depth for emphasis, and correct optical spacing, addressing weak visual coherence and flat interface issues.

Related Skills

Explore More Design & Creative Skills→
HuijiroHuijiro

impeccable-normalize

Audit and realign UI components to match design system tokens, spacing, and patterns.

Community
Advanced
Adelie-SquadAdelie-Squad
17

UI Designer Agent

Create UI systems with design tokens, component libraries, and handoff notes.

Official
Advanced
abhay-ranaabhay-rana
2

design-principles

Enforce a 4px grid and typography hierarchy for enterprise UI design.

Community
Basic
waynesuttonwaynesutton
3

arrange

Assess UI layout and implement spacing systems for visual hierarchy.

Community
Intermediate