디자인 스킬

Turn presentation content in JSON, a structured data format, into styled images and a browser slideshow. Choose a visual style, generate slide artwork, and optionally combine images and transition clips into a complete presentation video.

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

• Creating styled artwork for presentation slides
• Previewing presentations in a browser
• Combining slide images and transitions into a video

Turn plain-language descriptions or Mermaid diagrams into interactive, standalone HTML diagrams of systems, workflows, API exchanges, data flows, and state changes. Validate layouts, explore relationships, switch themes, and export diagrams as images or video.

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

• Explain system components and their relationships
• Visualize workflows and approval steps
• Map API calls and data pipelines

Create image generation prompts for portrait Xiaohongshu covers using supplied photos and post content. Choose from eight visual styles, then define large Chinese headlines, colors, poses, and supporting graphics in a detailed composition.

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

• Planning a cover for an AI tool tutorial
• Designing a cover for a product comparison
• Preparing a cover for podcast recommendations

Intended to generate icons in multiple sizes with a consistent visual style for apps, websites, and user interfaces. The supplied description outlines this purpose, but the skill file is a placeholder without operational instructions.

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

• Prepare icons for an app
• Create icons for a website
• Plan a consistent icon set across multiple sizes

Turn image briefs into structured prompts for GPT-Image-2 using reusable JSON templates, organized fields for visual requirements. Specify composition, text, lighting, and constraints for product images, posters, infographics, and other design work.

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

• Prepare prompts for product images
• Specify poster titles and layouts
• Structure infographic content

Create static technical drawings from object descriptions, photographs, or CAD models. Produce consistent views that explain shape or assembly, plus a viewer with zoom, editable colors, and downloads in SVG, PNG, and PDF formats.

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

• Creating an exploded view to explain an assembly
• Drawing aligned views from supplied dimensions
• Illustrating an object's shape from photographs

Refine interface surfaces, icons, and motion with specific values for corners, shadows, alignment, and transitions. Preserve the project's existing design conventions while identifying visual inconsistencies, touch interaction problems, and missing alternatives for reduced motion.

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

• Refining corners and shadows on nested cards
• Unifying icon appearance across interaction states
• Adjusting button feedback and entrance animations

Create three distinct versions of one interface component and compare them at full size on the actual page. Explore a chosen design dimension, review each option's tradeoffs, and integrate the selected version while removing the temporary comparison controls.

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

• Compare alternative structures for one component
• Explore different spacing and density levels
• Share links to individual design options

Build and review interface color systems with palettes, format conversions, and semantic tokens that name colors by purpose. Measure foreground and background contrast, and identify inconsistent themes, misused color roles, and colors outside the supported range.

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

• Build palettes around interface roles
• Organize color tokens by purpose
• Measure text and background contrast

Set and review how interface text renders, including font loading, size hierarchy, line spacing, wrapping, truncation, and punctuation. Apply fixes within the existing styling system and check how realistic content behaves across different widths.

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

• Organize heading and body text sizes
• Fix wrapping and truncated text
• Keep changing numbers aligned

Review and improve interface grouping, alignment, spacing, and responsive structure. Check whether content and actions remain accessible when screens resize, text grows in translation, zoom increases, or the layout switches to right-to-left reading.

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

• Checking clipping and overlap on narrow screens or at higher zoom
• Preparing layouts for longer translated text
• Reviewing right-to-left layouts

Review an interface across accessibility, layout, writing, typography, color, and visual polish. It coordinates specialist skills, combines evidence from code and rendered screens, and produces one report with findings ranked by their impact on users.

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

• Reviewing a screen or complete user flow
• Checking loading, error, and narrow-screen states
• Prioritizing interface fixes by user impact

Build web pages and interface components with a clear visual direction suited to their purpose and audience. The skill guides typography, color, layout, and animation, turning design choices into working frontend code.

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

• Building a landing page with a distinctive visual style
• Designing a dashboard with a consistent look
• Refining the typography, spacing, and colors of an existing web UI

Create screen mockups at three levels: text wireframes, standalone HTML files, or working prototype pages. Use requirements, existing app styles, and real project data to show layouts and interactions for review or testing.

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

• Sketch screen layouts while writing requirements
• Deliver HTML mockups alongside requirements
• Test interactions with existing components

Create illustrated novel covers with the book title and pen name, tailored to the genre and publishing platform. Compare composition options, use reference images, export required dimensions, and refine colors, lettering, or layout.

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

• Creating a novel cover with a title and pen name
• Comparing cover compositions suited to a genre
• Generating a cover using a reference image

Create social image sets and short motion cards from articles, screenshots, photos, or supplied videos. Organize content into magazine or Swiss-style layouts, including Xiaohongshu carousels, Live Photo collages, and paired WeChat covers.

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

• Turning an article into a Xiaohongshu carousel
• Creating product posts with readable screenshots
• Making Live Photo collages from supplied videos

Create a six-frame storyboard showing a user's journey from a difficult situation to a better outcome. Develop the narrative, emotions, and visual descriptions to make product concepts concrete for pitches, concept reviews, and team discussions.

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

• Pitching a new product or feature concept
• Aligning a team on the intended user experience
• Exploring whether a concept resonates before development

Guide a workshop that maps a specific customer’s experience from start to finish. Capture stages, actions, thoughts, emotions, and pain points, then produce a customer journey map and a prioritized list of improvement opportunities.

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

• Mapping the onboarding experience for new customers
• Finding obstacles between trial signup and first value
• Reviewing support experiences for customers at risk of leaving

Clarify what a product interface should be and what users should accomplish before design or prototyping begins. Ask only about missing information, summarize the brief and assumptions, then continue into the appropriate design workflow.

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

• Clarifying goals before designing a new interface
• Defining the purpose and scope of a redesign
• Organizing requirements before building from a screenshot

Save and manage product references and design preferences for future Product Design work. Keep product URLs, Figma files, screenshots, brand assets, and other context available, and review or update what has already been saved.

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

• Set up Product Design with initial references
• Save Figma files and product URLs for future work
• Keep screenshots and brand references available

Turn a product design brief and visual references into three distinct design images. Compare layouts, information priorities, and interaction approaches, then refine or combine ideas to choose a visual direction before implementation begins.

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

• Compare alternative layouts for an existing screen
• Explore three directions for a new product idea
• Refine a design using screenshots or Figma references

Route product design requests to focused skills for user research, experience reviews, visual exploration, prototype building, or sharing. This entry point selects the appropriate workflow rather than performing the design work itself.

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

• Finding the right workflow for a product design request
• Routing a product flow review to an audit
• Starting visual exploration for a new prototype

Review a product experience by walking through its steps and capturing screenshots. Produces an illustrated assessment of usability, design, and accessibility risks, with findings tied to specific screens and clear limits on what was checked.

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

• Review a registration or onboarding flow
• Inspect a checkout flow for usability issues
• Assess settings screens and navigation

Find and inspect UI components in MagicPath, add them to an app, and adapt their behavior and styling. Apply themes or create and edit canvas components from code, including work based on an existing repository interface.

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

• Find UI components and add them to an app
• Apply a MagicPath theme to an interface
• Create or edit a component on the canvas