Design skills

Design a clean agency-style page using nested containers: a light outer frame, dark inset sections, and rounded inner cards. Coordinate pricing, service groups, and action areas through clear hierarchy, generous spacing, and restrained accent colors.

• Designing a clean agency or service introduction page
• Highlighting pricing inside a dark inset section
• Organizing service groups with nested cards

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 warm, paper-toned signup screen
• Unify forms, cards, and button styling
• Pair onboarding forms with product illustrations

Design a cohesive dark interface with near-black surfaces, subtle pixel or grain textures, and thin accent-colored laser light. Extend the visual direction across panels, navigation, controls, borders, spacing, and motion while keeping content readable.

• Unify a dashboard around a dark visual system
• Add texture and depth to a flat black interface
• Build a hero area around a thin laser motif

Design interfaces that combine magazine-style composition with precise technology product details. Use asymmetrical columns, expressive headlines, wide image bands, fine dividers, and restrained accent colors to shape a consistent layout, navigation, and motion style.

• Combining editorial composition with a technology product interface
• Arranging large headlines and wide image bands
• Unifying navigation, labels, and information modules

Design portfolio websites that lead with project work, then introduce the studio and its services. Use distinct editorial chapters, project-specific colors, restrained animation, and a clear contact section to organize the visitor’s journey.

• Redesigning a creative studio’s portfolio
• Presenting photography or artwork through project chapters
• Connecting case studies to services and contact

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.

• Create a landing page that unfolds section by section
• Present portfolio projects as layered sticky cards
• Reveal headlines and backgrounds as visitors scroll

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.

• Adding monochrome atmosphere behind a dark interface
• Placing pixelated waves behind hero text
• Creating cloud-like backgrounds for data displays

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.

• Adding vertical guides along a page's content width
• Framing a hero section or product page
• Marking section corners with small squares

Build continuous scrolling rows for logos, testimonials, screenshots, or short tags. The skill explains how to duplicate content, stabilize item widths, soften edges, and accommodate people who prefer reduced motion.

• Build a continuously scrolling logo row
• Loop screenshots or testimonials
• Add a moving row of tags or feature chips

Create a warm beige light-mode interface with layered neutral surfaces, thin borders, and orderly information grids. Apply a consistent style across page backgrounds, hero sections, cards, buttons, status indicators, and subtle motion.

• Creating a warm beige product presentation page
• Organizing process explanations into consistent grid sections
• Unifying the appearance of cards, buttons, and page backgrounds

Apply subtle gradient borders to cards, pricing panels, buttons, and other web surfaces. Choose layered CSS backgrounds or a masked border to suit existing designs, with guidance on Tailwind syntax, corner alignment, opacity, and light and dark themes.

• Adding subtle borders to cards and pricing panels
• Decorating edges without replacing a complex background
• Adding brand accents to hover and focus states

Design enterprise AI and automation product pages that explain permissions, approvals, audit records, and recovery from failures. Organize verified metrics and case studies, accessible workflow details, and demo or waitlist forms that clarify what happens next.

• Redesigning an enterprise AI product page
• Explaining permissions and approval workflows
• Presenting verified security controls and case studies

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.

• Add subtle numbers to process steps
• Give feature cards consistent corner markers
• Place number markers beside section headings

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.

• Adding fluid shapes to a page background
• Creating a merging-blob loading indicator
• Building a soft cursor effect

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.

• Creating sci-fi-style controls
• Unifying diagonal corners across cards and panels
• Adding gradient borders to clipped shapes

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.

• Designing a futuristic page with layered blue light
• Unifying navigation, buttons, and section frames
• Adding subtle network labels and slow background motion

Create thin laser beams that meet at a bright corner or edge junction, surrounded by soft haze. Adjust beam angles, accent colors, glow, and subtle motion to build a spatial composition for an interface.

• Adding laser beams along a screen corner
• Creating a glowing portal seam
• Matching laser effects to an interface accent color

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.

• Defining a consistent dark interface style
• Structuring panels with fine gradient borders
• Designing navigation and active list states

Create SVG illustration cards of people working with laptops, screens, and design components. Follow a defined pastel palette, violet frame, thin navy outlines, and overlapping speech bubbles to produce matching artwork for product pages, onboarding, and team content.

• Create illustrations for support or team pages
• Add matching artwork to onboarding and 404 screens
• Draw people designing interfaces or coding

Design minimal agency websites around a precise column grid, oversized headlines, generous whitespace, and restrained imagery. Establish a consistent visual direction for service listings, labels, buttons, and subtle motion across architecture, design, or strategy agency pages.

• Website design for architecture and design agencies
• Establishing a consistent visual system across pages
• Structuring service listings with a clear column grid

Apply layered, neutral shadows to cards, form controls, panels, and larger containers using Tailwind classes with custom values. Three prescribed shadow strengths help match visual depth to the size and purpose of each component.

• Adding subtle depth to form controls and compact cards
• Styling shadows for panels and popovers
• Giving hero media and modal-like containers stronger elevation

Choose Unsplash images for avatars, portraits, website backgrounds, and wallpapers. Get links to the photo pages, recommended dimensions and aspect ratios, and guidance on cropping and resizing images for each intended use.

• Choosing square avatar images
• Finding portraits for profile cards
• Selecting wide website backgrounds

Create original SVG illustration cards of people coding, thinking, or resting. The style combines thick, uneven black marker lines, offset mint shapes, and cream paper for onboarding screens, error pages, editorial headers, and marketing cards.

• Illustrate an empty state
• Add character art to onboarding
• Create an illustration for a 404 page

Design and implement web animations that guide attention, explain hierarchy, and confirm actions. Define reusable timing and movement rules, plan coordinated sequences, and account for performance and accessibility settings that reduce motion.

• Plan entrance animations for a product page
• Standardize timing and easing across a UI
• Add hover feedback and navigation transitions