Skip to content

The design-system layer

hiiu detects the modules an app imports components from, ranks them by use, and hands an agent that catalog so it builds with your components instead of lookalikes.

An agent editing a copy of your app will happily invent a button. The design-system layer exists to make sure it reaches for yours instead.

Detection is by use, not by convention

There is no configuration naming your component library, and no assumption that it lives in src/components. hiiu walks the app's own JSX, records which modules components are imported from, and ranks those modules by how much of the app depends on them.

hiiu components catalog ./path/to/app

It reads no node_modules. The catalog is built from the app's source, so what it ranks is what the app actually uses.

It proposes, it does not decide

A low confidence result is a successful run, not a failure. Which module is the design system is a question with a human answer, and the catalog's job is to put a well-ordered list in front of that human rather than to guess on their behalf. It is the same split as everywhere else in hiiu: facts propose, decisions dispose.

Three things an agent can ask 

hiiu components catalog          # which modules, ranked, and what comes from each
hiiu components search Button    # one component: import line, usage, examples
hiiu components tokens           # the custom properties and hex literals declared

search is the one an agent uses constantly. It answers with the import statement to write, how widely the component is used, and real examples harvested from the app's own code, which is far more useful to a model than a type signature.

It replaces what would otherwise be an MCP server. A shell command needs no server, works in any agent, and can be named in a generated AGENTS.md.

Tokens

hiiu components tokens reads the app's own stylesheets and reports the custom properties it declares, with uses counted and last-declaration-wins applied, plus the hex literals written raw.

Its limits are stated rather than implied: .css files and hex colours only. Sass, Tailwind theme objects and functional colour syntax are named future work. Caps on how much it will scan drop visibly into the output. An app with no stylesheets is an empty dictionary at exit 0.

How it reaches the agent

hiiu agents-md prints the AGENTS.md a forked workspace gets: the rules an agent needs, plus the design system to build with, plus the components search command to find more. hiiu fork writes that file at the root of the workspace it creates, so a designer's agent is steered before it writes a line.

Steering is the current lever. If it turns out not to be enough, enforcement is the known next one.