# LobeHub UI Design Pipeline

Routes UI design requests through a staged pipeline from brief to review.

- Repository: https://github.com/lobehub/lobehub (83676 stars)
- Category: Design
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add lobehub/lobehub --skill lobe-design -g -a claude-code -y`
Codex: `npx skills add lobehub/lobehub --skill lobe-design -g -a codex -y`
Cursor: `npx skills add lobehub/lobehub --skill lobe-design -g -a cursor -y`
Gemini CLI: `npx skills add lobehub/lobehub --skill lobe-design -g -a gemini-cli -y`

## Description

Single entry for LobeHub UI design work. Routes any instruction, macro ("重做这个后台", "整体打磨一下"), medium ("把列表页的交互和空态补齐") or fine ("这个按钮颜色不对", "修 K-07"), into a business-first, layered pipeline of focused stages: 00 brief → 05 init → 10 decode → 20 direction → 30 structure → 40 flow → 50 visual → 60 system → 70 detail → 75 copy → 80 review. Covers seven scenarios: 0→1 visual pages (landing / portfolio / campaign), polishing existing product UI, admin consoles / dashboards / forms / workflows, design-system unification, screenshot restoration, pre-launch audit, and project bootstrap (AGENTS.md). Grounded in classic analysis models (double diamond, Gestalt, Nielsen heuristics, Kano, peak-end, Fogg, journey map, cognitive load) and in a layered component boundary: take atoms from the host's component library and build business composites yourself. Platform-aware (web / desktop / mobile, read from the project layer): web takes atoms from @lobehub/ui (/form, /pro-table) with cssVar tokens; React Native takes them from the project's own library (e.g. @lobehub/ui-rn) with useTheme() tokens. Web ecosystem: @lobehub/charts / icons / fluent-emoji / streamdown. Runnable lint (platform-gated), route, refs and bootstrap checks; in-product UI copy by product profile (consumer / SaaS / admin / developer), with zh-CN typography. Trigger on lobe-design, lobe-ui, lobehub, LobeChat UI, 控制台, 后台, 看板, 落地页, 官网, 截图还原, 设计稿, 设计系统统一, 打磨, polish, refine, 审查, 上线前检查, 组件选择, 设计准则, AI 味, 文案, 措辞, 中英文空格, 初始化, AGE

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# lobe-design

一个入口，按需展开。本文件只负责四件事：**先理解业务、识别场景、决定跑哪些 stage、规定每一步的输出**。具体规则在 `stages/` 和 `references/` 里，进入某个 stage 时才读取，不要一开始就全部读完。

**宿主项目已安装时**：把 `.agents/ux/product.md`（产品画像与适用性）和 `.agents/ux/components.md`（组件用法）当作本 skill 的一等输入, , **先读它们，再进 stage**。没有这两份时，先跑 `05-init`（装完 / 升级后也应重跑）。
**优先级**：`product.md` 里的平台与适用性（标为「不适用」的规则、按平台限定的规则）优先于本 skill 的通用规则；其余冲突以 skill 为准；项目层要违背通用原则（可达性、P-xx）必须写明理由（[init.md](references/init.md) I-10）。**平台是 mobile（React Native）时**，本文件与 references 里 web 专属的条目（`@lobehub/ui` 原子层、`cssVar` / `createStaticStyles`、antd、CSS 类名、`outline`、`font-family`）不适用：原子层是项目自己的 RN 组件库（如 `@lobehub/ui-rn`），`lint-lobe.mjs` 按平台自动跳过这些规则。

## 为什么这样分层

一次把重构、交互、视觉、文案全想一遍，注意力会被稀释：调间距时还在纠结项目是否符合 LobeUI 架构。之前把 pipe 拆得很细，结果又只有精细指令能命中，宏观指令就失灵了。所以这里只用一个路由入口，下面挂十个粗粒度 stage：

- **宏观指令** → 识别场景 → 跑该场景的默认 pipeline
- **中等指令** → 只跑被点名的 2, 3 个 stage，顺序不变
- **精细指令** → 直达单个 stage，并做一次范围内自查

每个 stage 只回答一个问题、只加载自己白名单里的 reference，看到别的问题只记一行 `遗留 → <stage>`。**LobeUI 架构的硬规则交给 `scripts/lint-lobe.mjs` 兜底**，所以视觉、流程、细节这几个 stage 不需要把架构规范读进上下文。

## Stage 索引

The rest: https://github.com/lobehub/lobehub/blob/HEAD/.agents/skills/lobe-design/SKILL.md