Duct UI
Web Framework for the Age of AI
Built for clarity and explicitness, Duct makes your code understandable to both humans and AI. Component library + static site generator with a philosophy that embraces the future of development.
Component Library
Build interactive UI with explicit, debuggable components. Clear lifecycle management and direct DOM control.
Static Site Generator
Build fast, SEO-friendly websites with powerful content management. From blogs to documentation sites.
Why Duct for the Age of AI?
When AI generates explicit, well-structured code, humans can easily understand, troubleshoot, and maintain it. Duct's philosophy ensures AI-generated code remains debuggable and maintainable by your team.
Human-Friendly AI Code
Explicit patterns mean AI-generated code is instantly understandable. No magic to decipher.
Easy Troubleshooting
Clear separation makes debugging straightforward, whether code is human or AI-written.
Maintainable Forever
Consistent patterns ensure your team can maintain and extend AI-generated code with confidence.
Quick Start
Get up and running with Duct in minutes
MCP Server for AI Assistants
AI-powered development with instant access to framework knowledge, component catalog, and project generation.
Complete Starter Template
Get up and running instantly with a complete template including blog, themes, and components.
1Install
2Use
import Button from '@duct-ui/components/button'
import type {ButtonLogic} from '@duct-ui/components/button'
import {createRef} from "@duct-ui/core"
...
const buttonRef: MutableRef<ButtonLogic> = createRef()
...
<Button
ref={buttonRef}
label="Let's Go"
on:click={...}
/>
Built for the future of development where humans and AI collaborate seamlessly