English Français العربية

Better Design

السجل الرسمي أدوات المطورين

A design harness for AI coding agents: design systems, design principles, icons and UI review.

الشيفرة المصدرية الموقع التوثيق

التثبيت

أضف هذا إلى إعدادات MCP في عميلك (Claude Desktop: claude_desktop_config.json، وCursor: ‏.cursor/mcp.json، ويستخدم VS Code وغيره الصيغة نفسها «mcpServers»).

Remote (streamable-http)
Claude Code 
claude mcp add --transport http better-design 'https://better-design.com/api/mcp'
إعداد JSON (Claude Desktop وCursor وVS Code) 
{
    "mcpServers": {
        "better-design": {
            "type": "http",
            "url": "https://better-design.com/api/mcp"
        }
    }
}
NPM package better-design
Claude Code 
claude mcp add better-design -e 'BETTER_DESIGN_API_KEY=<your better_design_api_key>' -- npx -y better-design@0.48.0 mcp
إعداد JSON (Claude Desktop وCursor وVS Code) 
{
    "mcpServers": {
        "better-design": {
            "command": "npx",
            "args": [
                "-y",
                "better-design@0.48.0",
                "mcp"
            ],
            "env": {
                "BETTER_DESIGN_API_KEY": "<your better_design_api_key>"
            }
        }
    }
}

متغيرات البيئة

  • BETTER_DESIGN_API_KEY إلزامي سري Create or manage a key at https://better-design.com/mcp

التوثيق

مأخوذ من ملف README للمشروع على GitHub ويُحدَّث أسبوعيًا. تفتح الروابط على GitHub.

المحتويات
  1. Better Design
  2. What your agent gets
  3. What this repository holds
  4. Install
  5. Privacy

Better Design

A design harness for AI coding agents. This plugin connects your agent to the Better Design MCP server, so the interfaces it builds use a real design system, follow design principles, and pass UI review checks.

What your agent gets

  • A design system for your app. Find one that fits your product, preview it, and install its components, or generate a custom one from a description or your own site.
  • Design principles. Visual design, UX flows, forms, onboarding and interface copy, plus references for React Native, SwiftUI, Three.js and Shopify themes.
  • Review checks. Accessibility, copy clarity and measured spacing for the screens your agent builds.
  • Icons you own. Icon sets returned as React components, with no runtime CDN.

What this repository holds

This repository holds the plugin files only: the manifests, the MCP server entry and two skills. The Better Design server and its design systems run at better-design.com. Browse the catalog at better-design.com/design-systems.

SkillWhat it does
build-with-better-designChooses a design system with the user, installs it, and builds on it
review-ui-with-better-designReviews a screen for accessibility, visual design, copy clarity and spacing

Install

ToolHow
Any terminal agent, no accountnpx better-design
Gemini CLIgemini extensions install https://github.com/better-designs/better-design-plugin
Claude Code/plugin marketplace add better-designs/better-design-plugin, then /plugin install better-design@better-design
Claude Code, MCP onlyclaude mcp add --transport http better-design https://better-design.com/api/mcp
Any skills clientnpx skills add better-designs/better-design-plugin
Any MCP clientAdd the remote server https://better-design.com/api/mcp

npx better-design needs no account. It connects Better Design to your coding tools and creates a free key with a small allowance. When the allowance runs out, the agent gives you a claim link that moves the key onto a free account.

Every other route opens a Better Design sign-in on the first connection. A free account works.

Privacy

Better Design's privacy policy and terms apply. Support: info@better-design.com.

الأسئلة الشائعة

ما هو Better Design؟

A design harness for AI coding agents: design systems, design principles, icons and UI review.

كيف أثبّت Better Design؟

يعمل كخادم بعيد. في Claude Code: claude mcp add --transport http better-design 'https://better-design.com/api/mcp'. وفي العملاء الآخرين، الصق إعداد JSON من هذه الصفحة في إعدادات MCP الخاصة بهم.

هل يحتاج Better Design إلى مفتاح API؟

نعم. يتطلب BETTER_DESIGN_API_KEY، وتضبطها في إعداداته.

هل Better Design مفتوح المصدر؟

نعم. شيفرته متاحة على GitHub بترخيص MIT.

من يصون Better Design؟

ينشره better-designs. يدرجه AI.tn لكنه لا يصونه ولا يوصي به.

من سجل MCP الرسمي. الإدراج ليس توصية: راجع شيفرة الخادم وصلاحياته قبل منحه الوصول إلى بياناتك.