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.