# Design

> Use this skill when the user is designing any visual system, UI, graphic, layout, brand asset, or interface and needs structured, high-quality, communication-first design decisions across typography, layout, color, imagery, and UX.

- Skill: `saranskumar/design` (Agent Skill, multi-file: 9 files)
- Install (CLI): `npx skillmds@latest add saranskumar/design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/saranskumar/design/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: saranskumar (https://skillmd.com/u/saranskumar)
- Updated: 2026-08-19
- Page: https://skillmd.com/skills/saranskumar/design

---


# Goal

Design is the transformation of information into something:
- digestible
- clear
- effective
- visually structured

Design is not decoration.
Design is communication, structure, and business intent.

# When to Use

Use this skill when:
- creating UI or UX screens
- designing dashboards, apps, or websites
- building brand visuals
- designing social posts, PDFs, or layouts
- choosing typography, colors, or layout systems
- improving visual clarity or hierarchy
- reviewing or refining design quality

# Core Design Philosophy

Design equals communication, structure, and intent.

Every design must answer:
- what is being communicated
- to whom
- in what context
- what action should be taken

If these are unclear, the design will fail regardless of aesthetics.

# Instructions

1. Define the problem:
   - audience
   - message
   - medium
   - goal
2. Structure the information:
   - primary content
   - secondary content
   - remove unnecessary elements
3. Define the layout system:
   - grid
   - spacing
   - alignment
4. Define the typography system:
   - font types based on purpose
   - hierarchy for heading, body, and support text
5. Define the color system:
   - contrast levels
   - palette
   - emphasis colors
6. Refine the visual system:
   - imagery
   - spacing
   - alignment consistency
7. If you need more depth, consult:
   - `references/typography.md`
   - `references/layout.md`
   - `references/color.md`
   - `references/ux.md`
   - `references/production.md`

# Core Design Pillars

1. Communication
2. Hierarchy
3. Structure
4. Typography
5. Contrast
6. Context
7. Business relevance

# Layout Rules

- Always use a grid system.
- Align elements consistently.
- Group related items.
- Use whitespace intentionally.
- Avoid random placement.

Good layout test:
If you remove colors and images, the structure should still make sense.

# Typography Rules

## Font types

- Serif: editorial, traditional, readable
- Sans-serif: modern, UI, digital
- Slab serif: bold headlines
- Script: short expressive accents only
- Decorative: headlines only, never body text

## Readability

- Never use decorative fonts for paragraphs.
- Avoid script fonts for long text.
- Ensure font size fits the medium.
- Maintain spacing and line height.

## Usage rules

- Limit font families to one or two.
- Create clear hierarchy.
- Match tone to brand and message.

## Variable fonts

- Use for flexibility in UI.
- Reduce multiple font file loads.
- Control weights intentionally.

## Licensing

- Verify commercial-use rights.
- Never use personal-use fonts in production.
- Track font licenses.

# Color Rules

## Contrast

- High contrast: strong, urgent, bold
- Low contrast: soft, elegant, calm

## Usage

- Use color to guide attention, not just to decorate.

## Medium awareness

- RGB for screens
- CMYK for print
- Expect color shifts in print

# Imagery Rules

- Images must support the message.
- Avoid cluttered visuals.
- Maintain readability over images.
- Use cropping and overlays intentionally.

# Hierarchy Rules

- Define visual priority.
- The user should know where to look first.
- Use size, weight, contrast, and spacing to guide attention.

# UX And UI Rules

- Prioritize clarity over style.
- Reduce friction.
- Design for scanning.
- Maintain consistency.
- Design for responsiveness.

# Business Context

Design exists to:
- improve communication
- support branding
- increase clarity
- improve conversion

Every design must align with:
- business goals
- product goals
- user goals

# Constraints

- Do not design randomly.
- Do not prioritize aesthetics over clarity.
- Do not overuse fonts or colors.
- Do not ignore medium differences such as print versus digital.
- Do not break hierarchy.

# Output Format

1. Design Goal
2. Target Audience
3. Information Hierarchy
4. Layout System
5. Typography Plan
6. Color Strategy
7. Visual Strategy
8. UX Considerations
9. Final Design Guidelines

# Examples

## Bad

- too many fonts
- unclear hierarchy
- random alignment
- low readability

## Good

- clear structure
- minimal fonts
- strong hierarchy
- consistent spacing