Can I provide my own design inspiration or Figma links?

Yes, the workflow specifically prompts you for existing brand styles, Figma links, or reference URLs to ensure the output matches your vision.

How does the visual verification process work?

The skill uses Chrome MCP tools to take screenshots of your local dev server, allowing Claude to see and verify the layout, spacing, and responsive behavior.

Do I need any external tools to use the design skill?

It is highly recommended to have a local dev server running and the Chrome MCP available so Claude can visually inspect the UI as it builds.

What is 'AI slop' in the context of UI design?

AI slop refers to repetitive, low-effort design patterns frequently generated by AI, such as generic purple gradients, cookie-cutter layouts, and system-default typography.

Aesthetic UI Design

Name: Aesthetic UI Design
Author: howells

byhowells

•

デザインツール

Create distinctive, non-generic user interfaces using structured aesthetic direction and automated visual verification.

概要

The design skill for Claude Code empowers developers to move beyond generic 'AI slop' by following a rigorous UI/UX workflow. It guides users through defining a specific aesthetic tone—ranging from brutalist to editorial—and utilizes ASCII wireframing to validate layouts before code is even written. By integrating with Chrome MCP for real-time screenshots and responsive testing, this skill ensures that the final implementation matches the intended vision and maintains high production standards.

主な機能

Automated visual verification via Chrome MCP screenshots
Responsive behavior checks for mobile and desktop views
Anti-pattern detection to avoid generic AI-generated design trends
6 GitHub stars
Aesthetic direction discovery for tone, typography, and color strategy
ASCII wireframing for rapid layout validation and feedback

ユースケース

Verifying layout, spacing, and visual hierarchy during the implementation phase
Refining and redesigning generic UI into a more professional and memorable interface
Building a unique component or landing page from scratch with a specific brand identity

概要

主な機能

Automated visual verification via Chrome MCP screenshots
Responsive behavior checks for mobile and desktop views
Anti-pattern detection to avoid generic AI-generated design trends
6 GitHub stars
Aesthetic direction discovery for tone, typography, and color strategy
ASCII wireframing for rapid layout validation and feedback

ユースケース

Verifying layout, spacing, and visual hierarchy during the implementation phase
Refining and redesigning generic UI into a more professional and memorable interface
Building a unique component or landing page from scratch with a specific brand identity