AI-native design library
Fiord ships production-ready markup that agents discover via manifest, select by aesthetic, and copy-paste directly into any project. No packages. No props. No build step.
Agents fetch manifest.json to get the full catalog — 42 components across 8 categories, with every aesthetic listed and described.
Each aesthetic ships a complete meta.json — palette, typography, spacing, borders, shadows. Agents read the design language to make informed choices.
Markup lives between FIORD:COMPONENT_START sentinel comments. Extract, paste, ship. Works in React, Vue, Svelte, Astro, or plain HTML.
Get Started
One command installs the skill into your agent. It reads the manifest, picks an aesthetic, and fetches the markup it needs — no npm install, no configuration. Re-run anytime to get the latest version.
Claude Code
Adds Fiord to your global Claude Code instructions. Available in every project.
curl -fsSL https://raw.githubusercontent.com/bitfootco/fiord/main/skills/claude/SKILL.md \
-o ~/.claude/fiord.md && printf '\n@~/.claude/fiord.md\n' >> ~/.claude/CLAUDE.mdCursor
Places .cursorrules in your project root. Cursor picks it up automatically.
curl -fsSL https://raw.githubusercontent.com/bitfootco/fiord/main/skills/cursor/.cursorrules \
-o .cursorrulesOther Agents
Paste this URL into your agent's system prompt or instruction file.
https://raw.githubusercontent.com/bitfootco/fiord/main/skills/generic/AGENT.mdThen just ask:
Fetch /manifest.json to get the full component catalog, aesthetic list, and URL paths to every component page.
Read meta.json for the selected aesthetic to understand its design language — palette, fonts, spacing, and border treatment.
Fetch the component page, extract markup between sentinel comments, paste into the target codebase. Includes dark mode. Zero dependencies.
42 components · 4 aesthetics · MIT license
Slate, Pumice, Quartz, and Chalk available now. More aesthetics coming.