디자인 스킬

Improve an existing website or app by auditing its design, prioritizing issues, and refining colors, typography, spacing, and interactive states. The workflow preserves existing behavior, unifies page themes, and includes accessibility and functional checks.

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

• Polish an existing website while preserving its features
• Unify colors and themes across multiple pages
• Prioritize UI issues before making design changes

Find brand logos and AWS, Azure, or GCP service icons from theSVG. Get embedding URLs or SVG markup, a scalable image format, and choose available variants that suit light or dark backgrounds.

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

• Add a brand logo to a README
• Collect service icons for an integrations page
• Gather cloud service icons for an architecture diagram

Generate React or HTML code from an approved Figma node using several settings, then preview the results locally. Compare framework and styling choices side by side and repeat the generate, preview, and tweak cycle while keeping each run's source revision and settings available for review.

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

• Comparing React and HTML output for one design
• Previewing generated components on a local Vite server
• Iterating on Figma-to-code output with different styling settings

Design a repeatable Figma-to-code workflow using Anima, from approved design inputs through code generation, normalization, checks, and human review. The result is a project architecture with clear boundaries for artifacts, credentials, and delivery.

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

• Planning a Figma-to-React project structure
• Designing a team design handoff pipeline
• Defining checks for generated components

Track Anima generation usage, reuse outputs when their source and settings still match, and regenerate only changed design elements. It helps teams review plan fit using current account data and report avoided work without guessing monetary savings.

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

• Reducing duplicate Anima generations
• Refreshing only components changed in Figma
• Reviewing Anima plan fit with account usage data

Set up the server-side Anima SDK for generating code from Figma designs. Configure Anima and Figma credentials, initialize the client, and verify access by generating files from a selected Figma node.

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

• Setting up Figma-to-code generation
• Configuring Anima and Figma credentials
• Checking access to a Figma file and node

Plan resumes for creative roles by balancing visual presentation with parsing by applicant tracking systems (ATS). It guides a two version approach, portfolio links, layout, typography, and when to use a plain application version or a designed resume.

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

• Choosing a resume format for an online application
• Planning a designed resume for networking
• Linking selected work or case studies from a resume

Design interfaces using the Nothing-inspired visual system, with clear type hierarchy, deliberate spacing, monochrome colors, and a considered dark or light mode. It guides composition and component choices for a restrained, information-rich UI.

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

• Designing a dashboard in Nothing style
• Applying the Nothing design system to a screen
• Choosing typography and spacing for a monochrome UI

Create or edit a Grida presentation as a `.canvas` bundle containing one 16:9 SVG file per slide. Organize slides through the bundle manifest, preserve a selected template’s visual style, and present a valid first slide while the deck is being built.

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

• Creating a presentation or pitch deck in Grida
• Adapting a selected slide template to new content
• Reordering, adding, or removing slides in a deck

Create and edit SVG documents in a Grida editor session, where changes can appear on the live canvas. The skill also guides recovery from parse errors and preserves existing dimensions, viewBox, and formatting when editing.

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

• Creating a new SVG graphic in Grida
• Editing an existing SVG while viewing canvas updates
• Fixing an SVG parse error

Create editable SVG diagrams for documentation when a screenshot cannot clearly explain a gesture, alignment rule, or before-and-after state. Reuse the kit’s visual tokens, primitives, template, and examples to build consistent figures for product docs.

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

• Showing a drag or double-click gesture in documentation
• Comparing before-and-after UI states
• Illustrating alignment or anchor behavior

Create and arrange a Grida `.canvas` board by editing its manifest and bundled documents. Place reference images, generated files, and notes spatially on an infinite canvas, and update their order and layout; use a slides workflow for linear presentations.

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

• Starting a freeform visual project board
• Placing reference images and notes on an infinite canvas
• Adding generated image files to an existing board

When a UI interaction or architecture has no precedent in the codebase, this principle recommends building two or three competing prototypes and comparing them side by side before deciding. It also applies to product choices where user experience depends on feel.

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

• Exploring a new UI interaction
• Comparing architectural approaches
• Testing product choices that depend on user feel

Use this principle when product, UX, or feature scope decisions arise. It helps weigh choices from the user's perspective, favoring a smaller set of polished features, clear feedback, and a focused core workflow over implementation convenience.

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

• Prioritizing features in a product
• Choosing between polish and implementation ease
• Refining a UI's central workflow

Create and refine diagrams by editing `.drawio` XML, adjusting element positions, labels, and arrows, then converting the file to PNG for visual review. The skill also provides guidance for AWS icons, fonts, spacing, and diagrams used in slides.

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

• Adjusting the layout of a system diagram
• Converting a `.drawio` file to PNG
• Finding an AWS service icon for a diagram

Create or evolve a shared design system with tokens for color, type, and spacing, reusable component structures, accessibility guidance, and documentation templates. It helps teams define consistent UI patterns, including theming and dark mode, across products.

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

• Starting a design system for an app
• Defining reusable color, type, and spacing tokens
• Planning a component hierarchy for a product

Use this skill to explain, create, update, or compare Excalidraw diagrams. It delegates diagram work to subagents, which return concise summaries of components and relationships instead of loading verbose drawing data into the main agent’s context.

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

• Explain components and connections in an Excalidraw diagram
• Add a component and connect it to an existing one
• Create a diagram from an architecture or flow description

Design readable, responsive interfaces for Three.js games, including HUDs, menus, overlays, settings, and touch controls. Plan game states, connect UI to game state, and check text fit, safe areas, overlap, and interaction on target screen sizes.

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

• Design a HUD and menus for a Three.js game
• Adapt game UI for mobile screens and touch input
• Review text fit and overlap across game states

Create or edit 2D art for Three.js games with Gemini’s image API, including concept references, textures, backgrounds, logos, icons, and interface art. Use existing images as inputs for revisions and save generated assets for game or 3D workflows.

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

• Creating character or prop references for image-to-3D
• Generating textures, decals, or material references
• Making game backgrounds, logos, icons, or menu art

Create, edit, and refine diagrams on an Excalidraw canvas. Arrange and connect elements, convert Mermaid diagrams, inspect screenshots, and import or export scene files and PNG or SVG images through the CLI, MCP tools, or REST API.

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

• Creating a flow or architecture diagram
• Adjusting elements in an existing canvas
• Converting Mermaid diagrams to Excalidraw

Builds image prompts from one of the skill’s illustrated styles, following its templates and selection steps. It can also prepare structured call details for certain styles. The skill outputs text and does not generate images.

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

• Creating a prompt in a named hand-drawn style
• Choosing a style from the available catalog
• Preparing a structured image-generation call for a supported style

Plan and prepare slides for research talks, from conference presentations and seminars to thesis defenses. Get guidance on slide structure, visual design, timing, and review, with options for PowerPoint, LaTeX Beamer, or PDF workflows.

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

• Preparing a conference research talk
• Organizing slides for an academic seminar
• Building a thesis defense presentation

Generate or edit photos, illustrations, concept art, logos, and other visual assets through the OpenRouter Image API. Choose among supported image models, set output options, and use reference images to guide edits or composites.

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

• Creating illustrations or concept art for a presentation
• Generating a logo or visual asset
• Editing a photo using a text instruction

Generate scientific diagrams as PNG images from natural-language descriptions, including neural network architectures, system diagrams, flowcharts, circuits, and biological pathways. A review step checks the image against document-type thresholds and may prompt a limited regeneration; inspect labels and scientific details yourself before use.

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

• Illustrating a neural network or system architecture
• Creating a study flowchart or biological pathway diagram
• Preparing a scientific figure for a paper, poster, or presentation