디자인 스킬

Audit an app’s animations for responsiveness, performance, and accessibility, then rank the findings by impact and effort. Produce detailed implementation plans that another agent can follow, while leaving source code unchanged during the audit.

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

• Audit animations across an entire app
• Prioritize motion issues by impact and effort
• Prepare implementation plans for another agent

Build and review interface components with guidance on animation timing, press feedback, drag behavior, and accessibility. Decide when motion helps, choose concrete settings, and explain proposed code changes in a before-and-after comparison.

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

• Refine button and menu interactions
• Choose animation timing and easing
• Improve drag behavior and interruptions

Design and review web interfaces using Apple’s principles for fluid interaction. Shape drags, swipes, and spring motion that can change direction mid-animation, alongside translucent layers, readable typography, and accessible alternatives to movement.

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

• Design drawers that follow the user's finger
• Carry swipe momentum into animations
• Refine translucent layers and typography

Build interactive dashboards, forms, and visualizations over the QM web interface using HTML, CSS, and JavaScript. Panels can send input to the conversation, update in place, or remain visible across sessions when requested.

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

• Display an interactive dashboard over a conversation
• Collect input through forms and buttons
• Explore information through visualizations

Build HTML/CSS pages styled after a named brand using 54 design references. Templates provide colors, typography, spacing, component styles, responsive behavior, and font substitutes to guide a consistent visual result.

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

• Create a landing page with Stripe-inspired styling
• Style a content site after Notion
• Build a dark dashboard inspired by Linear

Design browser-based pages, dashboards, prototypes, and decks using existing brand guidance and a clear visual process. Build local files, then check rendering, layout, links, and accessibility before handing over the finished artifact.

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

• Building a landing page that follows brand guidance
• Designing dashboards and admin interfaces
• Creating browser-based prototypes and decks

Review an existing interface component and identify three visual or interaction problems. Get concrete layout, spacing, color, and code changes that follow the project’s existing design conventions, with short before-and-after examples.

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

• Polishing an existing component
• Reviewing spacing and visual hierarchy
• Improving a React and Tailwind interface

Create artwork, product visuals, diagrams, and other images using the desktop's configured image provider. It also edits or combines supplied images and generates variations, turning requests into detailed instructions for composition, style, colors, and text.

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

• Create illustrations or product visuals
• Generate diagrams with labels and connections
• Edit or combine supplied images

Create, migrate, refine, or debug CARLA vehicle assets with Blender and Unreal. Use real vehicle references to guide geometry and materials, configure wheels, lights, and physics, and deliver editable sources with evidence from runtime validation.

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

• Creating a CARLA vehicle from real vehicle references
• Refining tires, materials, or body geometry
• Migrating vehicles and debugging Unreal integration

Generates a cover image through KrillinAI CLI from a complete prompt describing the title, language, composition, and style. Also checks image-provider configuration, validates the output image, and confirms that the submitted prompt was saved accurately.

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

• Creating a cover image with specified title text and style
• Generating a cover at a chosen image size
• Keeping the submitted prompt alongside the generated image

Plan and generate illustrations for Chinese articles using the black character 小黑, white backgrounds, and sparse handwritten annotations. The skill identifies passages worth illustrating, proposes placements and visual metaphors, and guides image generation, revision, and delivery.

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

• Planning illustration placement in Chinese articles
• Explaining ideas and processes through visual metaphors
• Generating individual hand-drawn article illustrations

Creates SVG technical diagrams for system architecture, UML, cloud systems, agents, and workflows. It checks labels and connections, exports PNG or offline HTML, and can animate supported diagrams as GIFs for explaining how components interact.

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

• Illustrating system architecture and cloud components
• Mapping agent interactions and workflows
• Sharing diagrams as PNG or offline HTML

Build working web pages, components, and application interfaces with a clear visual direction. The skill guides typography, color, spacing, motion, and responsive layouts that adapt to different screen sizes.

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

• Build a web page with a distinctive visual style
• Create reusable interface components
• Adapt an application interface for mobile screens

Turn visual requests into detailed image prompts for social posts, blog headers, thumbnails, and illustrations. Receive generated images when available, or ready-to-use prompts, with variations in composition, color, or style.

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

• Create social graphics that match a brand
• Prepare blog header images and thumbnails
• Compare variations in composition, color, or style

Design dashboards, admin panels, and app interfaces around users’ tasks and data. Establish screen layouts, colors, typography, and interaction states, then document reusable patterns to keep future interface work consistent.

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

• Designing dashboard information layouts
• Unifying admin panel colors and typography
• Defining settings page interaction states

Create logos, illustrations, product images, and other visuals from text, or edit and combine reference images. The skill guides generation through Hive, waiting for results, and delivering saved images, with costs charged to Hive credits.

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

• Create a logo or illustration from a written brief
• Change the background of a product photo
• Place an existing logo on a mockup

Create UI-SPEC.md, a document defining interface design decisions for a frontend phase. The skill coordinates UI research and specification checks, using a chosen phase or automatically selecting the next unplanned one.

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

• Preparing UI specifications for a frontend phase
• Researching UI before documenting design decisions
• Checking a UI specification after drafting it

Explore interface ideas with disposable HTML mockups before implementation. Generate two or three variants to compare, get suggestions for what to explore next, and preserve design findings for future project work.

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

• Compare interface directions before implementation
• Build mockups quickly when the design direction is clear
• Find the next design idea to explore from existing sketches

Review an implemented frontend through a visual audit organized around six pillars. Get a Markdown report with a score from 1 to 4 for each pillar, covering a specified phase or the last completed phase.

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

• Reviewing the visual quality of an implemented frontend
• Recording a visual review for a specific phase
• Keeping a scored UI assessment as a Markdown report

Review a design system for inconsistent names and hardcoded visual values, document component variants and accessibility behavior, or propose new interface patterns that follow existing rules. Produce structured audits, component references, and design proposals.

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

• Auditing component names and visual consistency
• Documenting component variants and states
• Recording keyboard and screen reader behavior

Review a Figma design, screenshot, or written description for usability, visual hierarchy, consistency, and accessibility. Receive specific findings, explanations, and prioritized improvements, with feedback tailored to the design stage and intended users.

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

• Reviewing an early screen design
• Checking navigation and onboarding usability
• Finding inconsistent colors, spacing, and typography

Write and review interface text, including button labels, error messages, empty screens, and onboarding instructions. Get recommended wording, alternatives, and explanations tailored to the user's situation, tone, and character limits.

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

• Choosing clear button labels
• Rewriting error messages with recovery steps
• Guiding users through empty screens

Turn a design into a developer handoff document covering layout, shared design settings, component options, interactions, and screen-size behavior. Include loading and error states, animation details, and accessibility notes to clarify implementation requirements.

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

• Preparing a design for developer handoff
• Documenting layout changes across screen sizes
• Specifying loading, empty, and error states

Create editable draw.io diagrams from descriptions, code, infrastructure settings, or database schemas. Update existing diagrams while preserving manual layout, check their structure and architecture rules, and export them to image or document formats for sharing.

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

• Turn a written description into an editable diagram
• Generate architecture diagrams from code or infrastructure settings
• Update a diagram while preserving manual layout