dvcrn 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