skills.rest
theofernandezz
theofernandezzCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/theofernandezz/ai-library --skill ui-engineering-distinctive-design
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
vobasevobase
59

teach-impeccable

Scan project files and write design context to CLAUDE.md.

Official
Intermediate
theofernandezztheofernandezz

ui-engineering

Define reusable UI patterns with design tokens, glassmorphism, and Tailwind v4.

Community
Advanced
paraddoxparaddox

shadcn-ui-setup

Install and configure Shadcn/ui and Aceternity UI effects in Next.js projects.

Community
Intermediate
sibukixxxsibukixxx

frontend-design

Create accessible, responsive frontend interfaces with semantic HTML and React components.

Community
Advanced