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.

Generated with Codex + GPT-5.4

Generated with Claude Code + MiniMax M2.7

Generated with Claude Code + Claude Opus 4.6

Generated with Claude Code + GLM-5.1

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