Turn enterprise design systems into hard constraints that AI coding tools actually follow — with your brand baked in.
You tell your AI coding assistant: "Build me a dashboard using IBM Carbon."
Here's what you get vs. what you wanted:
The AI knows Carbon exists. It just doesn't follow it — wrong radius (8px instead of 4px), invented colors, mixed spacing, random shadows. Every generation is a new approximation.
This repo fixes that. One DESIGN.md file in your project root turns "please try to follow Carbon" into "here are the exact hex values, pixel sizes, and things you must NEVER do."
Drop the file in. Talk to your AI normally. It just... complies.
You: Build a data table page with filters and pagination.
AI: Using @carbon/react DataTable with:
- Header background: #f4f4f4 (layer_01)
- Row height: 48px (spacing-07)
- Border: 1px solid #e0e0e0 (border_subtle)
- Border-radius: 4px on container
- Font: IBM Plex Sans, 14px/1.43, #161616
- Pagination: @carbon/react Pagination component
- Filter input: @carbon/react Search with field background #f4f4f4
❌ NOT using: Tailwind rounded-lg, custom box-shadow,
Inter font, or flex gap for row spacing.
No more "close enough." Every value traces back to a token in the file.
# Clone
git clone https://github.com/HeinzYu/awesome-b2bdesign-md.git
cd awesome-b2bdesign-md
# Generate (all 13 systems, or one)
pip install pyyaml
python scripts/generate_design_md.py --id ibm-carbon-design-system
# Copy into your project
cp design-md/ibm-carbon-design-system/DESIGN.md /your/project/DESIGN.md
# Tell your AI:
# "Build me a page that strictly follows DESIGN.md.
# Use ONLY the token values specified. Do not approximate."Already using Carbon but your brand color is coral, not IBM blue?
python scripts/generate_design_md.py --id ibm-carbon-design-system \
--brand-primary "#FF5A5F" \
--brand-radius "8px" \
--brand-font "'Noto Sans SC', sans-serif"This auto-derives the full palette from your primary color:
| Token | Derived Value |
|---|---|
| brand | #FF5A5F (your input) |
| brand_hover | #ff272d (-10% lightness) |
| brand_active | #f30007 (-20% lightness) |
| brand_light_bg | #fff0f0 (95% tint) |
| focus / link | #FF5A5F |
Semantic colors (error/success/warning) stay untouched — they're universal.
13 systems. Sorted by B2B recommendation rank. Region: 🌐 International / 🇨🇳 China.
| # | System | Org | Region | Framework | NPM | Best For | Links |
|---|---|---|---|---|---|---|---|
| 1 | Ant Design | Alibaba | 🇨🇳 | React | antd |
Enterprise dashboards, SaaS | site · components |
| 1 | Salesforce Lightning | Salesforce | 🌐 | CSS/HTML | @salesforce-ux/design-system |
CRM, SaaS platforms | site · components |
| 2 | IBM Carbon | IBM | 🌐 | React | @carbon/react |
Data-heavy systems, accessibility | site · components |
| 2 | Fusion Design | Alibaba | 🇨🇳 | React | @alifd/next |
Enterprise middleware, complex biz | site · components |
| 3 | Atlassian | Atlassian | 🌐 | React | @atlaskit/* |
Collaboration tools (Jira-style) | site · components |
| 3 | Arco Design | ByteDance | 🇨🇳 | React | @arco-design/web-react |
Enterprise products, SaaS | site · components |
| 4 | Microsoft Fluent | Microsoft | 🌐 | React | @fluentui/react-components |
Cross-platform (Windows/Office) | site · components |
| 4 | TDesign | Tencent | 🇨🇳 | React | tdesign-react |
Multi-platform (Web/Mini/Mobile) | site · components |
| 5 | Shopify Polaris | Shopify | 🌐 | React | @shopify/polaris |
E-commerce admin panels | site · components |
| 5 | Semi Design | ByteDance | 🇨🇳 | React | @douyinfe/semi-ui |
Enterprise admin, theming | site · components |
| 6 | Zendesk Garden | Zendesk | 🌐 | React | @zendeskgarden/react-components |
Customer service, high density | site · components |
| 7 | Adobe Spectrum | Adobe | 🌐 | React | @adobe/react-spectrum |
Pro tool UIs | site · components |
| 8 | GitHub Primer | GitHub | 🌐 | React | @primer/react |
Developer platforms | site · components |
Not "please follow the official docs." Actual values:
## 1. Color Tokens
| Token | Value | Usage |
| brand | #0f62fe | Primary buttons, active states |
| text_primary | #161616 | Headings, body text |
| border_subtle | #e0e0e0 | Dividers, card borders |
| support_error | #da1e28 | Error states |
...
## 3. Spacing
Base unit: 8px
| spacing-03 | 8px |
| spacing-05 | 16px |
| spacing-07 | 32px |
...
## 7. Anti-Patterns
❌ Don't use Tailwind rounded-lg (8px) — Carbon uses 4px
❌ Don't add box-shadow to buttons — Carbon buttons are flat
❌ Don't mix IBM Plex Sans with Inter/RobotoPlus: typography scale (12 sizes with exact line-height and letter-spacing), breakpoints, elevation shadows, and an agent prompt guide.
One generator, three targets:
--format design-md # DESIGN.md — universal, any agent reads it
--format cursorrules # .cursorrules — Cursor IDE
--format agents-md # AGENTS.md — Codex / Claude Code / QoderWorkWorks with any AI coding tool that reads project-root markdown. Not locked to any vendor.
- CRM / SaaS / admin dashboard → Ant Design, IBM Carbon, Salesforce Lightning
- Collaboration / task management → Atlassian, GitHub Primer
- E-commerce admin → Shopify Polaris
- Cross-platform (Windows/Mac/Web) → Microsoft Fluent
- Data-heavy / accessibility-first → IBM Carbon
- Complex enterprise middleware → Fusion Design, Arco Design
- Multi-platform (Web + Mini Program + Mobile) → TDesign, Semi Design
entries/<id>/design.md scripts/generate_design_md.py your project
┌─────────────────────┐ ┌──────────────────────────┐ ┌──────────────┐
│ YAML frontmatter: │ │ │ │ │
│ • tokens (hex/px) │───▶ │ parse → render → │───▶ │ DESIGN.md │
│ • anti_patterns │ │ brand injection │ │ (or .cursor │
│ • implementation │ │ format wrapping │ │ rules) │
│ • resources │ │ │ │ │
└─────────────────────┘ └──────────────────────────┘ └──────────────┘
entries/= single source of truth (structured YAML)design-md/= generated output (gitignored, regenerate anytime)AGENTS.mdat repo root = universal skill entry for any AI agent opening this folder
See CONTRIBUTING.md for guidelines on adding new design systems and maintaining link health.