A calm design system for you and your AI agent
179 blocks, 55 components, 41 app screens and 17 templates on one set of tokens, plus a design skill and 58 page prompts for your coding agent. React 19, Tailwind CSS 4, source you own.
npx shadcn add @klarhimmel/hero-split
Start where you are
Two ways in, one library
For developers
You build the page
Browse the blocks and components, try each one with the props panel and the viewport toggle, then copy the source into your app. It is yours to edit.
npx shadcn add @klarhimmel/hero-split
For your agent
Your agent builds the page
Install the design skill so your agent knows the tokens, the blocks and the rules. Then hand it a page prompt, or point it at llms.txt: every page also has a Markdown twin.
npx shadcn add @klarhimmel/skill-design
Catalogue
Everything you need to ship the whole product
6 catalogues that share one set of tokens, so the marketing site and the app look like the same company.
Agent kit
Hand the kit to your agent
Install the design skill and your agent knows which component to use, which token to reach for and how to write the labels. Then give it a page prompt.
Explore the agent kitTerminal
npx shadcn add @klarhimmel/skill-design✓ Added .claude/skills/klarhimmel-design/SKILL.md
Prompt
Build a pricing page for {product} with {plans} plans in {currency}. Use the klarhimmel-design skill. Lead with the plan most people pick.
Changelog
What is new
The latest from the library, from the changelog.
| Item | Tag | Change | Date |
|---|---|---|---|
| Templates | New | 17 whole pages built only from blocks, each with a live demo and one install command | 9 October |
| Item pages you can try | New | Preview and Code tabs, a props panel built from each block's schema, live Customise on every component | 9 October |
| Application UI | New | 41 screens in 16 categories: assistant, authentication, scheduling and boards and more | 9 October |
| Components | Updated | From 12 to 55 components, each with a live Customise panel and three demos | 9 October |
| Blocks | Updated | 179 blocks; every marketing category has at least four variants | 9 October |
| Browse and search | New | Filter, sort and rank on every index page; the state is in the URL | 9 October |
Built for agents
Your coding agent can read the whole kit
Every page has a Markdown twin and every item a registry entry, so an agent can read what you read.
llms.txt
One line per item with what it is for.
Copy for AI
Any page as Markdown, in one click, or add .md to its URL.
Design skill
Teaches your agent the tokens, blocks and rules.
Registry
Every item installs with npx shadcn add @klarhimmel/name.
Start with one block
Add a hero to your page in a minute. Keep it if you like it.