查找技能

用交互式图示解释代码结构、执行流程和性能差异，并在OpenClaw仪表板中持续展示相关指标、表格和图表，便于比较实测结果与查看信息。

• 解释代码结构和数据流
• 比较实测性能结果
• 操作并检查界面原型

将概念、业务流程以及软件或云架构整理成图表文件。可保存为浏览器可打开的内嵌SVG的独立HTML文件，或便于后续编辑与协作的Excalidraw格式。

• 为教材绘制概念图
• 将业务流程绘制成流程图
• 绘制软件和云架构图

制作可交互的 HTML 原型来试验逻辑和状态变化，或在同一页面切换不同界面方案。通过操作验证设计疑问，记录结论，并将验证后的决定用于实际代码。

• 通过操作检验复杂状态变化
• 比较不同的界面设计
• 向非技术人员分享逻辑原型

检查界面的间距、文字、圆角、阴影、动效与点击区域，改善外观和操作体验。针对按钮、卡片和表单等细节提出具体建议，并展示修改前后的差异。

• 检查拥挤或尚未完善的界面
• 完善按钮、卡片与表单
• 改进悬停与加载状态

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

将演讲笔记或PowerPoint文件制作成可在浏览器中播放的HTML幻灯片，通过预览选择设计，并调整布局和动画，使每页内容完整显示在屏幕内。

• 制作演讲或内部汇报幻灯片
• 将PowerPoint转换为HTML
• 通过预览选择演示文稿设计

根据网站或业务界面的用途与用户确定设计方向，调整字体、配色、布局和动效，优先使用现有组件，并检查不同屏幕宽度下的显示效果。

• 改善已有业务界面的外观
• 确定新网站的设计方向
• 改善移动端显示和长标签排版

从 SF Symbols 或 Iconify API 选择适用于 iOS、macOS 的图标，匹配现有配色和尺寸，生成三种分辨率的 PNG 及 Xcode 资源目录所需文件。

• 制作 Xcode 图标资源
• 查找符合现有设计的图标
• 替换占位图标

从现有界面代码中提取颜色、字体和间距等共用规则，生成设计说明与交互预览。按十个维度评估视觉一致性，并指出具体修改位置。

• 从现有代码提取设计规则
• 改版前检查视觉一致性
• 审查修改样式的拉取请求

依据WCAG 2.2设计和检查Web、iOS及Android界面，核查读屏标签、键盘操作、配色对比度和操作目标尺寸，使界面支持辅助技术。

• 为纯图标按钮添加说明
• 检查键盘操作与模态框焦点
• 检查对比度与操作目标尺寸

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

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

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

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

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

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

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

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

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

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