design-mastery

Selects design patterns and generates branded UI for specified business types.

90|18|Updated Nov 27, 2025
One-click install
npx skills add https://github.com/wasintoh/toh-framework --skill design-mastery
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-mastery
Source: https://github.com/wasintoh/toh-framework/tree/main/src/skills/design-mastery
Command: npx skills add https://github.com/wasintoh/toh-framework --skill design-mastery

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generic AI designs fail to capture specific business needs or stand out in a competitive market. This Skill provides an extensible, context-aware design system that ensures unique, professional, and trend-aware UI, making your application truly distinctive.

Core Features & Use Cases

  • Business Type Registry: Automatically selects appropriate design patterns (colors, typography, layout) based on your industry (e.g., E-commerce, SaaS, Healthcare).
  • Anti-AI Vigilance: Actively detects and eliminates common "AI-generated" design flaws, ensuring a human-crafted feel.
  • Craft Excellence: Applies timeless design principles and modern trends selectively for a polished, intentional user experience.
  • Use Case: Starting a new e-commerce project? This skill will automatically apply a design system optimized for online stores, complete with action-oriented colors and product-focused layouts, avoiding generic AI aesthetics and boosting conversion.

Quick Start

Use the design-mastery skill to apply a design profile for an e-commerce store.

Frequently Asked Questions about design-mastery

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

FAQPage Schema
How do I prevent AI-generated design flaws in my UI?

Anti-AI vigilance detects and eliminates common AI-generated design patterns, ensuring your interface feels human-crafted and intentional. This Skill actively checks for generic aesthetics and applies distinctive, trend-aware design principles tailored to your business type.

Can I apply design patterns automatically based on my industry?

Yes. A business type registry automatically selects design tokens, typography, colors, and layout patterns matched to your industry—e-commerce, SaaS, healthcare, and others—ensuring your UI reflects sector-specific best practices without manual configuration.

What's the best way to ensure consistent design systems across SaaS dashboards and admin panels?

Load and enforce design tokens and component patterns through context-aware design system selection. This Skill applies production-ready patterns that maintain consistency across dashboards, admin panels, and product experiences while meeting quality verification standards.

How do design patterns help improve conversion on e-commerce sites?

Industry-specific design patterns optimize layout and color for action-oriented user flows. E-commerce patterns focus on product presentation and purchasing intent, replacing generic designs with conversion-focused UI that stands out competitively.

Do I need to manually configure design tokens for each project?

No. This Skill automates design token application by registering your business context and loading appropriate patterns. Configuration is eliminated through automatic business-type matching and pattern enforcement.

What design principles does this approach enforce?

Timeless design principles combined with modern trends are selectively applied for intentional, polished experiences. The Skill balances enduring best practices with trend awareness to deliver distinctive UI that avoids both dated and generic aesthetics.