Web & UI pack
Claude Skill
Distinctive UI Designer
Builds production-grade frontend with a bold, cohesive aesthetic — distinctive typography, color, and motion, not the default generic look.
What it does
Takes a component, page, or app and implements real, working frontend code committed to one clear aesthetic direction — distinctive typography, a dominant color with sharp accents, high-impact motion, and intentional spatial composition. Built to produce interfaces that feel designed for their context, not assembled from the same handful of default fonts, palettes, and layouts.
When to use
- ✓Building a landing page, dashboard, or component that needs to look memorable, not templated
- ✓An existing UI is technically fine but visually generic and forgettable
- ✓You want a bold, cohesive aesthetic executed with precision in real code
When not to use
- ✗You need an accessibility/compliance pass — use the interface-guidelines reviewer
- ✗You just need standard components fast — use the component-library scaffolder
Install
Download the .zip, then unzip into your Claude skills folder.
mkdir -p ~/.claude/skills
unzip ~/Downloads/distinctive-ui-designer.zip -d ~/.claude/skills/
# Restart Claude Code session.
# Skill is now available — Claude will use it when relevant.SKILL.md
SKILL.md
---
name: distinctive-ui-designer
description: Use when building or restyling a frontend interface that needs high design quality and a distinctive look. Triggers on "make it look better", "distinctive design", "not generic", "premium UI", "beautiful landing page", "design a memorable interface".
---
# Distinctive UI Designer
Build real, working frontend that commits to one clear aesthetic direction and executes it with precision. The failure mode to avoid is the default generic look — the same few fonts, the purple-gradient-on-white palette, the predictable layout — that reads as un-designed. Both bold maximalism and refined minimalism work; the key is intentionality, not intensity.
## Before coding, commit to a direction
- **Purpose & audience** — what the interface is for, who uses it
- **Tone** — pick a clear aesthetic and commit: brutally minimal, maximalist, retro-futuristic, organic, luxe/refined, editorial/magazine, brutalist, art-deco, industrial. Design *to* that tone.
- **Differentiation** — the one thing someone will remember about it
## Aesthetic guidelines
- **Typography** — choose distinctive, characterful fonts; pair a display font with a refined body font. Avoid the generic defaults (Arial, Inter, system stacks) that signal "untouched."
- **Color** — commit to a cohesive palette via CSS variables. A dominant color with sharp accents outperforms a timid, evenly-distributed set.
- **Motion** — favor one well-orchestrated page-load with staggered reveals over scattered micro-interactions. CSS-first for plain HTML; a motion library for React when available. Use hover and scroll states that surprise.
- **Spatial composition** — asymmetry, overlap, grid-breaking elements, generous negative space *or* controlled density. Avoid the predictable centered-stack.
- **Backgrounds & detail** — build atmosphere and depth (gradient meshes, noise/grain, geometric patterns, layered transparency, dramatic shadows) rather than defaulting to a flat solid.
## Match complexity to the vision
Maximalist directions need elaborate code — extensive animation and effects. Minimalist directions need restraint: precise spacing, typography, and subtle detail. Elegance is executing the chosen vision fully, not adding more.
## Vary, don't converge
Don't reuse the same "safe" choices across projects. Vary themes (light/dark), fonts, and aesthetics to fit each context. The goal is an interface that looks made for *this* product.
## Anti-patterns
- The default generic look: Inter/Roboto, purple-on-white gradients, centered hero, three equal cards
- A pile of unrelated micro-animations instead of one orchestrated moment
- Decoration that fights the content (a background gradient louder than the headline)
- Converging on the same trendy font/palette every time
- Sacrificing usability or accessibility for visual flash
Example prompts
Once installed, try these prompts in Claude:
- Build a landing page for a specialty coffee roaster — editorial/magazine aesthetic, distinctive type, real working code.
- Our dashboard looks like every other SaaS. Give it a bold, cohesive visual direction without breaking usability.