UI/UX, logos, slides, and image generation (7.4K skills)
Create web controls that resemble physical materials using gradients, layered shadows, reflective edges, and subtle texture. The skill covers raised and pressed states, plus embossed labels and icons for buttons, cards, switches, and other controls.
Design a two-panel page that gives visuals and supporting information distinct roles. This skill guides framing, spacing, typography, compact labels, and responsive stacking for product pages, portfolios, showcases, and technical presentations.
Give navigation, controls, and feature cards a consistent icon style using Iconify Solar Duotone Bold. It guides icon sizing, clear labels, two-tone opacity, and contrast so icons fit the surrounding interface.
Design a dark interface with matte-black surfaces, emerald accents, framed cards, and restrained glow. Apply consistent styling across navigation, typography, charts, and motion to create a calm, technical dashboard.
Add word-by-word reveal animations to headlines and short copy, with each word fading in and rising once as it enters view. Includes implementation examples that account for screen readers, reduced motion, and disabled JavaScript.
Transform an article, case study, or brand story into a connected scrolling page. Choose scroll-controlled video, a real-time Three.js scene, or HTML with charts and typography, then organize the narrative into five to seven clear stages.
Choose a visual direction for landing pages using WebGL, a browser graphics technology. Balance brand style with readable copy, clear calls to action, mobile performance, accessibility, and implementation effort, then define fallbacks and build priorities.
Design a dark monochrome interface around an exploded 3D wireframe, an outline view of separated parts. Coordinate annotations, connector lines, typography, and small metric displays to explain product structures or system states.
Create a near-black animated canvas background with large square pixels and ordered dithering, a repeating pattern that represents shades. Broad waves and cloud-like forms provide atmosphere behind framed interfaces, hero text, or data displays.
Create fluid animations where rounded shapes merge as they approach and separate as they move apart. SVG filters combine blur with a cutoff effect to form soft, connected shapes for backgrounds, loaders, or cursor effects.
Add subtle vertical guides and small corner squares to web pages using CSS and HTML patterns. Align them with the content width across sections, preserve mobile spacing, and keep the guides from blocking clicks or text selection.
Design a cohesive dark navy interface with layered blue light, a framed hero area, compact navigation, floating network labels, and clear action buttons. Includes styling examples and guidance for slow animation that keeps text readable.
Create agency, studio, architecture, or portfolio websites using oversized typography, black-and-white sections, and documentary photography. Arrange project stories and irregular image collages alongside menus and FAQs designed for keyboard, touch, and reduced-motion use.
Add subtle two-digit number markers to process steps, feature groups, cards, or editorial sections. Use consistent placement, spacing, and understated typography to provide visual structure while keeping headings and calls to action prominent.
Create dark interfaces with frosted glass panels, gradient borders, and subtle glow. The skill provides CSS and Tailwind patterns for cards, hero sections, and dashboards, with checks for readable contrast, visible focus, and mobile behavior.
Build product pages that reveal interfaces and explanations as visitors scroll. Uses GSAP ScrollTrigger to coordinate pinned scenes, gradual reveals, and section transitions while keeping the product story and interface readable.
Create buttons, cards, and panels with diagonally cut corners. It provides CSS shapes, border treatments, and sizing guidance to keep the geometry consistent while preserving readable labels, usable touch targets, and visible keyboard focus.
Create a dark interface built around fine gradient borders, asymmetrical panels, and precise labels. Apply a consistent visual system to page frames, typography, controls, and backgrounds, using restrained monochrome colors and subtle motion.
Create landing pages that unfold as visitors scroll, using Lenis and GSAP ScrollTrigger. Combine sequential text reveals, layered sticky cards, backgrounds moving at different speeds, and loading transitions, with reduced-motion and mobile fallbacks.
Structure a page with a centered outer frame and inset inner sections. Use visible boundaries, corner markers, backgrounds, borders, and rounded corners to distinguish content levels while keeping spacing consistent and text readable.
Design SaaS interfaces with warm paper tones, orange accents, rounded forms, and layered product illustrations. Apply a consistent visual direction across onboarding, cards, buttons, and motion, with adjustable warmth, softness, and visual detail.
Design a dark interface around frosted glass surfaces and a clock-like circular dial. Coordinate backgrounds, navigation, buttons, typography, and slow motion to create a consistent instrument-panel appearance with restrained monochrome highlights.
Design appointment-based service websites with calm photography, spacious layouts, and clear treatment comparisons. Carry the same visual style through location, practitioner, and time selection, including booking confirmation, validation errors, retries, and preserved choices.
Build consistent rows and grids of brand logos using Iconify Simple Icons. Place marks in 64×64 visual boxes, adjust their size and alignment, and add accessible labels where needed for integration lists, partners, or tool badges.