UI 设计技能包 T-ctrl-web/dsh-ui-design-master

🎨 dsh-ui-design-master

让 AI 成为覆盖「生活各领域」的 UI/UX 设计大师

为 DeepSeek Harness (DSH) 打造的 UI/UX 设计技能插件 —— 注入 23 个设计 Skill（1 个总纲 + 16 个生活领域 + 6 个通用能力），并附带 Web 侧边栏「UI 设计」面板。

电商 · 外卖 · 金融 · 社交 · 出行 · 健康 · 教育 · 政务 … 你要设计的产品，都在这里

License: MIT
DSH
Skills

✨ 它解决了什么

问 AI「帮我设计一个外卖 App」，大多数时候得到的界面千篇一律、漏洞百出。dsh-ui-design-master 把专业 UI/UX 设计师的经验（配色心理学、信息架构、交互规范、避坑清单）沉淀成按生活领域划分的知识包，让模型在动手前先加载领域设计指南，输出真正专业的方案：

- 🎯 领域即点即用：16 个生活领域独立成 Skill，命中场景直接加载，不靠关键词大海捞针
- 🎨 开箱即用的设计系统：每个领域自带语义色板（hex 令牌）、字体搭配、间距/圆角/动效规范
- 🛡️ 专业避坑：每个领域 8–12 条 ❌/✅ 反模式清单，从「全屏促销色轰炸」到「资金操作无确认」全覆盖
- 📋 交付前自查：每个领域有专属检查清单，模型交付前逐项自检
- 🖥️ 侧边栏设计面板：16 个领域速查卡 + 推荐色板 + 一键复制设计需求模板

🖼️ 演示效果

由插件技能生成的电商零售测试页（design-ecommerce）：

| 桌面端 | 移动端 |
| 桌面端 | 移动端 |

完整可交互页面见使用文档中的演示说明（截图由插件生成的电商零售网页渲染而来）。

🚀 快速开始

1. 克隆插件源码
git clone https://github.com/T-ctrl-web/dsh-ui-design-master.git D:\DeepSeek-Harness\plugins\dsh-ui-design-master

2. 构建
cd D:\DeepSeek-Harness\plugins\dsh-ui-design-master
pnpm install && pnpm build

3. 安装到 DSH（web 是当前 GUI 的 profile）
dsh plugin --profile web add file:D:\DeepSeek-Harness\plugins\dsh-ui-design-master

4. 重启 dsh，完成！

重启后：

1. 侧边栏出现 「UI 设计」 Tab（调色板图标）
2. 直接对 AI 说：「帮我设计一个外卖点餐 App 的界面，先给设计系统再逐屏给方案」
3. 模型会自动加载 ui-design-master + design-food-delivery，输出专业设计

依赖：@deepseek-ai/cordis、@deepseek-ai/dsh-skill、@deepseek-ai/dsh-settings（DSH 自带）；侧边栏面板需要 dsh-better-sidebar。

🗂️ 技能全景（23 个 Skill）

