Back to skills
SkillHub ClubDesign ProductFull StackFrontendData / AI

aesthetic

Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills.

Packaged view

This page reorganizes the original catalog entry around fit, installability, and workflow context first. The original raw source lives below.

Stars
0
Hot score
74
Updated
March 20, 2026
Overall rating
C3.2
Composite score
3.2
Best-practice grade
A88.4

Install command

npx @skill-hub/cli install namdfang-claudfang-engineer-aesthetic

Repository

namdfang/claudfang-engineer

Skill path: .claude/skills/aesthetic

Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills.

Open repository

Best for

Primary workflow: Design Product.

Technical facets: Full Stack, Frontend, Data / AI, Designer.

Target audience: Development teams looking for install-ready agent workflows..

License: Unknown.

Original source

Catalog source: SkillHub Club.

Repository owner: namdfang.

This is still a mirrored public skill entry. Review the repository before installing into production workflows.

What it helps with

  • Install aesthetic into Claude Code, Codex CLI, Gemini CLI, or OpenCode workflows
  • Review https://github.com/namdfang/claudfang-engineer before adding aesthetic to shared team environments
  • Use aesthetic for development workflows

Works across

Claude CodeCodex CLIGemini CLIOpenCode

Favorites: 0.

Sub-skills: 0.

Aggregator: No.

aesthetic | SkillHub