yumoqing/pipeline_core

Fork 0

yumoqing 1abaa4ea2e feat: 技能库(skills_library 213个Hermes技能)+skill_pack技能集安装能力+ocai-h5-dev技能集(37个应用/模块开发技能)

2026-08-16 15:17:43 +08:00

13 KiB

Raw Blame History

name

version

description

author

license

homepage

repository

keywords

platforms

ui-ux-pro-max-bricks

2.5.0

AI-powered design intelligence with 67 UI styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types specifically adapted for bricks-framework JSON-based development using pure JavaScript and CSS.

NextLevelBuilder + Hermes Agent

MIT

https://uupm.cc

https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

design

design-system

color-palette

typography

accessibility

ai-skill

bricks-framework

json-ui

pure-javascript

css-styling

hermes

UI/UX Pro Max for Bricks Framework

Overview

This skill provides AI-powered design intelligence specifically adapted for the bricks-framework JSON-based frontend development system. It includes comprehensive databases of UI styles, color palettes, font pairings, UX guidelines, and chart types optimized for bricks component structure and JSON configuration patterns.

The skill integrates seamlessly with bricks-framework's .ui file format, providing design recommendations that can be directly implemented using pure JavaScript and CSS within the bricks JSON component system. All styling is applied through the options.style property using standard CSS properties and camelCase variants (e.g., maxWidth, backgroundColor).

Prerequisites

Check if Python is installed:

python3 --version || python --version

If Python is not installed, install it based on user's OS:

macOS:

brew install python3

Ubuntu/Debian:

sudo apt update && sudo apt install python3

Windows:

winget install Python.Python.3.12

How to Use This Skill

Use this skill when the user requests any of the following:

Scenario	Trigger Examples	Start From
New project / page	"做一个 landing page"、"Build a dashboard"	Step 1 → Step 2 (design system)
New component	"Create a pricing card"、"Add a modal"	Step 3 (domain search: style, ux)
Choose style / color / font	"What style fits a fintech app?"、"推荐配色"	Step 2 (design system)
Review existing UI	"Review this page for UX issues"、"检查无障碍"	Quick Reference checklist above
Fix a UI bug	"Button hover is broken"、"Layout shifts on load"	Quick Reference → relevant section
Improve / optimize	"Make this faster"、"Improve mobile experience"	Step 3 (domain search: ux, bricks)
Implement dark mode	"Add dark mode support"	Step 3 (domain: style "dark mode")
Add charts / data viz	"Add an analytics dashboard chart"	Step 3 (domain: chart)
Bricks best practices	"bricks performance tips"、"JSON UI optimization"	Step 4 (stack search: bricks)

Follow this workflow:

Step 1: Analyze User Requirements

Extract key information from user request:

Product type: Entertainment (social, video, music, gaming), Tool (scanner, editor, converter), Productivity (task manager, notes, calendar), or hybrid
Target audience: C-end consumer users; consider age group, usage context (commute, leisure, work)
Style keywords: playful, vibrant, minimal, dark mode, content-first, immersive, etc.
Stack: bricks-framework (pure JavaScript and CSS, JSON-based UI)

Step 2: Generate Design System (REQUIRED)

Always start with --design-system to get comprehensive recommendations with reasoning:

python3 skills/ui-ux-pro-max-bricks/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

This command:

Searches domains in parallel (product, style, color, landing, typography)
Applies reasoning rules from ui-reasoning.csv to select best matches
Returns complete design system: pattern, style, colors, typography, effects
Includes anti-patterns to avoid

Example:

python3 skills/ui-ux-pro-max-bricks/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

Step 2b: Persist Design System (Master + Overrides Pattern)

To save the design system for hierarchical retrieval across sessions, add --persist:

python3 skills/ui-ux-pro-max-bricks/scripts/search.py "<query>" --design-system --persist -p "Project Name"

This creates:

design-system/MASTER.md — Global Source of Truth with all design rules
design-system/pages/ — Folder for page-specific overrides

With page-specific override:

