Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
daniel-dan-conrad avatar

Ui Designer

  • 3.5k installs
  • Updated May 18, 2026
  • daniel-dan-conrad/ui-designer-skill

ui-designer is an agent skill for craft distinctive ship-ready web interfaces with elevated typography, layout, motion, and component quality.

About

The ui-designer skill Craft one-of-a-kind, ship-ready frontend interfaces with elevated design quality. Apply this skill whenever the user wants to build web components, pages, artifacts, posters, or applications (for example, websites, landing pages, dashboards, React components, HTML/CSS layouts, or any task that involves styling or beautifying a web UI). Produces inventive, refined code and UI design that sidesteps cookie-cutter AI aesthetics. Use this skill to produce singular, deployment-ready frontend interfaces that escape the bland "AI slop" look. Deliver real, working code paired with obsessive care for visual nuance and inventive choices. Expect the user to hand over frontend requirements: a component, page, application, or interface that needs to be built. Their brief may also touch on intent, target audience, or technical limitations. Do not start coding until you've absorbed the context and committed to a DARING visual direction. Work through these four questions first: - Purpose Which problem is this interface tackling, and who will be using it? - Tone Pick something extreme: ruthlessly minimal, maximalist chaos, retro-futuristic, organic/natural,

  • Purpose — Which problem is this interface tackling, and who will be using it?
  • Constraints — The technical boundaries you must operate inside (framework, performance, accessibility).
  • Differentiation — What turns this into something UNFORGETTABLE? Which single element will stick in someone's memory?
  • Production-ready and operational
  • Striking enough to stick in memory

Ui Designer by the numbers

  • 3,502 all-time installs (skills.sh)
  • +8 installs in the week ending Aug 4, 2026 (Skillselion tracking)
  • Ranked #105 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
  • Security screen: LOW risk (skills.sh audit)
  • Data as of Aug 4, 2026 (Skillselion catalog sync)
At a glance

ui-designer capabilities & compatibility

Capabilities
purpose — which problem is this interface tackli · constraints — the technical boundaries you must · differentiation — what turns this into something · production ready and operational · striking enough to stick in memory
Use cases
ui design · frontend
From the docs

What ui-designer says it does

Do not start coding until you've absorbed the context and committed to a DARING visual direction. Work through these four questions first:
SKILL.md
Whatever you build (HTML/CSS/JS, React, Vue, or similar) must be:
SKILL.md
Keep in mind: Claude is capable of remarkable creative output. Don't play it safe — show what becomes possible when you step outside convention and fully commit to a singular vision.
SKILL.md
npx skills add https://github.com/daniel-dan-conrad/ui-designer-skill --skill ui-designer

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs3.5k
Security audit3 / 3 scanners passed
Last updatedMay 18, 2026
Repositorydaniel-dan-conrad/ui-designer-skill

How do I craft distinctive ship-ready web interfaces with elevated typography, layout, motion, and component quality with documented agent guidance?

Craft distinctive ship-ready web interfaces with elevated typography, layout, motion, and component quality.

Who is it for?

Developers who need design & ui/ux help during build work.

Skip if: Skip when the task falls outside Design & UI/UX scope described in SKILL.md.

When should I use this skill?

Craft distinctive ship-ready web interfaces with elevated typography, layout, motion, and component quality.

What you get

Completed design & ui/ux workflow aligned with SKILL.md steps and validation.

  • React components
  • HTML/CSS layouts
  • styled web pages

By the numbers

  • Purpose — Which problem is this interface tackling, and who will be using it?
  • Constraints — The technical boundaries you must operate inside (framework, performance, accessibility).
  • Differentiation — What turns this into something UNFORGETTABLE? Which single element will stick in someone's memory?

Files

SKILL.mdMarkdownGitHub ↗

Use this skill to produce singular, deployment-ready frontend interfaces that escape the bland "AI slop" look. Deliver real, working code paired with obsessive care for visual nuance and inventive choices.

Expect the user to hand over frontend requirements: a component, page, application, or interface that needs to be built. Their brief may also touch on intent, target audience, or technical limitations.

Setting the Visual Direction

Do not start coding until you've absorbed the context and committed to a DARING visual direction. Work through these four questions first:

  • Purpose — Which problem is this interface tackling, and who will be using it?
  • Tone — Pick something extreme: ruthlessly minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian — and many more besides. Treat these flavors as launchpads, then craft a version that genuinely embodies the direction you've picked.
  • Constraints — The technical boundaries you must operate inside (framework, performance, accessibility).
  • Differentiation — What turns this into something UNFORGETTABLE? Which single element will stick in someone's memory?

