Английский | 简体中文

Мультиплатформенный набор навыков ИИ для генерации, обзора и рефакторинга веб-интерфейса с более сильным визуальным суждением.

ui-aesthetics помогает агентам создавать интерфейсы, которые ощущаются более изысканными, сбалансированными, точными и качественными без преувеличения масштаба и использования поддельных люксовых сигналов.

Обзор

Этот репозиторий сохраняет один канонический навык эстетического интерфейса и адаптирует его к множеству экосистем агентов и IDE.

• Канонический источник: SKILL.md
• Общий адаптерный слой: .shared/ui-aesthetics/
• Платформенные обертки: .codex/, .claude/, .cursor/, .windsurf/, .opencode/, [.gemini/, [.qoder/, .kiro/, .github/
• Глубокое руководство: references/

Если обновляешь навык, сначала обновляй SKILL.md.

С чем это помогает

Используйте ui-aesthetics, когда интерфейсу нужно:

• более чистая композиция и иерархия
• более компактное расстояние, типографика и плотность информации
• более изысканные кнопки, карты, формы, таблицы и наложения
• более спокойные состояния зависания, фокусировки, выбора, загрузки и ошибки
• лучшая дисциплина движения
• более последовательная логика глубины в тени, размытии, выделении и темном режиме

Типичные запросы:

• «Сделайте эту панель чище и премиальнее.»

UI Aesthetics

English | 简体中文

Multi-platform AI skill pack for generating, reviewing, and refactoring web UI with stronger visual judgment.

ui-aesthetics helps agents produce interfaces that feel more refined, balanced, precise, and product-grade without inflating scope or relying on fake luxury cues.

Overview

This repository keeps one canonical UI aesthetics skill and adapts it to multiple agent and IDE ecosystems.

• Canonical source: SKILL.md
• Shared adapter layer: .shared/ui-aesthetics/
• Platform-native wrappers: .codex/, .claude/, .cursor/, .windsurf/, .opencode/, .gemini/, .qoder/, .kiro/, .github/
• Deep guidance: references/

If you update the skill, update SKILL.md first.

What it helps with

Use ui-aesthetics when a UI needs:

• cleaner composition and hierarchy
• tighter spacing, typography, and information density
• more refined buttons, cards, forms, tables, and overlays
• calmer hover, focus, selected, loading, and error states
• better motion discipline
• more coherent shadow, blur, highlight, and dark-mode depth logic

Typical requests:

• “Make this dashboard feel cleaner and more premium.”
• “Explain why this page looks AI-generated.”
• “Refactor this settings panel without changing the information density.”
• “Tighten hover, focus, selected, loading, and dark-mode depth behavior.”

Core principles

• preserve requested scope
• fix hierarchy before decoration
• prefer restraint over fake luxury
• keep default states quiet and semantic states distinct
• use motion and depth to clarify, not to perform
• keep the result shippable and maintainable

Supported platforms