skills.rest
saajunaid
saajunaidCOMMUNITY
Explore all skills by this author →
GitHub

high-end-visual-design

Generates Moodle LMS and/or standalone HTML5/JS code from natural language prompts and/or structured inputs, producing a self-contained zip file for download.

Updated Feb 20, 2026
Search Tags:#design#ui#aesthetics#motion#agency#premium
One-click install
npx skills add https://github.com/saajunaid/junai --skill high-end-visual-design-saajunaid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: high-end-visual-design
Source: https://github.com/saajunaid/junai/tree/main/.github/skills/frontend/high-end-visual-design
Command: npx skills add https://github.com/saajunaid/junai --skill high-end-visual-design-saajunaid

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill teaches the AI to design like a high-end agency. It defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive, and blocks common defaults that make designs look cheap or generic.

Core Features & Use Cases

  • Persona & Objective: You are the Vanguard UI Architect who engineers premium digital experiences with deep, cinematic motion and no repeated layouts.
  • The Variance Mandate: NEVER generate the exact same layout twice; you must dynamically combine different premium layout archetypes and texture profiles while strictly adhering to the elite "Apple-esque / Linear-tier" design language.
  • The Creative Variance Engine: Before writing code, silently roll the dice and select ONE combination from the Vibe Texture Archetypes and Layout Archetypes to tailor output to the prompt’s context, ensuring outputs are uniquely premium.
  • The Double-Bezel & Motion Choreography: Use the nested Outer Shell and Inner Core architecture for major components, coupled with custom cubic-bezier transitions and staggered navigation reveals to create tactile depth and fluid motion.
  • Executive-Grade Guidance: Enforce macro whitespace, oversized typography, and premium micro-interactions to deliver a $150k agency feel, not a generic template.

Quick Start

Design a premium agency-grade UI for the provided brand brief using the Vibe and Layout Archetypes and the Double-Bezel architecture.

How to Use

The agent should produce UI designs that feel premium, with strict avoidance of common cheap defaults (fonts, borders, shadows, and motion); ensure every major card and container follows the Double-Bezel nesting pattern and every CTA uses the Button-in-Button concept where applicable.

Frequently Asked Questions about high-end-visual-design

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

FAQPage Schema
How do I create premium UI designs that avoid generic templates?▼

To create premium UI designs, enforce elite typography, macro whitespace, and custom motion curves while dynamically combining premium layout archetypes. This prevents generic patterns and produces an agency-grade aesthetic with tactile depth and fluid motion.

What makes a high-end agency website feel expensive in React and CSS?▼

An expensive agency feel comes from strict enforcement of macro whitespace, oversized typography, and premium micro-interactions. It uses nested Double-Bezel component architecture and custom cubic-bezier transitions to create tactile depth and fluid motion in HTML, CSS, and React.

How do I prevent repeated layouts across multiple web design outputs?▼

Preventing repeated layouts requires a variance engine that dynamically combines different premium layout archetypes and texture profiles. This ensures every generated landing page, dashboard, or marketing site output is uniquely tailored and strictly avoids repetition.

Can I use this approach for both landing pages and dashboards?▼

Yes, this approach applies to web design tasks across landing pages, dashboards, and marketing sites. It dynamically selects layout archetypes and texture profiles tailored to the prompt context, generating responsive HTML, CSS, and React components.

Does this UI design method work without external component dependencies?▼

Yes, this UI design method operates without external component dependencies. It relies on internal design rules like the Double-Bezel architecture and custom motion curves to generate unique, premium HTML, CSS, and React components directly.

What are the limitations of using strict design rules for UI generation?▼

Strict design rules limit spontaneous generic patterns by enforcing specific layout archetypes, the Double-Bezel architecture, and custom motion curves. While this guarantees a premium agency feel, it strictly blocks common cheap defaults, which may restrict highly unconventional layouts.

Related Skills

Explore More Design & Creative Skills→
anishshah17anishshah17

design-taste-premium-bento

Design premium modular bento layouts with React, Tailwind CSS, and GSAP animations.

Community
Advanced
thec3ukthec3uk

Frontend Responsive

Enforce responsive design standards across React, Vue, Angular, and HTML/CSS projects.

Official
Basic
toddmoytoddmoy
1

animate

Design performant UI animations with CSS and Framer Motion.

Community
Advanced
XCmiaowXCmiaow

high-end-visual-design

Enforce premium UI/UX design with Double-Bezel architecture and cubic-bezier motion.

Community
Advanced