[Profile Beautification] Aesthetics Engineered. Narratives Unveiled.

AI roleplay with 界面美化助手: [Profile Beautification] Aesthetics Engineered. Narratives Unveiled.

UI Beautification Assistant Turn Your Rubii Text Interactions into Visual Art Static UIBeautification Transform text into exquisite interfaces AI DynamicTemplates Create updatable smart interfaces > User Guide & Quick Start Steps for Static Beautification: Provide the text content you want to beautify Describe the desired style or look Receive ready-to-use beautification code Paste directly into Rubii to use Steps for Dynamic Templates: Specify the information that needs dynamic updates Receive a template with placeholders Write it into your character settings as guided Content updates automatically when the AI replies Quick Start Examples: Static Beautification: "Please beautify this character profile: 'Xiao Xue is a gentle librarian...'" Dynamic Template: "I need a collapsible character status bar showing current location, time, attire, and inner thoughts" > Tips & FAQ Model Suggestion: Recommend using Claude (any version), its aesthetic and coding skills are good, with a low error rate. Advanced Gemini 2.5 can be tried; it's more creative, but more prone to truncation or errors. Provide Detailed Information: The more details you provide, the more accurate the assistant's design will be. You can provide theme, color preferences, layout, and element focus. Of course, you can also leave it all to the AI. (๑>ᴗ<๑) Iteration & Revision: It's normal for the first draft not to fully meet your expectations. You can try rephrasing or backtracking and resending, which often leads to good improvements. You can also request modifications at any time; the assistant will help you iterate with infinite patience. Response Truncated / Red Error: If the AI's response is interrupted and shows an error, causing content loss, refresh the browser page to recover it. Then click "Continue" or ask the AI to restart. If clicking "Continue," it's advisable to first click "Edit," delete the content back to an easy-to-continue point (like a code segment break or an unfinished sentence), and then click "Continue." Code Displays as Plain Text: If the code isn't parsed and displays as plain text, please check the code. Ensure it starts with the tag, ends with the tag, and does not have Markdown ``` code blocks. Status Bar Formatting Error: Please use instructions to ensure the status bar code output by the AI is wrapped in and tags. Code Only Renders Partially: If the code is normal in chat, but fails to render / partially renders after copying to the Moment profile, please try deleting [ALL] [blank lines] inside the code (lines with no actual characters, only whitespace). Cannot Achieve Interactive Effects: Rubii has almost no support for JavaScript and cannot implement complex interactions. Only simple CSS interactions (like hover or ) can be used. Text Displays as White and is Illegible: This may be because the font style is overridden by Rubii's default font style. Please replace all tags with tags yourself or ask the AI to do so to prevent the style from being overridden. Beautification Works on Web, but Errors in APP: The APP's compatibility for beautification is much worse than the web's. The problem is due to incompatible code. If the beautification is intended for the APP, please run the code directly in the APP to visually check its display effect. Want Code Directly, No Design Proposal: Just include the instruction "Generate code directly" when sending your content. Want Nice Fonts / Transparent Background: [For fonts, use instruction:] "You can use the CSS @import rule to import custom fonts from a reliable external font service (like Google Fonts)." / [For transparent background:] "Please adjust the color transparency (alpha channel) and modify this interface design to a transparent background version, allowing it to blend with my chat background. When making it transparent, please prioritize readability, visual hierarchy, color harmony, and overall aesthetic." Adding Illustrations: Upload your own image to an [image hosting site], for example postimages, convert it to an [image link], and send it to the assistant. Cost-saving (Diamond-saving) Dynamic Template: If you want a more "diamond-saving" dynamic UI template (like a status bar), you can ask the assistant to use a concise style, which will remove animations and extra decorations. Long Text Beautification: Rubii's single message limit is about 2000 characters. For long text, please first say "Please receive content," and after the AI replies, paste your text to replace the AI's reply. Copyright? The code you generate is your own, please use it however you like. But I'd be very happy if you could credit the source or give a like (๑>ᴗ<๑). Common Design Types Character Profile Status Bar Phone Interface Diary/Journal Gamified UI Custom Start Creating UI Beautification Assistant v2.3 | Cover Art Source: Artist JW Update Log 2025.6.28 Optimized the code-breaking issue, it's more stable now. Advanced Gemini, which previously broke code, can now run beautification. (But it still occasionally breaks code or truncates output. This must be rb's fault!). The assistant will now focus more on creating visual focal points and using animations to enhance the visual impact and appeal of the beautified interface. Adjusted the interaction flow. The assistant will now provide a design proposal first, confirm with you, and then write the code, making it easier to get the desired effect. (If you want to skip this step, use the instruction "Generate code directly") 2025.11.12 Updated the FAQ in the introduction Fixed some issues Top AI model recommendations: 1)Gemini 3 Pro 2）Claude, 3) Gemini 2.5 Pro or Grok4. The thinking version is better. If you encounter problems, please first read the "Tips & FAQ" section of the introduction, which consolidates most common issues

界面美化助手

@羽澄

Brief

UI Beautification Assistant

Turn Your Rubii Text Interactions into Visual Art

Static UI
Beautification

Transform text into exquisite interfaces

AI Dynamic
Templates

Create updatable smart interfaces

> User Guide & Quick Start

Steps for Static Beautification:

Provide the text content you want to beautify
Describe the desired style or look
Receive ready-to-use beautification code
Paste directly into Rubii to use

Steps for Dynamic Templates:

Specify the information that needs dynamic updates
Receive a template with placeholders
Write it into your character settings as guided
Content updates automatically when the AI replies

Quick Start Examples:

Static Beautification: "Please beautify this character profile: 'Xiao Xue is a gentle librarian...'"
Dynamic Template: "I need a collapsible character status bar showing current location, time, attire, and inner thoughts"

> Tips & FAQ

Model Suggestion: Recommend using Claude (any version), its aesthetic and coding skills are good, with a low error rate. Advanced Gemini 2.5 can be tried; it's more creative, but more prone to truncation or errors.

Provide Detailed Information: The more details you provide, the more accurate the assistant's design will be. You can provide theme, color preferences, layout, and element focus. Of course, you can also leave it all to the AI. (๑>ᴗ<๑)

Iteration & Revision: It's normal for the first draft not to fully meet your expectations. You can try rephrasing or backtracking and resending, which often leads to good improvements. You can also request modifications at any time; the assistant will help you iterate with infinite patience.

Response Truncated / Red Error: If the AI's response is interrupted and shows an error, causing content loss, refresh the browser page to recover it. Then click "Continue" or ask the AI to restart. If clicking "Continue," it's advisable to first click "Edit," delete the content back to an easy-to-continue point (like a code segment break or an unfinished sentence), and then click "Continue."

Code Displays as Plain Text: If the code isn't parsed and displays as plain text, please check the code. Ensure it starts with the <plot> tag, ends with the </plot> tag, and does not have Markdown \`\`\` code blocks.

Status Bar Formatting Error: Please use instructions to ensure the status bar code output by the AI is wrapped in <plot> and </plot> tags.

Code Only Renders Partially: If the code is normal in chat, but fails to render / partially renders after copying to the Moment profile, please try deleting [ALL] [blank lines] inside the code (lines with no actual characters, only whitespace).

Cannot Achieve Interactive Effects: Rubii has almost no support for JavaScript and cannot implement complex interactions. Only simple CSS interactions (like hover or <details>) can be used.

Text Displays as White and is Illegible: This may be because the font style is overridden by Rubii's default font style. Please replace all <p> tags with <span> tags yourself or ask the AI to do so to prevent the style from being overridden.

Beautification Works on Web, but Errors in APP: The APP's compatibility for beautification is much worse than the web's. The problem is due to incompatible code. If the beautification is intended for the APP, please run the code directly in the APP to visually check its display effect.

Want Code Directly, No Design Proposal: Just include the instruction "Generate code directly" when sending your content.

Want Nice Fonts / Transparent Background: [For fonts, use instruction:] "You can use the CSS `@import` rule to import custom fonts from a reliable external font service (like Google Fonts)." / [For transparent background:] "Please adjust the color transparency (alpha channel) and modify this interface design to a transparent background version, allowing it to blend with my chat background. When making it transparent, please prioritize readability, visual hierarchy, color harmony, and overall aesthetic."

Adding Illustrations: Upload your own image to an [image hosting site], for example postimages, convert it to an [image link], and send it to the assistant.

Cost-saving (Diamond-saving) Dynamic Template: If you want a more "diamond-saving" dynamic UI template (like a status bar), you can ask the assistant to use a concise style, which will remove animations and extra decorations.

Long Text Beautification: Rubii's single message limit is about 2000 characters. For long text, please first say "Please receive content," and after the AI replies, paste your text to replace the AI's reply.

Copyright? The code you generate is your own, please use it however you like. But I'd be very happy if you could credit the source or give a like (๑>ᴗ<๑).

Common Design Types

Character Profile Status Bar Phone Interface Diary/Journal Gamified UI Custom

UI Beautification Assistant v2.3 | Cover Art Source: Artist JW

Update Log


2025.6.28
Optimized the code-breaking issue, it's more stable now. Advanced Gemini, which previously broke code, can now run beautification. (But it still occasionally breaks code or truncates output. This must be rb's fault\!).
The assistant will now focus more on creating visual focal points and using animations to enhance the visual impact and appeal of the beautified interface.
Adjusted the interaction flow. The assistant will now provide a design proposal first, confirm with you, and then write the code, making it easier to get the desired effect. (If you want to skip this step, use the instruction "Generate code directly")
2025.11.12
Updated the FAQ in the introduction
Fixed some issues

Top AI model recommendations: 1)Gemini 3 Pro 2）Claude, 3) Gemini 2.5 Pro or Grok4. The thinking version is better.

If you encounter problems, please first read the "Tips & FAQ" section of the introduction, which consolidates most common issues

Hello! I am the UI Beautification Assistant, an AI partner specializing in transforming text into exquisite UI elements. My main task is to help you create visually stunning character profiles, dialogue interfaces, and other interactive elements. I can convert simple text or ideas into beautiful and attractive interface components, all perfectly adapted to run in the Rubii environment.

I have two main commands to serve you:

Static UI Beautification Command:

I will design a beautiful UI interface for your text or concept and provide ready-to-use HTML and CSS code.

AI Dynamic Update UI Template Command:

I will create UI templates with AI-recognizable placeholders, allowing the roleplaying AI to dynamically update information in its responses.

Whether you want to create unique designs for character introductions, status bars, journal interfaces, phone interactions, or any other UI element, I can meet your needs.

Ready to start? Please use one of the commands above and tell me the text you want to beautify or the UI effect you need to achieve!