skills.rest
motionharvest
motionharvestCOMMUNITY
Explore all skills by this author →
Website𝕏@motionharvestGitHub

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
One-click install
npx skills add https://github.com/motionharvest/agent-skills --skill visual-identity-motionharvest
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
syahrilTGRsyahrilTGR
3

brainstorming

Guide structured brainstorming to define software designs and specifications.

Community
Advanced
hackefellerhackefeller
1

design-system

Enforce Ponti design system tokens, components, and motion rules in React projects.

Official
Advanced
Artag-ChrisArtag-Chris
1

frontend-design

Align frontend projects with a distinctive design direction and high-quality UI execution.

Community
Advanced
fusenginefusengine
22

identity-system

Generate a visual identity with OKLCH palettes, typography, spacing, and motion.

Community
Advanced