The structure behind the surface.
Professional-grade DESIGN.md files for AI coding agents. Not extracted from websites — engineered from design principles. Drop one into your project root. Your AI agent builds enterprise-quality UI from day one.
See every system rendered live: weft-systems.vercel.app
Existing DESIGN.md collections reverse-engineer CSS values from live websites. You get tokens — hex codes, font sizes, border radii — but no design thinking. The result: AI agents that can match a color palette but can't make a layout decision.
Weft takes a different approach. Each DESIGN.md is a complete design brief — the kind a senior designer at Pentagram or Collins would hand to a developer. Tokens + principles + component behavior + accessibility + anti-patterns.
| File | Who reads it | What it defines |
|---|---|---|
AGENTS.md |
Coding agents | How to build the project |
DESIGN.md |
Design agents | How the project should look and feel |
README.md |
Humans | What the project is |
# Copy a design system into your project
cp weft/systems/enterprise-saas/DESIGN.md ./DESIGN.md
# Tell your AI agent to use it
# "Build me a dashboard page. Follow the DESIGN.md in the project root."Compatible with: Claude Code · Cursor · GitHub Copilot · Gemini CLI · Google Stitch · Windsurf · Aider · OpenCode
| awesome-design-md | Weft | |
|---|---|---|
| Approach | Extractive (scrape websites) | Generative (engineered from principles) |
| Content | Tokens only | Tokens + principles + behavior + a11y |
| Use case | "Make it look like Stripe" | "Build a professional fintech product" |
| Customization | Fork and edit hex codes | Fork and adapt an entire design philosophy |
| Accessibility | Rarely included | WCAG 2.1 AA baked into every system |
| Edge cases | Not covered | Empty states, error patterns, loading states |
| Mobile-first | Desktop-biased | Responsive strategy per archetype |
Every system has a fully rendered interactive preview at weft-systems.vercel.app
| System | Archetype | Preview | Best For |
|---|---|---|---|
| Enterprise SaaS | Clean, data-dense, trustworthy | Live | B2B dashboards, admin panels, analytics |
| Fintech Dashboard | Precise, institutional, number-focused | Live | Banking apps, trading platforms, payment tools |
| Creative Agency | Bold, editorial, type-driven | Live | Portfolios, studios, brand-forward sites |
| E-Commerce Minimal | Product-focused, conversion-driven | Live | Storefronts, product pages, checkout flows |
| African Mobile-First | Data-light, USSD-informed, high-contrast | Live | Mobile apps targeting African markets |
| Developer Tools | Code-forward, dark-native, information-dense | Live | DevTools, CLIs, documentation sites |
| Health & Wellness | Calm, accessible, trust-building | Live | Healthtech, telemedicine, wellness platforms |
| Media & Editorial | Content-first, readable, magazine-paced | Live | Blogs, news platforms, content-heavy apps |
Use the template to create a custom DESIGN.md for your project.
cp weft/_template/DESIGN.md ./DESIGN.md
# Fill in your tokens, principles, and component guidelinesEvery DESIGN.md in this repo follows a 12-section format — the standard Stitch sections plus extended professional sections:
- Design Overview — Visual identity and personality
- Color Palette — Semantic color system with usage rules
- Typography — Type scale, pairing rationale, optical adjustments
- Component Styles — Buttons, inputs, cards, tables, modals
- Layout & Spacing — Grid system, spacing scale, responsive breakpoints
- Elevation & Depth — Shadow system, layering philosophy
- Iconography & Imagery — Icon style, image treatment, illustration rules
- Animation & Motion — Timing functions, interaction patterns
- Design Guardrails — Do's and don'ts
- Accessibility Standards — WCAG compliance, contrast ratios, focus management
- Edge Cases & Error Patterns — Empty states, loading, error handling, long content
- Agent Instructions — Explicit rules for AI agents generating UI
git clone https://github.com/Donald-Edinam/weft.git
cp weft/systems/enterprise-saas/DESIGN.md ./DESIGN.mdcurl -O https://raw.githubusercontent.com/Donald-Edinam/weft/main/systems/enterprise-saas/DESIGN.mdcp -r weft/ ~/.claude/skills/
# "Hey Claude, use the enterprise-saas design system for this project"Build me a settings page. Follow the DESIGN.md in the project root for all styling decisions.
Place DESIGN.md in project root. Cursor reads it automatically as context.
Import DESIGN.md directly into your Stitch project design system.
We welcome contributions. See CONTRIBUTING.md for guidelines.
Ways to contribute:
- Improve existing systems with better tokens or edge case coverage
- Add new archetype systems (propose via issue first)
- Add translations / regional adaptations
- Report issues with AI agent compatibility
Good design is opinionated. These systems aren't "one-size-fits-all" — they're archetypes. Each one makes strong design decisions so your AI agent doesn't have to guess.
The goal: a developer with no design background should be able to drop in a DESIGN.md and get output that looks like a professional design team was involved.
Inspired by: Pentagram · Collins · Ragged Edge · Manual · Base Design · Studio Dumbar
MIT — Use freely, commercially or personally. Attribution appreciated but not required.
From Accra to the world
Built by Donald Edinam · Live Showcase · Maintained by the community