skills.rest
Vincri126
Vincri126COMMUNITY
Explore all skills by this author →
GitHub

ui-design-brand

Orchestrate UI design and brand identity deliverables with typography, spacing, and color rules.

Updated Aug 27, 2026
Search Tags:#typography#orchestration#ui-design#visual-design#color-theory#brand-systems
One-click install
npx skills add https://github.com/Vincri126/MCO-Template --skill ui-design-brand
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-brand
Source: https://github.com/Vincri126/MCO-Template/tree/main/.orchestrator/skills/ui-design-brand
Command: npx skills add https://github.com/Vincri126/MCO-Template --skill ui-design-brand

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill prevents generic AI visuals by orchestrating design direction, subagent delegation, and assembly so every UI, logo, or brand asset follows strict typography, spacing, color, and interaction rules.

Core Features & Use Cases

  • Visual Design Principles: Applies whitespace mastery, modular typography, 60-30-10 palettes, glass morphism, bento grids, and premium micro-interactions to every layout.
  • Component & Token Systems: Generates brand tokens, CSS custom properties, component libraries, animation patterns, and QA checklists so work is production-ready and reusable.
  • Use Case: When a product team needs a landing page, hero section, icon/logo system, or polished UI critique, it decomposes the request into subagents that handle palettes, layout skeletons, components, creative assets, and QA before assembling the final deliverable.

Quick Start

Use the ui-design-brand skill to design a hero landing page with intentional spacing, bold typography ratios, and a 60-30-10 color system that feels like a real premium brand.

Frequently Asked Questions about ui-design-brand

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

FAQPage Schema
How do I create a premium landing page UI with a consistent color system and typography scale?▼

To build a premium landing page UI, apply a 60-30-10 color system, modular typography, and strict spacing grids. This skill orchestrates these visual design principles to ensure brand polish.

How do I generate reusable design tokens and component libraries for a brand identity?▼

To generate design tokens, create CSS custom properties and component libraries. This skill outputs brand tokens and QA checklists to ensure your visual design system is production-ready and reusable.

Can I use this skill to perform a visual design critique and brand audit?▼

Yes, this skill handles visual design critiques and brand audits. It applies anti-slop audits and QA gates to evaluate typography, spacing, and color stories for premium brand identities.

Does this UI design skill integrate with Figma and Canva for reference assets?▼

This UI design skill integrates with Figma and Canva to coordinate reference assets. It orchestrates these platforms alongside Claude to assemble final deliverables for your brand system.

What is the best way to prevent generic AI visuals when designing a hero section?▼

The best way to prevent generic AI visuals is applying anti-slop audits, intentional spacing, and bold typography ratios. This skill enforces these rules to deliver premium brand polish in hero sections.

Related Skills

Explore More Design & Creative Skills→
liauw-medialiauw-media
3

brand-guidelines

Establish brand guidelines stored in .claude/BRAND-GUIDELINES.md and .claude/brand/ assets.

Community
Advanced
Kin3XcKin3Xc

frontend-design

Transform vague UI requirements into token-based frontend code for React, Vue, Svelte, and Next.js.

Community
Advanced
yaomindong1996yaomindong1996
103

frontend-design

Generates frontend interfaces with intentional aesthetic direction and refined typography for Vue, React, or HTML/CSS/JS projects.

Community
Intermediate
CutTheChexxCutTheChexx

brand-builder

Create cohesive brand identities and scalable design systems for web applications.

Community
Advanced