Introducing Our New Profile Editor - A Guide

The new profile editor lets you customize your profile page with HTML, CSS, and AI all in one place. We know, the old system was kinda all over the place and we hope this will make life a lot easier!

he new editor is split into 3 tabs:

• HTML is the “about me”, aka the user card section of the profile. It has the old “about me” text editor but we’ve provided a code panel as well. This is where text, images, sections, divs, and layout pieces usually go. To preserve old behavior, putting everything, both HTML and CSS, in this section still works.
• CSS is for styling. This is where colors, fonts, borders, spacing, animations, backgrounds, and visual effects go. See guide: https://cssforjai.ju.mp/#g2
• The AI panel is what’s new and we will dive into it now. 

Editing With AI

There are a few ways to use AI in the editor.

Full remake

• Use this when you want AI to redesign the whole thing. Say something like “move my user card on the top and characters to the bottom” or “make my profile pokemon themed”. This gives AI more freedom, but it may still preserve some existing content and structure. If you want a true full remake, blank out both the HTML and CSS blocks first. That gives AI a clean canvas instead of asking it to build around what you had.

Element-specific edit

• Clicking preview elements will add Element Mentions that look like “@pp-uc-title” into the chat textbox while in AI mode. Use this when you only want to change only the selected elements. When element mentions are present in prompt, AI **will not **touch other parts of your profile other than the ones mentioned. 

Ask mode

• In this mode no changes will be applied to your profile. Use it when you want some directional guide or just wanna chat.

History, Drafts, and Publishing

• Saving stores your current edits as your draft. You only have one draft at a time, and it opens automatically when you click Customize Profile, so you can keep working without changing what other people see.
• Your history keeps past saved and published versions, so you can load an earlier version if an edit does not work out.
• Load Live loads the version currently visible on your public profile.
• When you are happy with your current draft, click Publish to make it live.

Best Practices

• Above the AI chat text box there are a few control buttons, utilizing them can give AI a stricter color/mood guidance, this is optional and can sometimes hinder AI creativity. 
• The quick edit(pen) button supports legacy user card edits, like changing user card background or using preset animations. 
• The image button allows for putting images into either the HTML section or giving AI scene images to incorporate into its design. Some of the best results were achieved when AI scene images are present. The scene images can be character silhouettes, button icons, etc. 
• When prompting, be specific when you can. Mention theme, layout, vibe, fonts, etc. and remember don’t accidentally add an Element Mention when you want a full redesign!

Daily Limit

AI edits have a daily limit to keep cost reasonable, hopefully we can find ways to increase the limit in the future. If you reach the limit, you can still edit the HTML and CSS manually. 

Final Note 

This is still an experimental feature and we are still testing out what model and prompt works best. And AI will almost definitely make mistakes and low quality edits at some point. Anyways, hope you have fun with this, and happy styling!

Updated on: 16/05/2026