skills.rest
nguyenthienthanh
nguyenthienthanhCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-expert

Provides expert guidance on UI/UX design, design systems, and responsive layouts.

24|3|Updated Nov 25, 2025
Search Tags:#responsive design#front-end#design system#component design#UI/UX design#Atomic Design#Figma
One-click install
npx skills add https://github.com/nguyenthienthanh/aura-frog --skill design-expert
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-expert
Source: https://github.com/nguyenthienthanh/aura-frog/tree/main/aura-frog/skills/design-expert
Command: npx skills add https://github.com/nguyenthienthanh/aura-frog --skill design-expert

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Designing user interfaces effectively requires deep expertise in component design, design systems, responsive layouts, and translating Figma designs into code. This Skill centralizes comprehensive UI/UX design knowledge, empowering you to create consistent and user-friendly experiences.

Core Features & Use Cases

  • Component Design Principles: Guides through Atomic Design, component anatomy, and creating detailed design specifications.
  • Design System Implementation: Provides insights into building and utilizing design systems, including design tokens, theming, and ensuring consistency.
  • Responsive Design Patterns: Offers strategies for mobile-first approaches, defining breakpoints, and creating flexible layouts that adapt to any screen size.
  • Use Case: When breaking down a new UI feature, use this skill to apply Atomic Design principles, define component specifications, and ensure responsive behavior across devices, from mobile to desktop.

Quick Start

Break down a social media post component using Atomic Design principles and define its responsive behavior

Frequently Asked Questions about design-expert

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

FAQPage Schema
How do I break down a UI design using Atomic Design principles?▼

Atomic Design breaks interfaces into five hierarchical levels: atoms (basic elements), molecules (simple groups), organisms (complex sections), templates (page layouts), and pages (final instances). This Skill guides you through applying these principles to structure components systematically, ensuring consistency and reusability across your design system.

What's the best way to set up a design system with design tokens?▼

Design tokens are the single source of truth for colors, typography, spacing, and other properties. This Skill covers defining tokens, organizing them hierarchically, implementing theming logic, and ensuring consistency across web and mobile platforms so teams reference one system rather than ad-hoc values.

How do I create responsive layouts that work on mobile and desktop?▼

Responsive design uses flexible grids, breakpoints, and media queries to adapt layouts across screen sizes. This Skill provides mobile-first strategies, explains how to define breakpoints, and shows how to structure components so they reflow naturally from mobile to tablet to desktop without redesigning.

Can I use Figma designs directly to guide component implementation?▼

Yes. This Skill bridges Figma and code by translating design specifications into component anatomy and implementation requirements. It covers documenting component props, states, and behaviors from Figma so developers can build consistently with designer intent.

What accessibility considerations should I include in component design?▼

Component design must account for color contrast, keyboard navigation, semantic HTML, and ARIA attributes. This Skill incorporates accessibility requirements into the component specification process so designs are usable across devices and assistive technologies from the start.

How do I ensure design consistency across multiple component libraries?▼

Cross-library compatibility requires establishing shared design tokens, component naming conventions, and documentation standards. This Skill helps you define these foundations so teams using different libraries still produce visually and functionally consistent interfaces.

Related Skills

Explore More Design & Creative Skills→
GDSDNGDSDN
3

ux-create-wireframe

Design wireframes, prototypes, and interaction flows from user research insights.

Community
Advanced
aemdemosaemdemos

Get General Styling — Design System Extraction Skill

Extract site-wide styling and design tokens from a live website.

Official
Advanced
wikimediawikimedia
7

codex-usage

Adopt Wikimedia Codex design system components, tokens, and icons in frontend projects.

Official
Advanced
Ben1821Ben1821

design-system

Generate design tokens and component specifications from JSON configurations.

Community
Intermediate