python3 skills/ui-ux-pro-max-bricks/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"

This also creates:

design-system/pages/dashboard.md — Page-specific deviations from Master

How hierarchical retrieval works:

When building a specific page (e.g., "Checkout"), first check design-system/pages/checkout.md
If the page file exists, its rules override the Master file
If not, use design-system/MASTER.md exclusively

Step 3: Domain Search (When You Already Know the Domain)

If you already know which domain to search, use direct domain search:

python3 skills/ui-ux-pro-max-bricks/scripts/search.py "<query>" --domain <domain> [-n <max_results>]

Domain search:

product - Product type recommendations (SaaS, e-commerce, portfolio)
style - UI styles (glassmorphism, minimalism, brutalism) + AI prompts and CSS keywords
typography - Font pairings with Google Fonts imports
color - Color palettes by product type
landing - Page structure and CTA strategies
chart - Chart types and library recommendations
ux - Best practices and anti-patterns

Step 4: Stack-Specific Search (Bricks Framework)

For bricks-framework specific guidance, use stack search:

python3 skills/ui-ux-pro-max-bricks/scripts/search.py "<query>" --stack bricks

Available stacks: bricks (this skill's primary stack)

This returns bricks-specific:

Component recommendations (Form, VBox, HBox, DataGrid, Tree, etc.)
JSON structure patterns for .ui files with proper CSS styling
Event binding best practices (urlwidget, method, script, registerfunction, event)
Layout container strategies (VBox/HBox/Filler/ResponsableBox)
Form field type mappings (uitype: str, email, date, int, float, check, etc.)
Pure JavaScript and CSS implementation patterns

Step 5: Implementation with Bricks Components

Apply design recommendations using bricks-framework components with pure JavaScript and CSS:

Basic Components (atomic, no children):

Button, Text, Image, Form fields (via uitype), etc.

Container Components (can hold children):

VBox (vertical layout), HBox (horizontal layout)
Filler (takes remaining space), Modal, Tab, Accordion

Specialized Components:

DataGrid (for data tables), Tree (hierarchical data)
Charts (Bar, Line, Pie), VideoPlayer, AudioPlayer
MarkdownViewer, PDFviewer, DOCXviewer, EXCELviewer

Component Structure (.ui file):

{
  "id": "optional_unique_id",
  "widgettype": "required_component_type", 
  "options": { /* initialization parameters with CSS styling */ },
  "subwidgets": [ /* child components - containers only */ ],
  "binds": [ /* event handlers using pure JavaScript */ ]
}

CSS Styling in options.style: All CSS properties are supported using camelCase notation:

maxWidth, minHeight, backgroundColor, borderRadius
fontSize, fontWeight, fontFamily, lineHeight
padding, margin, display, flexDirection
Standard CSS units: px, %, em, rem, vh, vw

Event Handling Patterns (Pure JavaScript):

urlwidget: Load components dynamically from URLs
method: Call methods on target widgets
script: Execute pure JavaScript code with access to this and params
registerfunction: Call pre-registered functions
event: Dispatch custom events

Step 6: Template Integration

Integrate with Jinja2 templating in .ui files:

Use {{entire_url('component.ui')}} for dynamic component loading
Access parameters with {{params_kw.get('param') or 'default'}}
Implement dynamic data retrieval via datawidget/datamethod/datascript

Bricks-Specific Design Guidelines

Layout Best Practices

Use VBox/HBox for primary layout structure with pure CSS flexbox
Leverage Filler components for flexible spacing using CSS flex-grow
Implement ResponsableBox for responsive layouts with CSS media queries
Use Tab/IconBarPage for navigation between sections

Form Design Patterns

Map form field types to bricks uitype values:

'str' → UiStr (text input)
'email' → UiEmail
'date' → UiDate
'int' → UiInt
'float' → UiFloat
'check' → UiCheck
'checkbox' → UiCheckBox
'file' → UiFile
'image' → UiImage
'code' → UiCode
'text' → UiText
'password' → UiPassword

CSS Styling Integration

Apply design system recommendations directly through options.style:

Color Palette Application:

{
  "widgettype": "Button",
  "options": {
    "text": "Primary Action",
    "style": {
      "backgroundColor": "#3498db",
      "color": "#ffffff",
      "border": "none",
      "borderRadius": "6px",
      "padding": "12px 24px",
      "fontSize": "16px",
      "fontWeight": "600",
      "cursor": "pointer",
      "maxWidth": "300px"
    }
  }
}

Typography Application:

{
  "widgettype": "Text",
  "options": {
    "text": "Dashboard Title",
    "style": {
      "fontFamily": "'Inter', sans-serif",
      "fontSize": "32px", 
      "fontWeight": "700",
      "color": "#2c3e50",
      "maxWidth": "800px"
    }
  }
}

Component Selection Guide

Based on design requirements, choose appropriate bricks components:

Data Display:

Simple lists: DataGrid
Hierarchical data: Tree
Analytics: Bar/Line/Pie charts
Media: VideoPlayer/AudioPlayer/Image

User Interaction:

Forms: Form component with appropriate uitype fields
Navigation: Tab, IconBarPage, Menu
Modals: Modal component
Real-time: WebSocket, RTC components

Layout Containers:

Vertical stacking: VBox
Horizontal arrangement: HBox
Flexible spacing: Filler
Responsive: ResponsableBox
Accordion sections: Accordion/DynamicAccordion

Verification Checklist

Before delivering final implementation:

Design system generated and persisted (if multi-session project)
Component selection matches design requirements
Layout uses appropriate container components (VBox/HBox/Filler)
Form fields use correct uitype mappings
CSS styling applied through options.style with camelCase properties
Event bindings follow bricks patterns (urlwidget/method/script)
Jinja2 templating properly implemented for dynamic content
Responsive design considerations addressed with maxWidth/minWidth
Accessibility guidelines followed from UX database
Performance optimized (lazy loading, efficient data structures)

Quick Reference

Common Bricks Component Types

Layout: VBox, HBox, Filler, ResponsableBox, Splitter
Forms: Form, Miniform, Conform, Input, various uitype fields
Data: DataGrid, Tree, DynamicColumn, DataViewers (PDF/DOCX/EXCEL)
Media: Image, VideoPlayer, AudioPlayer, Camera, Recorder
Navigation: Tab, IconBarPage, Menu, Accordion, Modal, Popup
Charts: Bar, Line, Pie, MultipleStateImage
Real-time: WebSocket, RTC, Period, Keypress, WebSpeech
Utility: Message, ProgressBar, Countdown, Running, LLM components

CSS Styling Properties (camelCase)

Layout: width, height, maxWidth, minHeight, display, flexDirection
Spacing: padding, margin, paddingTop, marginLeft
Colors: backgroundColor, color, borderColor
Typography: fontSize, fontWeight, fontFamily, lineHeight, textAlign
Borders & Radius: border, borderRadius, borderWidth, borderStyle
Effects: boxShadow, opacity, transform, transition

Event Binding Action Types

urlwidget: Load components from URLs into targets
method: Call widget methods (set_text, show, hide, etc.)
script: Execute pure JavaScript with access to this/params
registerfunction: Call pre-registered global functions
event: Dispatch custom events to other components

"self": Current widget containing binds
"root": First widget under <body>
"body/app": bricks.app instance
"-x": Ancestor with ID "x"
"@WidgetType": Descendant with widget type "WidgetType"
"-@WidgetType": Ancestor with widget type "WidgetType"

Integration with Module Development Workflow

This skill integrates with the standard module development specification:

Directory Structure: Place .ui files in wwwroot/ directory
CRUD Integration: Use design recommendations in CRUD browserfields/alters
Frontend Development: All UI must use bricks-framework components with pure JavaScript and CSS
Skill Documentation: Create skill/ directory with SKILL.md after completion

When developing modules that require UI/UX design decisions, always consult this skill before implementing bricks components.

13 KiB Raw Blame History