Design Core
Shared model for the design cluster. The methodology, system, and engineering spokes all
depend on these concepts — keep them consistent here so no spoke contradicts another.
1. The defining decision: research-first, not generate-from-defaults
A design is grounded, never averaged. The failure mode of an AI designer is reaching for
its mean output ("AI slop"): centered hero, generic SaaS gradient, default shadows, Inter at
three sizes. The cluster exists to prevent that. Every design follows one direction of flow:
Research references ──> Lock a direction ──> Record decisions (ledger) ──> Generate ──> Check against the slop gate
- Research — find concrete references before touching layout.
refero-design makes this mandatory; ui-ux-pro-max supplies a searchable database when live references are thin.
- Lock — commit to one visual direction (a reference set, a system like Swiss, or a brand). Don't blend three.
- Ledger — write down each non-obvious choice and why (the reference it came from). This is what makes the result defensible and editable.
- Gate — before shipping, check the output against the anti-averaging gate in §5.
Rule: when the ask is "make it look good," that means find references and commit to a
direction — not improvise from defaults. Skipping research is the one thing that breaks the cluster.
2. Conventions every spoke shares
- Type on a scale (modular, e.g. 1.25×), not arbitrary px; limit families; weight and size carry hierarchy.
- Space on a system (4 / 8 px rhythm); whitespace is a design choice, not leftover.
- Color as tokens with explicit roles (primary / secondary / surface / text), enough contrast for accessibility; opacity for hierarchy over new hues.
- Motion is purposeful and hardware-accelerated (
transform/opacity), never decorative jank.
- Tokens (color, type, spacing) are the contract between brand extraction, theming, and build — keep one source of truth.
3. Deliverable types & ownership
The frontend is the eventual surface; these spokes own different stages before it:
- Methodology / research →
refero-design (default), ui-ux-pro-max (DB), swiss-design (a ready system).
- Engineering / spec →
taste-skill (senior rules + perf), stitch-design-taste (emits an enforceable DESIGN.md).
- Workflow →
superdesign (drafts, branch iterations, multi-page flows).
- Artifact theming →
theme-factory (slides/docs/HTML).
- Static art →
canvas-design (.png/.pdf).
- Brand input →
openbrand (logos/colors/name from a URL → tokens).
4. Capability matrix
| I need to… |
Spoke |
Output |
| Design a product UI, grounded in references |
refero-design |
layout + rationale |
| Pick styles / palettes / fonts / charts per stack |
ui-ux-pro-max |
design-intelligence lookups |
| Apply an opinionated modernist system |
swiss-design |
Tailwind Swiss styling |
| Hit a senior engineering bar (rules + perf) |
taste-skill |
component architecture |
| Emit a reusable anti-generic spec file |
stitch-design-taste |
DESIGN.md |
| Iterate drafts / variations / extra pages |
superdesign |
design-agent run |
| Theme slides / docs / reports / HTML |
theme-factory |
applied theme |
| Make a poster / print-ready art piece |
canvas-design |
.png / .pdf |
| Extract a brand from a URL |
openbrand |
brand tokens |
5. The anti-AI-slop quality gate
Before calling a design done, check it does not read as default AI output:
- Did it start from a real reference, or from the model's mean? (References required.)
- Is there a point of view — one direction committed to — or a blend of three?
- Are type, space, and color on a system, or ad-hoc?
- Is there intentional asymmetry / tension, or just a centered column with a gradient?
- Could you defend each choice from the ledger?
If any answer is "default," return to §1 step 1.
6. Conventions / scope
- Most spokes are stack-agnostic craft;
ui-ux-pro-max carries stack-specific data (React, Next, Vue, Svelte, SwiftUI, RN, Flutter, Tailwind), and swiss-design targets Tailwind.
openbrand depends on an external MCP/npm service for live extraction — treat it as the input edge that feeds tokens into the rest of the cluster.
7. Shared guardrails
- Research before generation; never average from defaults.
- Commit to one direction; don't blend references.
- Keep type / space / color on a system with explicit tokens.
- Record non-obvious choices in the decision ledger with their source.
- Run the slop gate (§5) before shipping any user-facing surface.
- Motion and effects must be purposeful and performant — no decorative jank.
1---2name: design-core3description: Shared reference for the design cluster: the one decision every design turns on — research-first vs generate-from-defaults — plus the decision ledger, type/space/color conventions, the spoke capability matrix, and the anti-AI-slop quality gate. USE WHEN designing, styling, or polishing any UI or visual artifact and choosing how to ground the work before generating pixels.4---56# Design Core78Shared model for the `design` cluster. The methodology, system, and engineering spokes all9depend on these concepts — keep them consistent here so no spoke contradicts another.1011## 1. The defining decision: research-first, not generate-from-defaults1213A design is **grounded**, never averaged. The failure mode of an AI designer is reaching for14its mean output ("AI slop"): centered hero, generic SaaS gradient, default shadows, Inter at15three sizes. The cluster exists to prevent that. Every design follows one direction of flow:1617```18Research references ──> Lock a direction ──> Record decisions (ledger) ──> Generate ──> Check against the slop gate19```2021- **Research** — find concrete references before touching layout. `refero-design` makes this mandatory; `ui-ux-pro-max` supplies a searchable database when live references are thin.22- **Lock** — commit to one visual direction (a reference set, a system like Swiss, or a brand). Don't blend three.23- **Ledger** — write down each non-obvious choice and *why* (the reference it came from). This is what makes the result defensible and editable.24- **Gate** — before shipping, check the output against the anti-averaging gate in §5.2526**Rule:** when the ask is "make it look good," that means *find references and commit to a27direction* — not improvise from defaults. Skipping research is the one thing that breaks the cluster.2829## 2. Conventions every spoke shares3031- **Type** on a scale (modular, e.g. 1.25×), not arbitrary px; limit families; weight and size carry hierarchy.32- **Space** on a system (4 / 8 px rhythm); whitespace is a design choice, not leftover.33- **Color** as tokens with explicit roles (primary / secondary / surface / text), enough contrast for accessibility; opacity for hierarchy over new hues.34- **Motion** is purposeful and hardware-accelerated (`transform`/`opacity`), never decorative jank.35- **Tokens** (color, type, spacing) are the contract between brand extraction, theming, and build — keep one source of truth.3637## 3. Deliverable types & ownership3839The frontend is the eventual surface; these spokes own different *stages* before it:4041- **Methodology / research** → `refero-design` (default), `ui-ux-pro-max` (DB), `swiss-design` (a ready system).42- **Engineering / spec** → `taste-skill` (senior rules + perf), `stitch-design-taste` (emits an enforceable `DESIGN.md`).43- **Workflow** → `superdesign` (drafts, branch iterations, multi-page flows).44- **Artifact theming** → `theme-factory` (slides/docs/HTML).45- **Static art** → `canvas-design` (`.png`/`.pdf`).46- **Brand input** → `openbrand` (logos/colors/name from a URL → tokens).4748## 4. Capability matrix4950| I need to… | Spoke | Output |51|---|---|---|52| Design a product UI, grounded in references | `refero-design` | layout + rationale |53| Pick styles / palettes / fonts / charts per stack | `ui-ux-pro-max` | design-intelligence lookups |54| Apply an opinionated modernist system | `swiss-design` | Tailwind Swiss styling |55| Hit a senior engineering bar (rules + perf) | `taste-skill` | component architecture |56| Emit a reusable anti-generic spec file | `stitch-design-taste` | `DESIGN.md` |57| Iterate drafts / variations / extra pages | `superdesign` | design-agent run |58| Theme slides / docs / reports / HTML | `theme-factory` | applied theme |59| Make a poster / print-ready art piece | `canvas-design` | `.png` / `.pdf` |60| Extract a brand from a URL | `openbrand` | brand tokens |6162## 5. The anti-AI-slop quality gate6364Before calling a design done, check it does **not** read as default AI output:6566- Did it start from a **real reference**, or from the model's mean? (References required.)67- Is there a **point of view** — one direction committed to — or a blend of three?68- Are type, space, and color on a **system**, or ad-hoc?69- Is there **intentional asymmetry / tension**, or just a centered column with a gradient?70- Could you **defend each choice** from the ledger?7172If any answer is "default," return to §1 step 1.7374## 6. Conventions / scope7576- Most spokes are **stack-agnostic** craft; `ui-ux-pro-max` carries stack-specific data (React, Next, Vue, Svelte, SwiftUI, RN, Flutter, Tailwind), and `swiss-design` targets Tailwind.77- `openbrand` depends on an external MCP/npm service for live extraction — treat it as the *input* edge that feeds tokens into the rest of the cluster.7879## 7. Shared guardrails8081- **Research before generation**; never average from defaults.82- Commit to **one** direction; don't blend references.83- Keep type / space / color on a **system** with explicit tokens.84- Record non-obvious choices in the **decision ledger** with their source.85- Run the **slop gate** (§5) before shipping any user-facing surface.86- Motion and effects must be purposeful and performant — no decorative jank.
Sheshiyer