UI Engineering - Distinctive Design

Define design contracts and token-based systems for distinctive UI components.

Updated Jan 26, 2026

Search Tags:#ui-design #shadcn-ui #motion #design-tokens #aceternity-ui #tailwind-v4 #distinctive-patterns

Ready to run

npx skills add https://github.com/theofernandezz/ai-library --skill ui-engineering-distinctive-design

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: UI Engineering - Distinctive Design
Source: https://github.com/theofernandezz/ai-library/tree/main/.opencode/skills/generic/ui-engineering
Command: npx skills add https://github.com/theofernandezz/ai-library --skill ui-engineering-distinctive-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Premium UI design patterns often drift into generic 'AI slop' aesthetics. This design guide defines a deliberate design direction and a token-based system to ensure distinctive, production-grade interfaces.

Core Features & Use Cases

Distinctive design contracts guiding typography, color, motion, and surface treatment for components, pages, and patterns.
Seamless integration with Shadcn UI for accessible primitives and Aceternity UI for visual impact in marketing pages and dashboards.
Reference-informed guidance that avoids cloning while enabling consistent, memorable UIs across products.

Quick Start

Define a bold, distinctive design direction and start applying your chosen typography, color, and motion patterns to the UI task.

Frequently Asked Questions about UI Engineering - Distinctive Design

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

FAQPage Schema

How do I avoid generic AI slop aesthetics in my UI design?▼

Avoid generic AI slop aesthetics by enforcing deliberate design contracts with a token-based system for typography, color, and spacing. This approach guides distinctive, production-grade interfaces across component libraries, landing pages, and design systems.

When should I use Shadcn UI versus Aceternity UI for distinctive patterns?▼

Use Shadcn UI for accessible UI primitives and Aceternity UI for visual impact in marketing pages and dashboards. This combination ensures functional accessibility while delivering memorable, reference-informed design patterns.

How do I set up a design token system for Tailwind v4 web apps?▼

Set up a design token system by defining explicit design contracts that standardize color and spacing variables. Applying these tokens within Tailwind v4 ensures consistent surface treatment and motion patterns across your web app.

Does this distinctive design process require reference-informed inspiration?▼

Yes, this distinctive design process requires reference-informed inspiration to guide your UI direction. This method avoids directly cloning references while enabling consistent, memorable interfaces across your products.

What components do I need to plan for when building a distinctive UI?▼

Plan for typography, color, motion, and surface treatment components when building a distinctive UI. Establishing these elements within a token-based system ensures your pages and patterns maintain a production-grade aesthetic.