Generating pages with an LLM using a specific theme

[dineshbvadhia]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

n/a

Description

I've seen the LLM Reference: https://nicegui.io/llms.txt. I have a set of content pages and want to use an agent/llm to generate nicegui pages using a specific theme (for example, https://sphinx-themes.org/sample-sites/shibuya/). Is this possible?

NiceGUI Version

3.14

Python Version

3.14

Browser

Chrome

Operating System

Windows

Additional Context

No response

[falkoschindler]

Yes, that's certainly possible — but note that NiceGUI doesn't have a theme system like Sphinx, where you install a theme package and all pages automatically look alike. Styling is done with Quasar components, Tailwind classes and custom CSS. So "generating pages with a specific theme" boils down to giving the LLM the right building blocks and conventions.

I'd recommend a two-step approach:

1. Let the LLM create a theme module first. Point it at your reference theme and iterate until you like the result. This is where the look lives:

   • a color palette via ui.colors(...),
   • fonts and global CSS via ui.add_head_html() / ui.add_css(),
   • element defaults like ui.button.default_props(...) and ui.link.default_classes(...),
   • and most importantly a reusable page frame (header, sidebar, footer) as a context manager.

   The modularization example shows this pattern with its theme.py.

2. Let the LLM generate the individual pages. Give it https://nicegui.io/llms.txt plus your theme module as context and instruct it to wrap every page in your frame and use your helpers. That way the LLM only translates content into layout code instead of re-inventing the styling on every page, and the result stays consistent.

Reproducing a specific design like Shibuya pixel-perfectly will still require some custom CSS iterations, since NiceGUI is based on Quasar/Tailwind rather than Sphinx's HTML structure. But for a "same spirit" look — dark sidebar, clean typography, accent color — the approach above works well.

And honestly, the simplest starting point: just give your AI the link to https://nicegui.io/llms.txt and ask it how to best approach your task — it will figure out most of this on its own.