@ryuxdsgn/design-intelligence 2.12.0 → 2.13.1
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.
|
@@ -7,7 +7,8 @@ export const ANALYZE_BODY = `# RYUX Analyze
|
|
|
7
7
|
> What is actually in this interface?
|
|
8
8
|
|
|
9
9
|
Analyze answers "what exists?" and nothing more: it describes an existing design so that the next
|
|
10
|
-
decision (design, build, or critique) starts from facts
|
|
10
|
+
decision (design, build, or critique) starts from facts; it is the Understand stage of the core
|
|
11
|
+
workflow (SKILL.md) on its own. It is not screenshot-to-code, and it does not judge quality; that is
|
|
11
12
|
\`ryux-critique\`. When the ryux MCP is connected, comparable Indonesian screens back the patterns
|
|
12
13
|
you name (\`search_screens\`, \`get_local_pattern\`).
|
|
13
14
|
|
|
@@ -638,10 +638,10 @@ export const RULES = [
|
|
|
638
638
|
tradeoff: "a scale limits choices; occasional exceptions need a written reason",
|
|
639
639
|
level: "preferred",
|
|
640
640
|
gate: "lock",
|
|
641
|
-
do: "Use the project's spacing and type scale, or define one (for example multiples of 4 or 8) and align elements to a shared grid. State the shape lock in one sentence, a radius per component role (\"action buttons pill, cards 16, inputs 12, sheets 28\"), and keep emphasis inside the type family (weight or size), not a second face dropped into one word.",
|
|
641
|
+
do: "Use the project's spacing and type scale, or define one (for example multiples of 4 or 8) and align elements to a shared grid. Keep a screen's main content to two or three text sizes, the most important the largest, and count them on the render (RX-AS-10). State the shape lock in one sentence, a radius per component role (\"action buttons pill, cards 16, inputs 12, sheets 28\"), and keep emphasis inside the type family (weight or size), not a second face dropped into one word.",
|
|
642
642
|
dont: "Pick spacing and sizes one element at a time.",
|
|
643
643
|
why: "A scale produces rhythm and makes hierarchy legible.",
|
|
644
|
-
basis: `Material Design 8dp grid; shape lock and in-family emphasis: pattern also in ${AP}; written for RYUX`,
|
|
644
|
+
basis: `Material Design 8dp grid; NNGroup principles of visual design (scale: two or three sizes); shape lock and in-family emphasis: pattern also in ${AP}; written for RYUX`,
|
|
645
645
|
check: "count radii and type faces (RX-AS-10); review",
|
|
646
646
|
formerly: ["RX-C-08"],
|
|
647
647
|
},
|
|
@@ -652,10 +652,10 @@ export const RULES = [
|
|
|
652
652
|
tradeoff: "fewer colors means relying on type and space for emphasis",
|
|
653
653
|
level: "preferred",
|
|
654
654
|
gate: "lock",
|
|
655
|
-
do: "Use a small set of colors with defined roles: surface, text, accent for the primary action, and status colors. Pick one grey family, warm or cool, for surfaces, borders, and secondary text.",
|
|
655
|
+
do: "Use a small set of colors with defined roles: surface, text, accent for the primary action, and status colors. Pick one grey family, warm or cool, for surfaces, borders, and secondary text. Elements that behave the same look the same, and elements that behave differently look different: a destructive action has its own color role, not the primary accent. Lower importance with size, weight, or position, never by lowering text contrast.",
|
|
656
656
|
dont: "Introduce new colors per component, or use the accent for decoration.",
|
|
657
657
|
why: "When color has a role, the accent and status colors mean something.",
|
|
658
|
-
basis: `ryux visual principle; isolation effect (von Restorff 1933): the one item that differs is the one remembered, so the accent marks only the primary action; one grey family: pattern also in ${AP}; written for RYUX`,
|
|
658
|
+
basis: `ryux visual principle; NNGroup principles of visual design (contrast signals a different function; similarity); isolation effect (von Restorff 1933): the one item that differs is the one remembered, so the accent marks only the primary action; one grey family: pattern also in ${AP}; written for RYUX`,
|
|
659
659
|
check: "count accent hues and grey families (RX-AS-10); review",
|
|
660
660
|
formerly: ["RX-C-07"],
|
|
661
661
|
},
|
|
@@ -665,10 +665,10 @@ export const RULES = [
|
|
|
665
665
|
notWhen: "a standard pattern users expect fits the content (a settings list, a table); familiarity is the right choice",
|
|
666
666
|
tradeoff: "custom layouts cost design and build time",
|
|
667
667
|
level: "preferred",
|
|
668
|
-
do: "Choose the layout from the content, the task, and the reference screens.",
|
|
668
|
+
do: "Choose the layout from the content, the task, and the reference screens. Set the balance on purpose: symmetric for calm, focused screens, asymmetric for dynamic ones. On the render, check that visual weight is distributed, counting element size and not only the number of elements, with no side left empty or heavy without a reason.",
|
|
669
669
|
dont: "Default to hero, three feature cards, and a logo wall.",
|
|
670
670
|
why: "Template layouts look interchangeable and hide what is specific to the product.",
|
|
671
|
-
basis: "ryux anti-slop principle",
|
|
671
|
+
basis: "ryux anti-slop principle; NNGroup principles of visual design (balance)",
|
|
672
672
|
check: "review",
|
|
673
673
|
formerly: ["RX-C-02"],
|
|
674
674
|
},
|
|
@@ -727,12 +727,12 @@ export const RULES = [
|
|
|
727
727
|
num: 12,
|
|
728
728
|
title: "A point of view on expressive surfaces",
|
|
729
729
|
level: "contextual",
|
|
730
|
-
when: "the surface is expressive: a hero, landing page, onboarding, empty state, or brand moment, or the brief asks for a new look or more personality",
|
|
731
|
-
do: "Before designing, make three directions, each with a name, a concept taken from the product's own idea (for a tool about evidence: receipts, citations, marks of proof), and a signature element (type, composition, imagery, or motion). Render them as frames of the main state with the same content, different on at least two structural axes (information order, layout model, interaction model, type class, colour temperature), rate each against criteria taken from the brief, recommend one (RX-PR-09), and let the user choose; then make the rest of the design serve the chosen signature and put its concept in the Visual Brief. When the brief names reference products, read each one before it shapes the direction: the principle you borrow, what stays theirs (colours, mascot, signature features), and where you use it.",
|
|
732
|
-
dont: "Show
|
|
730
|
+
when: "the surface is expressive: a hero, landing page, onboarding, empty state, or brand moment, or the brief asks for a new look or more personality; on a new product's task UI, the brand layer only (see Not when)",
|
|
731
|
+
do: "Before designing, make two or three directions, each with a name, a concept taken from the product's own idea (for a tool about evidence: receipts, citations, marks of proof), and a signature element (type, composition, imagery, or motion). Render them as frames of the main state with the same content, different on at least two structural axes (information order, layout model, interaction model, type class, colour temperature), rate each against criteria taken from the brief, recommend one (RX-PR-09), and let the user choose; then make the rest of the design serve the chosen signature and put its concept in the Visual Brief. When the brief names reference products, read each one before it shapes the direction: the principle you borrow, what stays theirs (colours, mascot, signature features), and where you use it.",
|
|
732
|
+
dont: "Show directions that differ only in colour or copy, choose for the user without showing them, or let the signature be the category's default (for developer tools a terminal or agent-session panel; for SaaS a dashboard screenshot; copy on the left and product on the right), or relabel that default as a concept. A product screen can support the signature, not be it. Turn a named reference into adjectives (\"calm, white, soft\") or copy what belongs to its brand.",
|
|
733
733
|
why: "Users remember a product by its idea; a correct but generic surface is forgotten and could belong to any competitor.",
|
|
734
734
|
basis: "brand and art direction practice; RX-UI-05 layout from content; rendered variants on named axes, compared side by side, chosen by the user: pattern also in emilkowalski/skills (MIT) prototype; written for RYUX",
|
|
735
|
-
notWhen: "task UI such as forms, tables, settings, and checkout, where restraint and convention win:
|
|
735
|
+
notWhen: "task UI such as forms, tables, settings, and checkout, where restraint and convention win: the alternatives come from Explore (capabilities/design.md, step 3) as structure hypotheses, and the conventions that must hold stay fixed. A new product's brand layer must carry one signature from the product's own domain (a mark, the type voice, a colour temperature, or one brand moment in the flow), never a layout change and never decoration without a job (RX-AS-05). Record it in the Delivery Gate UI line",
|
|
736
736
|
tradeoff: "a strong idea takes a decision someone may disagree with; keep it honest and on brand",
|
|
737
737
|
check: "the swap test (RX-AS-09); review",
|
|
738
738
|
},
|
|
@@ -1217,7 +1217,7 @@ export const RULES = [
|
|
|
1217
1217
|
num: 9,
|
|
1218
1218
|
title: "Clean is not the same as designed",
|
|
1219
1219
|
level: "contextual",
|
|
1220
|
-
when: "the surface is expressive: a hero, landing page, onboarding, empty state, or brand moment, or the brief asks for a new look or more personality",
|
|
1220
|
+
when: "the surface is expressive: a hero, landing page, onboarding, empty state, or brand moment, or the brief asks for a new look or more personality; on a new product's task UI, the brand layer only (see Not when)",
|
|
1221
1221
|
do: "Run the swap test honestly: replace the name and logo with a competitor's in the same category. If the layout, the visual, and the headline would still work for them, the surface has no point of view yet; give it one (RX-UI-12). Report the answer in the Delivery Gate.",
|
|
1222
1222
|
dont: "Treat a tidy, generic layout as done because it passes every other gate; generic restraint is slop too.",
|
|
1223
1223
|
why: "Removing slop is the floor, not the ceiling; interchangeable design makes the product forgettable.",
|
|
@@ -1231,7 +1231,7 @@ export const RULES = [
|
|
|
1231
1231
|
title: "Count before handoff",
|
|
1232
1232
|
level: "required",
|
|
1233
1233
|
gate: "lock",
|
|
1234
|
-
do: "Before handing off, count on the render or in the design file's variables, and report the counts: accent hues 1 (status colors, and secondary colors the brand defines, are named and excluded); grey families 1; corner radii only from the scale, matching the shape lock; display sizes per screen 1; icon sets 1, in the chosen icon style; emoji in interface chrome 0; invented logos or app icons 0 (RX-AS-11); gradients without a brand reason 0; labels for the same intent 1. A count over its limit fails unless the brief or DESIGN.md gives the reason.",
|
|
1234
|
+
do: "Before handing off, count on the render or in the design file's variables, and report the counts: accent hues 1 (status colors, and secondary colors the brand defines, are named and excluded); grey families 1; corner radii only from the scale, matching the shape lock; display sizes per screen 1; text sizes in a screen's main content 3 at most; icon sets 1, in the chosen icon style; emoji in interface chrome 0; invented logos or app icons 0 (RX-AS-11); gradients without a brand reason 0; labels for the same intent 1. A count over its limit fails unless the brief or DESIGN.md gives the reason.",
|
|
1235
1235
|
dont: "Judge consistency by eye only, or hand off a screen with five accent hues, mixed icon sets, or two labels for one action because it looks fine.",
|
|
1236
1236
|
why: "Counts are harder to talk past than impressions; a design that passed a by-eye review still shipped five hues and the wrong tab icons.",
|
|
1237
1237
|
basis: `isolation effect (von Restorff 1933): several accents cancel each other out; pattern also in ${AP}, anti-slop counts; written for RYUX; owner review 2026-10-17: withryux.pen passed RYUX with 5+ hues and wrong tab icons`,
|
|
@@ -9,7 +9,9 @@ export const CRITIQUE_BODY = `# RYUX Critique
|
|
|
9
9
|
Critique answers "does this interface make sense, and what should change first?" It judges
|
|
10
10
|
decisions; it is not Analyze (what exists) or QA (does the build match its design). It is an
|
|
11
11
|
orchestrator, not a pile of rules: it analyzes the design, reasons with the RYUX knowledge modules,
|
|
12
|
-
pulls evidence from RYUX Knowledge, and reports findings someone can act on.
|
|
12
|
+
pulls evidence from RYUX Knowledge, and reports findings someone can act on. In the core workflow
|
|
13
|
+
(SKILL.md) it runs Understand and the critique half of Build and critique; a finding that
|
|
14
|
+
contradicts a chosen design is a reason to Reconsider it (capabilities/design.md, step 4).
|
|
13
15
|
|
|
14
16
|
\`\`\`
|
|
15
17
|
Critique
|
|
@@ -9,7 +9,7 @@ generator, an anti-slop framework, a design system, or a prompt library.
|
|
|
9
9
|
**Understand before you design. Don't design from imagination when evidence is available.**
|
|
10
10
|
|
|
11
11
|
\`\`\`
|
|
12
|
-
|
|
12
|
+
Understand → Frame → Explore → Evaluate and select → Build and critique → Verify and deliver → done
|
|
13
13
|
\`\`\``;
|
|
14
14
|
export const CORE_CAPABILITIES = `Tell RYUX what you are doing; RYUX decides what it needs to know. Pick the entry point, read its
|
|
15
15
|
file, then read only the knowledge modules the task needs (task table below). Paths are relative
|
|
@@ -28,31 +28,31 @@ design-system, accessibility, responsive, frontend, and anti-slop. Evidence come
|
|
|
28
28
|
project, product data, standards, and the ryux MCP when connected; none is required. Every entry point ends at the quality gates: the Hard
|
|
29
29
|
Gates below and the Delivery Gate, with anti-slop as the last check, never the starting point.
|
|
30
30
|
|
|
31
|
-
Keep the capabilities apart
|
|
32
|
-
|
|
33
|
-
| Capability | Answers | Example |
|
|
34
|
-
| --- | --- | --- |
|
|
35
|
-
| Analyze | What exists? | "The screen uses a 24px horizontal container." (observed) |
|
|
36
|
-
| Design | What should we do, and why? | "Keep 24px: it matches the existing layout system." |
|
|
37
|
-
| Critique | Is this decision right? | "24px leaves the table too sparse at 1440 for daily use." |
|
|
38
|
-
| QA | Does the build match the intent? | "The build uses 16px where the design says 24px." |`;
|
|
31
|
+
Keep the capabilities apart, never one generic "design" answer: Analyze says what exists, Design what
|
|
32
|
+
to do and why, Critique whether a decision is right, QA whether the build matches the intent.`;
|
|
39
33
|
export const CORE_PRINCIPLE = `Novelty is not a goal; a recognisable brand layer is: familiar structure, distinct surface. Optimize for clarity, usability, consistency, product fit,
|
|
40
34
|
accessibility, and intentional decisions. Understand the context before deciding; separate observed
|
|
41
35
|
facts from assumptions; prefer evidence over aesthetic preference; do not invent requirements;
|
|
42
36
|
explain meaningful decisions with their trade-off; validate before claiming.`;
|
|
43
|
-
export const CORE_WORKFLOW = `
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
37
|
+
export const CORE_WORKFLOW = `One workflow, six stages; each entry point runs the stages it needs.
|
|
38
|
+
|
|
39
|
+
1. **Understand**: who, what task, which product and market (RX-PR-01). Read the RYUX project
|
|
40
|
+
context in DESIGN.md, then the product docs (Product docs paths, else PRD.md, docs/prd*,
|
|
41
|
+
docs/product*, README), and name what you read. Separate facts, assumptions, and unknowns
|
|
42
|
+
(RX-PR-02); ask and record direction as in capabilities/design.md, step 1. DESIGN.md is
|
|
43
|
+
direction, not evidence. Read the entry point's file and only the modules the task table lists.
|
|
44
|
+
2. **Frame**: the user's task, the flow, what must be seen first, the primary action, and three to
|
|
45
|
+
five success criteria from the brief, written before any alternative exists.
|
|
46
|
+
3. **Explore**: on a new or complex surface, two or three alternatives that differ in hypothesis and
|
|
47
|
+
structure, not paint; reference screens through the ryux MCP when connected. A small change skips it.
|
|
48
|
+
4. **Evaluate and select**: rate the alternatives against the Frame criteria with evidence
|
|
49
|
+
(RX-PR-09, RX-PR-10); the user picks; write the Decision Receipt.
|
|
50
|
+
5. **Build and critique**: design or implement the choice, render, inspect, and fix; Reconsider an
|
|
51
|
+
unchosen alternative when a finding contradicts the choice, and say why.
|
|
52
|
+
6. **Verify and deliver**: Hard Gates and the Delivery Gate, with honest claims.
|
|
53
|
+
|
|
54
|
+
Analyze runs 1. Design runs 1-6. Build runs 1, 5, and 6 (2-4 through Design when no design exists).
|
|
55
|
+
Critique runs 1 and the critique half of 5. QA runs 6. Never go from "generate" straight to "done".`;
|
|
56
56
|
export const DESIGN_BODY = `# RYUX Design
|
|
57
57
|
|
|
58
58
|
> What should we design, and why? Design is the bridge between Analyze and Build. It works without
|
|
@@ -60,7 +60,9 @@ export const DESIGN_BODY = `# RYUX Design
|
|
|
60
60
|
|
|
61
61
|
## Workflow
|
|
62
62
|
|
|
63
|
-
|
|
63
|
+
The six stages of the core workflow (SKILL.md), as Design runs them.
|
|
64
|
+
|
|
65
|
+
1. **Understand.** Who, what task, which product and market, and the design intent
|
|
64
66
|
(knowledge/product.md). Take it from the prompt, then DESIGN.md, then knowledge and evidence.
|
|
65
67
|
Read the product docs first (the router, step 1). Ask only when a missing answer materially
|
|
66
68
|
affects the user flow, what the product can do, or whether the content is correct, those
|
|
@@ -82,54 +84,62 @@ export const DESIGN_BODY = `# RYUX Design
|
|
|
82
84
|
(\`- **UI direction**: Calm, trustworthy\`). If DESIGN.md or the block does not exist, create it
|
|
83
85
|
with those two fields. Change only those field lines; leave every other line as it is. Your own
|
|
84
86
|
assumptions do not go into DESIGN.md.
|
|
85
|
-
|
|
87
|
+
**What exists.** When there is a screen, product, or design system already, read its
|
|
86
88
|
analysis or run Analyze first (capabilities/analyze.md). Existing screens, components, and any
|
|
87
89
|
screenshot or reference provided are your examples: read them before choosing patterns, take
|
|
88
90
|
their principles, and never copy their facts. Understand before you design. When the task
|
|
89
91
|
redesigns or improves what exists, list what works and keep it; change only what has a named
|
|
90
92
|
problem (RX-UX-10).
|
|
91
|
-
|
|
93
|
+
**Modules.** Read the modules the task needs from the task table before deciding anything, for example ux,
|
|
92
94
|
interaction, forms, and content for a form, or ui and responsive for a layout; for any surface
|
|
93
95
|
with a visual direction, ui and anti-slop as well. The rules shape the first idea, not only the
|
|
94
96
|
review of it.
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
-
|
|
105
|
-
|
|
97
|
+
2. **Frame.** Name the primary task, the flow, the one thing that must be seen first, and the
|
|
98
|
+
primary action. Write three to five success criteria from the brief (the user's main task, what
|
|
99
|
+
must be seen first, the brief's character words, conventions that must hold) before any
|
|
100
|
+
alternative exists; Explore and Evaluate use these, and they do not change after you see the
|
|
101
|
+
alternatives. For consequential choices, list the two or three patterns to compare, using
|
|
102
|
+
reference screens when the ryux MCP is connected (RX-PR-09).
|
|
103
|
+
3. **Explore.** On a new screen or flow, a complex or ambiguous surface, or a brief that asks for a
|
|
104
|
+
new look, render two or three alternatives as frames side by side: the main state only, the same
|
|
105
|
+
content and sample data in each, each labelled with a name and a one-line hypothesis.
|
|
106
|
+
- Each alternative is a hypothesis about what this user needs, not a style: on task UI, for
|
|
107
|
+
example, task-first (status and the next action lead), editorial (type and composition carry
|
|
108
|
+
the hierarchy), or expressive-brand (the brand layer leads without slowing the task). Choose
|
|
109
|
+
hypotheses that fit this product; never force three.
|
|
106
110
|
- Make them differ in structure, not paint: every two of them differ on at least two of
|
|
107
|
-
information order
|
|
108
|
-
lives), type class,
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
111
|
+
hierarchy, information order, composition or layout model, navigation or interaction model
|
|
112
|
+
(where the main action lives), and brand expression (type class, colour temperature). The same
|
|
113
|
+
layout in new colours is the same alternative; replace it. Conventions that must hold stay fixed
|
|
114
|
+
in all of them (RX-UX-08).
|
|
115
|
+
- On task UI the brand layer carries one signature from the product's own domain, never a layout
|
|
116
|
+
change for its own sake (RX-UI-12); on an expressive surface the signature can lead.
|
|
117
|
+
- A small change, or a screen inside a fixed design system, skips Explore: say so and continue.
|
|
118
|
+
4. **Evaluate and select.** Rate each alternative against the Frame criteria, Strong, Adequate, or
|
|
119
|
+
Weak with one reason each, rate the evidence (RX-PR-10), and recommend one with a Decision Receipt.
|
|
120
|
+
"It looks better" is not a reason. Then stop and let the user choose. Build only the chosen one
|
|
121
|
+
into the full design (states, widths, Visual Direction, RX-UI-10), write the Design Direction
|
|
122
|
+
below, and mark the others on the canvas as not chosen. When the user has already said to pick for
|
|
123
|
+
them, continue with the recommendation and say so.
|
|
124
|
+
**Modes after the choice.** Refine improves the chosen alternative without losing its hypothesis.
|
|
125
|
+
Reconsider returns to an unchosen alternative when a later finding or new evidence contradicts the
|
|
126
|
+
choice: name the finding, show the alternative again, and let the user decide.
|
|
127
|
+
5. **Design in the tool, then critique it.** Use the Figma MCP or the pen.dev MCP. System first: look for the design
|
|
118
128
|
system that exists (DESIGN.md, a tokens or theme file in the repo, the design file's variables and
|
|
119
129
|
components, a linked library) and build from it. Create only what is missing: variables for color
|
|
120
130
|
roles, spacing, radius, and type sizes and families before the first frame, and components for
|
|
121
131
|
repeated elements (RX-DS-03). Building the system does not replace the states: design every
|
|
122
132
|
state that matters (empty, loading, error, including content that fails to load) and every width
|
|
123
133
|
you claim, and source assets on purpose (RX-UI-13).
|
|
124
|
-
|
|
134
|
+
**Render and inspect.** Screenshot what you made, check it against the direction and the rules,
|
|
125
135
|
fix, and render again (capabilities/qa.md). Count the values still literal (color, spacing,
|
|
126
136
|
radius, type size) and turn each into a variable or name the exception, then run the counts of
|
|
127
|
-
RX-AS-10 (accent hues, grey families, radii, display sizes, icon sets, emoji, invented marks, gradients, labels
|
|
137
|
+
RX-AS-10 (accent hues, grey families, radii, display and text sizes, icon sets, emoji, invented marks, gradients, labels
|
|
128
138
|
per intent) and report them in the gate. Run the four hierarchy
|
|
129
139
|
checks from Critique (control beside its data, primary action that reads as an action, not a tab, no fact
|
|
130
140
|
twice, grouped by what the user checks together), fix what fails, render again, and check each fix.
|
|
131
141
|
Weight ranking: list the screen's blocks in order of visual weight (size × contrast × surface) and
|
|
132
|
-
compare it with the priority order from step
|
|
142
|
+
compare it with the priority order from Frame (step 2). If two blocks of different priority render with the
|
|
133
143
|
same heading style and container, change one. On a checkout or order screen, the choice that sets
|
|
134
144
|
the price and the total rank first and second. A width check is a test, not a deliverable: list
|
|
135
145
|
what broke at each width (wrap, truncation, overflow), fix it or record why it is acceptable, and
|
|
@@ -146,7 +156,7 @@ export const DESIGN_BODY = `# RYUX Design
|
|
|
146
156
|
weaker for the task, and say so when no reference was available. Generated images and illustrations arrive
|
|
147
157
|
asynchronously: wait until each one has landed and render again before exporting or closing the
|
|
148
158
|
gate. Never finish with an asset still pending.
|
|
149
|
-
|
|
159
|
+
6. **Verify and deliver.** Check every product fact on the canvas (tool and command names,
|
|
150
160
|
integrations, platforms, pages, numbers) against the brief or the repo (RX-PR-02). Canvas copy is
|
|
151
161
|
for the team, not for RYUX: annotations, state captions, and labels on the canvas use plain
|
|
152
162
|
language ("Shown while prices load; button disabled"); rule IDs, gate results, and Decision
|
|
@@ -231,12 +241,15 @@ export const BUILD_BODY = `# RYUX Build
|
|
|
231
241
|
|
|
232
242
|
> Implement or change the interface in code, faithfully and in the repo's own stack.
|
|
233
243
|
|
|
244
|
+
Build runs Understand (steps 1-3), Build and critique (4-6), and Verify and deliver (7) of the core
|
|
245
|
+
workflow (SKILL.md); Frame, Explore, and Evaluate happen in Design.
|
|
246
|
+
|
|
234
247
|
1. **Read the repo first**: the stack, components, tokens, conventions, the architecture already
|
|
235
248
|
used (where components, state, pure logic, and data access live), and the test runner
|
|
236
249
|
(knowledge/frontend.md, knowledge/design-system.md). Reuse before creating.
|
|
237
250
|
2. **Find the design source**: the Design Direction, a Figma or pen.dev design, a DESIGN.md, or an
|
|
238
|
-
approved mockup; it is the spec. If there is none, run Design
|
|
239
|
-
instead of inventing one in code.
|
|
251
|
+
approved mockup; it is the spec. If there is none, run Design's Frame, Explore, and Evaluate
|
|
252
|
+
first (capabilities/design.md, steps 2-4) instead of inventing one in code.
|
|
240
253
|
3. **Read the modules the task needs** from the task table: for example accessibility, responsive,
|
|
241
254
|
and edge-cases for any UI, and forms and content for a form. When the build adds motion or
|
|
242
255
|
transitions, read knowledge/ui.md (RX-UI-11) before writing any: how often the surface is seen
|
|
@@ -244,7 +257,8 @@ export const BUILD_BODY = `# RYUX Build
|
|
|
244
257
|
4. **Implement faithfully.** Use semantic elements, existing components, and real data paths.
|
|
245
258
|
Build must not invent business rules, prices, or limits; API behavior or response shapes; or
|
|
246
259
|
data presented as real (RX-FE-02, RX-PR-02). It must not silently change a design decision: a
|
|
247
|
-
change goes back to Design as a new Decision Receipt
|
|
260
|
+
change goes back to Design as a new Decision Receipt, and when the code shows the chosen design
|
|
261
|
+
cannot work (data, platform, performance), say so and send it back to Reconsider. Mark every assumption in the code. Give
|
|
248
262
|
each piece of logic one home in the repo's existing layers, never a copy (RX-FE-13).
|
|
249
263
|
5. **Test what can break.** Unit tests for new or changed pure logic, edge cases included;
|
|
250
264
|
integration tests for critical flows such as checkout, payment, and form submit. Use the
|
|
@@ -500,7 +514,7 @@ focal point, hierarchy, negative space, relation to the copy, and balance (RX-UI
|
|
|
500
514
|
**Expressive surfaces** (hero, landing, onboarding, empty states, brand moments). Restraint keeps
|
|
501
515
|
task UI usable; on expressive surfaces it is only the floor. Work concept, then signature, then
|
|
502
516
|
system:
|
|
503
|
-
1. **Concept**: write three directions first (name, concept, signature), then choose one. The idea
|
|
517
|
+
1. **Concept**: write two or three directions first (name, concept, signature), then choose one. The idea
|
|
504
518
|
comes from the product itself, not from the category: a tool about evidence might use receipts,
|
|
505
519
|
citations, and marks of proof; a calm finance app might use the ledger. The category default
|
|
506
520
|
(a terminal panel for developer tools, a dashboard screenshot for SaaS) is never the signature.
|
|
@@ -663,7 +677,7 @@ Check the stated viewport and the smallest supported width. No horizontal page s
|
|
|
663
677
|
in the repo's own runner. Run them before claiming the work is done.
|
|
664
678
|
|
|
665
679
|
Does not cover: visual decisions (see ryux-ui) or component reuse decisions (see ryux-design-system).`,
|
|
666
|
-
"visual-qa": `Visual QA asks one question: **did the implementation match the intended design?** Whether the
|
|
680
|
+
"visual-qa": `As an entry point, Visual QA is the Verify and deliver stage of the core workflow (SKILL.md) for a build; Design and Build also use its loop in Build and critique. It asks one question: **did the implementation match the intended design?** Whether the
|
|
667
681
|
design itself is good is Critique's question (ryux-critique).
|
|
668
682
|
|
|
669
683
|
**With a reference** (a Figma or pen.dev frame, DESIGN.md, or an approved screenshot):
|
|
@@ -708,7 +722,7 @@ widths) or NOT VERIFIED (why); motion read only from code is NOT VERIFIED.
|
|
|
708
722
|
|
|
709
723
|
**Rank issues by impact**: blocks the task, misleads (wrong numbers, unclear action), adds friction,
|
|
710
724
|
polish.`,
|
|
711
|
-
"anti-slop": `Anti-slop runs
|
|
725
|
+
"anti-slop": `Anti-slop runs in Verify and deliver, after design, build, critique, and QA; it is the final quality gate, never the
|
|
712
726
|
starting point. Anti-slop is the floor, not the ceiling: a tidy, generic surface still fails on expressive
|
|
713
727
|
surfaces (RX-AS-09), and the point of view comes from RX-UI-12. Anti-slop is not a list of banned
|
|
714
728
|
styles. It has three parts.
|
package/dist/render.js
CHANGED
|
@@ -40,7 +40,9 @@ export function deliveryGateTemplate() {
|
|
|
40
40
|
? `${a.padEnd(width)}PASS | FAIL | NOT VERIFIED | N/A · one-line reason · point of view: <concept> | task UI, signature: <signature>`
|
|
41
41
|
: a === "PRODUCT"
|
|
42
42
|
? `${a.padEnd(width)}PASS | FAIL | NOT VERIFIED | N/A · one-line reason · evidence Strong | Thin | None`
|
|
43
|
-
:
|
|
43
|
+
: a === "EDGE CASES"
|
|
44
|
+
? `${a.padEnd(width)}PASS | FAIL | NOT VERIFIED | N/A · one-line reason · then the view × state matrix (RX-EC-01)`
|
|
45
|
+
: `${a.padEnd(width)}PASS | FAIL | NOT VERIFIED | N/A · one-line reason`);
|
|
44
46
|
return `\`\`\`\n${lines.join("\n")}\n\`\`\``;
|
|
45
47
|
}
|
|
46
48
|
function routerBody() {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ryuxdsgn/design-intelligence",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.13.1",
|
|
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": {
|