From ca4f39e01d9a5850764d689a8de893659d7ccb78 Mon Sep 17 00:00:00 2001 From: Abdul Wahab Date: Wed, 29 Jul 2026 17:33:41 +0500 Subject: [PATCH] update --- picker/pages/index.astro | 193 +++++++++++- picker/scripts/palette-picker.js | 21 ++ picker/styles/picker.css | 506 ++++++++++++++++++++++++++++++- skill/reference/visual-cues.md | 2 + 4 files changed, 712 insertions(+), 10 deletions(-) diff --git a/picker/pages/index.astro b/picker/pages/index.astro index 11d8bf9bb..bc77273d0 100644 --- a/picker/pages/index.astro +++ b/picker/pages/index.astro @@ -39,6 +39,38 @@ const iconRows = iconPacks.packs.map((pack) => ({ meta: `${pack.grid} grid / ${pack.weight} / ${pack.license}`, })); +// The four kinds of surface a design system can be asked to serve, straight +// from the skill's modes. Values travel as `surface-modes` (multi-select); +// the agent pre-checks what PRODUCT.md suggests via cues.json, and the +// visitor corrects it. Persuade is the markup default so the answer can +// never arrive empty on runs whose cues carry no hint. +const surfaces = [ + { + value: 'persuade', + title: 'Persuade', + goal: 'Grab attention and move people to act.', + examples: ['Landing pages', 'Marketing', 'Campaigns', 'Pricing'], + }, + { + value: 'operate', + title: 'Operate', + goal: 'Feel familiar so work gets done fast.', + examples: ['App UI', 'Dashboards', 'Admin', 'Settings'], + }, + { + value: 'read', + title: 'Read', + goal: 'Get out of the way of understanding.', + examples: ['Docs', 'Articles', 'Guides', 'Changelogs'], + }, + { + value: 'experience', + title: 'Experience', + goal: 'Be the work itself.', + examples: ['Portfolios', 'Galleries', 'Showcases'], + }, +]; + // The five questions that are answered by looking at the same wireframe page. // Each one only rewrites the artboard slots it owns, so by the last screen the // page is showing every decision made before it. Motion is the one question @@ -251,6 +283,157 @@ const questions = [ + +