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： 以普通用户身份运行

数据安全

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

使用建议

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

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

openclaw-ui-designer

Installation