디자인 스킬

Create shared UI design values from a brand color, including palettes, typography, and spacing. Export them as CSS, SCSS, or JSON, document component behavior, plan layouts for different screens, and prepare developer handoff materials.

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

• Generate shared design values from a brand color
• Document component variants and states
• Plan typography and spacing for different screens

Set shared brand colors, fonts, layout style, and table of contents behavior for markdown-html outputs. A guided setup checks text and link contrast, derives twelve reusable CSS settings, and saves preferences globally or per project.

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

• Setting a shared style for HTML documents and slides
• Checking text and link color contrast
• Saving a separate brand style for a project

Create and apply brand guidelines for colors, fonts, logos, imagery, and writing tone. Review materials for consistency and produce practical references, including palette tables, typography specifications, tone examples, and a concise guide for collaborators.

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

• Create a concise brand guide for contractors
• Check slides and social graphics for brand consistency
• Define writing tone for different situations

Build websites with layered depth, scroll-driven transitions, and animated text using static images, CSS, and JavaScript. The skill covers asset inspection, visual planning, implementation, and checks for performance and motion accessibility.

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

• Build a product landing page with scroll-driven effects
• Add layered depth and animated text to an existing site
• Inspect image transparency and plan asset placement

Create horizontal browser presentations in a magazine-inspired or Swiss Style design. HTML templates provide animated backgrounds, image and data layouts, speaker notes, timing, and a synchronized audience window for talks, product launches, and demonstrations.

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

• Creating magazine-inspired slides for talks
• Presenting product launches in Swiss Style
• Organizing data and screenshots into visual slides

Build or update a Figma design system from an existing codebase. Organize shared design values, light and dark themes, reusable components, and documentation through staged reviews, then check consistency, accessibility, and links between design and code.

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

• Creating shared color and spacing variables from code
• Setting up light and dark themes
• Building a reusable component library with documentation

Build or update Figma screens from code or descriptions using an existing design system, a shared set of components and visual rules. Assemble sections with reusable components, colors, spacing, and styles, then check their appearance.

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

• Recreate an application page in Figma
• Build a landing page with shared components
• Update a Figma screen to match code

Inspect and edit Figma files through JavaScript using the Plugin API. Create shapes, text, reusable components, and design variables, then check structure and screenshots as changes are made in small steps.

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

• Inspect pages and existing components in a Figma file
• Create reusable components and variants
• Create and bind color or spacing variables

Create a blank Figma design or FigJam file in your drafts, with an optional name and a selected plan. Receive a direct link and file key to continue working with other Figma tools.

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

• Start a new Figma design file
• Create a named FigJam whiteboard
• Prepare a fresh file for use_figma

Create and review SVG icons for IntelliJ New UI. Choose sizes by interface role, prepare matching light and dark versions, refine shapes and strokes, and place the assets in the plugin’s resource folders.

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

• Creating icons for actions and tool windows
• Preparing matching light and dark SVG versions
• Adapting existing icons to a 16×16 canvas

Create and review icons for Kilo’s VS Code extension and webviews, the extension’s embedded interface panels. Choose existing icons or suitable SVG assets, register them correctly, and check theme appearance and accessible button names.

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

• Choosing icons for commands, menus, and view containers
• Adding icons to webview registries
• Rescaling SVGs while preserving visual weight

Map the customer experience from discovering a product to recommending it. Create a table of interactions, actions, emotions, and pain points at each stage, then prioritize improvements to sign-up, initial use, and continued engagement.

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

• Mapping the full customer experience
• Finding friction during sign-up and initial use
• Identifying reasons customers leave

Review game interface specifications, HUD designs for information shown during play, and shared interaction rules before implementation. Check completeness, accessibility, and consistency with game design documents, then receive a verdict with specific issues and missing review inputs.

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

• Checking a screen specification before implementation
• Reviewing HUD information and display priorities
• Checking consistency across shared interaction patterns

Write game interface specifications for individual screens, interaction flows, and the HUD, the information shown during play. Also document shared interaction patterns and project-wide accessibility requirements, with section depth guided by project settings.

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

• Writing specifications for game screens and navigation flows
• Designing the HUD information shown during play
• Documenting shared interaction patterns

Coordinate game area design from story, world context, and visual direction through layout, enemies, rewards, accessibility, and test planning. Compile the results into a level design document, with specialist participation determined by the configured team size.

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

• Designing a tutorial village or dungeon
• Aligning area layouts with story and visual direction
• Planning enemy encounters and reward placement

Turn game design documents and character profiles into asset specifications and image generation prompts. Define appearance, dimensions, file formats, and naming rules, then maintain an asset list that tracks progress and identifies shared assets.

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

• List the visual assets needed for a game
• Define consistent character and environment asset specifications
• Prepare image generation prompts from an art direction guide

Develop a game concept through guided discussion of player experiences, preferences, and practical constraints. Compare ideas, define repeated player actions and design priorities, and produce either a concise game brief or a detailed concept document.

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

• Exploring game ideas from a genre or theme
• Turning a vague idea into a repeatable play cycle
• Defining a minimum playable version and development boundaries

Review multiple game design documents together to find conflicting rules, overlapping responsibilities, economic imbalance, and strategies that overshadow others. Assess how systems interact and identify issues that individual document reviews can miss.

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

• Checking consistency across game system design documents
• Assessing overall balance after major design changes
• Finding cross-system problems before architecture work

Create a game's art direction document, defining its visual rules, mood, shapes, colors, and production standards. Review and approve sections individually, with guidance that connects character, environment, and interface design to the game's concept and technical constraints.

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

• Defining a game's core visual identity before asset production
• Documenting character, environment, and interface design rules
• Aligning asset standards with engine and performance limits

Turn system structures, processes, and concepts into dark-themed diagrams. Create architecture diagrams, flowcharts, timelines, and other visual explanations as scalable SVG files, with PNG versions for use as images.

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

• Explain system components and their connections
• Map process steps and decision branches
• Show interactions in chronological order

Create article cover images based on the topic and tone of the text. Choose the composition, colors, rendering style, text amount, and mood, with reference images and aspect ratios to guide the result.

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

• Creating a cover image for a blog article
• Making a cover with a title and subtitle
• Matching a cover to reference colors or composition

Turn source text and data into infographics, images that explain information visually. The skill recommends combinations of 21 layouts and 22 visual styles, then generates images with a chosen language and aspect ratio.

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

• Illustrating a process or timeline
• Comparing products across several criteria
• Turning metrics into a visual dashboard

Build a disposable prototype to test how a product should work, feel, or look before committing to an approach. Let the user experience it, record their choices, and carry those decisions into requirements or further planning.

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

• Trying a navigation flow before committing to it
• Judging layout density and color choices
• Resolving design questions that sketches cannot answer

Create interactive prototypes, slide decks, animations, and visual explanations in HTML. New designs normally begin with three visible drafts to compare, then develop the chosen direction using supplied content, real assets, and brand references.

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

• Comparing three visual directions before choosing a design
• Creating an interactive App or iOS prototype
• Preparing an HTML slide deck and PDF