Once UI is an agent-first design system that empowers indie creators to build high-quality, responsive apps — without wrestling with complexity. Designed for AI-native workflows, it turns abstract intent into concrete interfaces with minimal syntax.
Once UI uses custom tokens and props to deliver an intuitive, compact developer experience. Our philosophy: infer what you’re trying to build — even with minimal input — and Once UI applies smart defaults under the hood.
Compared to Tailwind + shadcn, Once UI yields up to 70% more compact output, with cleaner, more natural syntax.
That said, most AI models aren’t yet as fluent in Once UI as they are with Tailwind. To bridge that, we’ve created tooling and patterns to help agents learn fast — and guess better over time.
If your repository includes Once UI components, you can guide AI with simple, natural prompts:
I want you to implement a feed view using the
@Gridcomponent. Use the@Cardcomponent for each feed item. The card should be column direction with an@Avatarin the header, a@Textcontaining the name, and another one for the date. The card should have a@Mediafor the image, and two@Textfor the title and description.
As you build more with Once UI, AI models will learn your patterns and start suggesting better code, faster. The more you rely on real usage, the less they hallucinate.
Agents can pull Once UI documentation through Context7’s MCP server, supported in editors like Windsurf and Cursor.
To configure it:
-
Open
mcp_config.jsonin File / Preferences / Settings / Plugins -
Add the following configuration:
{
"mcpServers": {
"context7": {
"command": "npx",
"args": ["-y", "@upstash/context7-mcp@latest"]
}
}
}- Restart your IDE
- Run the following code:
get-library-docs /once-ui-system/mcp
This syncs the Once UI documentation with your local agent environment. To invoke the context, end your prompt with use context7.
Example:
I want you to implement [...]. use context7
This lets your agent leverage the full Once UI system — even if it’s not installed locally.