UIHub

UIHub User Guide

UIHub keeps AI-built web apps visually consistent. Paste a GitHub repo to find design drift, then download a portable design contract that your AI coding tools actually follow — so every AI-generated change still looks like your product.

Live at: https://getuihub.com

1. Accounts & Plans

| Feature | Free | Pro | | --- | --- | --- | | Price | $0 | $9/mo ($90/yr) | | Repo scans | 1/day | Unlimited | | Design contracts | 1/day | Unlimited | | Contract history | 30 days | Unlimited | | Private repo scanning (GitHub) | ✗ | ✓ | | Pro analysis model | ✗ | ✓ | | Contract export (AGENTS.md, DESIGN.md, tokens.md) | ✓ | ✓ | | MCP server (local CLI + remote API) | ✗ | ✓ | | Priority support | ✗ | ✓ | | Referral bonus | +10 days | +20 days |

Enterprise — coming soon. Teams with shared design systems, higher limits and setup support.

Create an account: Sign up with your email and a password → enter the verification code we send you → you're in. Forgot your password? Use "Forgot your password?" to get a one-time code and reset it.

Upgrade: Profile → Billing tab → "Choose Pro" → secure checkout → your subscription is active immediately.

Referral: Profile → Referral tab → share your link. When someone signs up through it and makes their first payment, you earn bonus days by your plan (Free 10 · Pro 20). The new member keeps their normal account.

2. Scanning a Repo

What it does: Finds design drift in a GitHub repo — hardcoded colors, off-grid spacing, token drift, inline styles.

How to use it:

  1. Paste a repo link into the box: https://github.com/user/repo
  2. Click Scan.
  3. Read the report — findings are listed per file, with the line and the suggested fix.

Reading the report:

History + Rescan: Profile → Profile tab lists all your scans.

Private repos: Profile → Access → Connect GitHub. Sign in with GitHub (read-only repo access) and private repos become scannable — the scanner uses your account's access server-side; your token is never exposed to the browser.

💡 Tip: Re-scan after every AI session. The diff tells you whether your agent is drifting task by task.

3. Creating a Design Contract (4 Ways)

What it does: Turns your project's design language into a contract your AI tools can follow — and UIHub can verify against.

On the /new page you'll find 4 tabs:

A. Chat Wizard

Describe your project (e.g., "Make a vibrant and powerful CV page"). The AI asks a few questions (platform, style, framework), then suggests a palette, radii, and typography for your contract.

B. Reference URL

Paste the URL of a site you like and get a matching design contract. Taste dials (VARIANCE / MOTION / DENSITY, 1–10) let you steer the direction — hit "Rebuild with these dials" to apply.

C. Screenshot

Upload a PNG/JPEG of a design you like and get a matching design contract.

D. Token Import (DTCG)

Paste a W3C Design Tokens JSON file (exported from your design tool) and it becomes a contract automatically. Example:

{
  "colors": {
    "primary": { "$type": "color", "$value": "#5e6ad2" },
    "background": { "$type": "color", "$value": "#08090a" }
  },
  "spacing": { "base": { "$type": "dimension", "$value": "4px" } },
  "radii": { "md": { "$type": "dimension", "$value": "6px" } }
}

Result: "Saved to your history" → it appears in Profile → Profile tab, ready to download any time.

4. The Downloaded Files — Where Do They Go?

When you create a contract, the Design package section offers 5 files:

| File | What it does | Where to put it | | --- | --- | --- | | AGENTS.md | The rules your AI assistant reads first — design rules, prohibitions, token usage | Repo root | | DESIGN.md | The design system + current violations — the "how it should look" reference | Repo root | | tokens.md | Color / spacing / radius / typography token reference | Repo root | | components.md | Component contracts (if any) | Repo root | | README.md | Short description | Repo root |

Rule: the files go in your repo root. Your AI coding assistant reads AGENTS.md automatically — no setup needed.

What to tell your AI assistant

Tell your AI coding assistant (whichever tool you use):

"This repo has a UIHub design contract. Read AGENTS.md first and follow it for every UI change — use the tokens in tokens.md, never hardcode colors or arbitrary spacing, and keep the design language consistent."

Short version: "Follow AGENTS.md for all UI work."

5. Scan vs Contract

| | Scan | Contract | | --- | --- | --- | | Input | GitHub repo link | Chat / reference URL / screenshot / DTCG | | Output | Drift report (issues) | Design contract (rules + tokens) | | Next | Rescan to track diffs | Export → repo root → assistant follows it |

Together: create a contract → put it in your repo → let your AI build → scan to verify → re-scan to watch drift.

6. Profile Tabs

7. Supported stacks

UIHub works best on Tailwind v4 + React/TSX codebases — every rule (hardcoded colors, off-grid spacing, inline hex, component contract) is tuned for that. Here's the honest picture:

| Stack | Support | | --- | --- | | Tailwind v4 + React/TSX | Full — everything | | Inline styles / CSS variables | Full (tokens) | | Generic CSS, CSS Modules, styled-components | Partial — color/token detection works; Tailwind-specific spacing/component rules don't | | Monorepo | Best-effort | | Vue / Svelte / Angular / React Native | Not supported yet | | Private GitHub repos | Full (Pro + connect GitHub) |

Multi-framework rule packs are on the roadmap. Until then, the scanner gives its strongest guarantee on React + Tailwind.

8. FAQ

What does "Daily free scan used" mean? The Free plan includes 1 scan per day. Upgrade to Pro for unlimited.

Can I trust the scan results? Yes — the same repo always gives the same result, every time.

What if I don't like the contract? Adjust the taste dials and rebuild, or create it again with a different method (e.g., chat instead of reference).

Where is my data stored? In a serverless database. Your scan reports and contracts are saved to your account — delete them any time from your profile.

Is payment secure? Payments are processed on PCI-compliant payment infrastructure — card details never touch our servers.