https://github.com/junknet/ui-design-skills

https://github.com/junknet/ui-design-skills

Last synced: about 4 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/junknet/ui-design-skills
• Owner: junknet
• Created: 2026-01-24T16:49:08.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2026-01-25T06:50:27.000Z (5 months ago)
• Last Synced: 2026-01-25T21:25:40.246Z (5 months ago)
• Language: Python
• Size: 24.4 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 💎 通用企业级 UI 设计与技术选型实战圣经 (General UI Design Bible)

> **适用场景**：所有追求“专业、高亮、商务、极致清爽”的企业级应用开发。

> **涵盖领域**：Desktop 桌面工具、SaaS 中后台、Web 官网。

> **核心审美**：全链路浅色模式（Light Mode），拒绝花哨，强调信息密度与层级。

> **设计灵魂**：Linear 的列表密度 + DevToys 的桌面布局 + Notion 的极简官网 + Arco 的专业配色。

---

## 一、 品牌 DNA (全局通用规范)

**无论在哪个端，必须严格遵守以下物理规则，确保品牌一致性。**

### 🎨 核心色板 (商务浅色系)

*   **品牌主色**：`#165DFF` (经典蓝 / Arco Blue)

    *   *说明*：这是最安全的科技蓝。可视项目需求替换为其他品牌色（如紫/绿），但必须保持高饱和度。

*   **全局背景**：`#F5F7FA` (浅灰蓝白)

    *   *注意*：切勿使用纯死白做大背景，这种浅灰色能衬托出白色卡片的层次感，且护眼。

*   **容器背景**：`#FFFFFF` (纯白)

    *   *用途*：卡片、表格、表单、侧边栏容器。

*   **边框颜色**：`#E4E7EB` (极浅灰)

    *   *用途*：分割线、卡片描边、输入框边框。

