B-End Neutral-Style Standardized UI Generation
Paste the following prompt into your AI chat to install this skill:
Please follow https://skillhub.cn/install/skillhub.md to install @user_4585f108/b-ui-standard.
About this skill
Problem: B-end UIs Often Miss the Mark
Many admin consoles and internal tools do not lack pages; they lack a calm, low-decoration, reusable visual baseline. Stakeholders may reference Tencent Cloud, Volcano Engine, or AntD v5, but actual screens can drift into marketing colors, card overload, and inconsistent button states, forcing repeated CSS and component checks.
How It Works: From Style Constraints to Spec Output
The skill targets B-end backend UIs and generates interface solutions aligned with the neutral design language of Tencent Cloud, Volcano Engine, and AntD v5. Its main outputs include:
- Design tokens: shared color, spacing, radius, shadow, and other base variables;
- Grid rules: layouts suited to common admin-screen information density;
- Component specs: forms, tables, dialogs, side navigation, and other B-end UI patterns;
- Front-end CSS variables: ready to enter a style system, with
light/darkmode support.
This is useful for fixing the visual baseline first, then letting front-end implementation follow the same variable contract.
Boundaries and Notes
The skill is closer to a standardized UI specification than a full product architecture, interaction prototype, or brand-exploration service. For complex dashboards, mobile experiences, or strong brand styles, add explicit design constraints.
Use Cases
- Generate a low-decoration layout for an admin dashboard and export reusable CSS variables.
- Specify tables, forms, and dialogs in AntD v5 style and organize grid rules.
- Set up light/dark design tokens for a new mid-platform system to reduce style drift.
- Convert Tencent Cloud-style references into front-end CSS variables and component notes.
Best For
- Front-end engineers on B-end backends who need consistent CSS variables, grids, and component styles.
- Product designers owning mid-platform visual specs who need AntD v5-style page tokens.
- Technical leads starting a new admin console who need a quick light/dark base style.
- UI engineers maintaining multiple internal systems who need a reusable B-end component spec.
Related Skills
Excalidraw Wrap is an Excalidraw-focused wrapper, with tags for TypeScript, GitHub, and automation.
Calibrate vague brand inputs, expose contradictions, distill a brand core and positioning boundaries, then stress-test the result into an executable brand skeleton.
Generate localized Chinese brand names, naming directions, slogans, and risk checklists with reusable templates and trademark search reminders.
A beginner-friendly photo analysis tool that infers shooting parameters from visual features and suggests post-processing, optimization, and learning keywords.