skills.rest
Opikat
OpikatCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-expert

Unify five design layers into one UI/UX workflow.

35|7|Updated Apr 7, 2026
Search Tags:#typography#workflow#design#ui#accessibility#ux#design-system
One-click install
npx skills add https://github.com/Opikat/design-expert-skill --skill design-expert-opikat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-expert
Source: https://github.com/Opikat/design-expert-skill/tree/main/design-expert
Command: npx skills add https://github.com/Opikat/design-expert-skill --skill design-expert-opikat

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires , and includes scripts (resource) and references (resource) components.

What problem does it solve?

Unifies five design layers into a single end-to-end workflow for UI/UX tasks.

Core Features & Use Cases

  • Five-layer workflow integrating UX strategy, aesthetic direction, visual craft, design system generation, and live-site review.
  • Typography metrics calculator and a CSV-driven design-token/data library for rapid decisions.
  • Live-site review workflow that surfaces issues in source code and provides deterministic fixes.

Quick Start

Start by defining your design goal and issue a single, clear task for the five-layer workflow to execute.

Frequently Asked Questions about design-expert

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

FAQPage Schema
How do I run a UI/UX workflow that covers strategy, visual craft, and accessibility audits in one pass?▼

A unified UI/UX workflow integrates five design layers—strategy, aesthetics, craft, system generation, and live-site review—into a single end-to-end process. Defining your design goal initiates the workflow to execute across these layers.

What is the best way to generate a design system and calculate typography metrics for a web app?▼

Use a typography metrics calculator and a CSV-driven design-token library to generate design systems and make rapid data-backed decisions. These tools provide deterministic values for typography and design tokens.

How do I conduct a live-site review to surface UI accessibility issues in source code?▼

A live-site review workflow surfaces accessibility and visual issues directly in source code using frontmatter-based discovery. It identifies problems in the codebase and provides deterministic fixes to resolve them.

Can I apply this UI/UX workflow to dashboards and product interfaces, or is it only for websites?▼

The workflow is applicable to design tasks across websites, apps, dashboards, and product interfaces. It handles UX strategy, visual craft, and accessibility audits for any digital product interface.

How do I start a design task using the five-layer workflow?▼

Start a design task by defining your design goal and issuing a single, clear task for the five-layer workflow to execute. The workflow then processes UX strategy, visual direction, and system generation sequentially.

Does the design system generator rely on a specific data format for tokens?▼

The design system generator uses a CSV-driven data library for design tokens. This format allows rapid, data-driven decisions by standardizing token values across the generated system.

Related Skills

Explore More Design & Creative Skills→
intenet1001-commitsintenet1001-commits
1

cs-design

Coordinate five-agent parallel design reviews and generate a DESIGN-REVIEW.md report.

Community
Advanced
I194I194
9

design-consultation

Generate design tokens and a DESIGN.md for product design systems.

Community
Advanced
SeaLion-hubSeaLion-hub

design-review

Analyze live UI designs for visual inconsistencies, spacing issues, and hierarchy problems.

Community
Advanced
shaunandrewsshaunandrews
8

design-critique

Audit UI/UX designs for visual hierarchy, spacing, typography, color, motion, and accessibility.

Community
Advanced