We'll start with the Once UI Starter which gives us access to 100+ Once UI components and a minimalistic Next.js boilerplate.Clone the repository and set up the local environment as explained in the local environment setup guide.
Create the layout
Let's create two new components in the components folder: Header.tsx and Footer.tsx.
The position="sticky" prop makes the header sticky, so it stays at the top of the page when scrolling. The light and dark props are used to conditionally render the logo based on the current theme. Don't forget to change the svg files to your own logo. The xs={{hide: true}} prop hides the navigation links on mobile.
Now let's open the layout.tsx file and add the Header and Footer components to the layout. They will appear on every page.
Update the page content
Now let's challenge the AI to update the page content. Open the page.tsx file and try this prompt:
"Update the @page.tsx file with a vertical hero section with a heading, subheading, call to action button and an image. Align the content to the center of the page. This is a SaaS product for designers. For the image, use "/images/og/home.jpg". Make sure you read the rules file to understand the constraints and the context7 documentation to understand the available components."
This is the result:
It's a minimalistic, completely responsive hero element with fade-in animations. Now we can ask AI to create a features section, a testimonial, and pricing cards.
This is not jaw-dropping, over-the-top or flashy. It's just a simple, responsive foundation that we can work with. You don't stand out from the crowd by being more flashy. You stand out by being more intentional.
Browse the Once UI documentation and copy-paste elements to spice it up a bit. I'll add a nice gradient behind the testimonial section to highlight it visually.
Even small changes like this one can have a huge impact on the final result. Nothing crazy, just a bit of shape and color at the right place.
Changing the vibe
One of the greatest leverages of Once UI is the ability to change the entire "vibe" of the app via keywords, without touching the actual code. You can do this inside the once-ui.config.js file, or simply prompt AI to create a different version.
You can experiment with several pre-defined styles to find the one that best matches your brand, or use our brand tool to create your custom theme.
// Add these at the top of the file
import { Header } from '@/components/Header';
import { Footer } from '@/components/Footer';
// Then render the Header component directly above {children}
// and the Footer component directly below it.
<Column fillWidth center padding="l">
<Column maxWidth="xl" horizontal="center" gap="48" align="center">
{/* Text Content Area */}
<Column maxWidth="m" horizontal="center" gap="24" align="center">
<RevealFx translateY={2} speed="medium">
<Heading variant="display-strong-xl" align="center">
The Design OS for Modern Creators
</Heading>
</RevealFx>
<RevealFx translateY={4} delay={0.2} speed="medium">
<Text variant="heading-default-xl" onBackground="neutral-weak" wrap="balance" align="center">
Streamline your workflow from wireframe to production. Build high-end interfaces with clarity, speed, and quiet confidence.
</Text>
</RevealFx>
<RevealFx translateY={6} delay={0.4} speed="medium" fitWidth>
<Button id="get-started" href="#" variant="primary" size="m" weight="default" arrowIcon>
Get started for free
</Button>
</RevealFx>
</Column>
{/* Hero Image Section */}
<RevealFx translateY={8} delay={0.6} speed="slow" fillWidth>
<Media
src="/images/og/home.jpg"
alt="Design System Dashboard Preview"
border="neutral-alpha-weak"
background="surface"
aspectRatio="16/10"
radius="xl"
shadow="l"
fillWidth
/>
</RevealFx>
</Column>
</Column>
