Voyage Digital
    Tools· Design & Creative

    ux-designer-skill

    An external skill repository that gives Claude Code curated, working knowledge of UX/UI design, covering layout, typography, color, and WCAG 2.2 AA conformance, for designing new interfaces and reviewing existing ones.

    designingreviewingexecutableOpen Source
    Source code
    Clone the repository and copy the skill into ~/.claude/skills/, for example git clone https://github.com/szilu/ux-designer-skill.git ~/.claude/skills/ux-designer
    Open provider
    UX

    Description

    The skill equips Claude Code with working knowledge of modern interface design: layout systems, typography scales, color theory, responsive patterns, and interaction design. The documentation covers, among other things, WCAG 2.2 AA conformance, typography, color, spacing, hierarchy, navigation, forms and inputs, mobile UX, UX copy, user research, design systems, and UX patterns typical of AI products.

    In practice the skill works in two directions. When designing new components, it helps with decisions such as modal versus inline expansion, or when progressive disclosure makes sense instead of hiding critical information. When reviewing existing interfaces, it checks from a UX standpoint for issues such as touch targets that are too small, missing focus states, insufficient text contrast, or interaction patterns that break user expectations.

    For Voyage Digital, the skill is a complement to the existing frontend and design skills whenever a Claude Code session needs additional curated UX reference knowledge, without replacing the internal design system.

    Strengths

    Broad reference base
    Synthesizes guidance from 19 authoritative sources, including Nielsen Norman Group, WCAG 2.2, Material Design, Apple HIG, and the Baymard Institute.
    Context-efficient design
    The lean SKILL.md at 297 lines stays in context, while the 24 reference files, roughly 10,700 lines, load only when needed.
    Two directions of use
    Supports both designing new components and reviewing existing interfaces.
    Built-in anti-pattern list
    23 documented anti-patterns each link directly to the reference file with the correct approach.
    Covers edge cases
    References go beyond standard topics to cover multiplayer and canvas interfaces as well as UX patterns typical of AI products, such as chat and copilots.

    Assessment

    AI features

    • Interface design Helps design new interfaces and components following established patterns.
    • UX review Reviews existing UI/UX and frontend code for issues.
    • Accessibility Applies WCAG 2.2 AA standards.
    • Interaction and form design Guides interaction design, form design, and navigation.
    • Mobile and responsive Advises on mobile-first and responsive approaches.
    • UX copy Writes UI text and microcopy.
    • Collaborative and canvas apps Helps design collaborative and canvas-based applications.
    • AI interfaces Helps build AI-powered interfaces such as chat, copilots, and agents.
    • Ethics check Evaluates designs for dark patterns and ethical compliance.

    Suitable for

    • Teams who want to equip Claude Code with well-grounded best-practice knowledge, rather than gut feeling, when designing new UI components
    • Code reviews from a UX perspective, for example touch targets, focus states, and contrast
    • Projects that need to factor in WCAG 2.2 AA conformance from the start
    • A complement to existing frontend skills whenever additional curated UX knowledge is needed as context

    Limitations and notes

    • Community project Not an official Anthropic tool, but a GitHub repository maintained by a third party with no documented update mechanism.
    • Manual installation No marketplace listing; the skill is installed by copying or symlinking it into the local skills directory.
    • No substitute for a design system Provides curated reference knowledge, but does not replace a product-specific design system or existing token libraries.

    Quick start

    1. Clone the repository, for example with git clone https://github.com/szilu/ux-designer-skill.git.
    2. Copy or symlink the ux-designer-skill/ directory to ~/.claude/skills/ux-designer/.
    3. In a Claude Code session, invoke the skill with /ux-designer or let it trigger automatically on UX topics.
    4. When needed, point it at one of the 24 reference files directly, for example on forms, accessibility, or AI interfaces.

    Tips

    • Since reference files load only when needed, name the specific topic in prompts, such as forms, canvas, or accessibility, so the right file gets pulled in.
    • The skill also works for reviews: check existing interfaces against the 23 documented anti-patterns.
    • Use it as a complement to existing frontend and design skills, not as a replacement for an internal design system.

    Access

    The repository is publicly available at https://github.com/szilu/ux-designer-skill. Installation per the repository: clone the repository and copy the skill into ~/.claude/skills/, for example with git clone https://github.com/szilu/ux-designer-skill.git ~/.claude/skills/ux-designer. The repository is released under the MIT license (LICENSE file in the repo root).

    Last reviewed: · Pricing, plans and features are a snapshot in time. Check the provider's own page before deciding.

    In the workshop this becomes your method.

    Whoever sees this process run once wants the agent behind it next. We build that in the workshop From Process to Agent.

    View workshops

    Related resources

    Browse all resources
    Skills

    The Email Template

    Builds responsive MJML 4.x email templates and compiles them to production-ready HTML, checked against the quirks of Outlook, Gmail, and mobile clients.

    Learn more
    HyperUI
    Tools

    HyperUI

    Framework-neutral collection of 523 copy-paste-ready Tailwind CSS snippets for application, marketing, and neobrutalism interfaces, open source under the MIT license.

    Learn more
    Krea
    Tools

    Krea

    Web platform and API that bundles more than 40 third-party AI image and video models, including Flux, Veo 3, and Kling, in one interface for generation, editing, upscaling, and LoRA training.

    Learn more
    Launch UI
    Tools

    Launch UI

    Component library for landing pages and marketing sections built on React, Next.js, and Tailwind, directly compatible with shadcn/ui and Radix, with full code ownership in your own project instead of a page-builder subscription.

    Learn more
    LI
    Tools

    liquid-glass-js

    Open source vanilla JavaScript library for WebGL-based glass effects in the style of Apple's Liquid Glass, delivering genuine multi-layer light refraction instead of CSS blur for buttons and containers.

    Learn more
    Liquid Logo
    Tools

    Liquid Logo

    Free open source browser tool that turns an uploaded logo into a flowing liquid metal animation via WebGL shaders, exportable as PNG or MP4.

    Learn more
    MagicUI
    Tools

    MagicUI

    MagicUI is a library of open source, animated React and Tailwind components that gives marketing and product teams production ready motion effects without building them from scratch.

    Learn more
    Magnific
    Tools

    Magnific

    Node-based creative platform with roughly 30 AI tools for image, video, audio, and 3D, a connected library of more than 250 million licensed assets, and MCP access for AI assistants.

    Learn more
    Meraki UI
    Tools

    Meraki UI

    Free, open source collection of 228 Tailwind CSS HTML components with built-in dark mode and RTL support, where interactive building blocks ship with ready-wired Alpine.js state.

    Learn more
    Midjourney
    Tools

    Midjourney

    Midjourney is an AI platform for image and video generation valued for its visual quality, best suited as a peripheral tool for moodboards and concept exploration rather than a core building block for SME workflows.

    Learn more
    Napkin AI
    Tools

    Napkin AI

    A text-to-diagram tool that turns bullet points or prose into infographics, mind maps, and flowcharts automatically.

    Learn more
    Pinterest
    Tools

    Pinterest

    Pinterest is a visual discovery platform for collecting and browsing images, a useful source for visual research and moodboards, with an optional Ads Manager for campaigns.

    Learn more
    Playground AI
    Tools

    Playground AI

    Playground AI is an AI image generation and editing platform built around a precise canvas editor for controlled, brand consistent visuals.

    Learn more
    React Bits
    Tools

    React Bits

    Open source library of 140-plus animated React components for text effects, backgrounds, and interactive UI pieces, available in JavaScript or TypeScript with CSS or Tailwind, dropped into a project via copy-paste or CLI.

    Learn more
    React Three Fiber
    Tools

    React Three Fiber

    React renderer for Three.js that lets 3D scenes, shader effects, and WebGL content be built as declarative React components, with full, lossless access to the entire Three.js API.

    Learn more
    shadcn/ui
    Tools

    shadcn/ui

    Open source component system for React whose CLI copies real, editable source code into your own project instead of installing an npm package, with a growing set of helper packages for AI-driven interfaces.

    Learn more
    ShaderGradient
    Tools

    ShaderGradient

    React library for animated 3D gradient backgrounds built on WebGL, configurable through typed props or a copyable web URL, with a Figma plugin and Framer component for use outside React.

    Learn more
    Skiper UI
    Tools

    Skiper UI

    Numbered React component library with elaborate Framer Motion and GSAP animations for hero sections and marketing surfaces, free to use with attribution or as a one-time purchase without it.

    Learn more
    Starwind UI
    Tools

    Starwind UI

    Open source Astro component library that copies roughly 40 groups and about 193 individual .astro files into the project as owned, freely customizable source code via CLI, without requiring a React runtime, complemented by skills and an MCP server for AI-assisted workflows.

    Learn more
    Stitch
    Tools

    Stitch

    Stitch is an AI design tool from Google Labs that generates UI wireframes and screen mockups from text descriptions, sketches, or images.

    Learn more

    Conversation, not pitch

    Understand first, then decide. We take time for an initial conversation, without sales pressure, without obligation.

    Schedule a call