Design core

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.