Weft

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.

---

The Problem

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.

How It Works

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

What Makes This Different

	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

Design Systems

Core Collection

System	Archetype	Best For
Enterprise SaaS	Clean, data-dense, trustworthy	B2B dashboards, admin panels, analytics
Fintech Dashboard	Precise, institutional, number-focused	Banking apps, trading platforms, payment tools
Creative Agency	Bold, editorial, type-driven	Portfolios, studios, brand-forward sites
E-Commerce Minimal	Product-focused, conversion-driven	Storefronts, product pages, checkout flows
African Mobile-First	Data-light, USSD-informed, high-contrast	Mobile apps targeting African markets
Developer Tools	Code-forward, dark-native, information-dense	DevTools, CLIs, documentation sites
Health & Wellness	Calm, accessible, trust-building	Healthtech, telemedicine, wellness platforms
Media & Editorial	Content-first, readable, magazine-paced	Blogs, news platforms, content-heavy apps

Build Your Own

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 guidelines

DESIGN.md Format

Every DESIGN.md in this repo follows a 12-section format — the standard Stitch sections plus our extended professional sections:

Standard Sections (Stitch-compatible)

1. Design Overview — Visual identity and personality
2. Color Palette — Semantic color system with usage rules
3. Typography — Type scale, pairing rationale, optical adjustments
4. Component Styles — Buttons, inputs, cards, tables, modals
5. Layout & Spacing — Grid system, spacing scale, responsive breakpoints
6. Elevation & Depth — Shadow system, layering philosophy
7. Iconography & Imagery — Icon style, image treatment, illustration rules
8. Animation & Motion — Timing functions, interaction patterns
9. Design Guardrails — Do's and don'ts

Extended Professional Sections

10. Accessibility Standards — WCAG compliance, contrast ratios, focus management
11. Edge Cases & Error Patterns — Empty states, loading, error handling, long content
12. Agent Instructions — Explicit rules for AI agents generating UI

Installation

Option 1: Clone the full repo

git clone https://github.com/Donald-Edinam/weft.git
cp weft/systems/enterprise-saas/DESIGN.md ./DESIGN.md

Option 2: Direct download

curl -O https://raw.githubusercontent.com/Donald-Edinam/weft/main/systems/enterprise-saas/DESIGN.md

Option 3: Claude Code skill

cp -r weft/ ~/.claude/skills/
# "Hey Claude, use the enterprise-saas design system for this project"

Using with AI Agents

Claude Code

Build me a settings page. Follow the DESIGN.md in the project root for all styling decisions.

Cursor

Place DESIGN.md in project root → Cursor reads it automatically as context.

Google Stitch

Import DESIGN.md directly into your Stitch project design system.

Contributing

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

Philosophy

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

License

MIT — Use freely, commercially or personally. Attribution appreciated but not required.

---

From Accra to the world 🚀

Built by Donald Edinam · Maintained by the community