디자인 스킬

Tone down interfaces that feel visually overwhelming by refining colors, typography, spacing, decoration, and motion. Preserve important emphasis and recognizable character while creating a calmer layout that remains readable and easy to use.

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

• Softening overly vivid colors
• Reducing competing bold text and large elements
• Simplifying excessive decoration and animation

Builds frosted-glass interface components using translucent backgrounds, background blur, subtle borders, and soft shadows. Provides shared CSS settings and examples for consistent cards, navigation bars, modals, and buttons, with guidance on readability and browser support.

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

• Creating frosted-glass cards
• Giving navigation bars and modals a consistent glass style
• Styling translucent buttons and hover states

Build Apple-inspired translucent interfaces using shared CSS settings and component patterns. The skill covers glass cards, toolbars, buttons, and modals, with light and dark modes, motion guidance, and accessibility requirements for readable text and reduced animation.

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

• Designing translucent cards and buttons
• Styling glass toolbars and modals
• Supporting light and dark interface modes

Design and refine web interfaces around their audience, tasks, and brand tone. Covers typography, color, layout, motion, accessibility, and performance, with guided techniques for reviewing existing screens and preparing them for release.

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

• Establishing a design system
• Reviewing interface usability and accessibility
• Adapting layouts for mobile devices

Improves typography in web interfaces by reviewing fonts, text sizes, weights, spacing, and visual hierarchy. It helps make headings and body text easier to distinguish and read, while checking consistency, font loading, and accessibility.

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

• Clarify headings, body text, and captions
• Improve readability on long text pages
• Unify inconsistent text styles

Add personality to interfaces through small interaction responses, completion animations, illustrations, and product-specific messages. Shape enjoyable moments around the brand and user context while preserving task flow, accessibility, and performance.

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

• Refining button and form feedback
• Adding personality to empty and loading states
• Celebrating completions and milestones

Add purposeful color to monochromatic interfaces so key actions, statuses, and categories are easier to recognize. Refine backgrounds, text, and charts around a consistent palette while checking contrast and avoiding reliance on color alone.

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

• Adding warmth to a gray interface
• Highlighting primary buttons
• Distinguishing statuses and categories

Simplify cluttered interfaces by reviewing information, visual styling, interactions, copy, and code. Keep essential functionality and accessibility while clarifying the main action, consolidating related elements, and revealing secondary details only when needed.

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

• Decluttering a screen with too many competing buttons
• Reducing unnecessary colors, borders, and nested cards
• Shortening forms and simplifying interaction steps

Evaluate pages and components for usability, visual hierarchy, clarity, and emotional tone. Produce a score out of 40, examine tasks from relevant user perspectives, and prioritize concrete improvements around the user's goals and constraints.

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

• Reviewing a page or component before release
• Prioritizing fixes for confusing navigation and information overload
• Checking tasks from first-time and experienced user perspectives

Build soft, clay-like interface components using rounded corners and layered shadows. Includes CSS variables and examples for cards, buttons, inputs, and toggles, with guidance for dark mode, readable text contrast, and visible keyboard focus.

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

• Designing soft, dimensional cards and buttons
• Giving inputs and toggles a consistent appearance
• Adapting clay-like components for dark mode

Improve interface layouts by reviewing spacing, alignment, content density, and visual hierarchy, the cues that show what matters most. Refine repetitive card grids and crowded sections into compositions with consistent spacing and responsive structure.

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

• Adjusting spacing in a crowded interface
• Making important content easier to spot
• Varying repetitive card-based layouts

Establish reusable design guidelines by reviewing project files and asking about unresolved preferences. The skill records the audience, brand personality, visual direction, and design principles in a project file for future sessions.

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

• Set design guidelines at the start of a project
• Record brand and visual preferences for future sessions
• Organize design context from existing code and assets

Give bland interfaces more visual character through typography, color, layout, spacing, and motion. Shape a clear focal point around the brand and audience while checking readability, accessibility, performance, and ease of use.

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

• Giving a bland page more visual character
• Creating a stronger focal point for key content
• Reworking typography and color to fit a brand

Align existing pages and components with a design system by reviewing colors, typography, spacing, and interaction patterns. Replace inconsistent styles and custom implementations with shared standards, then check code quality and usability.

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

• Aligning a page with an existing design system
• Replacing hard-coded styles with shared design values
• Standardizing components and interaction patterns

Review an interface and add purposeful motion to buttons, forms, navigation, and state changes. Plan and implement animations that clarify actions and provide feedback, while checking performance and supporting users who prefer reduced motion.

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

• Adding visual feedback to buttons and forms
• Smoothing menu, modal, and tab transitions
• Planning page entrances and scroll reveals

Design and improve welcome flows, empty screens, and guided tours that help new users complete their first useful task. Includes contextual hints, optional guidance, completion tracking, and ways to assess whether users understand what to do next.

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

• Improve the experience for first-time users
• Guide users from empty screens to their first action
• Design guided tours for complex interfaces

Improve confusing interface text, from error messages and form labels to buttons and loading notices. This skill clarifies what happened, what users should do next, and which terms to use consistently across the product.

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

• Rewrite error messages with clear recovery steps
• Clarify form labels and input instructions
• Make button actions easier to understand

Adapts existing designs for phones, tablets, desktops, print, and email. Adjusts layouts, navigation, content priorities, and touch controls to suit each context, with guidance for responsive sizing and verification across devices and input methods.

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

• Adapting a desktop interface for mobile use
• Adjusting tablet layouts for portrait and landscape
• Expanding a mobile design for desktop screens

Creates bold interface components with thick black borders, vivid colors, sharp corners, and solid offset shadows. Uses shared CSS settings to coordinate cards, buttons, navigation, inputs, and badges, including interaction states and accessibility considerations.

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

• Creating cards with bold borders and solid shadows
• Adding hover and pressed states to buttons
• Coordinating navigation, inputs, and badges

Inspect a running website at different screen sizes to find layout problems, inconsistent styling, and accessibility issues such as poor contrast. Fix the relevant source code, recheck the results, and report changes with before-and-after screenshots.

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

• Finding and fixing broken mobile layouts
• Reviewing spacing, fonts, and color consistency
• Checking contrast and keyboard focus visibility

Turn a broad UI request into concrete design rules for colors, typography, layout, and interactions. The skill provides accessibility checks and implementation guidance for the chosen framework, with saved design notes to keep multiple pages consistent.

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

• Define a design direction for a landing page
• Choose dashboard colors and typography
• Review UI accessibility and interactions

Build web pages, application interfaces, and components with a clear visual direction suited to their purpose and audience. It turns design choices about typography, color, layout, and motion into working frontend code with consistent visual details.

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

• Building a landing page with a clear visual direction
• Designing and implementing a dashboard
• Creating styled React components

Helps build and review interface details such as button feedback, menus, animations, and drag gestures. Provides concrete implementation guidance based on usage frequency, responsiveness, rendering performance, and accessibility, including when to reduce or omit motion.

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

• Reviewing UI code with concrete changes and reasons
• Choosing animation timing and easing
• Refining drag gestures and component feedback

Design and refine web animations for buttons, dialogs, menus, and gestures. The skill guides timing, changes in speed, spring motion, performance, and reduced-motion preferences so transitions fit the interaction and remain responsive.

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

• Refine dialog and menu transitions
• Adjust button press and hover feedback
• Investigate stuttering animations