Update components by qingqing-ux · Pull Request #2988 · goplus/builder

qingqing-ux · 2026-03-26T08:14:21Z

Background

This PR standardizes the organization of SPX design resources and aligns related page and component assets.
It also introduces icon font resources and refreshes supporting documentation to improve consistency and maintainability across the UI design workspace.

Changes

Reorganized SPX design files, demo sources, and archive structure
Standardized image and asset filenames to kebab-case English names
Added icon font assets and updated related component/font mappings
Updated SPX community, editor, tutorial, and demo design files
Cleaned up outdated archived and AI canvas design artifacts
Refined UI documentation and README content

Scope

ui/components/spx/builder-component.lib.pen
ui/pages/spx/*
ui/images/*
ui/archive/*
ui/docs/*
ui/README.md
ui/README.zh.md

Design System Impact

Yes (requires Component PR)
No

Delete some unnecessary variables Apply icon to page

…ng table.

- Optimize team-workflow.md with industry-standard structure - Simplify pencil design draft reproduction workflow - Update pr-template.md with clearer format and examples - Remove redundant pr-checklist.md (covered by design-review-checklist) - Remove pr_review.md (basic git tutorial, not project-specific) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Rename 'pencil design draft reproduction workflow.md' to 'ai-design-workflow.md' - Simplify title and structure - Use tables for input/output clarity - Add component library link Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Renamed files in ui/images/: - 用户头像.png → avatar.png - 项目运行.png → project-run.png - 项目全屏.png → project-fullscreen.png - 地图背景.png → map-bg.png - builder使用.png → builder-usage.png Updated all references in: - ui/components/spx/builder-component.lib.pen - ui/pages/spx/*.pen - ui/pages/spx/demos/*.html Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Renamed files in ui/images/ to follow repository convention: - Notification-2.gif → notification-2.gif - Sprite-review.png → sprite-review.png - Union.png → union.png - XBuilder_icon1.jpg → xbuilder-icon1.jpg - XBuilder_Icons_02.ttf → xbuilder-icons-02.ttf - XBuilder_icon1.ttf → xbuilder-icon1.ttf - ai canvas logo.png → ai-canvas-logo.png - navbar bg.png → navbar-bg.png - tutorial entry-filled.png → tutorial-entry-filled.png - user bg.png → user-bg.png - pubilsh-colorful.png → publish-colorful.png (also fixed typo) Updated all references in components and pages. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Standardized font naming for consistency: - File: xbuilder-icon1.ttf → xbuilder-icons-01.ttf - File: xbuilder-icon1.jpg → xbuilder-icons-01.jpg - name: XBuilder_Icons_01 → xbuilder-icons-01 - name: XBuilder_Icons_02 → xbuilder-icons-02 - fontFamily references updated accordingly This ensures font logical names match physical filenames, reducing confusion and maintenance errors. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

### Background Improve file naming consistency and organization in spx design directory. ### Changes - Rename editor files with editor- prefix (map-editor → editor-map, etc.) - Keep community .pen files in ui/pages/spx/ with community- prefix - Simplify internal node names (remove redundant prefixes like stage-editor-, sprite-editor-) - Move demo HTML files to _sources/ subdirectory ### Scope - ui/pages/spx/editor-map.pen - ui/pages/spx/editor-sprite.pen - ui/pages/spx/editor-stage.pen - ui/pages/spx/community-*.pen - ui/pages/spx/tutorial.pen - ui/pages/spx/demos/ ### Design System Impact - [ ] Yes - [x] No Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

### Background Reduce image file size for better loading performance. ### Changes - Compressed xbuilder-icons-01.jpg from 1886KB to 474KB (~75% reduction) ### Scope - ui/images/xbuilder-icons-01.jpg ### Design System Impact - [ ] Yes - [x] No Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

gemini-code-assist · 2026-03-26T08:16:03Z

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request focuses on enhancing the organization and maintainability of the UI design system. It standardizes file paths, updates documentation to reflect modern design engineering practices, and refines existing design assets for improved consistency and clarity. The changes aim to streamline the design workflow and facilitate better collaboration between design and development teams.

Highlights

UI File Restructuring: The pull request significantly reorganizes UI design files, moving many older or feature-specific design assets and their associated demo files into a new, standardized archive directory structure. This includes renaming directories and files for clarity and consistency.
Documentation Updates: Key documentation files related to UI workflow and PR templates have been updated or replaced. A new AI Design Workflow document was added, detailing the process of using AI for replicating Figma designs with Pencil, while older, less structured workflow documents were removed.
Pencil Design File Enhancements: Numerous Pencil design files (.pen files) across community pages, editors, and tutorials received updates. These changes include version bumps, renaming of root frames for better organization, adjustments to reference properties (like x, y, width, height), and the addition of font imports, indicating a move towards more robust and consistent design definitions.
Centralized Demo Access: All individual demo HTML files have been moved into a _sources subdirectory, and a new index.html was introduced to provide a centralized, navigable interface for accessing these UI demos, improving discoverability and ease of use.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request updates UI documentation, including translating the main README to English and adding a Chinese version, and restructuring workflow documents. It also standardizes image paths and filenames across various design files (.json, .pen, .html, .css) and introduces a new demo index page. Design files (.pen) are updated to version 2.9, incorporate new font definitions, and include minor layout adjustments and variable definitions. A review comment highlights that disabled 'arrow-right-long-outlined' frames (which are being replaced by icon fonts) should be removed for consistency and to reduce file size, a pattern observed in multiple .pen files. Another comment points out a potential issue where a fallback background color was removed in a CSS file, along with a minor formatting issue.

gemini-code-assist · 2026-03-26T08:19:27Z

ui/pages/spx/community-home.pen

                        {
                          "type": "frame",
                          "id": "MA8ke",
+                          "x": 80,
+                          "y": 2,
                          "name": "arrow-right-long-outlined",
+                          "enabled": false,
                          "width": 20,
                          "height": 20,
                          "layout": "none",


It appears the arrow-right-long-outlined frame, which contains a path-based icon, is being replaced by an icon font (XBuilder_Icons_02). Since this frame is now disabled, it would be best to remove it completely. This will help in reducing the file size and improving maintainability. This pattern of disabling old icon frames is repeated elsewhere in this PR (e.g., in ui/pages/spx/community-user.pen); they should all be removed for consistency and cleanliness.

gemini-code-assist · 2026-03-26T08:19:27Z

ui/pages/spx/demos/_sources/modify-project-name-and-id-demo.html

      border-radius: 50%;
      border: 1.333px solid #fff;
-      background: #fffaee url("../images/avatar.png") center/cover no-repeat;
+      background:  url("../../../images/avatar.png") center/cover no-repeat;


The background color #fffaee has been removed from this style. If this was unintentional, it should be restored as it can serve as a fallback color if the image fails to load. Additionally, there is a minor formatting issue with a double space after background:.

Suggested change

background: url("../../../images/avatar.png") center/cover no-repeat;

background: #fffaee url("../../../images/avatar.png") center/cover no-repeat;

xgopilot · 2026-03-26T08:25:59Z

ui/README.md

+├── pages/               # Page designs
+│   └── spx/
+│       ├── community-*.pen
+│       ├── *-editor.pen


The glob pattern shown here is backwards. Actual editor files in pages/spx/ use editor-*.pen (e.g., editor-map.pen, editor-stage.pen, editor-sprite.pen), not *-editor.pen. Should be:

├── editor-*.pen

xgopilot · 2026-03-26T08:26:01Z

ui/README.md

+│       ├── *-editor.pen
+│       └── tutorial.pen
+├── docs/                # Documentation
+├── images/              # Image assets


The pages/spx/demos/ subdirectory is added by this PR (demos/index.html + images) but is not reflected in this directory tree. Consider adding it:

│ ├── demos/ # Demo browser

xgopilot · 2026-03-26T08:26:18Z

ui/pages/spx/demos/index.html

@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="zh-CN">


lang="zh-CN" is incorrect — the entire page content is in English (title, navigation labels, placeholder text, demo names). Should be lang="en".

Suggested change

<html lang="zh-CN">

<html lang="en">

xgopilot · 2026-03-26T08:26:20Z

ui/pages/spx/demos/index.html

+      loadDemo(location.hash.slice(1));
+    } else {
+      location.hash = demos[0].id;
+    }


The else branch relies on a hashchange side-effect to call loadDemo. If the browser fires hashchange before the listener is attached (or the same hash is already set), the first demo may not load. A direct call is more reliable:

Suggested change

}

location.hash = demos[0].id;

loadDemo(demos[0].id);

plwhd and others added 21 commits March 19, 2026 17:28

add iconfont

ac8f2f5

editor iconfont

c37af5b

your commit message

4e86573

Add font icon

38851ec

Delete some unnecessary variables Apply icon to page

chore(spx): update community and stage editor pen pages

65690f3

Correcting incorrect icon commands in the system; Adding a font mappi…

da799c8

…ng table.

docs(ui): rename and optimize ai-design-workflow

ba20108

- Rename 'pencil design draft reproduction workflow.md' to 'ai-design-workflow.md' - Simplify title and structure - Use tables for input/output clarity - Add component library link Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

修改文档、调整目录结构

f846a29

Merge branch 'goplus:dev' into ui-iconfont-update

c2d646b

Add icon font

42dd2ad

Add xbuilder-icons-02 image

235fa53

Component Specification Naming

6aa39ea

XBuilder logo component adjustment

4dfd0c9

Adjust component name

9fad97c

Merge branch 'pr_2973_3' into ui

489f1a5

vercel bot deployed to Preview – builder March 26, 2026 08:16 View deployment

qingqing-ux changed the title UI Update components Mar 26, 2026

gemini-code-assist bot reviewed Mar 26, 2026

View reviewed changes

xgopilot bot reviewed Mar 26, 2026

View reviewed changes

qingqing-ux merged commit 0696ff9 into goplus:ui Mar 26, 2026
4 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update components#2988

Update components#2988
qingqing-ux merged 21 commits intogoplus:uifrom
qingqing-ux:ui

qingqing-ux commented Mar 26, 2026 •

edited

Loading

Uh oh!

gemini-code-assist bot commented Mar 26, 2026

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Mar 26, 2026

Uh oh!

gemini-code-assist bot Mar 26, 2026

Uh oh!

xgopilot bot Mar 26, 2026

Uh oh!

xgopilot bot Mar 26, 2026

Uh oh!

xgopilot bot Mar 26, 2026

Uh oh!

xgopilot bot Mar 26, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	background: url("../../../images/avatar.png") center/cover no-repeat;
	background: #fffaee url("../../../images/avatar.png") center/cover no-repeat;

Conversation

qingqing-ux commented Mar 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Background

Changes

Scope

Design System Impact

Uh oh!

gemini-code-assist bot commented Mar 26, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

xgopilot bot Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

xgopilot bot Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

xgopilot bot Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

xgopilot bot Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

qingqing-ux commented Mar 26, 2026 •

edited

Loading