Pillar Specification & Hub DirectoryDESIGN.md System & UI/UX Generator
Semantic color tokens, component layout hierarchies, and strict negative design guardrails compatible with StitchMCP and modern LLMs.
./DESIGN.mdHow DESIGN.md Operates in Production
DESIGN.md serves as the single source of truth for your user interface design system and technical layout architecture. It ensures AI coding agents maintain consistent spacing, colors, typography, and strictly avoid forbidden UI anti-patterns.
Machine-readable color tokens and negative layout constraints.
## Design Tokens
- Canvas: #09090B
- Card Surface: #18181B
- Negative Guardrail: Never nest card containers inside another card container../DESIGN.mdRepository RootUI/UX design system tokens and component layout rules.
Available Tech Stack Presets (27)
Click any tech stack below to open the client-side editor preloaded with this verified configuration.
Next.js 15 App Router
Generate production-grade Cursor rules (.mdc) for Next.js 15 App Router.
“Enforce React Server Components (RSC) by default; restrict 'use client' strictly to interactive leaf components.”
React 19 & Vite
Generate production-grade Cursor rules (.mdc) for React 19 & Vite.
“Use React 19 action hooks (useActionState, useOptimistic, useFormStatus) for async mutations.”
Python FastAPI & Pydantic v2
Generate production-grade Cursor rules (.mdc) for Python FastAPI & Pydantic v2.
“Use strict Pydantic v2 BaseModels with Field validation for all input and output schemas.”
Supabase & PostgreSQL
Generate production-grade Cursor rules (.mdc) for Supabase & PostgreSQL.
“Always include `ENABLE ROW LEVEL SECURITY;` on every created table.”
Prisma ORM
Generate production-grade Cursor rules (.mdc) for Prisma ORM.
“Always use `select` to specify required fields; avoid raw `findMany()` fetching unused relations.”
Drizzle ORM
Generate production-grade Cursor rules (.mdc) for Drizzle ORM.
“Define schemas using pgTable/sqliteTable with explicit foreign keys and constraints.”
Go (Golang) & Fiber
Generate production-grade Cursor rules (.mdc) for Go (Golang) & Fiber.
“Check every `if err != nil` explicitly; never swallow errors or ignore returned values.”
Rust & Axum
Generate production-grade Cursor rules (.mdc) for Rust & Axum.
“Never call `.unwrap()` or `.expect()` in production route handlers; propagate errors via `Result<T, AppError>`.”
Tailwind CSS v4
Generate production-grade Cursor rules (.mdc) for Tailwind CSS v4.
“Configure themes directly in globals.css using `@theme` and `@import 'tailwindcss';`.”
Vue 3 & Nuxt 3
Generate production-grade Cursor rules (.mdc) for Vue 3 & Nuxt 3.
“Always use `<script setup lang='ts'>` and the Composition API; ban legacy Options API.”
SvelteKit 5 & Svelte 5
Generate production-grade Cursor rules (.mdc) for SvelteKit 5 & Svelte 5.
“Use Svelte 5 runes: `$state()`, `$derived()`, and `$props()`.”
Universal Cursor Pro
Generate production-grade Cursor rules (.mdc) for Universal Cursor Pro.
“Deliver surgical, targeted diffs; never replace entire files unnecessarily.”
Pragmatic Rapid Prototyping
Generate production-grade Cursor rules (.mdc) for Pragmatic Rapid Prototyping.
“Prioritize working software over complex design patterns or deep inheritance hierarchies.”
Zero-Trust Security
Generate production-grade Cursor rules (.mdc) for Zero-Trust Security.
“Flag and prevent any dynamic SQL query string interpolation.”
Docker & CI/CD
Generate production-grade Cursor rules (.mdc) for Docker & CI/CD.
“Always use multi-stage Docker builds to separate builder tools from the lean production image.”
Vitest & Playwright TDD
Generate production-grade Cursor rules (.mdc) for Vitest & Playwright TDD.
“Write unit tests covering happy paths and at least two edge/error cases for every new function.”
Automated Code Reviewer
Generate production-grade Cursor rules (.mdc) for Automated Code Reviewer.
“Scan repository manifests to map stack idioms before evaluating logic.”
Multi-Agent System Orchestration
Generate production-grade Cursor rules (.mdc) for Multi-Agent System Orchestration.
“Define subagent roles: Lead Architect, Frontend Engineer, Backend Specialist, Security Reviewer.”
Django 5 & Ninja / DRF
Generate production-grade Cursor rules (.mdc) for Django 5 & Ninja / DRF.
“Use asynchronous ORM operations (aget(), acreate(), afirst()) inside async def view handlers.”
Bun & Elysia / Hono
Generate production-grade Cursor rules (.mdc) for Bun & Elysia / Hono.
“Use Elysia's native t schema builder (powered by TypeBox) for request body, query, and parameter validation.”
React Native & Expo Router
Generate production-grade Cursor rules (.mdc) for React Native & Expo Router.
“Use Expo Router file-based filesystem routing (app/_layout.tsx, app/(tabs)/index.tsx); ban legacy React Navigation container boilerplate.”
Flutter 3 & Riverpod / Dart
Generate production-grade Cursor rules (.mdc) for Flutter 3 & Riverpod / Dart.
“Always add const constructors wherever possible to maximize Flutter element rebuild caching.”
Kubernetes & Helm Charts
Generate production-grade Cursor rules (.mdc) for Kubernetes & Helm Charts.
“Always specify explicit resources.requests and resources.limits (both CPU and memory) on every container.”
Terraform & OpenTofu IaC
Generate production-grade Cursor rules (.mdc) for Terraform & OpenTofu IaC.
“Pin explicit version constraints for all providers and required Terraform/OpenTofu core versions (required_providers).”
Playwright End-to-End Testing
Generate production-grade Cursor rules (.mdc) for Playwright End-to-End Testing.
“Strictly ban hardcoded delays (page.waitForTimeout()); rely exclusively on Playwright web-first auto-waiting assertions (expect(locator).toBeVisible()).”
Spring Boot 3 & Java 21
Generate production-grade Cursor rules (.mdc) for Spring Boot 3 & Java 21.
“Use jakarta.* packages for persistence, validation, and servlets; ban legacy javax.* imports.”
.NET 8 & C# 12 Minimal APIs
Generate production-grade Cursor rules (.mdc) for .NET 8 & C# 12 Minimal APIs.
“Use modern C# 12 features: primary constructors, collection expressions, file-scoped namespaces, and nullable reference types (#nullable enable).”
Is DESIGN.md compatible with StitchMCP?
Yes, our generated DESIGN.md follows the standard StitchMCP specification with semantic tokens, typography scales, and negative guardrails.