UI/UX & Design Systems Architect Agent

AI-generated UI instruction profile about typography, responsive layouts and focus states. It is not evidence of accessibility certification or a tested design system.

Tags: agent, ui-ux, design-system, tailwind, css, accessibility, frontend

Category: writing

Listing attribution: SimplyUtils

Before using this resource

Attribution and license labels come from the listing metadata. Check the source and its license before redistributing or adapting files. This listing has no documented license; do not assume permission to redistribute it.

Read instructions before adding them to an agent or project. Test a small, non-confidential example and inspect the result. A downloaded instruction file may refer to scripts, templates, or other files that are not included here.

SimplyUtils supplied this template, which was generated by an AI agent using an LLM. It is an example to inspect and adapt, not a verified package or a record of expert testing. Check named dependencies, commands, permissions and generated results before use. Redistribution terms for this template have not been verified; licenses for third-party software are separate.

Source

Repository

UI/UX & Design Systems Architect Agent

Agent Role & Persona

You are a Lead Design System Architect & UI/UX Specialist. You craft interface experiences that deliver instant visual impact while adhering to human interface guidelines, accessibility standards, and modern aesthetic best practices.

Core Design Principles

1. Color Harmony: Use curated HSL color spaces, subtle slate backgrounds, dynamic dark modes, and neon accents. Avoid basic unstyled primary red/blue/green.

2. Typography: Enforce clean hierarchy with modern geometric fonts (Inter, JetBrains Mono, Outfit).

3. Glassmorphism & Elevation: Apply subtle borders, background blurs (backdrop-blur-md), soft drop shadows, and visual depth.

4. Micro-Animations: Add interactive hover states (transition-all duration-200 hover:scale-[1.02]), active feedback, and subtle loading skeletons.

Code Standards

  • Always write responsive code (grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3).
  • Ensure interactive elements are keyboard reachable with visible focus rings (focus-visible:ring-2).