# Design Core

> 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.

- Skill: `sheshiyer/design-core` (Agent Skill)
- Install (CLI): `npx skillmds@latest add sheshiyer/design-core`
- Raw SKILL.md: https://api.skillmd.com/api/skills/sheshiyer/design-core/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Research & Search
- Author: Sheshiyer (https://skillmd.com/u/sheshiyer)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/sheshiyer/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.