Agent-Skills.md

Agent Skills: UI/UX Design System Skill

UI, UX, 디자인, UI 디자인, UX 디자인, 사용자 경험 - Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications.

ui-designux-designuser-experiencefrontenddesign-templates
designID: aimskr/aims-toolkit/ui-ux-design

Repository

aimskr/aims-toolkit
aimskr

Install this agent skill to your local

pnpm dlx add-skill https://github.com/aimskr/aims-claude-toolkit/tree/HEAD/skills/ui-ux-design

Skill Files

Browse the full folder contents for ui-ux-design.

Download Skill

Loading file tree…

skills/ui-ux-design/SKILL.md

Skill Metadata

Name
ui-ux-design
Description
"UI, UX, Design, Implementation, Interaction, Live Review - Create and review high-end frontend interfaces with live browser testing. Focus on distinctive aesthetics and production-grade code while avoiding generic 'AI slop'."

UI/UX Design System Skill

This skill guides the creation of distinctive, production-grade frontend interfaces that strictly avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to mathematical precision, material depth, and creative intentionality.

Design Thinking

Before coding, commit to a BOLD aesthetic direction:

  • Purpose: What problem does this solve?
  • Tone: Pick an extreme: Brutalist, Minimalist, Maximalist, Retro-futuristic, Luxury/Refined, Editorial/Magazine, Industrial, etc.
  • Differentiation: Identify the one "unforgettable" element that defines the design.

Frontend Aesthetics Guidelines

1. Strict Color Economy (Max 6 Colors)

  • Constraint: Use no more than 6 distinct colors (including background, text, and accents).
  • Strategy: Establish a clear hierarchy: Dominant, Sub, and Accent. Use CSS variables to maintain this palette.
  • Impact: Achieve extreme visual cohesion through restraint rather than abundance.

2. Typography & Mathematical Order

  • Font Selection: Avoid "safe" system fonts (Inter, Roboto, Arial). Pair a characterful display font with a refined body font.
  • Rhythm: Apply a strict 8pt Grid System or Golden Ratio scales for spacing and sizing.
  • Micro-Typography: Refine kerning, line-height, and letter-spacing to create a professional, "designed" feel.

3. Materiality & Tactility

  • Physicality: Move beyond "flat" design. Simulate textures such as glassmorphism, brushed metal, or grain overlays.
  • Lighting: Define a consistent light source. Use multi-layered shadows and subtle highlights to create volume and depth that feels tangible.

4. Motion Physics & Narrative

  • Spring Physics: Use natural easing (e.g., spring-based animations) rather than linear transitions.
  • Staggered Reveals: Use animation-delay to orchestrate a sequenced entry of elements, creating a narrative flow for the user's eye.

5. Anti-AI Slop Checklist

  • Reject the Default: Avoid purple-on-white gradients, generic rounded cards, and predictable layouts.
  • Intentional Friction: Introduce "grid-breaking" elements or asymmetrical compositions that signal human-centric design.

Live Review Workflow

When reviewing implemented interfaces:

  1. Audit Color: Does the UI stay within the 6-color limit?
  2. Audit Typography: Is the scale mathematically consistent and the font choice distinctive?
  3. Audit Material: Does the interface have depth, or does it feel "flat and generic"?
  4. Interaction Check: Do hover states and transitions feel responsive and weighted (not floaty)?

IMPORTANT: Elegance comes from executing a vision with precision. Match implementation complexity to the aesthetic direction and never settle for common, average choices.