Meng To

Design a dark interface with purple accents, layered rounded containers, and precise borders. Apply a consistent visual direction to cards, search bars, navigation, and motion, with playful futuristic objects as focal points.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Designing a futuristic talent platform
• Unifying cards, search bars, and navigation
• Adding purple lighting and animated focal objects

Design a dark navy interface with bold cobalt feature blocks, readable white text, thin framing lines, and localized blue glow. Apply a consistent visual direction to hero banners, action cards, navigation, link groups, and footer areas.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Unifying a dark website around deep navy and cobalt
• Highlighting a hero banner or action area with blue gradients
• Organizing link groups with thin frames and numeric labels

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

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

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

Add animated liquid-metal borders to React buttons, cards, tabs, and other surfaces using metal-fx. The skill covers visual tuning, linking effects to interaction states, preserving keyboard access, and providing static borders when animation or WebGL is unavailable.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Highlighting selected tabs and filters
• Adding metallic borders to primary buttons
• Tuning card borders, glow, and corner radius

Create CSS snippets that gradually fade the horizontal or vertical edges of images, text, or containers. Adjust fade width and opacity, with both standard and Safari mask properties included.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Fade the left and right edges of an image
• Fade text at the top and bottom
• Adjust fade width and opacity

Plan or rewrite a SaaS pricing page so visitors can compare options and choose a plan. Produce a page outline, pricing table specifications, FAQs, search metadata, and a layout recommendation based on the offer and audience.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Planning a pricing page for a new SaaS product
• Clarifying differences between pricing plans
• Writing FAQs that address purchase concerns

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 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

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.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Displaying logos in an integrations grid
• Aligning customer and partner logos
• Giving tool badges a consistent appearance

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

Shape a high-contrast interface with dark molded panels, inset shadows, and tactile controls that resemble physical objects. Apply a consistent visual system across page framing, cards, buttons, and small status displays, using one restrained accent color.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Designing a dark interface with tactile depth
• Giving cards and controls a consistent material feel
• Using a brand color for status and active indicators

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

Add a lightweight interactive globe to a web page with cobe. Covers location markers, rotation, canvas sizing, responsive updates, performance settings, and integration with React or Next.js for hero sections, about pages, and cards.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding a spinning globe to a hero section
• Showing office locations with globe markers
• Adapting globe rendering to mobile screens

Plan or rewrite a landing page for a SaaS product, app, or service around one audience and one action. Produce page structure, headlines, benefit copy, FAQs, layout recommendations, and guidance on search visibility.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Plan a landing page for trial signups
• Align landing page copy with an ad
• Address purchase concerns with evidence and FAQs

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 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

Add scroll-triggered text animations in which words rise into view one after another. Uses GSAP ScrollTrigger with hidden overflow masks, while preserving spaces, screen reader text, and static display for people who prefer reduced motion.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Animating a hero headline as it enters view
• Revealing section titles word by word
• Respecting reduced-motion preferences in text animations

Create structured web layouts with thin borders, L-shaped corner marks, and subtle diagonal backgrounds. Align sections, headings, controls, and media to a shared grid, with consistent spacing and a single-column layout on narrow screens.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Design a web page with clearly framed sections
• Align headings, controls, and media to a shared grid
• Add subtle diagonal textures and corner marks

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.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Establishing visible boundaries for a page
• Separating hero, feature, proof, and CTA sections
• Aligning inset spacing across content blocks

Add or debug web animations with GSAP, from entrance effects to scroll-driven sequences. Coordinate timing across multiple elements, adjust motion, and address rendering performance and cleanup when using animations in React.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Animate a hero section with staggered entrances
• Build scroll-driven animated sections
• Coordinate navigation, headings, and buttons

Build falling leaves or petals with visible front-and-back tumbling and sideways motion tied to rotation. Covers 2D canvas and 3D implementations, depth layers, particle density, rendering costs, and reduced-motion support.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Add autumn leaves to a web page
• Animate drifting cherry blossom petals
• Create layered foliage in a 3D scene

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