skills.rest
SeemSeam
SeemSeamCOMMUNITY
Explore all skills by this author →
GitHub

visual-direction

Provide design direction for UI layout, typography, color, spacing, density, motion, and state design.

17|2|Updated Jun 2, 2026
Search Tags:#typography#layout#ui design#color#spacing#visual direction#brand fit
One-click install
npx skills add https://github.com/SeemSeam/agent-roles-spec --skill visual-direction-seemseam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-direction
Source: https://github.com/SeemSeam/agent-roles-spec/tree/main/roles/frontend-engineer/skills/visual-direction
Command: npx skills add https://github.com/SeemSeam/agent-roles-spec --skill visual-direction-seemseam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps improve the visual quality and consistency of user interfaces by providing targeted design direction.

Core Features & Use Cases

  • Visual Direction: Offers guidance on layout, typography, color, spacing, density, motion, and state design.
  • Design Intent: Delivers design intent to drive implementation and ensure brand fit.
  • Use Case: For a new dashboard UI, use this Skill to define layout, color schemes, and interaction states to achieve a cohesive design.

Quick Start

Run the visual-direction skill to get a design direction for your UI, including layout and color scheme suggestions.

Frequently Asked Questions about visual-direction

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

FAQPage Schema
How do I establish a consistent visual direction for a new UI dashboard?▼

To establish visual direction for a UI dashboard, define layout, color schemes, typography, spacing, and interaction states to ensure visual consistency and brand alignment.

What is included in UI design direction for layout and typography?▼

UI design direction includes targeted guidance on layout, typography, color, spacing, density, motion, and state design to improve visual quality and ensure brand fit.

How do I ensure brand fit when defining UI color schemes and interaction states?▼

Ensure brand fit by applying targeted visual direction to your color schemes, typography, and interaction states, translating design intent into a cohesive UI implementation.

Can I use this visual direction guidance for UI development workflows without external dependencies?▼

Yes, you can use this visual direction guidance in UI development workflows without external dependencies to define layout, color schemes, and interaction states for cohesive design.

What is the best way to define UI layout and color schemes for distinctive visual quality?▼

The best way to achieve distinctive visual quality is to apply structured design direction covering layout, typography, color, spacing, density, motion, and state design.

When do I need visual direction for UI spacing, density, and motion design?▼

You need visual direction for UI spacing, density, and motion design when building a new interface and requiring targeted guidance to achieve visual consistency and brand alignment.

Related Skills

Explore More Design & Creative Skills→
bfree-trainerbfree-trainer
60

teach-impeccable

Capture project design context and persist it to AI configuration.

Official
Intermediate
9Ashwin9Ashwin

frontend-design

Generate HTML, CSS, and JavaScript interfaces with a specified aesthetic direction.

Community
Advanced
deomiarndeomiarn

button-unification

Standardize button component heights, padding, and transitions across all variants.

Community
Intermediate
Pabloprogramador23Pabloprogramador23

reversa-design-system

Extract design tokens from CSS, Tailwind themes, and screenshots into a design-system reference.

Community
Advanced