Token导航 LogoToken导航TokenDH.com
效率敏感数据clawhub未标认证来源可访问clear审计通过

openclaw-ui-designerOpenClaw UI designer 浏览器

Agent Skill

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

总安装

9,660

周安装

387

GitHub Stars

公开资料未说明

下载量

3,127
OpenClaw

安装说明

本站只整理中文说明和来源信息,不托管安装包,也不代用户安装。

GitHub

来源数

2

许可证

MIT-0

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 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

简介

openclaw-ui-designer 提供界面设计、组件库与视觉规范建议。

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

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

适合场景

01

OpenClaw 用户查找和安装 Skill 时

02

用户想查找某类 Agent Skill 时

03

需要根据任务场景推荐可安装能力包时

04

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明,方便继续核验

能力 4

补充不同宿主或平台的使用分布数据

能力 5

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用;具体调用方式请以来源页面和 README 为准。

平台分布

OpenClaw

86.86%
按下载量换算2,716

安全审计

VirusTotal

通过

ClawScan

通过

Static analysis

通过

权限和风险

敏感数据

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

安装前确认

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

来源信息

继续浏览同类 Skills