Token导航 LogoToken导航

Agent Skill · 效率

openclaw-ui-designer(OpenClaw UI designer 浏览器)

用于辅助界面设计、视觉规范、排版、配色、布局和交互体验优化。它适合让 Agent 根据产品场景整理页面结构、生成 UI 方案、检查视觉一致性或改进组件层级。使用时需要结合现有品牌、设计系统和用户任务,不应只堆装饰元素;涉及真实页面改动时,应通过截图或浏览器预览检查文本溢出、对齐和响应式表现。

openclaw-ui-designer 是效率类 Agent Skill,可用宿主为 OpenClaw,通过ClawHub获取,权限为接触敏感数据;许可证为 MIT-0,第三方扫描已通过,按安装量在效率类的 21,003 个 Skill 里排第 6,204。

总安装 9,660周安装 387GitHub Stars 公开资料未说明下载 3,127核验 2026-05-01

安装说明

本站只整理中文说明,不托管安装包,也不代用户安装。
GitHub
许可证
MIT-0
版本
0.1.2

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手,先确认命令和权限,再让它执行。

请帮我安装这个 Agent Skill:openclaw-ui-designer(OpenClaw UI designer 浏览器)
来源仓库:https://github.com/williamwg2025/openclaw-ui-designer
安装命令:
openclaw skills install openclaw-ui-designer
安装前请先检查当前环境是否支持对应 CLI,并向我确认将要执行的命令、安装目录、联网范围和文件读写权限;确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 OpenClaw 从第三方来源获取 Skill;本站只展示命令,不托管安装包,也不自动执行。

ClawHubOpenClaw
openclaw skills install openclaw-ui-designer

这个 Skill 是做什么的

效率类 Skill 把重复的整理、汇总、转换工作交给助手完成,减少手工复制粘贴。

openclaw-ui-designer 提供界面设计、组件库与视觉规范建议。适合优化页面结构、提升视觉一致性与响应式体验。支持 WCAG 可访问性标准与多端适配方案。生成代码需结合实际品牌与设计系统,避免脱离业务场景堆砌元素。适用宿主包括 OpenClaw,接入前应确认版本、权限和运行环境要求。

上手步骤

4 步
  1. 1

    确认自己的宿主工具

    公开资料标注支持 OpenClaw;先确认自己用的是其中之一,再按对应工具的 Skills 目录放置。

  2. 2

    拿到安装命令

    可以直接复制的命令是 openclaw skills install openclaw-ui-designer;命令里的占位符换成自己的路径或密钥再执行。

  3. 3

    安装后重启宿主

    命令执行完要完全退出宿主工具再打开,让新装的 Skill 被重新扫描到,否则列表里可能看不到。

  4. 4

    按最小权限试用

    它需要接触敏感数据,先在测试目录或测试账号里跑,确认没问题再放到正式项目。

常见问题

6 条

openclaw-ui-designer 怎么安装?

在终端执行 openclaw skills install openclaw-ui-designer。装完完全退出宿主工具再打开,让它重新扫描本地 Skill。

openclaw-ui-designer 支持哪些 AI 工具?

公开资料标注支持 OpenClaw。其他工具只要能读取本地 Skill 目录,一般也能手动放进去,但要自己确认触发方式是否一致。

openclaw-ui-designer 需要什么权限?

权限级别是接触敏感数据。该 Skill 可能接触密钥、Token、环境变量或敏感配置,应进入高风险复核队列,默认不自动发布。

openclaw-ui-designer 是免费的吗?

来源标注的许可证是 MIT-0。本站不代收任何费用,也不托管安装包;能否商用、要不要署名,以许可证原文为准。

openclaw-ui-designer 用的人多吗?

公开数据是累计安装 9,660 次,近一周安装 387 次,下载 3,127 次。这些数字来自第三方目录统计,只能当作热度参考,不代表质量或安全性。

openclaw-ui-designer 安全吗?

第三方扫描结果为通过,但这只覆盖已知的静态检查项,不能替代自己读一遍源码和安装命令。

值得选的地方和要先想清楚的地方

值得选的地方

  • 专注 OpenClaw 一种宿主,触发方式和使用习惯不用来回切换。
  • 许可证明确为 MIT-0,商用和分发边界好判断。
  • 第三方扫描已通过,常见的高风险行为没有命中。

先想清楚的地方

  • 需要接触敏感数据,装到常用环境前要先评估影响面。
  • 第三方目录整理,版本更新和行为细节以来源仓库为准。

适不适合你

更适合

  • 已经在用 OpenClaw,想直接扩展它能力的人。
  • 需要处理效率类任务、又不想每次都手写提示词的人。
  • 需要许可证清楚、并且有第三方扫描结果的团队项目。

不太适合

  • 环境里有大量密钥、凭证,不方便给第三方 Skill 读取的人。
  • 需要厂商级技术支持和 SLA 的生产系统。

效率类 Skill 对比

6 个同类
Skill总安装GitHub 星权限许可证扫描
github

GitHub 代码协作 · OpenClaw

7,632,918545需要联网MIT-0通过
nano-pdf

Nano PDF 文档 · OpenClaw

4,249,476231需要联网MIT-0通过
auto-updater

自动更新程序 · OpenClaw

