design-excellence

Validate section designs against a seven-category Dribbble-quality rubric.

Updated Jan 8, 2026
One-click install
npx skills add https://github.com/deomiarn/website-os --skill design-excellence-deomiarn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-excellence
Source: https://github.com/deomiarn/website-os/tree/main/.claude/skills/design-excellence
Command: npx skills add https://github.com/deomiarn/website-os --skill design-excellence-deomiarn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enforces Dribbble-quality design standards by validating every section against the user's inspirations and the frontend-design philosophy.

CRITICAL: This skill is MANDATORY during:

  • /shape-pages - before confirming each section design
  • /implement - before marking any section complete
  • /validate - as quality checkpoint
  • /refine - after making changes

Core Features & Use Cases

  • Enforces a rigorous inspiration-alignment rubric to ensure sections reflect the user's references and mood.
  • Provides a structured seven-category checklist (Inspiration Alignment, Typography Distinction, Color Intentionality, Spatial Composition, Visual Details, Animation Strategy, Anti-Generic Check) to quality-check each design.
  • Acts as a gating mechanism in the design pipeline to prevent progression with subpar or generic aesthetics.

Quick Start

Use the design-excellence skill to validate the current section design against the assigned inspiration images.

Frequently Asked Questions about design-excellence

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I validate UI design quality against inspiration references during development?▼

To validate UI design quality, you check each section against inspiration references using a seven-category rubric covering typography, color, spacing, and atmosphere. This gating mechanism enforces frontend implementation matches your Dribbble-quality mood and visual standards.

What categories should a design quality checklist cover for UX design refinement?▼

A design quality checklist for UX refinement should cover Inspiration Alignment, Typography Distinction, Color Intentionality, Spatial Composition, Visual Details, Animation Strategy, and Anti-Generic Check to systematically prevent subpar or generic aesthetics.

When do I need to run design validation checks in the page building process?▼

You need to run design validation checks during the shape-pages, implement, validate, and refine stages. Running checks at these phases acts as a mandatory gating mechanism before confirming section designs or marking any implementation complete.

What's the best way to prevent generic aesthetics in frontend UI sections?▼

The best way to prevent generic aesthetics is applying an Anti-Generic Check alongside an inspiration-alignment rubric. This enforces strict visual details and spatial composition validation to block progression with subpar designs before completion.

Does this design validation process require explicit evidence for inspiration references?▼

Yes, this design validation process requires explicit evidence for inspiration references. It enforces mandatory frontmatter guidelines and checks alignment against your assigned inspiration images to satisfy rigorous Dribbble-quality frontend standards.