LobeHub UI Design Pipeline
Routes UI design requests through a staged pipeline from brief to review.
Install
npx skills add lobehub/lobehub --skill lobe-design -g -a claude-code -y- Repository
- lobehub/lobehub83.7k
- Category
- Design
- Updated
- 3d ago
- License
- See repository
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- Yes, review before use
What it does
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
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 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 不需要把架构规范读进上下文。
