@ryuxdsgn/design-intelligence 2.6.5 → 2.8.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/dist/cli/index.js +2 -2
- package/dist/intelligence/content.js +11 -11
- package/dist/intelligence/critique.js +56 -13
- package/dist/intelligence/guides.js +42 -13
- package/dist/product.js +3 -3
- package/package.json +1 -1
package/dist/cli/index.js
CHANGED
|
@@ -6,7 +6,7 @@ import * as p from "@clack/prompts";
|
|
|
6
6
|
import pc from "picocolors";
|
|
7
7
|
import { AGENT_TARGETS, AGENTS_MD_INLINE, LEGACY_CURSOR_RULES_DIR, LEGACY_SKILL_DIRS, } from "../adapters.js";
|
|
8
8
|
import { ALL_INSTALLABLE_IDS } from "../intelligence/content.js";
|
|
9
|
-
import { CLI_CMD, CONTEXT_END, CONTEXT_FILE, CONTEXT_START, MARK_START,
|
|
9
|
+
import { CLI_CMD, CONTEXT_END, CONTEXT_FILE, CONTEXT_START, MARK_START, MCP_STATUS, VERSION } from "../product.js";
|
|
10
10
|
import { validateBundle } from "../validate.js";
|
|
11
11
|
import { renderAgentsBlock, renderBundle, renderPointerBlock, SKILL_NAME } from "../render.js";
|
|
12
12
|
import { hasBlock, readIfExists, rel, removeBlock, removePath, upsertBlock, writeFileEnsured } from "./fsutil.js";
|
|
@@ -359,7 +359,7 @@ const CONTEXT_FIELDS = [
|
|
|
359
359
|
},
|
|
360
360
|
{ label: "Brand and design system", hint: "" },
|
|
361
361
|
{ label: "Product docs", hint: "paths RYUX reads for product facts, for example docs/prd.md:" },
|
|
362
|
-
{ label: "Evidence sources", hint:
|
|
362
|
+
{ label: "Evidence sources", hint: "RYUX MCP (not available yet), Figma files, reference URLs:" },
|
|
363
363
|
{
|
|
364
364
|
label: "Constraints", hint: "platforms, accessibility target (for example WCAG 2.2 AA), what must not change:",
|
|
365
365
|
ask: { flag: "constraints", group: "Project", question: "What must RYUX keep or support?", multi: true, options: [
|
|
@@ -646,10 +646,10 @@ export const RULES = [
|
|
|
646
646
|
title: "Motion earns its level",
|
|
647
647
|
level: "contextual",
|
|
648
648
|
when: "the design adds motion or transitions",
|
|
649
|
-
do: "Classify each motion: L1 state feedback, L2 component transition, L3 page transition, L4 storytelling, L5 decorative. The higher the level, the stronger the reason it needs. Then weigh how often people see it: a surface opened many times a day (command palette, shortcut, core navigation, list selection) appears and closes without movement, at most a fade too short to notice; standard transitions belong to occasional surfaces (modal, drawer, toast), and expression to rare or first-time moments. Take timing and easing from one motion personality, define them once as motion tokens, animate transform and opacity rather than layout properties, and honor reduced motion (RX-A11Y-08).",
|
|
650
|
-
dont: "Animate everything, give a surface people open many times a day an entrance they must sit through, use one generic duration and easing (transition: all 0.3s) everywhere, or let decorative motion delay content or input.",
|
|
649
|
+
do: "Classify each motion: L1 state feedback, L2 component transition, L3 page transition, L4 storytelling, L5 decorative. The higher the level, the stronger the reason it needs. Then weigh how often people see it: a surface opened many times a day (command palette, shortcut, core navigation, list selection) appears and closes without movement, at most a fade too short to notice; standard transitions belong to occasional surfaces (modal, drawer, toast), and expression to rare or first-time moments. Take timing and easing from one motion personality, define them once as motion tokens, animate transform and opacity rather than layout properties, and honor reduced motion (RX-A11Y-08). Anything that opens and closes (menu, popover, dialog, drawer) uses transitions that can reverse halfway, so a close or reopen mid-animation turns back from where it is, and it closes no slower than it opened.",
|
|
650
|
+
dont: "Animate everything, give a surface people open many times a day an entrance they must sit through, play an open-only keyframe animation on something people can close or reopen at any moment, use one generic duration and easing (transition: all 0.3s) everywhere, or let decorative motion delay content or input.",
|
|
651
651
|
why: "Motion directs attention; unearned motion steals it from the task and can make some people unwell.",
|
|
652
|
-
basis: `NNGroup animation and usability guidance; WCAG 2.3.3 animation from interactions; frequency check: pattern also in ${EK} find-animation-opportunities
|
|
652
|
+
basis: `NNGroup animation and usability guidance; WCAG 2.3.3 animation from interactions; frequency check: pattern also in ${EK} find-animation-opportunities; reversible open and close: pattern also in ${EK} animate; both written for RYUX`,
|
|
653
653
|
notWhen: "L1 feedback on standard controls that follows the platform defaults",
|
|
654
654
|
tradeoff: "fewer flourishes on marketing pages",
|
|
655
655
|
check: "review; reduced-motion test",
|
|
@@ -710,11 +710,11 @@ export const RULES = [
|
|
|
710
710
|
title: "Tokens over one-off values",
|
|
711
711
|
level: "preferred",
|
|
712
712
|
gate: "lock",
|
|
713
|
-
do: "Use tokens or variables for color, spacing, radius, elevation, and type.",
|
|
714
|
-
dont: "Hard-code one-off values for things the system already defines.",
|
|
715
|
-
why: "Tokens keep changes consistent and reviewable.",
|
|
716
|
-
basis: "W3C Design Tokens Community Group",
|
|
717
|
-
check: "review",
|
|
713
|
+
do: "Use tokens or variables for color, spacing, radius, elevation, and type. First look for the ones that exist (DESIGN.md, a tokens or theme file in the repo, the design file's variables and components, a linked library) and use them. When the project has none, define them before the first frame: color roles, a spacing scale, a radius scale, and a type scale (sizes, and font families). In a design tool, create them as the tool's variables and reference them in every value, and make anything that repeats (a row, a button, a bar) a component. After rendering, count the values that are still literal, by kind, and turn each into a token or name why it is an exception.",
|
|
714
|
+
dont: "Hard-code one-off values for things the system already defines, or define tokens for color only and leave spacing, radius, and type size literal.",
|
|
715
|
+
why: "Tokens keep changes consistent and reviewable; values that are not tokens drift from frame to frame and state to state.",
|
|
716
|
+
basis: "W3C Design Tokens Community Group; ryux four-problems baseline 2026-10-16: in all 12 runs, with or without RYUX, spacing, radius, and font size were 100% literal",
|
|
717
|
+
check: "count literal values after render; review",
|
|
718
718
|
},
|
|
719
719
|
{
|
|
720
720
|
num: 5,
|
|
@@ -758,10 +758,10 @@ export const RULES = [
|
|
|
758
758
|
title: "Keyboard and visible focus",
|
|
759
759
|
level: "required",
|
|
760
760
|
gate: "hard",
|
|
761
|
-
do: "Make actions operable from the keyboard (path-based input such as drawing excepted), show a visible focus indicator, and keep focus order the same as the visual order.",
|
|
761
|
+
do: "Make actions operable from the keyboard (path-based input such as drawing excepted), show a visible focus indicator, and keep focus order the same as the visual order. When a dialog, menu, or popover closes, put focus back on the element that opened it, or on the nearest sensible element if that one is gone.",
|
|
762
762
|
dont: "Build pointer-only actions, or remove focus outlines without an accessible replacement.",
|
|
763
763
|
why: "Keyboard and switch users navigate and act by focus.",
|
|
764
|
-
basis: "WCAG 2.2 SC 2.1.1, 2.4.3, and 2.4.7",
|
|
764
|
+
basis: "WCAG 2.2 SC 2.1.1, 2.4.3, and 2.4.7; WAI-ARIA APG dialog pattern",
|
|
765
765
|
check: "review",
|
|
766
766
|
formerly: ["RX-H-13"],
|
|
767
767
|
},
|
|
@@ -976,7 +976,7 @@ export const RULES = [
|
|
|
976
976
|
num: 1,
|
|
977
977
|
title: "Render, inspect, fix, render again",
|
|
978
978
|
level: "required",
|
|
979
|
-
do: "Render the result at the target viewport (browser, screenshot, or design-tool export), inspect the main state, one empty or error state, and the smallest supported width, rank issues by impact, fix from the top, and render again; if no render tool is available, say so in the report.",
|
|
979
|
+
do: "Render the result at the target viewport (browser, screenshot, or design-tool export), inspect the main state, one empty or error state, and the smallest supported width, look for the defects source code hides (misaligned edges, type or spacing off the scale, density wrong for the task, overflow and clipping, a component that looks different from its siblings, a control that does nothing), rank issues by impact, fix from the top, and render again; name the widths and states you inspected, and if no render tool is available, say so in the report. Whether the design itself is right or intentional is Critique's call; QA reports what it can verify.",
|
|
980
980
|
dont: "Claim visual quality for a layout you have only seen as code, or fix by guesswork without checking the result.",
|
|
981
981
|
why: "Overlaps and clipping are invisible in source and obvious on screen; the loop turns a draft into a reviewed result.",
|
|
982
982
|
basis: `${RUN}: two runs shipped overlaps they never saw`,
|
|
@@ -32,15 +32,24 @@ findings
|
|
|
32
32
|
3. **Evidence over taste.** Every finding names its source; severity 3 or more needs a real
|
|
33
33
|
comparison \`screen_id\` when the ryux MCP is connected.
|
|
34
34
|
4. **Honest scope.** A static frame shows no hover, focus, loading, or narrow widths. Say what was
|
|
35
|
-
not tested, and lower the confidence of anything inferred.
|
|
35
|
+
not tested, and lower the confidence of anything inferred. Missing from the artifact is not
|
|
36
|
+
missing from the product: a frame without a loading state shows the frame, not the build.
|
|
36
37
|
5. **Concise and prioritized.** At most 12 findings; the ones that hurt users most come first.
|
|
38
|
+
At equal severity, the higher layer (step 5) comes first: a flow problem before a spacing one.
|
|
39
|
+
6. **A preference is not a defect.** A taste (rounder corners, another typeface, more white space)
|
|
40
|
+
becomes a finding only when the brief, evidence, a requirement, or a stated context reason makes
|
|
41
|
+
it one; otherwise list it under "Optional ideas" or leave it out.
|
|
37
42
|
|
|
38
43
|
## Steps
|
|
39
44
|
|
|
40
45
|
### 1. Context
|
|
41
46
|
|
|
42
47
|
Who the user is, what task happens on this screen, the platform, and the point in the flow. If the
|
|
43
|
-
request does not say, infer it from the design and list it as an assumption.
|
|
48
|
+
request does not say, infer it from the design and list it as an assumption. Name the surface type,
|
|
49
|
+
because it decides which Design Read dimensions weigh most: **task UI** (settings, tables, checkout:
|
|
50
|
+
Clarity, Efficiency, Recoverability), **flow or form** (Confidence, Recoverability), or **expressive
|
|
51
|
+
surface** (hero, landing, onboarding, app home with a personality brief: Specificity and
|
|
52
|
+
Coherence weigh more).
|
|
44
53
|
|
|
45
54
|
### 2. Analyze first
|
|
46
55
|
|
|
@@ -58,11 +67,11 @@ Rate each dimension **Strong**, **Adequate**, or **Weak**, with one sentence of
|
|
|
58
67
|
| --- | --- |
|
|
59
68
|
| Clarity | Can the user understand what this screen is for? |
|
|
60
69
|
| Hierarchy | Can the user identify what matters first? |
|
|
61
|
-
| Coherence | Does it feel like part of the same product? |
|
|
70
|
+
| Coherence | Does it feel like part of the same product, and does it keep the decisions already stated (DESIGN.md, an earlier Design Direction)? |
|
|
62
71
|
| Density | Is the information density right for how often and how carefully it is used? |
|
|
63
72
|
| Confidence | Does the user have enough information to act safely (cost, consequence, status)? |
|
|
64
73
|
| Efficiency | Can the task be done without unnecessary work? |
|
|
65
|
-
| Specificity | Does it feel designed for this product, or could it belong to any generic
|
|
74
|
+
| Specificity | Does it feel designed for this product, or could it belong to any generic app? Use the swap test (RX-AS-09). |
|
|
66
75
|
| Recoverability | Can users recover from mistakes and failures? |
|
|
67
76
|
| Accessibility | Can people with different abilities and input methods operate and understand it? |
|
|
68
77
|
|
|
@@ -79,6 +88,12 @@ Read the knowledge modules that apply and walk the design with their rules. [Req
|
|
|
79
88
|
gate, [Preferred] rules need a reason when broken, and [Contextual] rules count only when their
|
|
80
89
|
situation is present. Use their "Not when" lines so a rule is not applied mechanically.
|
|
81
90
|
|
|
91
|
+
Walk the layers in the table's order, from purpose down to detail: what the screen is for, then
|
|
92
|
+
structure and flow, then interaction and usability, then hierarchy, then type, spacing, density,
|
|
93
|
+
and color, then components and the design system, then accessibility and responsive behavior, then
|
|
94
|
+
edge cases and feedback. A problem in a higher layer often explains the ones below it (a weak
|
|
95
|
+
hierarchy is often an unclear goal); report the cause once, not each symptom.
|
|
96
|
+
|
|
82
97
|
| Category | Skill | Look for |
|
|
83
98
|
| --- | --- | --- |
|
|
84
99
|
| Product | ryux-product | stated purpose, one primary action, invented facts |
|
|
@@ -116,21 +131,37 @@ RYUX rule in \`issue\`:
|
|
|
116
131
|
The tool rejects major findings without valid evidence, caps the list at 12, and returns PASS or
|
|
117
132
|
FAIL. Without the MCP, say the evidence comes from the design and standards alone.
|
|
118
133
|
|
|
119
|
-
### 7.
|
|
134
|
+
### 7. Validate before reporting
|
|
135
|
+
|
|
136
|
+
Check every candidate finding before it reaches the report:
|
|
137
|
+
|
|
138
|
+
- **Can the source show it?** A screenshot supports hierarchy, contrast, and copy; it cannot prove
|
|
139
|
+
that a button is broken or that a state is missing from the product.
|
|
140
|
+
- **Does the criterion apply** to this surface type and this brief?
|
|
141
|
+
- **Is it a duplicate** of another finding, or a symptom of one?
|
|
142
|
+
- **Is there a reasonable other reading** (a deliberate choice the brief explains)?
|
|
143
|
+
- **Does the fix address the cause** you observed, not just the symptom?
|
|
144
|
+
|
|
145
|
+
A finding that fails moves to "Not verifiable from this source" or is dropped. Fewer, true findings
|
|
146
|
+
beat a long list.
|
|
147
|
+
|
|
148
|
+
### 8. Report
|
|
120
149
|
|
|
121
150
|
Each finding uses this schema:
|
|
122
151
|
|
|
123
152
|
| Field | Content |
|
|
124
153
|
| --- | --- |
|
|
125
154
|
| ID | C-01, C-02, ... |
|
|
126
|
-
| Severity |
|
|
155
|
+
| Severity | 4 critical (blocks the task, loses money or data, excludes users) · 3 high (major) · 2 medium (minor) · 1 low (cosmetic) · 0 not a problem |
|
|
127
156
|
| Category | one of the categories above |
|
|
128
157
|
| Finding | where it is and what the problem is |
|
|
129
158
|
| Evidence | what you saw: the capture, a measured value, a comparison screen |
|
|
130
|
-
|
|
|
131
|
-
|
|
|
159
|
+
| Status | Confirmed (the source shows it) · Hypothesis (likely, not shown) · Not verifiable from this source |
|
|
160
|
+
| Impact | who is affected and in which task; a predicted consequence is worded as one ("may") |
|
|
161
|
+
| Recommendation | the smallest concrete change that removes the cause; name a larger redesign only when no small change can |
|
|
132
162
|
| Confidence | High (seen directly), Medium (partly seen, such as one width), Low (inferred) |
|
|
133
163
|
| Source | the RYUX rule ID, plus a screen_id, a standard (WCAG SC), or "this design" |
|
|
164
|
+
| Verify by | how a revision would show it is fixed: re-render and check X, measure Y, test Z |
|
|
134
165
|
|
|
135
166
|
\`\`\`
|
|
136
167
|
Verdict: one sentence (what works, the biggest risk)
|
|
@@ -146,12 +177,20 @@ Design Read
|
|
|
146
177
|
(all nine)
|
|
147
178
|
|
|
148
179
|
Findings (most severe first, at most 12)
|
|
149
|
-
C-01 · severity 3 · Interaction · confidence
|
|
150
|
-
Finding:
|
|
151
|
-
Evidence: no loading or progress element in
|
|
180
|
+
C-01 · severity 3 high · Interaction · confidence Medium · Hypothesis
|
|
181
|
+
Finding: The design shows no status while the payment verifies
|
|
182
|
+
Evidence: no loading or progress element in any frame provided (Observed in the
|
|
183
|
+
frames; the build was not tested)
|
|
152
184
|
Impact: buyers paying by QRIS may tap twice and pay twice
|
|
153
185
|
Recommendation: show status with a time estimate; disable the button while verifying
|
|
154
186
|
Source: RX-IX-02; scr_demo_001
|
|
187
|
+
Verify by: a verifying-state frame exists and the button reads as disabled in it
|
|
188
|
+
|
|
189
|
+
Not verifiable from this source
|
|
190
|
+
- ...
|
|
191
|
+
|
|
192
|
+
Optional ideas (preferences, not defects)
|
|
193
|
+
- ...
|
|
155
194
|
|
|
156
195
|
What works (keep it)
|
|
157
196
|
- ...
|
|
@@ -166,6 +205,10 @@ Fix priorities
|
|
|
166
205
|
- Don't edit the source file while reviewing.
|
|
167
206
|
- Don't give a finding without a location, a source, and a reason.
|
|
168
207
|
- Don't raise severity to major without evidence, or claim "app X does this" without a \`screen_id\`.
|
|
169
|
-
- Don't mark an inferred issue High confidence.
|
|
170
|
-
- Don't
|
|
208
|
+
- Don't mark an inferred issue High confidence, or call a Hypothesis Confirmed.
|
|
209
|
+
- Don't claim a behavior was tested when you saw only a static image.
|
|
210
|
+
- Don't report a preference as a defect (principle 6).
|
|
211
|
+
- Don't paste generic advice ("modernize", "cleaner", "improve the spacing", "more hierarchy"):
|
|
212
|
+
name the element, the problem, its impact, and the change.
|
|
213
|
+
- Don't turn a finding into an unrelated redesign; fix what the finding names.
|
|
171
214
|
- Don't call the result "fully accessible" or "UX optimized"; say what was checked.`;
|
|
@@ -64,6 +64,9 @@ export const DESIGN_BODY = `# RYUX Design
|
|
|
64
64
|
Read the product docs first (the router, step 1). Ask only when a missing answer materially
|
|
65
65
|
affects the user flow, what the product can do, or whether the content is correct, those
|
|
66
66
|
questions alone, most consequential first, at most three, in one message, before designing.
|
|
67
|
+
A product rule that changes which states or actions the screen has (refunds, fees, what happens
|
|
68
|
+
on failure) is a major decision. When the prompt and DESIGN.md disagree, the prompt wins for
|
|
69
|
+
this task; say so.
|
|
67
70
|
**Direction is the user's call:** when neither the prompt nor DESIGN.md sets the UI direction
|
|
68
71
|
(character, or brand colour and type) or the motion direction, ask for it in that message (it
|
|
69
72
|
counts toward the three) instead of choosing it yourself. **No DESIGN.md and no product docs is the
|
|
@@ -78,20 +81,35 @@ export const DESIGN_BODY = `# RYUX Design
|
|
|
78
81
|
with those two fields. Change only those field lines; leave every other line as it is. Your own
|
|
79
82
|
assumptions do not go into DESIGN.md.
|
|
80
83
|
2. **Understand what exists.** When there is a screen, product, or design system already, read its
|
|
81
|
-
analysis or run Analyze first (capabilities/analyze.md).
|
|
84
|
+
analysis or run Analyze first (capabilities/analyze.md). Existing screens, components, and any
|
|
85
|
+
screenshot or reference provided are your examples: read them before choosing patterns, take
|
|
86
|
+
their principles, and never copy their facts. Understand before you design.
|
|
82
87
|
3. **Decide with evidence.** For consequential choices, compare two or three patterns, using
|
|
83
88
|
reference screens when the ryux MCP is connected (RX-PR-09), and rate the evidence (RX-PR-10).
|
|
89
|
+
On a complex or ambiguous surface (a new flow, a dashboard, a multi-step form), name the primary
|
|
90
|
+
task, the one thing that must be seen first, and two or three UX approaches (structure and
|
|
91
|
+
interaction model) before any visual work, and choose by the task; a small change skips this.
|
|
84
92
|
4. **Direction.** Write the Design Direction below. On an expressive surface (hero, landing,
|
|
85
93
|
onboarding, empty state, brand moment), write three directions, choose one, and fill the Visual
|
|
86
94
|
Direction (RX-UI-12, RX-UI-10). On task UI, follow conventions and the design system.
|
|
87
95
|
5. **Read the modules the task needs** from the task table, for example ux, interaction, forms, and
|
|
88
96
|
content for a form, or ui and responsive for a layout.
|
|
89
|
-
6. **Design in the tool.** Use the Figma MCP or the pen.dev MCP.
|
|
90
|
-
(
|
|
97
|
+
6. **Design in the tool.** Use the Figma MCP or the pen.dev MCP. System first: look for the design
|
|
98
|
+
system that exists (DESIGN.md, a tokens or theme file in the repo, the design file's variables and
|
|
99
|
+
components, a linked library) and build from it. Create only what is missing: variables for color
|
|
100
|
+
roles, spacing, radius, and type sizes and families before the first frame, and components for
|
|
101
|
+
repeated elements (RX-DS-03). Building the system does not replace the states: design every
|
|
102
|
+
state that matters (empty, loading, error, including content that fails to load) and every width
|
|
103
|
+
you claim, and source assets on purpose (RX-UI-13).
|
|
91
104
|
7. **Render and inspect.** Screenshot what you made, check it against the direction and the rules,
|
|
92
|
-
fix, and render again (capabilities/qa.md).
|
|
105
|
+
fix, and render again (capabilities/qa.md). Count the values still literal (color, spacing,
|
|
106
|
+
radius, type size) and turn each into a variable or name the exception. List where the render
|
|
107
|
+
differs from the Design Direction (hierarchy, states, widths) and fix or record each one. Check the result against the Liveliness you set, and
|
|
93
108
|
put each prominent or decorative element through the purpose gate (RX-AS-05: purpose,
|
|
94
|
-
contribution, necessity); on calm task UI, deliberate restraint is a valid answer.
|
|
109
|
+
contribution, necessity); on calm task UI, deliberate restraint is a valid answer. Then judge the main state as a
|
|
110
|
+
reviewer would, not as a checklist: rate Clarity, Hierarchy, and Specificity from the Design Read
|
|
111
|
+
(capabilities/critique.md), plus Craft (type steps, spacing rhythm, alignment, detail), Strong,
|
|
112
|
+
Adequate, or Weak with one reason each, and fix anything Weak before the gate. Generated images and illustrations arrive
|
|
95
113
|
asynchronously: wait until each one has landed and render again before exporting or closing the
|
|
96
114
|
gate. Never finish with an asset still pending.
|
|
97
115
|
8. **Fact check, then the gate.** Check every product fact on the canvas (tool and command names,
|
|
@@ -191,7 +209,9 @@ export const BUILD_BODY = `# RYUX Build
|
|
|
191
209
|
integration tests for critical flows such as checkout, payment, and form submit. Use the
|
|
192
210
|
repo's runner; with none, propose one and ask before adding it (RX-FE-14).
|
|
193
211
|
6. **Render and verify.** Run it and the tests, check every width and state, and fix deviations
|
|
194
|
-
from the design (capabilities/qa.md).
|
|
212
|
+
from the design (capabilities/qa.md). When changing an existing screen, also check that what
|
|
213
|
+
you did not mean to change still works: neighbouring screens, shared components, and the flow
|
|
214
|
+
around the change.
|
|
195
215
|
7. **Close with the Delivery Gate.** CODE QUALITY and VISUAL QA need real checks (typecheck,
|
|
196
216
|
tests, render), or say what was not run.`;
|
|
197
217
|
export const CORE_EVIDENCE = `Say where every claim comes from:
|
|
@@ -227,12 +247,12 @@ export const CORE_HONESTY = `Report what was checked, how, and what was not avai
|
|
|
227
247
|
export const CORE_DECISION_RECORD = `For consequential choices (RX-PR-09) and deviations, write **Decision**, **Options** compared, **Evidence**,
|
|
228
248
|
**Trade-off**, and **Choice**. Evidence is Strong (2+ comparable screen_ids), Thin (one, or another context),
|
|
229
249
|
or None (no screen_id: a judgment call). With None on a consequential choice, show options or ask (RX-PR-10).`;
|
|
230
|
-
export const GATE_RULES = `- Each area is PASS, FAIL, NOT VERIFIED (it applies, but the evidence was not available: name what is missing), or N/A (it does not apply: say why).
|
|
250
|
+
export const GATE_RULES = `- Each area is PASS, FAIL, NOT VERIFIED (it applies, but the evidence was not available: name what is missing), or N/A (it does not apply: say why). Scale the gate to the task: a copy fix or a one-component change marks the areas it cannot affect N/A, one line each.
|
|
231
251
|
- An area FAILS when a [Required] rule in its skills fails without a written exception.
|
|
232
252
|
- A Hard Gate failure cannot be excepted: fix it before declaring the work complete.
|
|
233
|
-
- VISUAL QA without a render is NOT VERIFIED;
|
|
253
|
+
- VISUAL QA without a render is NOT VERIFIED; a PASS names the render tool, the widths, and the states inspected.
|
|
234
254
|
- CODE QUALITY is NOT VERIFIED while changed logic has no test run; say which checks ran (typecheck, tests).
|
|
235
|
-
- FINAL is FAIL if any area fails, NOT VERIFIED if none fails but one is not verified, else PASS. PASS means the checked criteria were met, not that the design is good.`;
|
|
255
|
+
- FINAL is FAIL if any area fails, NOT VERIFIED if none fails but one is not verified, else PASS. PASS means the checked criteria were met, not that the design is good or was validated with users ("not tested with users" unless it was).`;
|
|
236
256
|
export const GUIDES = {
|
|
237
257
|
product: `Answer these before any layout exists. Write the answers down; they are the brief.
|
|
238
258
|
|
|
@@ -434,7 +454,8 @@ The states themselves (waiting, result, recovery) are defined in ryux-interactio
|
|
|
434
454
|
RX-IX-02); motion only makes them visible, and it never compensates for weak UX. Decide the trigger,
|
|
435
455
|
duration, easing, distance, opacity or scale, and how several elements are choreographed. Define
|
|
436
456
|
duration and easing once as motion tokens, and animate transform and opacity rather than layout
|
|
437
|
-
properties (width, height, top, margin), which cause jank.
|
|
457
|
+
properties (width, height, top, margin), which cause jank. What opens and closes should be able to
|
|
458
|
+
reverse halfway: use transitions, not an open-only keyframe animation.
|
|
438
459
|
|
|
439
460
|
| Level | Examples | Needs |
|
|
440
461
|
| --- | --- | --- |
|
|
@@ -509,8 +530,11 @@ Does not cover: component reuse and tokens (see ryux-design-system).`,
|
|
|
509
530
|
**Quality Locks** to keep across the product: spacing, typography, color roles, terminology,
|
|
510
531
|
components, interaction patterns and states, responsive behavior, and visual hierarchy.
|
|
511
532
|
|
|
512
|
-
|
|
513
|
-
|
|
533
|
+
Look for the existing system before defining one: DESIGN.md, a tokens or theme file in the repo, the
|
|
534
|
+
design file's variables and components, or a linked library. If the project has no system yet, define
|
|
535
|
+
the smallest token set the screen needs and use it consistently: color roles, a spacing scale, a
|
|
536
|
+
radius scale, and a type scale, not color alone. After rendering, count the literal values left and
|
|
537
|
+
convert them (RX-DS-03). Do not introduce a component library the project does not use.`,
|
|
514
538
|
accessibility: `Accessibility is product quality, not an enhancement. Check:
|
|
515
539
|
|
|
516
540
|
- **Semantics**: real headings, landmarks, lists, buttons, links, labels.
|
|
@@ -623,5 +647,10 @@ run the purpose gate; keep it when the answer is real, as in the last column.
|
|
|
623
647
|
| A small badge above the headline that repeats it | a label that adds no information | cut it, or say something the headline does not | it carries real status: beta, new version, date |
|
|
624
648
|
| Endless floating, looping, or scroll-triggered motion | decorative motion with no reason, competing with the task | a single L4 moment with a message, or none (RX-UI-11) | it shows state, continuity, or the product's idea once |
|
|
625
649
|
| Glass, glow, and blur on every layer | decoration without a job that also lowers contrast | one surface treatment with a purpose (RX-AS-05, RX-A11Y-01) | one overlay needs to show what is behind it |
|
|
626
|
-
| Stock teamwork or handshake photos | borrowed people implying endorsement | real people with consent, or no people (RX-AS-02, RX-UI-13) | never as evidence of customers
|
|
650
|
+
| Stock teamwork or handshake photos | borrowed people implying endorsement | real people with consent, or no people (RX-AS-02, RX-UI-13) | never as evidence of customers |
|
|
651
|
+
| Cards inside cards, surfaces on surfaces | every nesting level costs a border, a radius, and padding, and the grouping stops meaning anything | one container per real group; separate inside it with spacing or a divider (RX-UI-01) | the inner surface is a distinct object the user acts on, such as a selectable option |
|
|
652
|
+
| One record split into a grid of cards | details that are read together (an order, a profile, a transaction) are scattered into equal boxes | one block with labeled rows or a table (RX-UI-05) | each card is a separate item the user compares or acts on |
|
|
653
|
+
| A dashboard of KPI tiles and charts that answer no question | decoration in place of the decision the screen supports | lead with what needs attention and the next action; dense tables where people scan (RX-UI-01, RX-UX-01) | each tile drives a decision and links to its detail |
|
|
654
|
+
| Display-size headings on task UI | a hero-sized title pushes the data and the action below the fold | a heading sized for its rank in the page (RX-UI-01, RX-UI-03) | it is the single message of a marketing or brand page |
|
|
655
|
+
| A landing-page layout for a product screen | hero, feature rows, and a closing CTA on an app screen, a settings page, or a tool | the structure the task needs: list, detail, form, or workspace (RX-UI-05) | the surface really is marketing |`,
|
|
627
656
|
};
|
package/dist/product.js
CHANGED
|
@@ -4,10 +4,10 @@ const pkg = createRequire(import.meta.url)("../package.json");
|
|
|
4
4
|
/** The RYUX product version (npm package, skill, plugins, and rules share it). */
|
|
5
5
|
export const VERSION = pkg.version;
|
|
6
6
|
export const MCP_NAME = "ryux";
|
|
7
|
-
/** Until the hosted MCP is live, every surface says so
|
|
8
|
-
|
|
7
|
+
/** Until the hosted MCP is live, every surface says so. No connect URL is printed or written into files
|
|
8
|
+
* the agent reads: self-hosting steps live only in apps/mcp/README.md. */
|
|
9
9
|
export const MCP_STATUS = "The hosted ryux MCP is not live yet. RYUX works without it and rates evidence None. " +
|
|
10
|
-
|
|
10
|
+
"To run the server yourself, see https://github.com/ryuxdsgn/design-intelligence/tree/main/apps/mcp.";
|
|
11
11
|
export const CLI_CMD = "npx @ryuxdsgn/design-intelligence";
|
|
12
12
|
export const MARK_START = "<!-- ryux-rules:start -->";
|
|
13
13
|
export const MARK_END = "<!-- ryux-rules:end -->";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ryuxdsgn/design-intelligence",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.8.0",
|
|
4
4
|
"description": "RYUX: design intelligence for AI agents and designers. One skill, five entry points: Analyze, Design, Build, Critique, and QA, for Claude Code, Codex, Cursor, Gemini CLI, OpenCode, Cline, Copilot, and more.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|