| 分类 | Skill | 覆盖产品 |
| 🧭 总纲 | ui-design-master | 四步工作流 · 10 大优先级规则 · 交付检查清单 · 子技能导航 |
| 🛒 消费交易 | design-ecommerce | 综合/垂直/生鲜/跨境/奢侈品/二手电商 |
| 🍜 消费交易 | design-food-delivery | 外卖点餐/到店餐饮/菜谱/品牌点单 |
| 💰 消费交易 | design-finance-banking | 银行/支付/证券/保险/记账 |
| ✈️ 生活服务 | design-travel-tourism | 机票/酒店/民宿/攻略/当地玩乐 |
| 🚕 生活服务 | design-mobility-transport | 打车/地图导航/公交/共享出行 |
| 🏠 生活服务 | design-real-estate | 找房/租房/装修/家居 |
| 🏛️ 生活服务 | design-public-services | 政务办事/缴费/城市服务 |
| 🏃 健康家庭 | design-health-fitness | 跑步/健身/冥想/睡眠/健康数据 |
| 🏥 健康家庭 | design-healthcare | 问诊/挂号/用药/慢病管理 |
| 🏡 健康家庭 | design-smart-home-iot | 设备控制/安防/场景自动化 |
| 🎬 内容娱乐 | design-entertainment | 长/短视频/音乐/直播/阅读 |
| 💬 内容娱乐 | design-social-community | IM/社区/婚恋/问答 |
| 📰 内容娱乐 | design-news-media | 资讯流/深度阅读/播客 |
| 📝 办公教育 | design-productivity-office | 协作文档/待办/日历/笔记 |
| 🎓 办公教育 | design-education-learning | 网课/刷题/背单词/职教 |
| 🏢 办公教育 | design-enterprise-saas | CRM/项目/客服/BI 后台 |
| ⚙️ 通用 | design-system-tokens | 设计令牌体系/深浅主题 |
| 🚀 通用 | design-landing-page | 落地页/营销页/转化优化 |
| 🏷️ 通用 | design-logo-brand | Logo/品牌色/VI 规范 |
| 📊 通用 | design-data-dashboard | 图表/仪表盘/数据表格 |
| 📱 通用 | design-mobile-app | 移动端打磨/交付终检 |
| ♿ 通用 | design-accessibility-ux | 无障碍审计（WCAG 2.2） |

每个领域 Skill 均包含：目标用户与场景 → 信息架构与核心页面 → 语义色板（hex）→ 字体排版 → 特色组件 → 交互动效（时长/缓动）→ UX 心理模式 → ❌/✅ 避坑清单 → 交付检查清单 → 实现要点。

🧩 工作原理

DSH 模型（skill 工具按需加载） ▲ ┌─────────────────────────────┐ │ │ dsh-ui-design-master │ │ │ ┌───────────────────────┐ │ │ │ │ ctx.skills 提供者 │◄─┼── 23 个 Skill（assets/skills/*.md） │ │ │ (registerProvider) │ │ │ │ └───────────────────────┘ │ │ │ ┌───────────────────────┐ │ │ │ │ Web API /ui-design/ │◄─┼── 侧边栏「UI 设计」面板数据 │ │ └───────────────────────┘ │ │ │ ┌───────────────────────┐ │ │ │ │ 设置：开关/领域筛选 │ │ │ │ └───────────────────────┘ │ │ └─────────────────────────────┘ └─ 设计需求 → 设计系统 → 逐屏方案 → 可运行代码

- 技能注册：采用 DSH 官方的 ctx.skills.registerProvider 模式（同步 apply + 按需异步读取），与 dsh-skill-badge 一致，正文按需加载不占常驻内存
- 单一数据源：领域元数据集中在 src/catalog.ts，同时驱动模型目录与 Web 面板，改一处两处同步
- 可设置：设置 → 插件配置 → UI 设计大师，支持整体开关与按领域筛选（domains: ["design-ecommerce", ...]）

💡 设计理念

灵感来自 nextlevelbuilder/ui-ux-pro-max-skill 的「设计智能」思路，但针对 DSH 的 Skill 机制做了三点升级：

1. 按生活领域组织：不再依赖关键词搜索，而是 16 个领域 + 6 个能力 = 23 个直接可加载的指南，命中即用
2. 中文优先：面向国内主流产品形态（美团/拼多多/粤省事/米家等用户心智），全部指南中文撰写
3. 面板 + 提示词模板：侧边栏一键复制设计需求模板，降低使用门槛

🛠️ 开发

pnpm install # 安装构建依赖
pnpm typecheck # TS 类型检查
pnpm build # tsdown 构建 lib/index.js + client/client.js

新增领域技能三步走：

1. assets/skills/design-.md —— 编写领域指南（参照现有文件的结构与密度）
2. src/catalog.ts → DOMAINS 登记元数据（面板与 Skill 目录自动同步）
3. pnpm build → dsh plugin --profile web update dsh-ui-design-master → 重启 dsh

🤝 贡献

- 新增生活领域：美食菜谱、宠物、游戏、婚恋、健身餐……
- 完善现有领域：补充真实产品案例、更新设计规范
- 修复/改进：交互细节、无障碍、性能

欢迎提交 Issue 与 PR！

📄 License

MIT © dsh-ui-design-master contributors