visual-identity

Define brand personality, typography, color tokens, and motion vocabulary for web projects.

2|Updated Apr 11, 2026

Search Tags:#typography #branding #ui-ux #design-system #color-tokens #motion-design

Ready to run

npx skills add https://github.com/motionharvest/agent-skills --skill visual-identity-motionharvest

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-identity
Source: https://github.com/motionharvest/agent-skills/tree/main/visual-identity
Command: npx skills add https://github.com/motionharvest/agent-skills --skill visual-identity-motionharvest

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the problem of generic, inconsistent, or flat-feeling web design by formalizing the brand identity phase before any code is written.

Core Features & Use Cases

Brand Personality Mapping: Translates abstract brand feelings into concrete design decisions like typography, color, and motion.
Design System Generation: Produces a structured design-system.md file containing color tokens, motion vocabulary, and font pairings.
Use Case: Use this when you have a site architecture but need to define the visual language, motion signature, and color tokens to ensure the final build feels cohesive and professional.

Quick Start

Run the visual identity skill to generate a design system based on the current project goals and persona research.

Frequently Asked Questions about visual-identity

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

FAQPage Schema

How do I translate abstract brand feelings into a structured design system?▼

To translate abstract brand feelings into a structured design system, map brand personality to concrete typography pairings, semantic color tokens, and motion vocabulary. This formalizes visual identity decisions before coding to ensure cohesive UI/UX design.

What is the best way to define color tokens and motion vocabulary for web projects?▼

The best way to define color tokens and motion vocabulary is by generating a structured design-system file during the pre-build phase. This establishes semantic color tokens and GSAP motion shorthand to maintain visual consistency and brand alignment.

When do I need to formalize brand identity and typography before building UI?▼

You need to formalize brand identity and typography before building UI when you have site architecture ready but lack a defined visual language. This pre-build phase prevents generic, inconsistent, or flat-feeling web design.

Does this design system generation approach support GSAP motion shorthand?▼

Yes, the design system generation supports GSAP motion shorthand by requiring adherence to a structured output format. It defines a specific motion vocabulary that translates brand personality into dynamic UI animations.

How do I ensure visual consistency across multiple web project builds?▼

To ensure visual consistency across web project builds, generate a centralized design-system.md file containing semantic color tokens, typography pairings, and motion vocabulary. This structured output aligns all subsequent UI/UX development with brand goals.