About this skill

Problem

Brand1 B-end interfaces often have inconsistent UI decisions: ad-hoc color values, missing button state mappings, uneven card radii and shadows, and page spacing based on personal preference. This skill turns the Brand1 design system into reusable engineering constraints for PC, mobile, and large-screen surfaces.

Core Capabilities and Workflow

Color system: use Brand-6 #07978D as the primary color, with Neutral tones and success, warning, error, and progress semantic colors; state mappings include Brand-5 hover and Brand-8 active.
Typography: use Source Han Sans for Chinese text and Arial for English and numbers; create hierarchy with --font-size-3 through --font-size-11, font-weight, and line-height tokens.
Layout and spacing: use a 24-column grid and responsive breakpoints, with clear roles for 4px, 12px, and 16px spacing, plus area sequences for inner pages, portal homepages, and data dashboards.
Component styles: cover buttons, cards, inputs, global navigation, and tags, with common 28px heights, 2px or 4px radii, and --shadow-1 through --shadow-3 elevation.

Boundaries

Use it for Brand1-style UI implementation, component consistency checks, and design-token alignment. It does not replace a business component library or cover full accessibility validation, motion implementation, or brand visual extension; concrete pages still require integration with the frontend framework and component library.

Screenshots

Use Cases

When building a Brand1 admin list page, apply 16px/24px spacing, the 24-column grid, and 28px controls to lay out query, title, and content areas.
During design review, consistently check buttons, inputs, and cards against Brand-6, Neutral, Error, hover, active, and disabled states.
When building a Brand1 portal or data dashboard, sequence navigation, hero or tab, cards, and content areas with 24px main spacing and bottom padding.
When curating design tokens, map font sizes, weights, line heights, shadows, and spacing to variables such as --font-size-3 and --shadow-1 for component reuse.

Best For

Frontend engineers building Brand1 B-end pages: they need to implement button, input, card, and navigation color, radius, shadow, and height values in code.
UI designers reviewing Brand1 interfaces: they need to check success, warning, error, progress, focus, and disabled states against component tokens.
Product designers maintaining a design system: they need to align font sizes, line heights, spacing, and shadows into reusable tokens.
Frontend developers adding Brand1 dashboards: they need to assemble portal, inner, and data pages using the defined area sequences and spacing rules.

Related Skills

Excalidraw Wrap

@user_922b1001/excalidraw-wrap

Excalidraw Wrap is an Excalidraw-focused wrapper, with tags for TypeScript, GitHub, and automation.

Design & Media 2026.08.30 ↓ 440

Brand Distillation

@user_3104f8ec/brand-distillation-skill

Calibrate vague brand inputs, expose contradictions, distill a brand core and positioning boundaries, then stress-test the result into an executable brand skeleton.

Design & Media 2026.08.29 ↓ 424

Chinese Brand Naming Workbench

@user_36c7efa2/brand-naming-cn

Generate localized Chinese brand names, naming directions, slogans, and risk checklists with reusable templates and trademark search reminders.

Design & Media 2026.08.30 ↓ 454

Photo Guide

@user_eec9ad28/photo-guide-skill

A beginner-friendly photo analysis tool that infers shooting parameters from visual features and suggests post-processing, optimization, and learning keywords.

Design & Media 2026.08.29 ↓ 460

Brand1 UI Design System