design

Build and maintain Rayden UI components and screens in Figma via Figma MCP with full design token enforcement

Generate a new UI component that follows StyleSeed Toss conventions for structure, tokens, accessibility, and component ergonomics.

Interactive StyleSeed setup wizard for choosing app type, brand color, visual style, typography, and the first screen scaffold.

Evaluate interfaces against 168 research-backed UX/UI principles, detect antipatterns, and inject UX context into AI coding sessions.

Audit a StyleSeed-based component or page for WCAG 2.2 AA issues and apply practical accessibility fixes where the code makes them safe.

Scaffold a new mobile-first page using StyleSeed Toss layout patterns, section rhythm, and existing shell components.

Generate reusable UI patterns such as card sections, grids, lists, forms, and chart wrappers using StyleSeed Toss primitives.

Review UI code for StyleSeed design-system compliance, accessibility, mobile ergonomics, spacing discipline, and implementation quality.

Generate UX microcopy in StyleSeed's Toss-inspired voice for buttons, empty states, errors, toasts, confirmations, and form guidance.

Design user flows and screen structure using StyleSeed UX patterns such as progressive disclosure, hub-and-spoke navigation, and information pyramids.

List, add, and update StyleSeed design tokens while keeping JSON sources, CSS variables, and dark-mode values in sync.

Audit screens against Nielsen's heuristics and mobile UX best practices using the StyleSeed Toss design language as the implementation context.

Add loading, empty, error, and success feedback states to StyleSeed components and pages with practical mobile-first rules.

Build, update, and apply iOS design specifications using Apple Human Interface Guidelines (HIG) source data. Use when a task asks for iOS UI/UX rules, Apple design standards, component behavior, accessibility constraints, interaction patterns, or feature-level design-spec writing grounded in official HIG pages.

Design and build native-feeling macOS application UIs. Use this skill whenever the user asks to create a desktop app, macOS app, Mac-style interface, Apple-style UI, system utility, or anything that should look and feel like a native Mac application. Also trigger when users mention "native feel", "desktop app design", "Apple design patterns", "sidebar layout", "traffic lights", or want to build tools/utilities that feel like they belong on macOS. This skill covers layout, composition, interaction patterns, animations, light/dark mode, and all the subtle details that make an app feel like Apple built it.

Automate Canva tasks via Rube MCP (Composio): designs, exports, folders, brand templates, autofill. Always search tools first for current schemas.

Automate Miro tasks via Rube MCP (Composio): boards, items, sticky notes, frames, sharing, connectors. Always search tools first for current schemas.

Automate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas.

Modern, clean UI/UX guidance + review skill. Use when you need actionable UX/UI recommendations, design principles, or a design review checklist for new features or existing systems (web/app). Focus on CRAP (Contrast/Repetition/Alignment/Proximity) plus task-first UX, information architecture, feedback & system status, consistency, affordances, error prevention/recovery, and cognitive load. Enforce a modern minimal style (clean, spacious, typography-led), reduce unnecessary copy, forbid emoji as icons, and recommend intuitive refined icons from a consistent icon set.

Generate creative logo concepts and design directions

Create engaging data visualizations and infographics

Create platform-optimized social media graphics

Build complete brand identity systems and guidelines

Create realistic product mockups and presentations

Create low-fidelity wireframes for rapid prototyping

Create cohesive icon sets and design systems

Expert page layout and grid system design

Expert font pairing and typography system design

Create beautiful, accessible color schemes for any project

Design educational carousel posts for Instagram and LinkedIn that inform and engage

Design effective presentation slide decks for PowerPoint, Keynote, and Google Slides

Create visually compelling proposals that win clients and close deals

Common interface patterns, navigation patterns, form patterns, data display patterns, feedback patterns, and accessibility considerations

Figma workflows, components, auto layout, constraints, prototyping, design systems, and plugin development based on Figma Plugin API documentation

Mobile UX patterns, touch interactions, gesture design, mobile-first principles, app navigation, and mobile performance

User research, usability heuristics, user psychology, accessibility, inclusive design, user testing, and UX metrics

Low/high fidelity wireframes, user flows, information architecture, prototyping techniques, and design iteration processes

Expert-level system design, architecture patterns, scalability, and distributed systems