设计技能

Turn interviews, surveys, and usage data into evidence-based user profiles, experience maps, and design recommendations. Plan usability tests, define success measures, and organize research findings to identify user problems and prioritize improvements.

中文简介正在准备中。当前显示英语简介。

• Create user personas from research data
• Map user actions, emotions, and pain points
• Plan usability tests for a proposed design

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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