Fiord is a Tailwind-based design library built to be consumed by AI agents, not imported by bundlers. It ships as static HTML/CSS hosted on GitHub Pages. AI agents discover components through a manifest, fetch production-ready markup, and paste it directly into any Tailwind project. No packages, no props, no build step.
Design coherence is the hard problem — consistent spacing, harmonious colors, intentional typography. AI agents solve this badly on their own. Fiord provides fully realized design aesthetics as complete, copy-paste-ready component sets, so agents can focus on logic and structure while Fiord handles the visual identity.
Fiord works by giving your AI coding agent a small instruction file that teaches it how to discover and use the component library. Pick your tool below and follow the one-step install.
Copy the skill file into your project:
mkdir -p .claude/skills && curl -sL https://fiord.design/skills/claude/SKILL.md -o .claude/skills/fiord.mdThen reference it in your CLAUDE.md:
## Skills
- [Fiord design library](.claude/skills/fiord.md) — Use for all UI/frontend workCopy the rules file to your project root:
curl -sL https://fiord.design/skills/cursor/cursorrules.txt -o .cursorrulesIf you already have a .cursorrules file, append Fiord's rules:
echo "" >> .cursorrules && curl -sL https://fiord.design/skills/cursor/cursorrules.txt >> .cursorrulesAdd Fiord's rules to your .windsurfrules file:
curl -sL https://fiord.design/skills/generic/AGENT.md >> .windsurfrulesAdd the instruction file to your Cline custom instructions. Copy the contents of the generic agent file:
curl -sL https://fiord.design/skills/generic/AGENT.mdPaste into Cline Settings > Custom Instructions (or .clinerules in your project root).
Add Fiord instructions to your Copilot custom instructions:
mkdir -p .github && curl -sL https://fiord.design/skills/generic/AGENT.md -o .github/copilot-instructions.mdAdd the instruction file as a read-only context file:
curl -sL https://fiord.design/skills/generic/AGENT.md -o FIORD.mdThen include it in your Aider sessions:
aider --read FIORD.mdOr add to .aider.conf.yml:
read: FIORD.mdFiord works with any AI agent that can fetch URLs. Point it at the manifest:
https://fiord.design/manifest.json
Or include the generic instruction file (skills/generic/AGENT.md) in whatever system prompt or instruction mechanism your tool supports.
- Discover — Agent reads
manifest.jsonto learn what's available - Select — Agent chooses an aesthetic based on project context
- Fetch — Agent grabs component markup from the aesthetic's directory
- Integrate — Agent pastes self-contained HTML/Tailwind into the target codebase
Components are extracted via sentinel comments (FIORD:COMPONENT_START / FIORD:COMPONENT_END). The agent reads meta.json for each aesthetic to understand the design system — palette, typography, spacing, shadows — and can extrapolate for components the library doesn't cover.
42 components across 8 categories:
| Category | Components | Count |
|---|---|---|
| Layout | container, grid, section, divider | 4 |
| Typography | heading, paragraph, prose, code-block | 4 |
| Actions | button, button-group, link, dropdown | 4 |
| Forms | input, textarea, select, checkbox, radio, toggle, form-group | 7 |
| Data Display | card, table, stat, badge, avatar, list | 6 |
| Navigation | navbar, sidebar, breadcrumb, tabs, pagination, footer | 6 |
| Overlays | modal, drawer, tooltip, popover, toast | 5 |
| Page Sections | hero, cta, feature-grid, testimonial, pricing-table, faq | 6 |
Slate — Layered, decisive, geological. Cool blue-gray tones with sharp cleaved edges, matte surfaces, and indigo accents. Suited for developer tools, SaaS platforms, and technical products. Includes both light and dark mode via Tailwind dark: classes.
Additional aesthetics will be added over time, each named after a natural material with its own complete visual identity.
Browse the component library at fiord.design. View source on any component page and copy the markup you need. Every component is standalone HTML with Tailwind — open it in a browser to preview, then grab the markup between the sentinel comments.
Fiord is in active development. See ROADMAP.md for milestone tracking.
MIT