105 tagged ui design, measured the same way as everything else here.
Browse within: design-system 44tailwindcss 39homepage-generator 14personal-brand-narrative 14zero-code-ui-design 14design 13accessibility 10frontend-ui 10prompt-engineering 10web-search 10skill 8generative-design 6ux-design 6ux 5
Skill Claude CodeCodex
In-chat fallback for the Timeline Inspector Refine agent. Use when the user runs /refine live, asks to "refine live", "go live", or answer refine jobs — but ONLY when no persistent agent is wired (no npx transitions-refine live). Prefer npx transitions-refine live for run-and-forget (relay spawns agent per click, no…
Skill Claude CodeCodex
Production-ready CSS transitions for web apps. Use when implementing notification badges, dropdowns, modals, panel reveals, page transitions, card resizes, number pop-ins, text swaps, icon swaps, success checks, avatar group hovers, error state shakes, search/input clear, skeleton loaders, shimmer text, sliding tabs…
Skill Claude CodeCodex
Polish and refine existing motion against the transitions.dev motion-token scale — duration, distance, scale, blur, and easing — plus the rules for WHEN each token applies (open/close asymmetry, hover-in vs hover-out, stagger offsets, and intent delays). An add-on to the transitions-dev skill, focused on tuning what…
Skill Claude CodeCodex
A design review and redesign guide that combines product reasoning, visual design references, interaction patterns, and engineering checks for user interfaces.
Skill Claude CodeCodex
A set of instructions for building and reviewing product front ends, meaning the visible part of an application that users interact with. It covers pages, components, forms, data flow, layout, styling, responsive behavior, and animations.
Skill Claude CodeCodex
Use when creating, redesigning, or reviewing web interfaces that need product-specific structure, clear hierarchy, responsive composition, accessible interaction, or relief from generic AI-generated SaaS aesthetics. Adapt grid, typography, imagery, motion, and product evidence to the established brand—including…
Skill Claude CodeCodex
A workflow for fixing cases where MasterGo design files do not import into Figma with the same visual result as a reference screenshot or structure.
YuqingNicole/variant-design-skill
Skill Claude CodeCodex
AI-driven interactive design generation, style analysis, and UX evaluation with Impeccable design system. Context-aware output — auto-detects React projects (package.json with react dependency) and generates .tsx components; otherwise generates zero-dependency interactive HTML. Seven modes — (0) Design System: tokens…
YuqingNicole/variant-design-skill
Skill Claude CodeCodex
Design System mode — tokens → components → pages three-layer workflow. Generate a complete token set (palette/type/spacing/motion/elevation/radius), confirm it, then all downstream outputs are visually consistent. Triggers on: ds, design system, tokens, create token set, define palette, define tokens, set up tokens…
YuqingNicole/variant-design-skill
Skill Claude CodeCodex
Generate 3 distinct design variations from a prompt. Each variation feels like a different studio — layout, palette, typography, and motion diverge. Supports variation actions: Vary strong/subtle, Distill, Shuffle layout, Change style, Remix colors, Mix, Dramatize, Add motion, Make interactive, Polish, Critique, See…
Skill Claude CodeCodex
Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or…
Skill Claude CodeCodex
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos…
Skill Claude CodeCodex
Use when the user wants to turn a page-story markdown file (page-story-.md) into a polished static HTML page. Trigger for: personal pages, academic homepages, portfolio pages, profile pages, any request to build a page from a structured markdown brief. Runs the full pipeline automatically: design context gathering…
jaywilburn/refactoring-ui-skill
Skill Claude CodeCodex
Comprehensive UI design guidance based on Refactoring UI principles covering design personality, color theory, layout strategy, visual hierarchy, typography, spacing, mobile-first responsive design, and writing copy that doesn't read like AI wrote it. Use this skill whenever the user is creating new pages, building…
Skill Claude CodeCodex
Stop coding agents from shipping generic UI. Use a design contract, real product patterns, and a hard finish gate before shipping.
Skill Claude CodeCodex
Design, build, or improve web and mobile interfaces using real product examples from UIZZE’s 800,000+ web and iOS screens. Use for UI design, UX design, frontend or web design, mobile app UI, responsive layouts, design systems, redesigns, visual polish, interface critique, and requests like “make this UI better.”.
Skill Claude CodeCodex
Find and compare real UI examples from UIZZE’s 800,000+ web and iOS screens. Use for UI inspiration, UI research, design references, comparable apps, user flows, layouts, navigation, components, interaction states, and product patterns before designing or redesigning an interface.
Skill Claude CodeCodex
Legacy compatibility alias for StitchFlow. Use when a user explicitly references stitch-design-local, or when older prompts and setups still call that skill name.
Skill Claude CodeCodex
Turn briefs, mockups, and product context into Stitch UI screens, design systems, variants, prototypes, Tailwind-friendly HTML, and screenshots. Use when the user wants to explore a screen, edit an existing Stitch project, compare visual directions, build a multi-screen prototype, or save local design/code-export…
Skill Claude CodeCodex
Compares overlapping or duplicate skills to identify the best one for a given use case. Always starts with a functional analysis (feature coverage, tool access, specialization): if a clear winner emerges, recommends it directly with cited evidence. When skills are functionally tied, or partially overlapping with a…
Skill Claude CodeCodex
Pixel-perfect website cloner. Given a URL, faithfully reproduces the page as a single self-contained HTML file. Uses Playwright to render the page in a real browser, then directly extracts the rendered DOM + all computed CSS — no manual rewriting. Handles static HTML, JS-rendered SPAs, Webflow, Next.js, and any…
Skill Claude CodeCodex
High-aesthetic frontend UI generator trained on the design DNA of Linear, Vercel, Stripe, Raycast, Resend, Supabase, Anthropic and 10+ other benchmark products. Analyzes reference URLs or screenshots to extract design DNA (color, typography, spacing, motion), generates pixel-perfect production code, and saves…
Skill Claude CodeCodex
Redesign and locally modify an existing Codex desktop or web interface from reference images, a user persona, a celebrity, idol, actor, musician, fictional character or original IP theme, a visual style, or a combination of these inputs. Use when Codex needs to inspect a local Codex installation or source checkout…
Skill Claude CodeCodex
An offline library of 79 UI style families, with prompts in Chinese and English. It covers styles such as glassmorphism, vaporwave, bento grids, and minimalism.