UI Potion: UI recipes for AI-generated code
I’m working on UI Potion: shareable UI component specs ("recipes") that are written so an AI can turn them into real code consistently - states, edge cases, a11y. Without caring about framework.
Alongside that, I'm building 'potion-kit', a cli agent-like toolkit that can assemble these potions into ready static websites.
I’m validating the idea and would love feedback:
- When you ask AI to build UI, what part goes wrong most often?
- What would make a "potion" actually reusable in your workflow?
- Comment a component/layout/feature you struggle to prompt well.
follow: https://x.com/uipotion
star: https://github.com/uiPotion/potion-kit
Is the plan to use Markdown file(s) for this, or how do you keep it model-agnostic?
It is JSON based on a predefined schema, plus a human-friendly page. It’s meant to be a portable UI specification for AI.
The point is to reduce ambiguity (layout constraints, states, behavior, a11y checks, etc.), so models tend to hallucinate less. It doesn’t eliminate iteration, but it tends to shorten it because the specs.
This way you can get UI without having to tell the model “use React” or “use Tailwind,” or lock into any specific framework or styling approach up front, because it can analyze the project first and adjust accordingly.
For example one-shot with the Kimi model + full conversation in the thread: https://x.com/uipotion/status/2021300326515474478
Example of a JSON potion: https://uipotion.com/potions/components/dropdown-select.json
And its schema: https://uipotion.com/schemas/categories/components.schema.json
Still evolving, so I’m open to feedback - please try it with different models and share what you get. Probably the newest ones will give the best results.
update: each potion is available as html, json and also markdown now
example: