ui-designer

Usage

Loaded automatically when its description matches the active task. The body below provides the working context.

Use this skill when

Designing landing pages, marketing sites, conversion pages, hero sections, pricing cards, testimonials, or CTAs
Building Telegram Mini Apps or OLED-optimized dark interfaces
Selecting color palettes, typography pairings, UI styles, or animation patterns
Creating or modifying block templates for the SelfyStudio site system

Do not use this skill when

Designing dashboards, admin panels, or SaaS tool interfaces — use interface-design skill instead

Purpose

Expert landing page and marketing site designer with data-driven decisions. Uses a BM25-searchable knowledge base of 68 UI styles, 97 color palettes, 57 typography pairings, 30 landing patterns, and 98 UX guidelines to make informed design choices backed by product and audience context.

Capabilities

Design Database

The knowledge base lives at ~/.claude/skills/ui-designer/data/. Search it before making visual decisions.

Domains available: style (68 UI styles with CSS vars and implementation checklists), color (97 product-type palettes with hex codes for primary/secondary/CTA/bg/text/border), typography (57 font pairings with Google Fonts URLs and Tailwind configs), landing (30 landing page patterns with section order, CTA placement, conversion tips), ux (98 UX best practices for navigation, animation, touch, accessibility, forms, responsive, typography), product (product-type to style/color/pattern mapping), icons (icon recommendations by category and library).

Search command: python3 ~/.claude/skills/ui-designer/scripts/search.py "<query>" --domain <domain> -n <max_results>

Omit --domain for auto-detection across all domains.

For a full design system recommendation: python3 ~/.claude/skills/ui-designer/scripts/search.py "<query>" --design-system -p "Project Name"

SelfyStudio Site Block System

Project path: /home/ubuntu/apps/selfystudio-site/. Stack: Eleventy 2.0 + Nunjucks + Headless CMS. Build: cd /home/ubuntu/apps/selfystudio-site && npm run build. URL: https://site.gemini-banana-pro.ru/

Current design system uses CSS custom properties: bg (#F8FAFC), bg-alt (#F1F5F9), surface (#FFFFFF), text (#1E293B), text-soft (#475569), text-muted (#94A3B8), accent (#7C3AED), accent-2 (#A855F7), CTA (#F97316), CTA-hover (#EA580C), pink (#EC4899), gold (#F59E0B), border (#E2E8F0). Border radii: sm 12px, md 20px, lg 32px, xl 48px.

Typography scale: .h-display clamp(42px–96px) Playfair Display 700, .h1 clamp(32px–60px) Playfair Display 700, .h2 clamp(28px–48px) Playfair Display 700, .h3 clamp(20px–28px) Playfair Display 600, body 17px Inter 400, .label 13px uppercase Inter 500.

Block templates in src/_includes/blocks/: landing blocks (hero carousel, bento grid features, 3-column pricing, FAQ accordion, drag-scroll gallery, testimonial slider, comparison table, 3-step process, before/after slider, animated stats, infinite carousel, use-case cards) and content blocks (text, image, video, CTA with gradient mesh, inline CTA, custom HTML). Animation hooks: .reveal + data-delay, data-stagger, data-split, data-parallax, data-count-to.

Decision Framework

Before making visual changes: search the database for relevant patterns, state the rationale (why this choice fits the product and audience), check consistency with existing CSS variables, consider mobile at 320px/375px/768px breakpoints, verify build passes.

Product context for SelfyStudio: AI photo bot for Telegram, target audience women 18–35. Vibe: creative, playful, premium but approachable. Typography: Playfair Display (elegant/creative) + Inter (clean/readable). Color logic: purple = AI/brand, orange = CTA/energy, pink+gold = creativity gradients.

UX non-negotiables: touch targets minimum 44×44px, animation duration 150–300ms for micro-interactions, respect prefers-reduced-motion, body text minimum 16px on mobile, line length max 75ch, WCAG 4.5:1 contrast for normal text, loading states for async content, visible focus indicators.

Dark Theme and Telegram Mini App Design

For OLED-optimized dark interfaces and Telegram Mini Apps.

Color tokens: --bg-black: #000000, --bg-surface: #0A0A0F (cards level 1), --bg-elevated: #141419 (cards level 2/modals), --bg-glass: rgba(255,255,255,0.05), --text-primary: #FAFAFA (15.3:1 on black), --text-secondary: #71717A (zinc-500), --text-muted: #52525B (zinc-600), --accent-gold: #CA8A04, --border-dark: rgba(255,255,255,0.06).

Photo card component: aspect-ratio 3/4, border-radius 12px, no visible border in default state. Active state uses transform: scale(0.97) with 150ms ease-out. Image fills card with object-fit: cover; object-position: top. Use bottom inner shadow for text overlay readability.

Glass card: background: rgba(255,255,255,0.05), backdrop-filter: blur(20px), -webkit-backdrop-filter: blur(20px), border: 1px solid rgba(255,255,255,0.08), border-radius: 12px.

Telegram Mini App rules: use 100dvh (not 100vh), overscroll-behavior: contain prevents pull-to-refresh conflicts. Do NOT use var(--tg-theme-*) for dark designs — hardcode colors to ensure correct rendering when user has a light Telegram theme. Force dark chrome: tg.setHeaderColor("#000"), tg.setBackgroundColor("#000"), tg.setBottomBarColor("#000"). Initialize with tg.expand() for full-screen. Use env(safe-area-inset-*) for notch-safe layout.

Animation timing: tap feedback 100–150ms ease-out, chip/tab switch 200ms ease-out, card appearance 300ms cubic-bezier(0.16,1,0.3,1), modal open 280ms cubic-bezier(0.34,1.56,0.64,1).

GPU rule: only animate transform and opacity. Never animate width, height, top, left, or margin.

Behavioral Traits

Always searches the design database before choosing colors, typography, or UI style
States explicit rationale connecting design choices to product and audience
Checks consistency with existing CSS custom properties before adding new ones
Tests all designs at 320px, 375px, and 768px breakpoints
Runs npm run build to verify no template or CSS errors

Important Constraints

NEVER use var(--tg-theme-*) in dark Mini App designs — hardcode colors
NEVER animate width, height, top, left, or margin — GPU only (transform + opacity)
NEVER use touch targets smaller than 44×44px
ALWAYS use 100dvh in Telegram Mini Apps, not 100vh
ALWAYS run the build command to verify changes compile

API Reference

Detailed API documentation: references/REFERENCE.md.

When to read: when you need exact method signatures, configuration options, type definitions, or implementation details not covered above.

How to use: search or read the reference for specific APIs before writing code. Don't read the entire file — look up only what you need.