[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-80336":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":12,"openIssues":13,"contributorsCount":13,"subscribersCount":13,"size":13,"stars1d":13,"stars7d":13,"stars30d":13,"stars90d":13,"forks30d":13,"starsTrendScore":13,"compositeScore":13,"rankGlobal":10,"rankLanguage":10,"license":14,"archived":15,"fork":15,"defaultBranch":16,"hasWiki":15,"hasPages":15,"topics":17,"createdAt":10,"pushedAt":10,"updatedAt":20,"readmeContent":21,"aiSummary":22,"trendingCount":13,"starSnapshotCount":13,"syncStatus":23,"lastSyncTime":24,"discoverSource":25},80336,"omit-design","leefanv\u002Fomit-design","leefanv","Let AI agents design with you.","https:\u002F\u002Fomit.design",null,"TypeScript",63,0,"MIT License",false,"main",[18,19,5],"agentic-workflow","ai-figma","2026-06-12 02:04:01","\u003Cdiv align=\"center\">\n\n# omit-design\n\n**AI-collaborative design composition framework**\n*Write TSX, lint with hard rules, preview locally — no cloud, no accounts.*\n\n[![npm engine](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@omit-design\u002Fengine?label=engine)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@omit-design\u002Fengine)\n[![npm cli](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@omit-design\u002Fcli?label=cli)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@omit-design\u002Fcli)\n[![CI](https:\u002F\u002Fgithub.com\u002Fleefanv\u002Fomit-design\u002Factions\u002Fworkflows\u002Fci.yml\u002Fbadge.svg)](https:\u002F\u002Fgithub.com\u002Fleefanv\u002Fomit-design\u002Factions\u002Fworkflows\u002Fci.yml)\n[![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-blue.svg)](.\u002FLICENSE)\n\n[简体中文](.\u002FREADME.zh-CN.md) · [Architecture](.\u002Fdocs\u002Farchitecture.md) · [Changelog](.\u002FCHANGELOG.md) · [Contributing](.\u002FCONTRIBUTING.md)\n\n\u003C\u002Fdiv>\n\n---\n\n## What it is\n\nomit-design is a framework for designing UIs where humans and AI agents can both contribute reliably:\n\n- **Designs are real React pages.** Every \"design\" is a clickable, navigable TSX component — not an image, not a Figma frame. The same TSX runs in your dev server, your production build, and (optionally) imports back into Figma.\n- **AI output is constrained at four deterministic layers.** Skills (natural-language guidance), ESLint hard rules (no design literals, whitelist imports, mandatory pattern headers, pattern-scoped component requirements), and copy-paste templates per pattern. `npm run lint` is the single compliance gate — and runs automatically on `git commit` via the husky pre-commit hook installed by `init`.\n- **Local-first, zero accounts.** No cloud, no auth, no telemetry. Dev server, inspect overlay, theme editor, and Figma export all run in your browser.\n\n## Quick start\n\n```bash\nnpx @omit-design\u002Fcli init my-app\ncd my-app\nnpm install\nnpm run dev\n```\n\nOpen `http:\u002F\u002Flocalhost:5173\u002F` — the workspace lands on `\u002Fworkspace` with your project. `design\u002F` and `patterns\u002F` start empty; you create both in Claude Code (see below).\n\n## Five-minute tour\n\n```bash\n# 1. New project\nnpx @omit-design\u002Fcli init cafe-pos\ncd cafe-pos && npm install\nnpm run dev   # http:\u002F\u002Flocalhost:5173\u002F\n\n# 2. In the workspace (Library → PRDs → + New), write a PRD.\n#    Then click \"Distill patterns from this PRD\" and paste into Claude Code:\n#    \u002Fdistill-patterns-from-prd reviews the PRD, creates matching pattern\n#    files under patterns\u002F\u003Cid>\u002F. You approve them.\n\n# 3. From the same PRD, click \"Copy Claude prompt\" and paste into Claude Code:\n#    \u002Fnew-design copies the chosen pattern's template into design\u002F\u003Cgroup>\u002F\u003Cname>.tsx\n#    and fills the placeholders.\n\n# 4. The four hard rules run on every git commit via husky:\nnpm run lint   # blocks design literals, non-whitelist imports, missing @pattern\n               # headers, files that declare a pattern but don't import any of\n               # its signature components\n\n# 5. When new omit-design versions ship:\nnpx omit-design upgrade   # bumps deps + scans your project for removed-class refs\n```\n\nNo PRD yet? Just ask Claude to make a page — `\u002Fnew-design` calls `\u002Fadd-pattern` in conversational mode (5 short questions) and produces a minimal pattern first.\n\n## Architecture\n\n```\n┌────────────────────────────────────────────────────────────────────┐\n│                       AI agent \u002F human author                      │\n│                  (main conversation = \"director\")                  │\n└────────────────────────────────────────────────────────────────────┘\n        │              │              │                  │\n        ▼              ▼              ▼                  ▼\n┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌────────────────┐\n│ .claude\u002F    │ │ ESLint      │ │ Pattern     │ │ .claude\u002Fagents\u002F│\n│  skills\u002F    │ │  4 hard     │ │  templates  │ │  pattern-      │\n│ (natural    │ │  rules      │ │ (copy-      │ │   applier      │\n│  language)  │ │ (deter-     │ │  paste)     │ │  audit-        │\n│             │ │  ministic)  │ │             │ │   reviewer     │\n└─────────────┘ └─────────────┘ └─────────────┘ └────────────────┘\n        │              │              │                  │\n        └──────────────┴──────┬───────┴──────────────────┘\n                              ▼\n        ┌────────────────────────────────────────────────────┐\n        │           design\u002F\u003Cgroup>\u002F\u003Cfile>.tsx                │\n        │    (real React page — runs in dev + prod)          │\n        │           ↑ husky pre-commit gate                  │\n        └────────────────────────────────────────────────────┘\n                                 │\n                                 ▼\n   ┌─────────────────────────────────────────────────────────────┐\n   │ @omit-design\u002Fengine                                         │\n   │   shell\u002F    canvas-style workspace UI (Figma-like layout)   │\n   │   registry\u002F design discovery + entry registry               │\n   │   inspect\u002F  hover\u002Fmeasure\u002Fa11y overlays in dev              │\n   │   capture\u002F  DOM → FigmaNode JSON → @omit-design\u002Ffigma-plugin│\n   │   theme-editor\u002F  WYSIWYG token editor                       │\n   └─────────────────────────────────────────────────────────────┘\n```\n\nSee [docs\u002Farchitecture.md](.\u002Fdocs\u002Farchitecture.md) for module-level detail and dependency graph.\n\n## Packages\n\n| Package | Version | What |\n|---|---|---|\n| [`@omit-design\u002Fcli`](.\u002Fpackages\u002Fcli\u002F) | [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@omit-design\u002Fcli?label=)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@omit-design\u002Fcli) | CLI — `init` (with husky + git + agents) \u002F `dev` \u002F `lint` \u002F `new-page` \u002F `skills update` \u002F `upgrade` |\n| [`@omit-design\u002Fengine`](.\u002Fpackages\u002Fengine\u002F) | [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@omit-design\u002Fengine?label=)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@omit-design\u002Fengine) | Runtime — registry, discovery, inspect, theme-editor, capture, canvas shell |\n| [`@omit-design\u002Feslint-plugin`](.\u002Fpackages\u002Feslint-plugin\u002F) | [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@omit-design\u002Feslint-plugin?label=)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@omit-design\u002Feslint-plugin) | The four hard rules |\n| [`@omit-design\u002Fpreset-mobile`](.\u002Fpackages\u002Fpreset-mobile\u002F) | [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@omit-design\u002Fpreset-mobile?label=)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@omit-design\u002Fpreset-mobile) | Mobile preset: 21 `Om*` components + design tokens |\n| [`@omit-design\u002Ffigma-plugin`](.\u002Fpackages\u002Ffigma-plugin\u002F) | [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@omit-design\u002Ffigma-plugin?label=)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@omit-design\u002Ffigma-plugin) | Figma plugin — imports captured FigmaNode JSON as editable Frames |\n\n## The four hard rules\n\nEnforced by `@omit-design\u002Feslint-plugin` on every file under `design\u002F`:\n\n1. **No design literals.** Raw colors (`#FF6B00`), pixel sizes (`16px`), or spacing values are forbidden in design files. Use tokens: `var(--om-color-primary)`, `var(--om-spacing-md)`, etc.\n2. **Whitelist imports.** Design files can only import from `@omit-design\u002Fpreset-mobile` (the `Om*` whitelist) plus a small set of layout-only Ionic components (`IonList` \u002F `IonBackButton` \u002F `IonIcon`). No reaching into framework internals.\n3. **Mandatory pattern header.** Every design file's first comment line must be `\u002F\u002F @pattern: \u003Cname>` where `\u003Cname>` exists in [PATTERNS.md](.\u002Fpackages\u002Fpreset-mobile\u002FPATTERNS.md). Pattern is the unit of cataloguing — without it, AI agents can't reliably reason about which template to extend.\n4. **Pattern-scoped components.** The declared pattern must actually use at least one of its signature components. Mapping lives in each pattern's `pattern.json` under `\u003Cproject>\u002Fpatterns\u002F\u003Cid>\u002F` — patterns are project-local and grown on demand by `distill-patterns-from-prd` or `add-pattern`. Stops AI from declaring `@pattern: list-view` and writing a single `OmCard`.\n\n`npm run lint` exits non-zero if any of these is violated. The husky pre-commit hook (auto-installed by `init`) runs the same check on every staged `design\u002F**\u002F*.tsx`, so violations cannot reach the repo silently.\n\n## Skill catalog (3 phases)\n\nInit ships these into `.claude\u002Fskills\u002F` for Claude Code to load automatically:\n\n| Phase | Skill | Use when |\n|---|---|---|\n| **Entry** | `start` | Open-ended request, fresh init, \"what should I do next?\" — diagnoses project state and recommends one concrete skill. |\n| **Entry** | `omit-design-cli` | Questions about init \u002F dev \u002F lint \u002F new-page commands. |\n| **Make** | `distill-patterns-from-prd` | Have a PRD and want reusable page patterns extracted from it. Runs before `new-design`. |\n| **Make** | `add-pattern` | No PRD yet — `add-pattern` conversational mode asks 3-5 questions and produces a minimal pattern. Also used to add a pattern manually. |\n| **Make** | `new-design` | \"Make a page for X\" \u002F a PRD is provided. Auto-calls the above two if `patterns\u002F` is empty. |\n| **Make** | `bootstrap-from-figma` | Have a Figma URL and want the project's visual theme (colors + spacing) seeded. Decoupled from patterns. |\n| **Deliver** | `audit-design` | Batch review across the whole repo. |\n| **Deliver** | `ship-design` | Ship one named page (lint + a11y + capture in one shot). |\n\n## Design philosophy\n\n| | |\n|---|---|\n| **TSX is the source of truth** | Designs are React pages. Round-trip with Figma is via `capture` (DOM → JSON → plugin), but the canonical asset stays in code. |\n| **Local-first** | Zero accounts, zero servers, zero outbound calls. Inspect overlay and theme editor work offline. |\n| **AI as a peer** | The lint rules + pattern templates aren't \"please don't break it\" — they're a deterministic gate the agent's output has to pass. |\n| **Source-shipped** | `@omit-design\u002Fengine` and `@omit-design\u002Fpreset-mobile` ship TypeScript source, no build. Consumers' Vite handles compilation. Smaller surface, better source-map UX. |\n\n## Status\n\n**Pre-1.0 (currently 0.2.x).** API is still evolving — minor versions may include breaking changes. Class names removed across releases are tracked by `omit-design upgrade` so projects can migrate with one command. See [CHANGELOG.md](.\u002FCHANGELOG.md) for the full record.\n\nWe're using this in production internally (one cafe POS app + a few other apps in flight), but expect rough edges. Issues + PRs welcome.\n\n## Upgrading\n\nIf you have an existing project pinned to an older version:\n\n```bash\nnpx @omit-design\u002Fcli@latest upgrade\n```\n\nThis:\n1. discovers all `@omit-design\u002F*` deps in your `package.json`,\n2. queries npm for `latest`,\n3. rewrites version ranges to `^X.Y.Z`,\n4. runs your project's package manager (auto-detected from lockfile),\n5. greps your `.css` \u002F `.tsx` \u002F etc. for class names removed in past releases and prints migration suggestions.\n\nAdd `--dry-run` to preview, `--check` to use as a CI gate (exits 1 when out-of-date).\n\n## Contributing\n\nSee [CONTRIBUTING.md](.\u002FCONTRIBUTING.md). Short version:\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fleefanv\u002Fomit-design.git\ncd omit-design\nbun install        # workspaces — engine \u002F cli \u002F preset-mobile \u002F eslint-plugin \u002F figma-plugin\nbun run lint\nbun --cwd packages\u002Fengine run typecheck\n```\n\nCI gates on `bun run lint` + `tsc --noEmit` per package. No tests yet — surface is too volatile pre-1.0.\n\n## License\n\n[MIT](.\u002FLICENSE) © omit-design contributors.\n","omit-design 是一个支持人类与AI协作进行UI设计的框架。其核心功能包括将设计转化为可点击、可导航的真实React页面，确保AI输出在四个确定性层级上受到约束，如技能指导、ESLint硬规则等，并且完全本地化运行，无需云服务或账号。该框架使用TypeScript编写，通过npm包提供引擎和命令行工具，适用于需要高度定制化和隐私保护的设计场景，如企业内部应用开发和个人项目。它特别适合那些希望在保持代码质量和一致性的同时，利用AI辅助加速设计过程的开发者。",2,"2026-06-11 04:00:23","CREATED_QUERY"]