2,964,063386操作浏览器MIT-0通过
video-frames

视频帧 · OpenClaw

2,621,304112需要联网MIT-0通过
gemini

Gemini 助手 · OpenClaw

2,547,39648需要联网MIT-0有提醒
openclaw-ui-designer

OpenClaw UI designer 浏览器 · 本页

9,660—接触敏感数据MIT-0通过

按安装量取同分类前几名;数字来自第三方目录统计,只作热度参考,不代表质量结论。

SKILL.md 原文

name
openclaw-ui-designer
displayName
OpenClaw UI Designer - UI 设计助手
version
1.0.1
description
|
license
MIT-0
acceptLicenseTerms
true
tags

UI Designer - UI 设计助手

专业的 UI 设计助手,帮助你创建美观、易用的用户界面。


✨ 功能特性

  • 🎨 视觉设计 - 配色方案、字体选择、图标设计
  • 📐 布局建议 - 响应式布局、栅格系统、间距规范
  • 🧩 组件设计 - 按钮、表单、卡片、导航等组件设计
  • 📚 设计系统 - 创建设计规范、组件库、样式指南
  • ♿ 可访问性 - WCAG 合规、色盲友好、键盘导航
  • 📱 多端适配 - 桌面、平板、移动端设计建议

🚀 安装

cd ~/.openclaw/workspace/skills
# 技能已安装在:~/.openclaw/workspace/skills/ui-designer
chmod +x ui-designer/scripts/*.py

就这么简单!所有脚本已包含,无需外部克隆。


📖 使用

设计咨询

python3 ui-designer/scripts/design-consult.py "帮我设计一个登录页面"

配色方案

python3 ui-designer/scripts/color-palette.py --style modern --primary blue

组件生成

python3 ui-designer/scripts/component-gen.py --type button --variant primary

🎯 使用场景

何时使用 UI Designer

场景推荐使用
新建 Web 应用✅ 界面设计、组件选择
redesign 现有产品✅ 视觉升级、体验优化
创建设计系统✅ 规范制定、组件库
移动端适配✅ 响应式设计、触摸优化
可访问性改进✅ WCAG 合规、无障碍设计
品牌视觉设计✅ 配色、字体、图标

🛠️ 脚本说明

脚本功能网络访问文件写入
design-consult.py设计咨询❌ 否❌ 否
color-palette.py配色方案生成❌ 否❌ 否
component-gen.py组件代码生成❌ 否✅ 可选

注意: 不存在的脚本已从文档中移除(design-review.py, accessibility-check.py)


📋 配置

配置文件: ~/.openclaw/workspace/skills/ui-designer/config/design-config.json

可配置项:

  • 默认设计风格
  • 常用配色方案
  • 组件库偏好
  • 设计工具集成

文件访问:

  • 读取: config/design-config.json
  • 写入: 可选,生成组件代码到指定目录

🎨 设计风格支持

风格说明适用场景
Modern现代简洁SaaS、科技产品
Minimal极简主义博客、作品集
Bold大胆鲜明创意、营销活动
Corporate企业风格企业网站、后台
Playful活泼有趣儿童产品、游戏
Luxury奢华高端奢侈品、高端品牌

📄 许可证

MIT-0


作者: @williamwg2025 版本: 1.0.0 灵感来源: agency-agents/design-ui-designer


🔒 安全说明

代码来源 ✅

所有脚本已包含在包内:

  • design-consult.py - 设计咨询
  • color-palette.py - 配色方案
  • component-gen.py - 组件生成

无外部依赖:

  • ❌ 不克隆外部仓库
  • ❌ 不下载外部代码
  • ❌ 不执行远程脚本

网络访问

当前脚本不需要联网:

  • 所有设计建议在本地生成
  • 不访问外部 API
  • 不加载远程资源

文件访问

读取:

  • config/design-config.json - 配置文件
  • 用户提供的設計需求(命令行参数)

写入:

  • component-gen.py 可选生成组件代码到指定目录
  • 默认不写入文件,除非明确指定输出路径

权限要求

  • 读取: ~/.openclaw/workspace/skills/ui-designer/
  • 写入: 仅当使用 --output 参数时
  • 无需 root: 以普通用户身份运行

数据安全

  • 本地处理: 所有设计建议在本地生成
  • 不上传: 不发送数据到外部服务器
  • 不存储: 不保留用户输入的设计需求

使用建议

  1. 检查脚本: 所有脚本都在 scripts/ 目录,可自行审查
  2. 测试运行: 先运行简单命令测试行为
  3. 指定输出: 使用 component-gen.py 时明确指定输出目录
  4. 不要提供敏感信息: 设计需求中不要包含 API Key 等敏感数据

作者: @williamwg2025 版本: 1.0.1 许可证: MIT-0

平台分布

OpenClaw

86.86%
按下载量换算2,716

安全审计

VirusTotal

通过

ClawScan

通过

Static analysis

通过

权限和风险

接触敏感数据

该 Skill 可能接触密钥、Token、环境变量或敏感配置,应进入高风险复核队列,默认不自动发布。

安装前确认

本站仅展示第三方公开信息,不托管安装包,不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。目前只有一个公开来源,建议同时核对源仓库。

继续浏览同类 Skills