UI Design Expert

    1

    A UI design specialist that produces implementation-ready interface specs, design systems, and interaction behaviors.

    $49.99

    Secure checkout via Stripe

    Money-back guarantee

    Converts to your local currency at checkout

    Security scanned

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+21 more

    UI Design Expert

    Example session with this skill installed

    Design a responsive dashboard for a server monitoring tool. We need to see CPU usage, active logs, and a list of nodes. The brand is dark-themed and high-tech.

    • Read your context and instructions
    • Compiled the ui design expert

    I have established the UI specification for the 'PulseMonitor' dark-themed server dashboard, focusing on high-density data visualization and quick status identification.

    PulseMonitor UI Specification

    1. Visual Direction

    Theme: Deep Tech / Dark Mode

    • Background: #0B0E14 (Surface), #151921 (Card)
    • Primary: #3B82F6 (Electric Blue)
    • Success: #10B981 (Emerald)
    • Warning: #F59E0B (Amber)
    • Typography: Inter for UI; JetBrains Mono for log data and metrics.

    2. Component Inventory

    ComponentStyle DetailsInteraction States
    Metric Card1px border #2D333B, 4px radiusHover: Border color shifts to #3B82F6
    Node Status TagPill shape, 12px font, semantic fillN/A
    Log EntryMonospace, zebra striping #1C2128Click: Expand to show full stack trace
    Action ButtonOutline style, high contrastFocus: 2px ring; Active: 10% opacity overlay

    3. Responsive Behavior

    • Desktop (1440px+): 3-column layout. Sidebar navigation (fixed). Metrics top row, Logs and Node List side-by-side.
    • Tablet (768px): 2-column layout. Logs move below Metrics. Node list occupies full width.
    • Mobile (375px): Single column stack. Sidebar collapses to hamburger. Data tables convert to card lists.

    4. Accessibility & Handoff

    • Contrast: All status colors meet WCAG AA on the dark background.
    • Focus: Visible blue ring for keyboard navigation on all interactive nodes.

    Next Steps: Implement the grid using CSS Grid for the dashboard container and define the JetBrains Mono font-face for the log viewer.

    Next steps

    1. Review the color palette against your existing brand tokens.
    2. Define the refresh interval logic for the "CPU Usage" chart components.
    3. Map the "Node List" columns to your backend API response schema.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    Translating product goals into high-fidelity UI specifications is a bottleneck for most developers. This skill bridges the gap by producing implementation-ready design systems, interaction states, and responsive layouts that developers can actually build from.

    What it does

    • Architect Layouts defines page structure, content hierarchy, and navigation patterns focused on user task completion.
    • Systematize Visuals specifies color palettes, typography scales, spacing tokens, and component styles for consistency.
    • Map Interactions details hover, active, focus, and disabled states for all UI controls to ensure a reactive feel.
    • Define Responsive Behavior provides stacking rules, breakpoint adjustments, and content prioritization for mobile, tablet, and desktop.
    • Audit Accessibility reviews contrast, touch targets, and semantic hierarchy to meet basic usability standards.
    • Generate Handoff Docs creates structured specifications including component variants, token references, and acceptance criteria.

    How it works

    1. Context Intake analyzes your product purpose, target audience, and functional constraints.
    2. Hierarchy Planning maps out the information architecture and layout grid before applying visual styles.
    3. Visual Direction establishes a cohesive theme including semantic colors, radii, shadows, and iconography.
    4. Behavior Definition documents edge cases like loading states, empty views, and validation errors.

    Frameworks & tools

    This skill is platform-agnostic but provides specifications compatible with Tailwind CSS, Figma token structures, and modern component libraries like React, Vue, or Flutter.

    Why this beats prompting it yourself

    Generic prompts yield "pretty" but impractical layouts that ignore edge cases and developer constraints. This skill follows a rigorous design workflow that accounts for state management, responsive logic, and accessibility hurdles that standard LLM outputs miss.

    Use cases

    • Drafting a high-density dashboard for a SaaS analytics tool.
    • Defining a mobile-first checkout flow with validation and error states.
    • Establishing a design system for a multi-platform web application.
    • Converting a rough feature list into a polished UI specification for developer handoff.

    Known limitations

    Does not generate physical .fig or .sketch files. Accessibility reviews are visual assessments and do not replace formal screen-reader testing.

    Cannot generate actual design files (.fig, .sketch). Accessibility review is a visual assessment only, not a compliance guarantee. Requires clear product goals for best results.

    How to use

    1. 1

      Connect your agent to the Agensi MCP

      Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup

    2. 2

      Sign in to Agensi

      Your agent shows a sign-in link. Sign in and click Allow.

    3. 3

      Ask for what you need

      Your agent loads this skill and uses it on your task. It always asks before any payment.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill goes through the trust checks below.

    Security scanned

    Checked by our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Money-back guarantee

    Doesn't do what its page promises? You get your money back.

    Trust & safety

    Security scan

    Security scan passed 28 days ago

    Permissions

    No special permissions declared or detected

    Listed28 days ago

    What's inside

    Frequently Asked Questions

    Unlike generic prompts, this skill acts as a structured design architect, providing specific spacing tokens, state definitions (like hover/disabled), and responsive stacking logic that developers can translate directly into code.

    The skill provides structured specifications compatible with Tailwind CSS, CSS variables, and Figma-style token systems, making it easy to implement in React, Vue, Flutter, or standard HTML/CSS environments.

    The skill focuses on generating detailed specifications, component logic, and interaction maps in text or markdown format; it does not export proprietary binary files like .fig or .sketch.

    Yes, you can input your brand's existing color palettes, typography, or design constraints, and the skill will generate all new specifications to align with those established styles.

    The skill identifies potential accessibility issues regarding color contrast, touch target sizes, and semantic hierarchy to ensure your UI meets fundamental usability standards before you begin coding.

    You will receive the full functional logic for the UI Design Expert skill, which can be integrated into your preferred AI agent platform or LLM workflow that supports custom system instructions.

    New in Frontend & Web Apps