CRITICAL: Settle on one unambiguous conceptual direction and execute it with precision. Audacious maximalism and pared-back minimalism are both valid — what matters is deliberateness, not loudness.

The Bar for Shipped Output

Whatever you build (HTML/CSS/JS, React, Vue, or similar) must be:

  • Production-ready and operational
  • Striking enough to stick in memory
  • Anchored in a single, intentional aesthetic point of view
  • Polished obsessively down to the smallest detail

Levers of Craft

Concentrate on:

  • Typography — Pick fonts that are striking, distinctive, and full of personality. Don't fall back on commonplace stacks like Arial and Inter; instead, select unconventional typefaces with real character that lift the interface — surprising, characterful choices. Pair a memorable display face with a refined body face.
  • Color & Theme — Commit to a unified visual identity. Rely on CSS variables to keep everything coherent. A bold dominant color punctuated by crisp accents will outperform a flat, evenly-weighted palette every time.
  • Motion — Use animation for effects and micro-interactions. For raw HTML, prefer CSS-only solutions first. In React, use the Motion library when it's available. Concentrate animation on high-impact moments: one carefully choreographed page entrance with staggered reveals (via animation-delay) creates more delight than a smattering of tiny touches. Add scroll-triggered transitions and hover states that surprise.
  • Spatial Composition — Layouts that defy expectation. Asymmetry. Overlapping forms. Diagonal flow. Components that crack the grid. Lavish whitespace OR controlled density.
  • Backgrounds & Visual Details — Build atmosphere and depth instead of defaulting to flat colors. Add contextual effects and textures that echo the broader aesthetic. Employ inventive treatments such as gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

Aesthetics to Reject

NEVER fall back on stock AI-styled aesthetics: the worn-out font stacks (Inter, Roboto, Arial, system fonts), tired color combinations (purple gradients over white backgrounds being a notorious offender), predictable layout and component templates, or assembly-line designs that ignore the specific context.

Read the brief imaginatively and make surprising decisions that feel authentically crafted for the situation at hand. No two designs should look alike. Rotate between light and dark themes, between different typefaces, between different aesthetic registers. NEVER settle into the same safe defaults (Space Grotesk, for instance) across multiple generations.

Calibrating Effort to Vision

IMPORTANT: Scale code complexity to fit the aesthetic intent. Maximalist work demands rich code thick with animation and effects. Minimalist or refined work demands discipline, precision, and meticulous attention to spacing, typography, and quiet details. Elegance emerges from executing the vision faithfully.

Keep in mind: Claude is capable of remarkable creative output. Don't play it safe — show what becomes possible when you step outside convention and fully commit to a singular vision.

Picking Contextual Imagery

Bundled with this skill is a script at scripts/find-relevant-image.py that selects a contextually fitting image from a curated, static database. It compares your description against the tags stored beside each image to identify the best match, while keeping the underlying resources current by checking if the installed skill is at the latest version, and prompting the user if update is available.

The image catalog lives in assets/images.csv with columns image-id, filename, tags, and image-base64. For each entry, the script tallies how many of its tags appear in your description, selects the top scorer, verifies the decoded file via the file command, and saves it into the output directory. The output filename is dictated by the image metadata — the caller does not supply it.

Invocation

python scripts/find-relevant-image.py "<description>"

Arguments:

  • description - A description of where and how the image will be used (e.g. "hero banner for a travel blog about Japanese temples")

The selected image lands in scripts/outputs/ (auto-created if missing). The complete output path is printed to stdout.

Example:

python scripts/find-relevant-image.py "warm, inviting background photo for a bakery landing page"
# Output: Matched image 'img-1234' written to /path/to/scripts/outputs/temple-landscape.png

Invoke this script whenever a frontend design calls for a real image rather than a placeholder — it locates one that fits the design context instead of dropping in a generic stock photo.

Related skills

How it compares

ui-designer is an agent skill for craft distinctive ship-ready web interfaces with elevated typography, layout, motion, and component quality, not a generic alternative.

FAQ

Who is ui-designer for?

Developers using Design & UI/UX workflows with agent-guided SKILL.md steps.

When should I use ui-designer?

Craft distinctive ship-ready web interfaces with elevated typography, layout, motion, and component quality.

Is ui-designer safe to install?

Review the Security Audits panel on this page before installing in production.

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.