스킬 찾기

개념, 업무 흐름, 소프트웨어와 클라우드 구성을 도표로 정리합니다. 브라우저에서 여는 SVG 포함 HTML이나 편집 가능한 Excalidraw 파일로 저장합니다.

• 학습 자료의 개념을 도표로 설명할 때
• 업무 흐름을 순서도로 만들 때
• 소프트웨어와 클라우드 구성도 작성

Create interactive visuals that explain code structure, execution flow, and performance comparisons. Use OpenClaw dashboard widgets to keep related metrics, tables, and charts available beyond a single explanation.

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

• Explain code structure and data flow
• Compare measured performance
• Explore UI mockups interactively

Build a disposable prototype to answer a design question. Explore logic and changing states through a shareable HTML demo, or compare distinct interface variations, then record the findings and carry validated decisions into real code.

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

• Trying complex state changes through an interactive demo
• Comparing different interface designs
• Sharing a logic demo with non-developers

Build iOS 26 interfaces with Liquid Glass, a translucent material that blurs backgrounds and responds to interaction. The skill covers buttons, cards, shape-changing transitions, and widgets using SwiftUI, UIKit, and WidgetKit, plus migration from existing blur effects.

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

• Adding glass-style buttons and cards
• Animating transitions between glass elements
• Adapting widgets to tinted appearance

Refine interface appearance and interactions by reviewing spacing, typography, rounded corners, shadows, animation, and clickable areas. Get concrete before-and-after recommendations for buttons, cards, forms, and other components, including hover, focus, and loading states.

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

• Review screens that feel cramped or unfinished
• Refine buttons, cards, and forms
• Improve hover, focus, and loading states

Create icon assets for iOS and macOS projects using SF Symbols or Iconify API. Match existing colors and sizes, then generate PNG files at three resolutions with the metadata needed for Xcode asset catalogs.

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

• Creating icon assets for an Xcode project
• Finding icons that match an existing style
• Replacing placeholder icons

Define a design direction for websites, dashboards, and web applications based on their purpose and audience. Guide typography, color, layout, and motion while using existing components and checking usability across mobile and desktop screens.

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

• Refining the visual design of a working dashboard
• Choosing a design direction for a new website
• Improving mobile layouts and long label handling

Create browser-based HTML presentations from notes or PowerPoint files. Choose a visual direction through slide previews, then build slides with animations, keyboard and touch navigation, and layouts that fit the screen without internal scrolling.

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

• Creating slides for a talk or internal presentation
• Converting PowerPoint slides into an HTML presentation
• Choosing a presentation style through visual previews

Turn existing interface code into shared design rules for colors, type, and spacing, with documented decisions and an interactive preview. Audit visual consistency across ten areas and identify specific places to improve.

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

• Creating shared design rules from existing code
• Auditing visual consistency before a redesign
• Reviewing pull requests that change styling

Design and audit interfaces for Web, iOS, and Android using WCAG 2.2 accessibility guidance. Check screen-reader labels, keyboard navigation, contrast, and control sizes to identify barriers and guide implementation for people using assistive technology.

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

• Adding descriptive labels to icon-only buttons
• Reviewing keyboard navigation and modal focus
• Checking contrast and control sizes

Explain concepts through detailed, interactive machines drawn from an angled view. The skill produces standalone HTML, SVG, or React components, with moving parts and numerical readouts driven by the same model so readers can explore how the idea works.

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

• Explain an abstract concept through a moving machine
• Add an interactive figure to a technical article
• Create a standalone HTML explainer

Build landing pages where scrolling advances video and visual effects. The skill guides interviews, visitor journeys, asset preparation, and HTML implementation, then checks screenshots across scroll positions, mobile layouts, and reduced-motion settings.

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

• Create a landing page with scroll-controlled video
• Present a brand story through changing scenes
• Build a page using existing photos and footage

Create text banners, character speech bubbles, and decorative frames, or convert images into ASCII art, pictures made from text characters. Choose local tools or free APIs for the task, and search collections of existing artwork.

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

• Create text banners for terminal headers
• Add character speech bubbles and decorative frames
• Convert images into text art

Create hand-drawn architecture diagrams, flowcharts, and sequence diagrams as editable .excalidraw files. Open them in Excalidraw to review or adjust the layout, or optionally upload them to generate a shareable link.

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

• Illustrate a system's architecture
• Turn a workflow into a flowchart
• Show the order of interactions between systems

Design and build landing pages, cinematic scrolling websites, or products with multiple screens. Define colors, typography, and motion before coding, then check screenshots, performance, readability, and visual consistency across the finished pages.

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

• Building or redesigning a landing page
• Creating a story told through scrolling
• Giving multiple product screens a consistent design

Build or refine a 3D scene by comparing live screenshots with a target image. This skill repeatedly evaluates composition, lighting, materials, and detail, then guides revisions while checking that rendering speed remains acceptable for the target platform.

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

• Build a 3D scene to match a target image
• Improve lighting and materials in a browser game
• Refine the appearance of an existing 3D project

Create an installable font from photos of handwritten letters. The skill guides character identification, checks the resulting letter shapes, adjusts weight and smoothness, and exports font files for desktop or web use.

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

• Turning handwritten letters into an installable font
• Adjusting font weight and smoothing letter outlines
• Exporting handwriting fonts for web use

Design and generate simple, cute mascot images for products, brands, or communities, aiming for recognition at 32 × 32 pixels. Explore distinct concepts and color choices through separately generated square candidates with labeled design details.

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

• Create a mascot for an app or product
• Explore character concepts that reflect a brand
• Compare mascot color and silhouette variations

Create poster or cover images that look printed with one or two inks, using a theme, phrase, or photo. Shape the layout, typography, and print texture, and receive the final prompt and design notes.

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

• Creating a one-ink poster from a theme
• Turning a photo into a halftone poster
• Designing a two-ink zine cover

Turn written requirements or Mermaid diagram text into interactive HTML diagrams of systems, workflows, sequences, data flows, and states. Explore connections, search the diagram, export images or video, and receive results from nine validation checks.

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

• Explain a system's architecture with an interactive diagram
• Visualize workflows and data flows
• Convert Mermaid diagrams into explorable HTML

Create diagrams and wireframes in an open tldraw offline canvas through its local API. Add embedded JavaScript for interactive buttons, reactive shapes, and animations that remain part of the document after reloading.

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

• Generate diagrams and wireframes
• Add interactive buttons to a canvas
• Animate shapes and link their movement

Create clear educational diagrams for scientific concepts, physical structures, workflows, and data. Output SVG, a scalable vector image format, inside one standalone HTML file with consistent styling and automatic light and dark modes.

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

• Illustrating scientific concepts for teaching materials
• Explaining object structures with cross-sections and layers
• Visualizing workflows and data movement

Guide an AI coding agent through frontend design work using 23 subcommands and examples of design patterns to avoid. A separate command-line detector checks 61 fixed rules without requiring an LLM or an API key.

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

• Review a web interface’s design
• Refine typography, color, and layout
• Identify overused design patterns

Explore a screen design through two or three interactive HTML mockups. Compare distinct layouts, information density, and visual approaches, with notes on each option’s strengths and trade-offs to help choose a direction before implementation.

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

• Comparing screen layouts before implementation
• Exploring compact and spacious design options
• Testing filters or panel interactions in a mockup