@ryuxdsgn/design-intelligence 2.7.1 → 2.8.1

package/dist/cli/index.js

@@ -133,9 +133,10 @@ async function runInstall(flags) {
             return;
         }
         p.intro(pc.bgCyan(pc.black(" RYUX ")));
+        p.log.message(KEY_LEGEND);
         const detected = agentsAt(scope, false);
         const a = await p.multiselect({
-            message: `Which agents do you use?${keys("↑/↓ move", "Space select", "a all", "Enter continue", "Ctrl+C cancel")}`,
+            message: "Which agents do you use? Pick any (a selects all).",
             options: [
                 ...AGENT_TARGETS.map((x) => ({ value: x.id, label: x.label, hint: scope.global ? `~/${x.globalDir}` : x.dir })),
                 { value: AGENTS_MD_INLINE.id, label: AGENTS_MD_INLINE.label, hint: "AGENTS.md" },
@@ -145,11 +146,8 @@ async function runInstall(flags) {
         });
         if (p.isCancel(a))
             return cancel();
-        const m = await p.confirm({ message: `Show how to connect the ryux MCP?${keys(YES_NO, "Enter continue")}`, initialValue: false });
-        if (p.isCancel(m))
-            return cancel();
         agents = a;
-        showMcp = Boolean(m);
+        showMcp = false;
     }
     if (scope.global && agents.includes(AGENTS_MD_INLINE.id)) {
         console.log(pc.yellow("agents-md is project-only; skipped for --global."));
@@ -170,7 +168,7 @@ async function runInstall(flags) {
     if (nonInteractive)
         return;
     if (!scope.global) {
-        const s = await p.confirm({ message: `Set up project context now? Every question can be skipped.${keys(YES_NO, "Enter continue")}`, initialValue: true });
+        const s = await p.confirm({ message: "Set up project context now? Every question can be skipped.", initialValue: true });
         if (p.isCancel(s))
             return cancel();
         if (s && !(await setupInteractive(scope.root)))
@@ -216,7 +214,7 @@ async function runRemove(flags) {
         return;
     }
     if (!flags.yes) {
-        const ok = await p.confirm({ message: `Remove RYUX from ${scope.global ? "your home directory" : "this project"}?${keys(YES_NO, "Enter confirm")}` });
+        const ok = await p.confirm({ message: `Remove RYUX from ${scope.global ? "your home directory" : "this project"}?` });
         if (p.isCancel(ok) || !ok) {
             console.log("Cancelled.");
             return;
@@ -313,11 +311,11 @@ function detectContext(root) {
     ];
     return { name, system: candidates.filter((c) => existsSync(join(root, c))) };
 }
-/** A choice whose value is empty means "not decided": the field stays unknown. */
+/** Every question also offers "Write my own" and "Skip, leave unknown"; a skipped field stays unknown. */
 const CONTEXT_FIELDS = [
     {
         label: "Product", hint: "(what it does, in one sentence:)",
-        ask: { flag: "product", group: "Project", question: "What kind of product is it?", options: [
+        ask: { flag: "product", group: "Project", question: "What kind of product is it?", example: "Ticketing for local events", options: [
                 { value: "Online store", label: "Online store" },
                 { value: "Payments or finance", label: "Payments or finance" },
                 { value: "Marketplace", label: "Marketplace" },
@@ -329,18 +327,17 @@ const CONTEXT_FIELDS = [
     },
     {
         label: "Current work", hint: "",
-        ask: { flag: "work", group: "Project", question: "What are you building right now?", options: [
+        ask: { flag: "work", group: "Project", question: "What are you building right now?", example: "The checkout flow", options: [
                 { value: "A new product", label: "A new product" },
                 { value: "A new feature", label: "A new feature" },
                 { value: "A new screen", label: "A new screen" },
                 { value: "An existing flow", label: "An existing flow", hint: "changing something that already exists" },
                 { value: "A redesign", label: "A redesign" },
-                { value: "", label: "Not decided yet", hint: "stays unknown" },
             ] },
     },
     {
         label: "Audience", hint: "",
-        ask: { flag: "audience", group: "Project", question: "Who is it for?", options: [
+        ask: { flag: "audience", group: "Project", question: "Who is it for?", example: "Freelancers who send invoices", options: [
                 { value: "Consumers", label: "Consumers", hint: "people using it for themselves" },
                 { value: "Small business owners", label: "Small business owners" },
                 { value: "Professionals at work", label: "Professionals at work" },
@@ -350,11 +347,10 @@ const CONTEXT_FIELDS = [
     },
     {
         label: "Market and locale", hint: "(for example Indonesia, id-ID, Rupiah; or global, en-US, USD)",
-        ask: { flag: "market", group: "Project", question: "Where is it used? This sets language and currency.", options: [
+        ask: { flag: "market", group: "Project", question: "Where is it used? This sets language and currency.", example: "Malaysia (ms-MY, MYR)", options: [
                 { value: "Global, several markets", label: "Global, several markets" },
                 { value: "Indonesia (id-ID, IDR)", label: "Indonesia", hint: "id-ID, Rupiah" },
                 { value: "United States (en-US, USD)", label: "United States", hint: "en-US, US dollar" },
-                { value: "", label: "Not decided yet", hint: "stays unknown" },
             ] },
     },
     { label: "Brand and design system", hint: "" },
@@ -362,19 +358,20 @@ const CONTEXT_FIELDS = [
     { label: "Evidence sources", hint: "RYUX MCP (not available yet), Figma files, reference URLs:" },
     {
         label: "Constraints", hint: "platforms, accessibility target (for example WCAG 2.2 AA), what must not change:",
-        ask: { flag: "constraints", group: "Project", question: "What must RYUX keep or support?", multi: true, options: [
+        ask: { flag: "constraints", group: "Project", question: "Where does it run?", example: "Tablet app for shop staff", options: [
                 { value: "Mobile app", label: "Mobile app" },
-                { value: "Web", label: "Web" },
-                { value: "Responsive web", label: "Responsive web", hint: "one site for phone and desktop" },
+                { value: "Responsive website", label: "Website", hint: "phone and desktop" },
+                { value: "Desktop website", label: "Desktop website" },
                 { value: "Web and mobile app", label: "Web and mobile app" },
-                { value: "Existing design system", label: "Existing design system" },
-                { value: "Existing brand identity", label: "Existing brand identity" },
-                { value: "Accessibility, WCAG 2.2 AA", label: "Accessibility", hint: "WCAG 2.2 AA" },
-            ] },
+            ], then: { question: "What must stay as it is? Pick any.", example: "Our current logo and colours", multi: true, options: [
+                    { value: "Existing design system", label: "Existing design system" },
+                    { value: "Existing brand identity", label: "Existing brand identity" },
+                    { value: "Accessibility (WCAG 2.2 AA)", label: "Accessibility", hint: "WCAG 2.2 AA" },
+                ] } },
     },
     {
         label: "Design intent", hint: "(what users should understand, feel, and do)",
-        ask: { flag: "intent", group: "Design", question: "What should people get from it?", options: [
+        ask: { flag: "intent", group: "Design", question: "What should people get from it?", example: "Know when their order arrives", options: [
                 { value: "Understand their status at a glance", label: "Understand their status at a glance" },
                 { value: "Finish a task quickly", label: "Finish a task quickly" },
                 { value: "Feel safe and in control", label: "Feel safe and in control" },
@@ -383,7 +380,7 @@ const CONTEXT_FIELDS = [
     },
     {
         label: "UX direction", hint: "",
-        ask: { flag: "ux", group: "Design", question: "How should the experience help users?", options: [
+        ask: { flag: "ux", group: "Design", question: "How should the experience help users?", example: "Works one-handed at a shop counter", options: [
                 { value: "Fast for people who use it often", label: "Fast for people who use it often" },
                 { value: "Clear for people using it for the first time", label: "Clear for people using it for the first time" },
                 { value: "Easy to scan and understand", label: "Easy to scan and understand" },
@@ -392,7 +389,7 @@ const CONTEXT_FIELDS = [
     },
     {
         label: "UI direction", hint: "(character, for example calm, trustworthy, restrained)",
-        ask: { flag: "ui", group: "Design", question: "What character should it have? A character, not colors or fonts. Pick up to 3.", multi: true, max: 3, options: [
+        ask: { flag: "ui", group: "Design", question: "What character should it have? A character, not colors or fonts. Pick up to 3.", example: "Warm, precise", multi: true, max: 3, options: [
                 { value: "Calm", label: "Calm" },
                 { value: "Trustworthy", label: "Trustworthy" },
                 { value: "Friendly", label: "Friendly" },
@@ -405,7 +402,7 @@ const CONTEXT_FIELDS = [
     },
     {
         label: "Motion direction", hint: "(feel, what motion communicates, what to avoid)",
-        ask: { flag: "motion", group: "Design", question: "How much motion?", options: [
+        ask: { flag: "motion", group: "Design", question: "How much motion?", example: "Only to confirm a payment went through", options: [
                 { value: "No motion unless necessary", label: "No motion unless necessary" },
                 { value: "Subtle, only to show change", label: "Subtle, only to show change" },
                 { value: "Expressive, part of the brand", label: "Expressive, part of the brand" },
@@ -472,19 +469,17 @@ async function writeContext(root, answers) {
     await upsertBlock(path, body, CONTEXT_MARKS);
     return body;
 }
-/** A dim second line under a prompt's question: which keys move, select, and what Enter does here. */
-function keys(...parts) {
-    return `\n${pc.gray("│")}  ${pc.dim(parts.join(" · "))}`;
-}
-const YES_NO = "←/→ or y/n choose";
-const TEXT_KEYS = "Type, then Enter save (empty skips)";
+/** The text box hint: an example answer, and that an empty Enter skips. */
+const typed = (example) => `e.g. ${example} · empty Enter skips`;
+/** Shown once at the start, not under every question (it stayed on screen after each answer). */
+const KEY_LEGEND = pc.dim("↑/↓ move · Space select · Enter continue · Ctrl+C cancel");
 const OWN = "\u0000own";
 const KEEP = "\u0000keep";
 const SKIP = "\u0000skip";
 /** One select: Keep (when set), the choices, Write my own, Skip. Returns "" for skip, null on cancel. */
-async function askOne(question, options, current) {
+async function askOne(question, options, current, example) {
     const v = await p.select({
-        message: `${question}${keys("↑/↓ move", "Enter choose and go on")}`,
+        message: question,
         options: [
             ...(current ? [{ value: KEEP, label: `Keep: ${current}` }] : []),
             ...options.map((o) => ({ value: o.value || SKIP, label: o.label, hint: o.hint })),
@@ -498,19 +493,19 @@ async function askOne(question, options, current) {
     if (v === KEEP || v === SKIP)
         return "";
     if (v === OWN) {
-        const t = await p.text({ message: `${question}${keys(TEXT_KEYS)}`, placeholder: "Enter to skip" });
+        const t = await p.text({ message: question, placeholder: typed(example) });
         return p.isCancel(t) ? null : (t ?? "").trim();
     }
     return v;
 }
 /** A multiselect: pick any, or none to skip. Returns "" for skip, null on cancel. */
-async function askMany(question, options, current, max) {
+async function askMany(question, options, current, example, max) {
     const parts = current ? current.split(",").map((x) => x.trim()).filter(Boolean) : [];
     const known = options.map((o) => o.value);
     const custom = parts.filter((x) => !known.includes(x)).join(", ");
     for (;;) {
         const v = await p.multiselect({
-            message: `${question}${keys("↑/↓ move", "Space select", "Enter go on (nothing selected skips)")}`,
+            message: question,
             options: [
                 ...(custom ? [{ value: KEEP, label: `Keep: ${custom}` }] : []),
                 ...options.map((o) => ({ value: o.value, label: o.label, hint: o.hint })),
@@ -526,7 +521,7 @@ async function askMany(question, options, current, max) {
         if (picked.includes(KEEP))
             values.push(custom);
         if (picked.includes(OWN)) {
-            const t = await p.text({ message: `${question}${keys(TEXT_KEYS)}`, placeholder: "Enter to skip" });
+            const t = await p.text({ message: question, placeholder: typed(example) });
             if (p.isCancel(t))
                 return null;
             if (t?.trim())
@@ -551,12 +546,26 @@ async function askContext(root) {
             p.log.step(group === "Project" ? "Project setup" : "Design setup");
         }
         const current = fieldValue(body, f);
-        const v = ask.multi ? await askMany(ask.question, ask.options, current, ask.max) : await askOne(ask.question, ask.options, current);
+        if (ask.then) {
+            // Two questions, one field: split what is stored between them, and keep a part that is skipped.
+            const parts = current.split(",").map((x) => x.trim()).filter(Boolean);
+            const first = parts.find((x) => ask.options.some((o) => o.value === x)) ?? "";
+            const rest = parts.filter((x) => x !== first).join(", ");
+            const a = await askOne(ask.question, ask.options, first, ask.example);
+            if (a === null)
+                return null;
+            const b = ask.then.multi ? await askMany(ask.then.question, ask.then.options, rest, ask.then.example) : await askOne(ask.then.question, ask.then.options, rest, ask.then.example);
+            if (b === null)
+                return null;
+            answers[f.label] = [a || first, b || rest].filter(Boolean).join(", ");
+            continue;
+        }
+        const v = ask.multi ? await askMany(ask.question, ask.options, current, ask.example, ask.max) : await askOne(ask.question, ask.options, current, ask.example);
         if (v === null)
             return null;
         answers[f.label] = v;
         if (f.label === "Product" && v) {
-            const t = await p.text({ message: `In one sentence, what does it do?${keys(TEXT_KEYS)}`, placeholder: "Enter to skip" });
+            const t = await p.text({ message: "In one sentence, what does it do?", placeholder: typed("A wallet for paying at shops by QR and sending money to friends") });
             if (p.isCancel(t))
                 return null;
             if (t?.trim())
@@ -599,6 +608,7 @@ async function runSetup(flags) {
         return;
     }
     p.intro(pc.bgCyan(pc.black(" RYUX setup ")));
+    p.log.message(KEY_LEGEND);
     if (!(await setupInteractive(root)))
         return cancel();
     p.outro(`RYUX is ready. Next: ${CLI_CMD} check`);

package/dist/intelligence/content.js

@@ -710,11 +710,11 @@ export const RULES = [
             title: "Tokens over one-off values",
             level: "preferred",
             gate: "lock",
-            do: "Use tokens or variables for color, spacing, radius, elevation, and type.",
-            dont: "Hard-code one-off values for things the system already defines.",
-            why: "Tokens keep changes consistent and reviewable.",
-            basis: "W3C Design Tokens Community Group",
-            check: "review",
+            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.",
+            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.",
+            why: "Tokens keep changes consistent and reviewable; values that are not tokens drift from frame to frame and state to state.",
+            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",
+            check: "count literal values after render; review",
         },
         {
             num: 5,

package/dist/intelligence/guides.js

@@ -94,11 +94,17 @@ export const DESIGN_BODY = `# RYUX Design
    Direction (RX-UI-12, RX-UI-10). On task UI, follow conventions and the design system.
 5. **Read the modules the task needs** from the task table, for example ux, interaction, forms, and
    content for a form, or ui and responsive for a layout.
-6. **Design in the tool.** Use the Figma MCP or the pen.dev MCP. Design every state that matters
-   (empty, loading, error) and every width you claim, and source assets on purpose (RX-UI-13).
+6. **Design in the tool.** Use the Figma MCP or the pen.dev MCP. System first: look for the design
+   system that exists (DESIGN.md, a tokens or theme file in the repo, the design file's variables and
+   components, a linked library) and build from it. Create only what is missing: variables for color
+   roles, spacing, radius, and type sizes and families before the first frame, and components for
+   repeated elements (RX-DS-03). Building the system does not replace the states: design every
+   state that matters (empty, loading, error, including content that fails to load) and every width
+   you claim, and source assets on purpose (RX-UI-13).
 7. **Render and inspect.** Screenshot what you made, check it against the direction and the rules,
-   fix, and render again (capabilities/qa.md). List where the render differs from the Design
-   Direction (hierarchy, states, widths) and fix or record each one. Check the result against the Liveliness you set, and
+   fix, and render again (capabilities/qa.md). Count the values still literal (color, spacing,
+   radius, type size) and turn each into a variable or name the exception. List where the render
+   differs from the Design Direction (hierarchy, states, widths) and fix or record each one. Check the result against the Liveliness you set, and
    put each prominent or decorative element through the purpose gate (RX-AS-05: purpose,
    contribution, necessity); on calm task UI, deliberate restraint is a valid answer. Then judge the main state as a
    reviewer would, not as a checklist: rate Clarity, Hierarchy, and Specificity from the Design Read
@@ -524,8 +530,11 @@ Does not cover: component reuse and tokens (see ryux-design-system).`,
 **Quality Locks** to keep across the product: spacing, typography, color roles, terminology,
 components, interaction patterns and states, responsive behavior, and visual hierarchy.
 
-If the project has no system yet, define the smallest token set the screen needs and use it
-consistently. Do not introduce a component library the project does not use.`,
+Look for the existing system before defining one: DESIGN.md, a tokens or theme file in the repo, the
+design file's variables and components, or a linked library. If the project has no system yet, define
+the smallest token set the screen needs and use it consistently: color roles, a spacing scale, a
+radius scale, and a type scale, not color alone. After rendering, count the literal values left and
+convert them (RX-DS-03). Do not introduce a component library the project does not use.`,
     accessibility: `Accessibility is product quality, not an enhancement. Check:
 
 - **Semantics**: real headings, landmarks, lists, buttons, links, labels.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ryuxdsgn/design-intelligence",
-  "version": "2.7.1",
+  "version": "2.8.1",
   "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.",
   "type": "module",
   "bin": {