lobehub·lobehub/lobe-chat/.agents/skills/lobe-design/SKILL.md

lobe-design

Skill84k starsChanged 5 days agoLicence not identifiedView on GitHub

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 味, 文案, 措辞, 中英文空格, 初始化, AGENTS.md.