Design Skills
An open-source catalogue of interface patterns, textures, and motion, packaged as installable code for designers and AI agents.
Stack Next.js · TypeScript · MDX · Tailwind CSS
Design systems are usually distributed as documentation: a page of rules, a Figma library, and a folder of screenshots that stopped matching the product months ago.
Design Skills distributes the interface itself. Each entry is a component, a prompt, and a licence, installed into a project the same way a developer installs a package. The catalogue is small and opinionated: websites, illustrations, images, and video loops that can be read as source rather than admired in a gallery.
For people and agents
The catalogue has two audiences. A designer can browse the patterns, preview them at real viewport sizes, and copy the code. An AI agent can read the same entries as structured prompts, with tokens, constraints, and accessibility notes attached.
That dual format is the interesting constraint. A pattern that only looks good in a screenshot is not a skill; it is a picture. Every entry has to survive being installed, edited, and rendered in someone else’s project.
The interface
The reference is a printed catalogue rather than a dashboard: warm paper, a serif display face for the section titles, and a strict grid for the work. It is the one place in the 100xSystems family where the design is allowed to be loud.