*   **文字颜色**：

    *   标题/正文：`#1F2937` (深灰，避免使用纯黑 #000000)

    *   次要/说明：`#4B5563` (中灰)

    *   禁用/占位：`#9CA3AF` (浅灰)

### 📐 间距与圆角 (精密感)

*   **圆角 (Radius)**：统一使用 `6px` (Tailwind 的 `rounded-md`)。

    *   *理由*：这是 Windows 11 和现代 SaaS 软件的平衡点，既不生硬也不过度圆润。

*   **间距 (Spacing)**：遵循 4px 步进原则（4, 8, 12, 16, 24, 32）。

*   **阴影 (Shadow)**：

    *   默认：使用极弱的投影（Tailwind `shadow-sm`）。

    *   浮窗/弹窗：使用中等投影（Tailwind `shadow-lg`）。

### 🔠 字体策略

*   **西文/数字**：`Inter` (必须开启等宽数字 `tnum` 属性，确保数据对齐)。

*   **中文**：系统默认字体栈（Windows: 微软雅黑, Mac: 萍方）。

---

## 二、 三大通用业务场景实战方案 (架构与渲染策略)

### 1. 桌面客户端 (Desktop Tool) —— 核心生产力

*   **架构策略**：**CSR (客户端渲染)**。不需要 SEO，追求极致的交互响应速度和本地能力。

*   **风格对标**：**DevToys** (布局) + **Linear** (列表) + **Files** (Win11)。

*   **技术栈**：`Tauri v2` (Rust 宿主) + `Vite` (构建) + `React` (视图)。

*   **UI 库**：`Shadcn UI` + `Tailwind CSS`。

*   **API 通信**：直接调用 Hono RPC 接口，或通过 Tauri Command 调用本地 Rust 逻辑。

### 2. 中后台管理 (SaaS Admin) —— 团队协作与数据

*   **架构策略**：**SSR (服务端渲染)** + **API Layer**。

*   **风格对标**：**Vercel Dashboard** (控制台) + **Arco Pro**。

*   **技术栈**：`Next.js 14` (App Router) + `Hono` (API 逻辑层)。

*   **UI 库**：`Arco Design Pro (React)`。

### 3. 官方网站 (Marketing Site) —— 品牌与转化

*   **架构策略**：**SSR (服务端渲染) + SSG (静态生成)**。核心目标是 SEO 和首屏秒开。

*   **风格对标**：**Notion** / **Stripe** (极简商务)。

*   **技术栈**：`Next.js 14`。

*   **UI 库**：`Magic UI` (浅色组件) + `Tailwind CSS`。

---

## 三、 商业级源码参考 (The Gold Standard Repos)

**AI 在编写代码时，必须参考以下开源项目的架构模式与组件封装。**

### 1. Desktop 标杆: [GitButler](https://github.com/gitbutlerapp/gitbutler)

*   **视觉标杆**: [Files App](https://github.com/files-community/Files) (C# WinUI 3)

    *   **参考价值**: 它的 Layout, Grid View, Sidebar 样式是本项目 1:1 复刻的目标。

    *   **抄写重点**: 模仿它的 "List View" 密度和 "Properties Dialog" 弹窗排版。

*   **参考价值**: Tauri v2 + React 架构的教科书。

*   **抄写重点**: 

    *   Rust 与 Frontend 的类型安全通信 (`src-tauri` vs `src`).

    *   Sidebar 与 Split View 的布局实现。

    *   高性能本地状态管理。

### 2. SaaS 后台标杆: [Midday](https://github.com/midday-ai/midday)

*   **参考价值**: Next.js + Shadcn UI 的颜值巅峰 (浅色商务风)。

*   **抄写重点**: 

    *   `DataTable` (表格) 的极致封装 (筛选、分页、列控制)。

    *   `apps/web/src/app/(dashboard)` 的路由结构。

    *   图表与数字卡片的排版审美。

*   **视觉标杆**: [Attio](https://attio.com/) (浅色商务风天花板)

    *   **代码标杆**: [Dub.co](https://github.com/dubinc/dub) (Vercel 风格最佳源码)

*   **参考价值**: Vercel 风格的高性能营销页。

*   **抄写重点**: 

    *   `apps/web/src/app/(marketing)` 中的落地页组件。

    *   Framer Motion 动效的克制使用。

---

## 四、 通用 UI 模式 (AI 编写指令模板)

### 1. 高密度数据列表 (The Linear List)

> "请实现一个类似 Linear 的高密度数据列表。每一行高度 42px，文字使用 Inter 字体，数字开启 tnum。背景为纯白，hover 时变为浅灰 #F9FAFB。去掉所有竖向边框，横向边框使用 #F3F4F6。状态点（Status Dot）使用 8px 圆点。"

### 2. 复杂配置弹窗 (The Config Dialog)

> "请模仿 Windows 11 设置页面。创建一个 Dialog 弹窗，左侧为垂直 Tabs（用于分类设置），右侧为具体的表单内容。背景使用纯白，表单 Label 放在 Input 上方，字体缩小并使用中灰色。圆角统一 6px。"

### 3. 工具型侧边栏 (The Sidebar)

> "实现一个工具型侧边栏，背景色为 #F3F4F6。导航项在激活时显示品牌主色的文字和浅色背景，并在左侧边缘显示一个 3px 宽的高亮条。图标使用 Lucide React，线条宽度 1.5px。"

---

## 五、 给 AI 智能体的终极通用提示词 (General Master Prompt)

**当你开启一个新项目开发时，请先发送以下这段话给 AI，定义项目的“设计基调”与“架构边界”：**

> 你是一个精通 UI/UX 和全栈架构的高级工程师，请严格遵守《通用企业级 UI 设计规范》进行开发。

> 

> **参考代码库 (Codebase References)**:

> - **Desktop**: 参考 `GitButler` 的 Tauri 架构。

> - **Admin**: 参考 `Midday` 的 Shadcn 表格封装与布局。

> - **Web**: 参考 `Dub.co` 的 Landing Page 实现。

> 

> **核心视觉规则（强制浅色模式）：**

> 1. **背景色**：全局 #F5F7FA，卡片/容器 #FFFFFF。

> 2. **品牌色**：#165DFF (Arco Blue)。

> 3. **边框与文字**：边框 #E4E7EB，主文字 #1F2937。

> 4. **圆角**：固定为 6px。

> 5. **风格参考**：DevToys 布局 + Linear 列表 + Win11 质感。

> 

> 现在，请根据这个规范，为我实现 [具体功能名] 的代码。