디자인 스킬

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

Create infographics for statistics, timelines, processes, comparisons, and other content. Nano Banana Pro generates visuals, while Gemini 3.6 Flash reviews quality and can prompt another iteration; optional research lookup gathers facts and data for current topics.

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

• Turning statistics into a visual summary
• Showing milestones in a timeline
• Comparing products or options side by side

Choose and pair typefaces for websites, then improve readability with practical CSS guidance for size, line length, spacing, and hierarchy. The skill also covers responsive type and font loading, helping teams balance comfortable reading with page performance.

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

• Choosing fonts for a website or app
• Improving readability of articles or documentation
• Setting responsive type sizes and hierarchy

Review a product, feature, or roadmap from the customer’s first encounter through daily use. Identify unnecessary complexity, gaps in the experience, and specific cuts or fixes, then give a clear ship-ready or not-done verdict.

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

• Reviewing a feature or product design
• Finding what to remove from a crowded roadmap
• Checking onboarding, errors, and support flows

Review interfaces, forms, and navigation for usability problems using established heuristics. The skill identifies confusing labels, missing feedback, and task blockers, rates their severity, and suggests improvements, including checks for accessibility and manipulative design patterns.

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

• Auditing a confusing website or app
• Finding problems in forms and navigation
• Prioritizing usability and accessibility fixes

Refine web interfaces by checking visual hierarchy, spacing, typography, color, shadows, images, and layout. It helps turn inconsistent styling into a coherent system, including guidance for dark themes, accessible contrast, and clearer charts and dashboards.

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

• Auditing a web UI that feels cluttered or unpolished
• Creating consistent spacing and color scales
• Improving contrast and visual hierarchy

Plan distinctive websites and apps with expressive typography, intentional layouts, and purposeful motion. The skill helps shape a memorable visual moment, review design quality, and keep animations and page loading responsive and accessible.

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

• Planning a portfolio with a distinctive visual style
• Adding purposeful scroll reveals to a landing page
• Reviewing a site’s typography, layout, and motion

Design the small interface responses people encounter every day, such as buttons, toggles, forms, and loading states. This skill helps define triggers, behavior, feedback, and changes over repeated use so interactions feel clear and responsive.

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

• Designing button and toggle states
• Adding feedback to form validation
• Improving loading and progress indicators

Analyze confusing product interactions using core human-centered design ideas such as signifiers, mappings, constraints, and feedback. The skill helps identify why users get stuck or make mistakes, then suggests ways to make actions clearer and errors easier to prevent or recover from.

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

• Investigating why an interface feels confusing
• Reducing repeated user mistakes
• Making controls and actions easier to discover

Help teams make UX decisions through explicit assumptions, testable hypotheses, collaborative sketching, and small user experiments. Choose lightweight ways to learn, track outcomes such as behavior change, and use evidence to refine or drop product ideas.

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

• Replacing lengthy UX specifications with shared sketches
• Testing a design assumption with a simple prototype
• Running a collaborative design session

Refine a shipped app that works but feels confusing, awkward, or slow. The guided process examines user needs, interaction friction, visual clarity, in-app wording, and performance, recording decisions and proposed changes in project documents for later sessions.

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

• Find friction in onboarding or frequently used app flows
• Make screens and interactions clearer
• Rewrite confusing in-app labels, errors, and upgrade prompts

Design iOS interfaces that follow Apple platform conventions. The skill covers safe areas, navigation, native controls, Dynamic Type, Dark Mode, VoiceOver accessibility, SF Symbols, and gestures for layouts that adapt across iPhone and iPad screens.

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

• Designing a native-feeling iPhone app
• Planning iPad navigation and layouts
• Checking Dark Mode and Dynamic Type support

Turn a raster logo or screenshot into a smooth, editable SVG, then create a standalone HTML animation shaped around the brand’s character. The workflow includes geometry and motion checks, replay and speed controls, and reduced-motion support.

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

• Creating a logo reveal or brand intro
• Converting a PNG logo into animated SVG and HTML
• Adding a loading or hover animation to a logo

Plan UI animations and transitions around their purpose and mood. The skill offers guidance on timing, easing curves, motion style, and coordinating multiple elements, with practical patterns for feedback, loading, success, and error states.

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

• Designing button and card interactions
• Choosing timing and easing for a transition
• Creating loading, success, or error feedback

Control Adobe Photoshop from a command line on Windows through COM automation. Create or open PSD projects, adjust documents, layers, selections, and text, then export images in different formats. JSON output helps AI agents read command results.

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

• Creating or opening a PSD project by command
• Editing layers, selections, or text in Photoshop
• Resizing or cropping a document

Build or review WordPress-related interfaces using the WordPress Design System. Consult its component, pattern, and design token documentation to choose UI elements, colors, spacing, and typography that fit the system.

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

• Building a Gutenberg interface with WPDS components
• Choosing design tokens for color, spacing, or typography
• Reviewing a WordPress UI for design system alignment

Use this skill to build working frontend components, pages, or applications with a clear visual direction. It helps shape typography, color, layout, motion, and background details around the interface’s purpose and constraints, then implements the design in code.

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

• Building a web page for a defined audience
• Creating a distinctive interface or component
• Choosing a visual direction for an application

Design interfaces by studying reference examples, setting visual rules, and balancing appearance with usability and accessibility. The skill also guides screenshot analysis, iterative design image generation, micro interactions, and documenting design decisions in project guidelines.

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

• Analyzing a reference interface
• Setting a color and typography system
• Refining a generated design image

Build responsive interfaces with shadcn/ui components and Tailwind CSS utility classes. Use the skill to create accessible forms, dialogs, tables, and navigation, apply consistent themes and dark mode, or develop visual compositions with canvas-based design guidance.

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

• Building responsive application layouts
• Adding accessible forms, dialogs, or tables
• Creating consistent colors and theme tokens

Design and evaluate App Store screenshots and preview videos by mapping each slot to a user benefit, app screen, and layout. Create a 10-slot screenshot plan, a designer brief, or a comparison of competitor product pages.

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

• Planning headlines and app screens for each screenshot slot
• Preparing a design brief for an App Store product page
• Reviewing competitor screenshots and preview videos

Use TypeUI project design guidance, brand details, reusable UI prompts, and layout ideas when creating or refining an interface. It helps an agent apply a selected project’s visual direction and generate alternative section layouts before implementation.

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

• Building a landing page with a TypeUI project
• Generating several pricing section layouts
• Redesigning a dashboard with a design skill

Use TypeUI project design skills, brand kits, UI prompt libraries, and layout guidance while creating or refining interfaces with Hermes Agent. It helps apply project context to visual decisions and explore layout options before implementation through the TypeUI MCP server.

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

• Build a landing page using a TypeUI project
• Compare pricing section layout variations
• Redesign a dashboard using a project design skill

Use TypeUI project design skills, brand kits, UI prompt libraries, and layout guidance while creating or refining interfaces with OpenClaw. It helps apply project context to visual decisions and explore layout options before implementation through the TypeUI MCP server.

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

• Build a landing page using a TypeUI project
• Compare pricing section layout variations
• Redesign a dashboard using a project design skill