skills.rest
JangidVish
JangidVishCOMMUNITY
Explore all skills by this author →
GitHub

Design DNA

Generate a Design DNA Document with visual direction, color, typography, and layout rules.

Updated May 19, 2026
Search Tags:#typography#accessibility#layout#visual design#color system#design direction#component style
One-click install
npx skills add https://github.com/JangidVish/Claude-UI-UX-Skill --skill design-dna-jangidvish
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Design DNA
Source: https://github.com/JangidVish/Claude-UI-UX-Skill/tree/main/uiux-desig-dna
Command: npx skills add https://github.com/JangidVish/Claude-UI-UX-Skill --skill design-dna-jangidvish

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill defines a project's visual identity, color system, typography, and layout rules to ensure a premium, human-designed look before any UI is generated.

Core Features & Use Cases

  • Visual Design Direction: Develop a clear visual strategy based on project brief and UX strategy.
  • Color System: Define a disciplined color palette that aligns with the project's brand and goals.
  • Typography: Establish a consistent typography direction for headings, body text, and labels.
  • Layout and Spacing: Define grid systems, container widths, and spacing rules for UI components.
  • Component Style: Establish a style for buttons, cards, inputs, navigation, and other UI elements.
  • Imagery and Icons: Define the style and usage of photography, illustrations, and icons.
  • Motion Principles: Establish motion principles for page transitions, hover states, and animations.
  • Accessibility: Ensure design rules are accessible, with sufficient contrast and clear focus states.
  • Anti-AI Design Rules: Include rules to avoid common AI-generated UI patterns.
  • Use Case: After completing the Client Discovery and UX Strategy Skills, use this Skill to create a Design DNA Document that sets the foundation for all subsequent UI design work.

Quick Start

Run the 'Design DNA' skill to generate the visual design direction for your project.

Frequently Asked Questions about Design DNA

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

FAQPage Schema
How do I create a visual design direction for a web project?▼

To create a visual design direction, you need a structured Design DNA document outlining visual positioning, color system, typography, layout, component styles, and motion principles based on your project brief and UX strategy.

What is a Design DNA document and what does it include?▼

A Design DNA document defines a project's visual identity and includes a disciplined color palette, typography rules, grid systems, component styles, imagery direction, motion principles, and accessibility standards to ensure a premium UI.

How do I establish a color system and typography rules before generating UI?▼

You establish a color system and typography rules by defining a disciplined color palette aligned with brand guidelines and setting consistent typography directions for headings, body text, and labels before any UI generation occurs.

Can I define component styles and layout spacing rules using a design direction skill?▼

Yes, you can define component styles and layout spacing rules by establishing grid systems, container widths, and specific styles for buttons, cards, inputs, and navigation elements within your visual design direction.

Does this design direction approach include accessibility and anti-AI design rules?▼

Yes, the design direction approach includes accessibility standards for sufficient contrast and clear focus states, alongside anti-AI design rules to help your project avoid common AI-generated UI visual patterns.

What inputs do I need to generate a comprehensive visual design strategy?▼

Generating a visual design strategy requires inputs from your project brief, UX strategy, and brand guidelines to ensure the resulting visual positioning, color system, and typography align with your overall goals.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

Define visual identity, brand language, and governance for projects.

Community
Advanced
fatihkanfatihkan
7

minimalist-ui

Define a frontend UI protocol enforcing ultra-minimal editorial styling across components.

Community
Advanced
NinaVerdeNinaVerde

Google Stitch MCP

Translate design references into Flutter UI code with Dart widgets.

Community
Intermediate
safzanpiranisafzanpirani
1

stitch-design-taste

Generate DESIGN.md design system specifications for Google Stitch UI generation.

Community
Advanced