查找技能

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

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

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

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

制作可交互的 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

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

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

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

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

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

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

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

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

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

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

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

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

将抽象概念或机制转化为带有可动旋钮、指针等细节的机器，以斜上方视角制作可操作的说明图，输出为HTML、SVG或React组件。

• 用可动机器解释抽象概念
• 为技术文章添加可操作说明图
• 制作可独立打开的HTML说明

制作随滚动推进视频和视觉效果的落地页。规划信息与情绪的呈现顺序，准备图片和视频，完成HTML实现，并检查不同滚动位置的页面画面。

• 制作滚动控制视频的落地页
• 通过场景变化介绍品牌
• 用现有照片和视频制作页面

将手写字母照片制作成可安装到电脑的字体，协助识别字符、检查字形，并调整笔画粗细和轮廓平滑度，也能导出网页字体及配套样式。

• 将手写字母制作成字体
• 调整笔画粗细和轮廓
• 导出网页字体

通过本地API读取并用代码编辑已打开的tldraw offline画布，制作图表和线框图，还可嵌入重新加载后仍能运行的按钮、图形联动及动画。

• 制作图表和界面线框图
• 为画布添加操作按钮
• 实现图形动画与移动联动

根据产品或品牌特点，设计并生成圆润简洁、力求在32×32像素下仍可辨认的吉祥物。分别生成正方形候选图，标注设计信息，便于比较不同主题、配色和轮廓。

• 为应用或产品制作吉祥物
• 探讨符合品牌的角色方案
• 比较吉祥物的配色与轮廓

为比较界面设计方向，制作两至三个可交互的HTML原型。通过布局、信息密度和视觉风格的差异，以及各方案的优点和不足，帮助确定实施前的设计方案。

• 实施前比较界面布局
• 比较信息密度与留白
• 制作筛选器和面板交互原型

根据主题、短句或照片，制作呈现单色或双色油墨印刷效果的海报与封面，结合留白、网点和文字大小变化，并提供生成提示词及配色、版式制作记录。

• 根据主题制作单色海报
• 将照片制成网点海报
• 制作双色印刷风格的小册子封面

将文字需求或Mermaid转换为可交互的系统架构与业务流程HTML图。支持搜索、追踪关系及图片和视频导出，并附上九项验证结果。

• 分享可交互的系统架构图
• 展示业务步骤和数据流
• 将Mermaid转换为HTML图

制作文字横幅、角色对话气泡和装饰边框，将图片转换为字符画。根据用途选择本地工具或免费API，也可按主题查找已有的ASCII艺术作品。

• 制作终端文字横幅
• 添加对话气泡和装饰边框
• 将图片转换为字符画

将目标图片与已实现的3D场景截图进行比较，逐步改善构图、照明和材质。记录视觉还原度评分与修改建议，并检查渲染速度，在需要时进行优化。

• 制作接近目标图片的3D场景
• 打磨浏览器游戏的照明与材质
• 改善现有3D作品的视觉效果

从配色、字体和动效方针入手，设计并实现着陆页或多页面 Web 产品。支持随滚动展开的叙事效果，并检查可读性、显示性能和页面间的视觉一致性。

• 新建或重新设计着陆页
• 通过滚动讲述故事
• 统一产品多个页面的设计

将系统架构、业务流程和交互顺序绘制为手绘风格的图，保存为可在Excalidraw中编辑的文件，并可通过附带脚本创建分享链接。

• 用图说明系统架构
• 将业务步骤整理为流程图
• 梳理系统之间的交互

为AI代理创建和审查网页界面提供设计指引，包含23个子命令及应避免的设计示例，还可通过专用命令行工具按61条固定规则进行检测。

• 审查网页界面的设计
• 调整字体排版、配色和布局
• 检查被过度使用的设计手法

将科学原理、物体结构和工作流程整理为简洁的SVG图，统一配色与留白，自动适应明暗模式，并输出可在浏览器直接打开的单个HTML文件。

• 为教材绘制科学原理图
• 用剖面图或分层图解释结构
• 展示工作流程和数据流向