design

Generate distinctive UI designs with accessibility and production-ready handoff checklists.

Updated Oct 1, 2024
One-click install
npx skills add https://github.com/einargudnig/dotfiles --skill design-einargudnig
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/einargudnig/dotfiles/tree/main/claude/skills/design
Command: npx skills add https://github.com/einargudnig/dotfiles --skill design-einargudnig

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents generic, template-like interfaces by guiding the creation of distinctive, production-ready user interfaces and components that have a clear visual thesis, accessible foundations, and an implementable handoff.

Core Features & Use Cases

  • Direction Lock: A required five-question checkpoint (users, aesthetic direction, memorable anchor, hard constraints, signature micro-interaction) before any design work begins.
  • App Shell Exception: Prescribed defaults and a required CSS-strategy check for sidebar + main workspace layouts to avoid ambiguous decisions.
  • Production Constraints: Enforces accessibility, OKLCH color rules, typography bans, motion/performance rules, and a mid-build drift checkpoint to catch "AI slop".
  • Handoff Checklist: Provides a final litmus test and explicit handoff items (aesthetic justification, non-obvious choices, and replacement instructions) for engineering-ready delivery.
  • Use Cases: Single components, marketing pages, dashboards, and multi-page production UIs that require a coherent design system and clear implementation tokens.

Quick Start

Design a compact app shell (sidebar + main) with a warm brutalist editorial aesthetic, OKLCH palette, a single committed accent, a named radius scale, and a staggered reveal interaction.

Frequently Asked Questions about design

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

FAQPage Schema
How do I create distinctive UI designs that avoid generic template aesthetics?▼

To create distinctive UI designs, you need a clear visual thesis before starting. This process enforces a five-question direction-lock checkpoint covering users, aesthetic direction, memorable anchors, hard constraints, and signature micro-interactions to ensure production-ready outputs.

What's the best way to implement OKLCH color rules in a design system?▼

Implementing OKLCH color rules requires enforcing accessible foundations and production constraints throughout the build. This approach uses OKLCH palettes with a single committed accent and a named radius scale to maintain color consistency across components.

How do I design an app shell with a sidebar and main workspace layout?▼

Designing an app shell involves prescribed defaults and a required CSS-strategy check for sidebar and main workspace layouts. This prevents ambiguous decisions by applying clear visual constraints and production tokens before the interface build begins.

Can I use this approach for multi-page production UIs and dashboards?▼

Yes, this approach works for multi-page production UIs, dashboards, marketing pages, and single components. It requires a coherent design system, clear implementation tokens, and a mid-build drift checkpoint to catch generic outputs during the process.

What accessibility and motion constraints are enforced during UI design?▼

Accessibility and motion constraints enforced during UI design include typography bans, motion performance rules, and a mid-build drift checkpoint. These production constraints ensure the final interface maintains accessible foundations and avoids generic defaults.

How do I prepare developer-ready UI handoff with implementation tokens?▼

Developer-ready UI handoff requires a final litmus test and explicit checklist items including aesthetic justification, non-obvious choices, and replacement instructions. This ensures engineering teams receive production-ready components with clear implementation tokens.