medesign 1.2.0 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +223 -129
- package/bin/medesign.js +691 -200
- package/package.json +69 -64
- package/references/catalog.json +1023 -108
- package/tests/linter.js +412 -412
package/README.md
CHANGED
|
@@ -1,129 +1,223 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
[](https://opensource.org/licenses/MIT)
|
|
6
|
+
[](https://github.com/methastrategy/medesign/actions/workflows/ci.yml)
|
|
7
|
+
[](https://www.npmjs.com/package/medesign)
|
|
8
|
+
[](https://nodejs.org/)
|
|
9
|
+
[]()
|
|
10
|
+
[]()
|
|
11
|
+
|
|
12
|
+
*Eliminate AI Slop and bring optical mathematics, perceptual color science, and mission-critical engineering rigor to automated UI/UX generation.*
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
</div>
|
|
17
|
+
|
|
18
|
+
## 🌟 Why ME-DESIGN?
|
|
19
|
+
|
|
20
|
+
Most AI-generated user interfaces suffer from **Decisionless Uniformity**: generic 3-card grids, oversaturated neon glows, clipping Thai/Latin font metrics, broken keyboard accessibility, and non-proportional press deformations.
|
|
21
|
+
|
|
22
|
+
**ME-DESIGN** changes the paradigm from subjective aesthetic prompting to an **executable 5-Engine Design Architecture** coupled with a **Dual-Tier Quality Linter**, **Knowledge Discovery Search Engine**, and **Self-Healing Code Repair**.
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
## ⚔️ Multi-Dimensional Competitive Benchmark
|
|
27
|
+
|
|
28
|
+
| Dimension | `medesign` (v1.4.0) | `ui-ux-pro-max-skill` | `pbakaus/impeccable` |
|
|
29
|
+
| :--- | :--- | :--- | :--- |
|
|
30
|
+
| **Execution Architecture** | **Autonomous Node.js CLI & Deterministic Engine** | Prompt-only System Text | Markdown Guidelines & Rules |
|
|
31
|
+
| **Verification Gate** | **Mathematical Q-Score (0–100) + Hard Invariants** | Subjective LLM Self-Critique | Manual Inspection Checklist |
|
|
32
|
+
| **Self-Healing Code Repair** | **Automatic AST/Regex Fixer (`medesign polish`)** | Re-prompting Prompt Loop | Manual Code Editing |
|
|
33
|
+
| **Conversational Modifiers** | **Instant Code Density (`bolder` / `quiet`)** | Chat Revision Re-rolls | None |
|
|
34
|
+
| **Knowledge Discovery** | **Pure Node.js Search across 38 Archetypes & Presets** | Static Markdown Reading | Static Document Browsing |
|
|
35
|
+
| **Automated CI/CD Quality Gate** | **Native OASIS SARIF v2.1.0 for GitHub Code Scanning** | None | None |
|
|
36
|
+
| **Perceptual Color Science** | **OKLCH / OKLab Gamut Mapping & `color-mix()`** | Standard Hex / sRGB Defaults | Hex / sRGB Recommendations |
|
|
37
|
+
| **Headless Browser Matrix** | **Chrome DevTools Protocol (Real Contrast & 44px Hit-Targets)** | None | Manual Browser DevTools |
|
|
38
|
+
| **Design Token Standards** | **Tailwind v4 `@theme`, W3C DTCG & CSS Custom Properties** | Unstructured CSS Snippets | None |
|
|
39
|
+
| **Domain Archetype Depth** | **38 Decoupled Archetypes (HMI ISA-101, GIS Cadastre, Telemetry)** | Generic SaaS / E-commerce | General UI Polish Rules |
|
|
40
|
+
| **Runtime Package Footprint** | **Zero-Dependency CLI (< 300 KB compressed on npm)** | Multi-file Prompt Repos | Docs / Repo Only |
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
## 🏛️ The 5-Engine Core Architecture
|
|
45
|
+
|
|
46
|
+
```
|
|
47
|
+
ME-DESIGN Core Engine
|
|
48
|
+
├── 01. Optical Geometry Engine -> Safe Concentric Radii, Area-Proportional Scaling, Hit Target Isolation
|
|
49
|
+
├── 02. Perceptual Color Engine -> OKLCH / OKLab Gamut, Dynamic color-mix(), Dark Mode Functional Tokens
|
|
50
|
+
├── 03. Motion & Interaction Engine -> 4 Behavioral Profiles (precision, soft-settle, spring-settle, instant)
|
|
51
|
+
├── 04. Typography & Script Engine -> Dual-Context Line-Height, Thai Diacritic Clearance, @font-face Calibration
|
|
52
|
+
└── 05. Quality & Saliency Auditor -> 4-Tier Governance, Task-Driven Attention Models, Zero-Compromise Gate
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
---
|
|
56
|
+
|
|
57
|
+
## 📐 38 Production Archetypes (5-Axis Decoupled Matrix)
|
|
58
|
+
|
|
59
|
+
ME-DESIGN decouples UI synthesis across 5 independent axes:
|
|
60
|
+
**Operational Archetype × Visual Language × Spatial Model × Motion Profile × Governance Tier**
|
|
61
|
+
|
|
62
|
+
- **Group A: Luxury & Editorial (01-05):** Quiet Luxury, Swiss International Editorial, Dark Haute Couture...
|
|
63
|
+
- **Group B: SaaS, DevTools & High-Density (06-12):** Linear Minimal, Vercel Clean Monochrome, Bloomberg Pro Density, Raycast Spatial HUD...
|
|
64
|
+
- **Group C: Fintech, Crypto & Glassmorphism (13-18):** Stripe Clean Gradient, Cyberpunk Matrix, Cosmos Acrylic Glass...
|
|
65
|
+
- **Group D: Modern Consumer, E-Commerce & Brand (19-24):** Apple Pro Spatial, Airbnb Warm Domestic...
|
|
66
|
+
- **Group E: Creative Agency & Experimental (25-30):** Neo-Brutalism, Kinetic Marquee, Biophilic Wellness...
|
|
67
|
+
- **Group F: Mission-Critical Engineering & HMI (31-38):**
|
|
68
|
+
- **31. Mission Control HMI (ISA-101 Standard):** Tri-state alarms, greyscale base, operator decision priority.
|
|
69
|
+
- **32. Geospatial Situation Awareness (GIS & Cadastre):** Map-centric 16:10 / 100dvh, linked selection tables, EPSG coordinates.
|
|
70
|
+
- **33. CAD Precision Workbench:** Maximized canvas, floating command bar, geometric snap indicators.
|
|
71
|
+
- **34. Telemetry & Signal Forensics:** Time-series scrubbing, stale sensor detection, gap indicators.
|
|
72
|
+
- **35. Anomaly Triage & Incident Response:** Priority queue, severity vs confidence matrix.
|
|
73
|
+
- **36. Field Survey & Offline Operations:** 52px touch targets, RTK fix status, offline sync queue.
|
|
74
|
+
- **37. Spatiotemporal Change Detection:** Synchronized dual viewports, epoch time slider.
|
|
75
|
+
- **38. Data Provenance & Survey QA/QC:** Observation lineage, error ellipses, legal timestamp seals.
|
|
76
|
+
|
|
77
|
+
---
|
|
78
|
+
|
|
79
|
+
## 🚀 Quickstart: Running via `npx` (Zero Installation)
|
|
80
|
+
|
|
81
|
+
Execute ME-DESIGN immediately without manual installation:
|
|
82
|
+
|
|
83
|
+
```bash
|
|
84
|
+
# 1. Discover archetypes, palettes, and typography for any domain query
|
|
85
|
+
npx medesign search "cadastre survey"
|
|
86
|
+
npx medesign search "apple hardware"
|
|
87
|
+
npx medesign search "tesla telemetry"
|
|
88
|
+
|
|
89
|
+
# 2. Self-healing code repair (auto-fixes MD005 focus rings, 100dvh, dead buttons, em-dashes)
|
|
90
|
+
npx medesign polish path/to/index.html
|
|
91
|
+
|
|
92
|
+
# 3. Fine-tune visual density and tone directly in code
|
|
93
|
+
npx medesign bolder path/to/index.html # Boost font weights, sharpen borders, raise contrast
|
|
94
|
+
npx medesign quiet path/to/index.html # Soften font weights, reduce borders to hairlines
|
|
95
|
+
|
|
96
|
+
# 4. Lint an HTML, JSX, or CSS file with static AST & invariant rules
|
|
97
|
+
npx medesign lint path/to/index.html
|
|
98
|
+
|
|
99
|
+
# 5. Lint and export OASIS SARIF v2.1.0 for GitHub Code Scanning
|
|
100
|
+
npx medesign lint path/to/index.html --format sarif
|
|
101
|
+
|
|
102
|
+
# 6. Run headless Chrome DevTools Protocol verification matrix
|
|
103
|
+
# (Computes real contrast ratios, tab focus indicators, and 44px hit-targets)
|
|
104
|
+
npx medesign audit path/to/index.html
|
|
105
|
+
|
|
106
|
+
# 7. Export design tokens to Tailwind CSS v4 @theme, W3C DTCG, or CSS variables
|
|
107
|
+
npx medesign tokens --preset apple --format tailwind --out ./tokens
|
|
108
|
+
|
|
109
|
+
# 8. Verify system health, Node.js version, and headless browser availability
|
|
110
|
+
npx medesign doctor
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### 🔎 Knowledge Discovery Engine (`medesign search`)
|
|
114
|
+
|
|
115
|
+
Query the 38 production archetypes and design system presets to get immediate, actionable styling recommendations:
|
|
116
|
+
|
|
117
|
+
```bash
|
|
118
|
+
# Human-focused Terminal Summary Card
|
|
119
|
+
npx medesign search "cadastre survey"
|
|
120
|
+
|
|
121
|
+
# Output structured JSON for AI agent orchestration
|
|
122
|
+
npx medesign search "luxury fintech" --json
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
```text
|
|
126
|
+
ME-DESIGN Discovery Engine
|
|
127
|
+
────────────────────────────────────────
|
|
128
|
+
Query "cadastre survey"
|
|
129
|
+
Best Match Archetype 38: Cadastral Survey & QA/QC Workbench
|
|
130
|
+
Preset Link metha (Metha Engineering Cockpit)
|
|
131
|
+
|
|
132
|
+
DESIGN ARCHETYPE RECOMMENDATION
|
|
133
|
+
Archetype Cadastral Survey & Data Provenance (38)
|
|
134
|
+
Spatial Model 16:10 / 100dvh Map-Centric with Split Data Grid
|
|
135
|
+
Primary Color Electric Cyan (oklch(0.85 0.18 200))
|
|
136
|
+
Secondary Color Passed Emerald (oklch(0.72 0.18 145))
|
|
137
|
+
Surface Contrast Ultra-Dark Obsidian (#0a0d14)
|
|
138
|
+
Typography JetBrains Mono + IBM Plex Sans Thai
|
|
139
|
+
Motion Profile Precision Linear (120ms max)
|
|
140
|
+
────────────────────────────────────────
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
### 🛠️ Self-Healing Code Repair (`medesign polish`)
|
|
144
|
+
|
|
145
|
+
Automatically inspect and repair Hard Invariants in your HTML/CSS files without waiting for manual edits:
|
|
146
|
+
|
|
147
|
+
- **MD005:** Injects physical `:focus-visible` outlines and `@media (forced-colors: active)` support when `box-shadow` is used without an outline.
|
|
148
|
+
- **MD104:** Replaces unstable `100vh` on containers with dynamic `100dvh` (`min-height: 100vh; min-height: 100dvh;`).
|
|
149
|
+
- **MD004:** Injects hover and active states for buttons without defined interactive contracts.
|
|
150
|
+
- **MD002:** Adds `@media (prefers-reduced-motion)` accessibility gates.
|
|
151
|
+
- **MD201:** Cleans up decorative AI-tell em-dashes `—` (including entity `—`) into clean hyphens `-`.
|
|
152
|
+
|
|
153
|
+
```bash
|
|
154
|
+
npx medesign polish path/to/dashboard.html
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
```text
|
|
158
|
+
[POLISH COMPLETED] 3 issues automatically repaired in dashboard.html
|
|
159
|
+
Fixed: Replaced 1 raw 100vh with 100dvh fallback (MD104)
|
|
160
|
+
Fixed: Added physical focus outline & forced-colors high contrast (MD005)
|
|
161
|
+
Fixed: Cleaned 2 AI-tell em-dash punctuation & entities
|
|
162
|
+
Q-Score: 91.3 -> 95.0 [PASS]
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
### ⚡ Visual Density Modifiers (`medesign bolder` & `medesign quiet`)
|
|
166
|
+
|
|
167
|
+
Adjust visual weight, border contrast, and color vibrancy directly in your files:
|
|
168
|
+
|
|
169
|
+
```bash
|
|
170
|
+
# Elevate font weights (normal -> medium -> semibold -> bold), deepen border contrast, and boost OKLCH/Tailwind accent saturation
|
|
171
|
+
npx medesign bolder path/to/dashboard.html
|
|
172
|
+
|
|
173
|
+
# Soften font weights, convert borders to subtle hairlines, and shift OKLCH/Tailwind colors to a restrained minimalist palette
|
|
174
|
+
npx medesign quiet path/to/dashboard.html
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
---
|
|
178
|
+
|
|
179
|
+
### The Terminal Quality Audit Card
|
|
180
|
+
|
|
181
|
+
```text
|
|
182
|
+
ME-DESIGN v1.4.0
|
|
183
|
+
Design Quality & Governance Audit
|
|
184
|
+
────────────────────────────────────────
|
|
185
|
+
Target dashboard.tsx
|
|
186
|
+
Archetype Geospatial Situation Awareness (32)
|
|
187
|
+
Analysis Static AST & Semantic Rules
|
|
188
|
+
Ruleset medesign-standard@1.4.0
|
|
189
|
+
|
|
190
|
+
QUALITY SCORE (Q = 0.30H + 0.25I + 0.20G + 0.15R + 0.10V)
|
|
191
|
+
Hierarchy (H) 94.0 / 100
|
|
192
|
+
Information (I) 90.0 / 100
|
|
193
|
+
Geometry (G) 92.0 / 100
|
|
194
|
+
Responsive (R) 88.0 / 100
|
|
195
|
+
Visual Craft (V) 95.0 / 100
|
|
196
|
+
|
|
197
|
+
Q-SCORE 91.8 / 100 [PASS]
|
|
198
|
+
|
|
199
|
+
HARD INVARIANTS CHECKLIST
|
|
200
|
+
PASS Keyboard Focus Ring Visibility (:focus-visible)
|
|
201
|
+
PASS Reduced Motion Compliance (@media prefers-reduced-motion)
|
|
202
|
+
PASS Anti-AI Tells: Zero Em-Dash Invariant
|
|
203
|
+
PASS Predictable DOM Order (No unsemantic dense flow)
|
|
204
|
+
|
|
205
|
+
────────────────────────────────────────
|
|
206
|
+
RESULT: PASS (Exit Code: 0)
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
---
|
|
210
|
+
|
|
211
|
+
## 🤖 AI Coding Assistant Integrations
|
|
212
|
+
|
|
213
|
+
ME-DESIGN provides shared rule adapters for all major agentic tools:
|
|
214
|
+
|
|
215
|
+
- **Claude Code:** Copy `integrations/claude-code/SKILL.md` to `.claude/skills/medesign/SKILL.md`
|
|
216
|
+
- **Cursor:** Copy `integrations/cursor/medesign.mdc` to `.cursor/rules/medesign.mdc`
|
|
217
|
+
- **Google Antigravity:** Native Skill supported under `skills/medesign/SKILL.md`
|
|
218
|
+
|
|
219
|
+
---
|
|
220
|
+
|
|
221
|
+
## 📄 License
|
|
222
|
+
|
|
223
|
+
MIT License © 2026 Metha Triparamkit (Survey Engineering & Geoinformatics, Kasetsart University).
|