Pico step • same content, cleaner default style
In this step, keep the same page content from your Baseline page and ask AI to restyle it with Pico. This helps you see how a design system changes the look without rebuilding your whole page.
Choose Pico when you want the quickest clean upgrade with very little class setup. It is great for simple pages and less complex than Bootstrap or Bulma.
Usually, good UX starts with content first. For this workshop, we are intentionally focusing on design, so keep content as-is and improve the visuals.
Keep your page simple and organized: use clear headings, short sections, and regular buttons/links. Pico will make it look clean without extra setup.
This uses Pico's built-in blockquote styling as a lightweight callout pattern for important notes.
Copy this prompt exactly to convert your starter page into a Pico version.
Update this page so it uses Pico CSS styling. Really show me what the Pico framework looks like. Keep the same topic and content. Keep accessibility simple: use headings in order, include a skip link, and make sure tabbing clearly shows which link or button is selected. Please include whatever is needed in the HTML file so Pico styling works when I open the page in a browser.
If you picked your own topic in your Baseline page, keep it simple here too.
Pico shows how far you can get with minimal class setup and strong defaults. Next, you will compare this same page in other frameworks.