{"id":51486728,"url":"https://github.com/junknet/ui-design-skills","last_synced_at":"2026-07-07T07:02:05.127Z","repository":{"id":334505376,"uuid":"1141320464","full_name":"junknet/ui-design-skills","owner":"junknet","description":null,"archived":false,"fork":false,"pushed_at":"2026-01-25T06:50:27.000Z","size":25,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-25T21:25:40.246Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/junknet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-24T16:49:08.000Z","updated_at":"2026-01-25T06:50:31.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/junknet/ui-design-skills","commit_stats":null,"previous_names":["junknet/ui-design-skills"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/junknet/ui-design-skills","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junknet%2Fui-design-skills","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junknet%2Fui-design-skills/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junknet%2Fui-design-skills/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junknet%2Fui-design-skills/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/junknet","download_url":"https://codeload.github.com/junknet/ui-design-skills/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junknet%2Fui-design-skills/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35218117,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-07T02:00:07.222Z","response_time":90,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-07-07T07:02:04.274Z","updated_at":"2026-07-07T07:02:05.121Z","avatar_url":"https://github.com/junknet.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 💎 通用企业级 UI 设计与技术选型实战圣经 (General UI Design Bible)\n\n\u003e **适用场景**：所有追求“专业、高亮、商务、极致清爽”的企业级应用开发。\n\u003e **涵盖领域**：Desktop 桌面工具、SaaS 中后台、Web 官网。\n\u003e **核心审美**：全链路浅色模式（Light Mode），拒绝花哨，强调信息密度与层级。\n\u003e **设计灵魂**：Linear 的列表密度 + DevToys 的桌面布局 + Notion 的极简官网 + Arco 的专业配色。\n\n---\n\n## 一、 品牌 DNA (全局通用规范)\n**无论在哪个端，必须严格遵守以下物理规则，确保品牌一致性。**\n\n### 🎨 核心色板 (商务浅色系)\n*   **品牌主色**：`#165DFF` (经典蓝 / Arco Blue)\n    *   *说明*：这是最安全的科技蓝。可视项目需求替换为其他品牌色（如紫/绿），但必须保持高饱和度。\n*   **全局背景**：`#F5F7FA` (浅灰蓝白)\n    *   *注意*：切勿使用纯死白做大背景，这种浅灰色能衬托出白色卡片的层次感，且护眼。\n*   **容器背景**：`#FFFFFF` (纯白)\n    *   *用途*：卡片、表格、表单、侧边栏容器。\n*   **边框颜色**：`#E4E7EB` (极浅灰)\n    *   *用途*：分割线、卡片描边、输入框边框。\n*   **文字颜色**：\n    *   标题/正文：`#1F2937` (深灰，避免使用纯黑 #000000)\n    *   次要/说明：`#4B5563` (中灰)\n    *   禁用/占位：`#9CA3AF` (浅灰)\n\n### 📐 间距与圆角 (精密感)\n*   **圆角 (Radius)**：统一使用 `6px` (Tailwind 的 `rounded-md`)。\n    *   *理由*：这是 Windows 11 和现代 SaaS 软件的平衡点，既不生硬也不过度圆润。\n*   **间距 (Spacing)**：遵循 4px 步进原则（4, 8, 12, 16, 24, 32）。\n*   **阴影 (Shadow)**：\n    *   默认：使用极弱的投影（Tailwind `shadow-sm`）。\n    *   浮窗/弹窗：使用中等投影（Tailwind `shadow-lg`）。\n\n### 🔠 字体策略\n*   **西文/数字**：`Inter` (必须开启等宽数字 `tnum` 属性，确保数据对齐)。\n*   **中文**：系统默认字体栈（Windows: 微软雅黑, Mac: 萍方）。\n\n---\n\n## 二、 三大通用业务场景实战方案 (架构与渲染策略)\n\n### 1. 桌面客户端 (Desktop Tool) —— 核心生产力\n*   **架构策略**：**CSR (客户端渲染)**。不需要 SEO，追求极致的交互响应速度和本地能力。\n*   **风格对标**：**DevToys** (布局) + **Linear** (列表) + **Files** (Win11)。\n*   **技术栈**：`Tauri v2` (Rust 宿主) + `Vite` (构建) + `React` (视图)。\n*   **UI 库**：`Shadcn UI` + `Tailwind CSS`。\n*   **API 通信**：直接调用 Hono RPC 接口，或通过 Tauri Command 调用本地 Rust 逻辑。\n\n### 2. 中后台管理 (SaaS Admin) —— 团队协作与数据\n*   **架构策略**：**SSR (服务端渲染)** + **API Layer**。\n*   **风格对标**：**Vercel Dashboard** (控制台) + **Arco Pro**。\n*   **技术栈**：`Next.js 14` (App Router) + `Hono` (API 逻辑层)。\n*   **UI 库**：`Arco Design Pro (React)`。\n\n### 3. 官方网站 (Marketing Site) —— 品牌与转化\n*   **架构策略**：**SSR (服务端渲染) + SSG (静态生成)**。核心目标是 SEO 和首屏秒开。\n*   **风格对标**：**Notion** / **Stripe** (极简商务)。\n*   **技术栈**：`Next.js 14`。\n*   **UI 库**：`Magic UI` (浅色组件) + `Tailwind CSS`。\n\n---\n\n## 三、 商业级源码参考 (The Gold Standard Repos)\n**AI 在编写代码时，必须参考以下开源项目的架构模式与组件封装。**\n\n### 1. Desktop 标杆: [GitButler](https://github.com/gitbutlerapp/gitbutler)\n*   **视觉标杆**: [Files App](https://github.com/files-community/Files) (C# WinUI 3)\n    *   **参考价值**: 它的 Layout, Grid View, Sidebar 样式是本项目 1:1 复刻的目标。\n    *   **抄写重点**: 模仿它的 \"List View\" 密度和 \"Properties Dialog\" 弹窗排版。\n*   **参考价值**: Tauri v2 + React 架构的教科书。\n*   **抄写重点**: \n    *   Rust 与 Frontend 的类型安全通信 (`src-tauri` vs `src`).\n    *   Sidebar 与 Split View 的布局实现。\n    *   高性能本地状态管理。\n\n### 2. SaaS 后台标杆: [Midday](https://github.com/midday-ai/midday)\n*   **参考价值**: Next.js + Shadcn UI 的颜值巅峰 (浅色商务风)。\n*   **抄写重点**: \n    *   `DataTable` (表格) 的极致封装 (筛选、分页、列控制)。\n    *   `apps/web/src/app/(dashboard)` 的路由结构。\n    *   图表与数字卡片的排版审美。\n\n*   **视觉标杆**: [Attio](https://attio.com/) (浅色商务风天花板)\n    *   **代码标杆**: [Dub.co](https://github.com/dubinc/dub) (Vercel 风格最佳源码)\n*   **参考价值**: Vercel 风格的高性能营销页。\n*   **抄写重点**: \n    *   `apps/web/src/app/(marketing)` 中的落地页组件。\n    *   Framer Motion 动效的克制使用。\n\n---\n\n## 四、 通用 UI 模式 (AI 编写指令模板)\n\n### 1. 高密度数据列表 (The Linear List)\n\u003e \"请实现一个类似 Linear 的高密度数据列表。每一行高度 42px，文字使用 Inter 字体，数字开启 tnum。背景为纯白，hover 时变为浅灰 #F9FAFB。去掉所有竖向边框，横向边框使用 #F3F4F6。状态点（Status Dot）使用 8px 圆点。\"\n\n### 2. 复杂配置弹窗 (The Config Dialog)\n\u003e \"请模仿 Windows 11 设置页面。创建一个 Dialog 弹窗，左侧为垂直 Tabs（用于分类设置），右侧为具体的表单内容。背景使用纯白，表单 Label 放在 Input 上方，字体缩小并使用中灰色。圆角统一 6px。\"\n\n### 3. 工具型侧边栏 (The Sidebar)\n\u003e \"实现一个工具型侧边栏，背景色为 #F3F4F6。导航项在激活时显示品牌主色的文字和浅色背景，并在左侧边缘显示一个 3px 宽的高亮条。图标使用 Lucide React，线条宽度 1.5px。\"\n\n---\n\n## 五、 给 AI 智能体的终极通用提示词 (General Master Prompt)\n**当你开启一个新项目开发时，请先发送以下这段话给 AI，定义项目的“设计基调”与“架构边界”：**\n\n\u003e 你是一个精通 UI/UX 和全栈架构的高级工程师，请严格遵守《通用企业级 UI 设计规范》进行开发。\n\u003e \n\u003e **参考代码库 (Codebase References)**:\n\u003e - **Desktop**: 参考 `GitButler` 的 Tauri 架构。\n\u003e - **Admin**: 参考 `Midday` 的 Shadcn 表格封装与布局。\n\u003e - **Web**: 参考 `Dub.co` 的 Landing Page 实现。\n\u003e \n\u003e **核心视觉规则（强制浅色模式）：**\n\u003e 1. **背景色**：全局 #F5F7FA，卡片/容器 #FFFFFF。\n\u003e 2. **品牌色**：#165DFF (Arco Blue)。\n\u003e 3. **边框与文字**：边框 #E4E7EB，主文字 #1F2937。\n\u003e 4. **圆角**：固定为 6px。\n\u003e 5. **风格参考**：DevToys 布局 + Linear 列表 + Win11 质感。\n\u003e \n\u003e 现在，请根据这个规范，为我实现 [具体功能名] 的代码。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjunknet%2Fui-design-skills","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjunknet%2Fui-design-skills","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjunknet%2Fui-design-skills/lists"}