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

Installation

Clone this repository:

git clone https://github.com/kasonye/ui-aesthetics-skill.git
cd ui-aesthetics-skill

Or vendor it into another repository as a submodule:

git submodule add https://github.com/kasonye/ui-aesthetics-skill.git .agent-skills/ui-aesthetics

After cloning, point your platform at the matching entrypoint inside this repository.

Common entrypoints:

• Codex: .codex/skills/ui-aesthetics/
• Claude Code: .claude/skills/ui-aesthetics/
• OpenCode: .opencode/skills/ui-aesthetics/ or .opencode/commands/ui-aesthetics.md
• Cursor: .cursor/rules/ui-aesthetics.mdc
• Windsurf: .windsurf/skills/ui-aesthetics/ and .windsurf/workflows/ui-aesthetics.md
• Gemini CLI: .gemini/skills/ui-aesthetics/
• Qoder: .qoder/skills/ui-aesthetics/
• Kiro: .kiro/steering/ui-aesthetics.md
• GitHub Copilot: .github/prompts/ui-aesthetics.prompt.md

Usage

Depending on the platform, ui-aesthetics can be:

• auto-selected when the task is clearly about UI polish
• explicitly invoked as a skill, rule, workflow, command, or prompt

Common invocation patterns:

• $ui-aesthetics
• /ui-aesthetics
• @ui-aesthetics
• prompt-file selection in GitHub Copilot

Example prompt and outputs

Prompt used for the example:

Use the repository skill to create a product landing page. Make the colors bright and attention-grabbing, add a bit of motion and lighting, and keep some dimensional depth.

These four showcase images summarize the kind of bright color, lighting, subtle motion language, and layered depth this skill tends to encourage for marketing-style product pages.

Skill routes

The skill is optimized around six working modes:

1. Generation
2. Review
3. Refactor
4. Component Polish
5. State / Motion Refinement
6. Depth / Lighting Refinement

Platform behavior

Last verified against public docs and reference repos on April 11, 2026.

Repository structure

.
|- SKILL.md
|- README.md
|- README.zh-CN.md
|- .shared/ui-aesthetics/
|- references/
|- .codex/skills/ui-aesthetics/
|- .claude/skills/ui-aesthetics/
|- .cursor/rules/
|- .windsurf/skills/
|- .windsurf/workflows/
|- .opencode/
|- .gemini/
|- .qoder/
|- .kiro/
`- .github/prompts/

Maintenance

Recommended update flow:

1. edit SKILL.md
2. refresh .shared/ui-aesthetics/ if the condensed guidance changed
3. update platform wrappers only when adapter format or invocation behavior changes
4. update both README.md and README.zh-CN.md when installation, supported platforms, or usage expectations change