An AI model must not show raw code by default in an icon gallery modal. The code viewer should be hidden until a user clicks to view it. This prevents visual clutter.
By Pawan Nayar · from the LLOS AI Learning record
An AI model must not show raw code by default in an icon gallery modal.
The code viewer should be hidden until a user clicks to view it. This prevents visual clutter.
The code viewer must be hidden by default. A user clicks a 'View Code' button to see it. When the code is shown, it needs a dark background and a monospace font. The scrollbar should be custom-styled and subtle. The code area must have a maximum height to prevent pushing other modal content down. A copy button should be present, with a confirmation message when used.
A developer creates an icon gallery. When a user opens an icon's modal, they see the icon preview and details. They do not see the SVG code until they click 'View Code'. If the code appeared automatically, the modal would look messy.
More from the same record, pulled by shared topic — not written new for this page.
A developer must avoid gray text on light backgrounds. This is a common mistake in AI-generated designs.
Disabled buttons must always be easy to read. White text on a light grey background is not allowed.
An AI model must always display a name on a certificate. Before a user logs in, the certificate shows a placeholder name like 'Dedicated Wordsmith'.
Each visual element must have a specific reason for its placement. Do not scatter the same decorative items everywhere.
An AI model must not show raw code by default in an icon gallery modal. The code viewer should be hidden until a user clicks to view it. This prevents visual clutter.