Meng To

Design image-led pages with large photographs, visible grid guides, and carefully positioned text and buttons. Coordinate typography, transparent cards, shading, and subtle motion so the image remains prominent while supporting information stays readable.

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

• Designing a large photographic hero section
• Positioning headlines and buttons over images
• Coordinating cards and navigation around photography

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

Design a calm, dark workspace with frosted glass panels, multiple columns, and floating information cards. Coordinate navigation, framing, spacing, background depth, and subtle motion into a consistent interface that stacks cleanly on smaller screens.

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

• Designing a dark dashboard or workspace
• Arranging navigation and sidebars around a central view
• Unifying glass panels, buttons, and information cards

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

Design and build marketing sites, portfolios, and landing pages with original imagery, coordinated typography, and GSAP animations. The workflow also covers accessible interactions, media sourcing, performance limits, and static alternatives when motion or graphics are unavailable.

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

• Build a landing page with coordinated imagery and motion
• Create a portfolio with a distinctive visual direction
• Design accessible scroll animations

Build reusable enemy types and attack sets for Three.js action games. Separate enemy definitions from live state, standardize models and hit detection, and validate combat timing, placeholder assets, and desktop and mobile encounters.

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

• Adding enemies through reusable data definitions
• Separating enemy data from live combat state
• Standardizing models and temporary replacements

Find images in Aura Assets for design mockups and marketing, including backgrounds, architecture, and portraits. Get five direct image URLs per category, with guidance on resolution, aspect ratio, and cropping for different placements.

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

• Finding background images for website heroes
• Choosing portraits for design mockups
• Selecting abstract images for mobile wallpapers

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

Add subtle mouse-responsive depth to a Three.js hero scene. Smooth pointer movement drives small camera shifts and different object rotations, keeping the subject aligned with nearby text and cards while creating a gentle sense of perspective.

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

• Add subtle mouse response to a 3D hero
• Give foreground and background different movement
• Keep a moving model aligned with text and cards

Measure and improve Three.js or WebGL game performance through repeatable gameplay checks. Identify CPU or GPU bottlenecks, reduce unnecessary rendering and processing, and verify that controls, collisions, visuals, and memory remain stable.

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

• Investigating frame-time spikes
• Reducing rendering and particle workloads
• Improving performance on mobile devices

Use border-beam to add moving edge highlights or breathing glows to React controls and panels. Connect effects to loading, selection, and focus states while retaining clear text, static indicators, keyboard focus, and support for reduced motion.

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

• Adding a breathing glow to a processing panel
• Highlighting a selected card or current step
• Adding a moving bottom edge to an input

Create hand-drawn SVG illustration cards featuring expressive creatures or living objects that represent coding and design ideas. A supplied brush library supports uneven ink outlines, loose watercolor fills, large eyes, and consistent details across a set.

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

• Creating a loading illustration with a snail mascot
• Adding a character illustration to an error page
• Illustrating a coding concept for a blog header

Prepare and deploy Three.js or other web games from a tested commit, a specific saved code version. Check the live game's controls, assets, and display, then record release evidence and a rollback target.

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

• Releasing a tested web game
• Checking controls and assets in production
• Recording release evidence and a rollback target

Draw vintage emblem SVG illustrations for teams, events, and releases. Combine one bold object, a sun disc, carved shadows, and custom lettering in seven flat colors to create badges, posters, or marketing cards.

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

• Creating a badge for a team or club
• Illustrating a release announcement card
• Designing artwork for stickers or patches

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

Build or extend an isometric action RPG, viewed from an angled overhead perspective, using web technology. Develop a playable loop covering movement, combat, rewards, progression, and saves, with staged implementation and release checks.

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

• Building a first playable action RPG loop
• Adding combat, enemies, and rewards in stages
• Organizing equipment, quests, and zone data

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 SVG illustrations of active figures using one continuous black line and offset color patches that resemble misaligned printing. The skill guides poses, colors, composition, rendering, and visual checks for product pages and announcement cards.

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

• Illustrations for empty states and 404 pages
• Playful figures for onboarding screens
• Artwork for blog headers and launch announcements

Create coordinated website animations with GSAP, ScrollTrigger, and Lenis. Combine smooth scrolling, staged text and image reveals, pinned scenes, and pointer interactions, with guidance for performance, touch devices, and reduced-motion preferences.

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

• Coordinating motion across a portfolio website
• Revealing text and images during scrolling
• Building pinned storytelling sections

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

Test browser games through repeatable game states and short real playthroughs. Check controls, progression, saves, device layouts, and visible feedback, then report bugs with reproduction steps, severity, and browser evidence.

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

• Gameplay checks before release
• Regression testing after game updates
• Touch controls and mobile layout checks

Add reveal animations that start when page elements enter the visible area. The skill provides JavaScript using IntersectionObserver, a browser visibility detector, plus CSS keyframes and Tailwind-compatible classes, with adjustments for trigger position, motion, duration, and delay.

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

• Revealing sections as visitors scroll
• Staggering the appearance of multiple elements
• Adjusting when a reveal animation starts

Design dark dashboards with a thin blue laser, soft fog, and frosted glass surfaces. It guides backgrounds, navigation, cards, tables, typography, and gentle motion so the interface follows one consistent visual system.

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

• Designing a dark dashboard
• Unifying glass-style cards and navigation
• Adding a blue laser background