TypeUI - Flowbite
Learn how to use TypeUI to pull design skill files into your project and apply consistent design systems on top of Flowbite components using AI coding agents
TypeUI is an open-source CLI tool that generates and distributes SKILL.md files — portable design blueprints that instruct AI coding agents to follow a consistent design system when building interfaces. It works with tools like Cursor, Claude Code, Codex, OpenCode, and Gemini CLI.
These can help you to integrate the UI components from Flowbite in your project by downloading a skill file from TypeUI and applying a certain style guide and instruct your AI agent (Claude Code, Cursor, or other) to build interfaces using Flowbite and TypeUI in a certain style.
Getting started #
We recommend checking out the existing design skills from TypeUI to select the style that you like and then either copy the skill file from their website or use the following CLI command in your terminal:
- Terminal
npx typeui.sh pull [slug]
The slug from this command is the placeholder for the select design skill from the public registry from TypeUI.
Generate design skills #
You can also generate your own design skill files using the TypeUI CLI and instruct your project’s design system specifications, such as the branding, colors, typography, shadows, and more.
Use the following command to initiate the setup:
- Terminal
npx typeui.sh generate
After going through all of the questions, you will have to choose which AI provider to use for the SKILL.md file generation. Finally, the CLI will automatically generate this file in the current working directory.
Update design skills #
You can also update existing valid design skill files generated by TypeUI by running the following command:
- Terminal
npx typeui.sh update
You can select the fields that you want to update and it will automatically only change those accordingly.
List design skills #
If you don’t want to preview the design skills from the website, you can also list all of the available design skills using the following command in your terminal:
- Terminal
npx typeui.sh list
This will basically show all of the available and curated files from the official public registry on GitHub.
Flowbite components #
A use case for Flowbite could be an existing project where you integrate such a design skill file and then instruct your AI agent to build websites using those specifications. In this case, it will use Flowbite’s theming system to easily update all of the blocks and components and saving you tokens in generation.