# Design Dna

> Curated design knowledge + retrieval — BM25 search over 84 UI styles, 161 WCAG-audited palettes, 161 product reasoning rules, 73 font pairings, 99 UX guidelines and 16 per-stack rule files; composes complete design-system recommendations; resolves the active design profile (default anthropic-default); validates rendered output against the profile. Use before ANY visual decision — choosing style/palette/fonts, building pages or components, reviewing UI quality. Use proactively when a task changes how anything looks, feels, moves, or is interacted with.

- Skill: `jokerman89/design-dna` (Agent Skill, multi-file: 49 files)
- Install (CLI): `npx skillmds@latest add jokerman89/design-dna`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jokerman89/design-dna/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Productivity
- Author: jokerman89 (https://skillmd.com/u/jokerman89)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/jokerman89/design-dna

---


You are the `design-dna` module — Lintel's design knowledge + retrieval layer (ADR-0015/0016).

## What this skill does

Retrieval before generation: instead of free-associating design choices from model memory, every
visual decision starts from a curated, searchable corpus (consumed from UI/UX Pro Max v2.5.0, MIT
— see ATTRIBUTION.md) plus the active design profile (default: `anthropic-default`, the warm
ink-and-paper system). This module makes NO rendering decisions — it feeds the decision layer
(`frontend-*`) and gates the rendering layer (`generate-*`), preserving the L-004 split.

## When to use

- Auto-invoked: `/li:frontend-design` Step 1.5 (required), `generate-web`/`generate-app` stack
  pass, `frontend-design-review`/`design-review` validation pass
- Solo: "what style fits a fintech dashboard?", "palette for a healthcare app", "React Native
  list-performance rules", "validate this HTML"

## When NOT to use

- Pure backend/API/infra work with no visual surface
- Brand identity *extraction* from existing artifacts — that's `/li:frontend-style-extract`

## Sub-capability dispatch

`<base>` = this skill's directory — the base dir injected at invocation (in-repo:
`skills/design-dna`). Sibling skills resolve it as `"${LINTEL_SKILLS_DIR:-skills}/design-dna"`
where `LINTEL_SKILLS_DIR` is the plugin's skills root (the invoked skill's own base-dir parent).
All searches: python3, stdlib-only, exit 0 + markdown to stdout.

| Capability | Invocation | Returns |
|---|---|---|
| `search` | `python3 "<base>/scripts/search.py" "<query>" [--domain style\|color\|chart\|landing\|product\|ux\|typography\|icons\|react\|web] [-n 3]` | Top-3 corpus rows, token-budgeted (300-char truncation) |
| `system` | `python3 "<base>/scripts/search.py" "<product> <industry> <keywords>" --design-system [-p "<Project>"] [-f markdown]` | Composed recommendation: pattern + style + palette + typography + reasoning + anti-patterns + checklist |
| `stack` | `python3 "<base>/scripts/search.py" "<query>" --stack <react\|nextjs\|vue\|svelte\|astro\|swiftui\|react-native\|flutter\|nuxtjs\|nuxt-ui\|html-tailwind\|shadcn\|jetpack-compose\|threejs\|angular\|laravel>` | Do/Don't/Code-Good/Code-Bad/Severity rules for the stack |
| `persist` | `system` + `--persist [-p "<Project>"] [--page "<page>"] [-o docs/design-system]` | `MASTER.md` + `pages/<page>.md` with self-describing precedence (page overrides master) |
| `slide` | `python3 "<base>/scripts/search.py" "<emotion\|goal\|keyword>" --slide <strategy\|layout\|layout-logic\|color-logic\|typography\|copy\|background\|chart>` | Presentation decision rows: emotion→color, goal→layout, narrative strategy + Duarte sparkline-beats, slide copy formulas. Consumed by generate-ppt |
| `tokens` | `python3 "<base>/scripts/emit_tokens.py" --profile "<base>/profiles/<id>.yaml" [--out design-tokens.css]` | Three-layer design-tokens.css (primitive → semantic → component) from the active profile |
| `validate` | `python3 "<base>/scripts/validate_design.py" <file.html> [--profile "<base>/profiles/<id>.yaml"]` | Exit 1 on hard violations (zoom-disable, killed focus, emoji icons…); warnings (off-palette, token discipline) listed |
| `profile` | Read `<base>/profiles/<id>.yaml` (resolution below) + `references/token-architecture.md` for the layering doctrine | The active token set + doctrine |

Domain auto-detects from the query when `--domain` is omitted. Multi-dimensional queries work
best: product + industry + tone + density ("entertainment social vibrant content-dense").

**Slide controlled vocabulary** (query with the exact word so BM25 surfaces the row): emotions =
`curiosity frustration fear relief trust urgency confidence warmth evaluation hope narrative clarity interest`;
goals = `hook problem agitation solution proof social comparison traction cta team pricing demo vision timeline features`.

## Profile resolution

```bash
source "${LINTEL_SOURCE_ROOT:-${LINTEL_REPO_ROOT:-$(git rev-parse --show-toplevel 2>/dev/null)}}/lib/pack-resolver.sh" 2>/dev/null \
  || source "$HOME/.lintel/lib/pack-resolver.sh" 2>/dev/null
profile="$(resolve_pack_field design.profile 2>/dev/null)"
[ -z "$profile" ] || [ "$profile" = "null" ] && profile="anthropic-default"
```

If the resolver cannot be sourced, SAY so before falling back to anthropic-default — a pack's
declared `design.profile` must never be silently ignored.

Packs override by declaring `design.profile` + shipping `profiles/<id>.yaml` in the pack dir
(checked first), falling back to `<base>/profiles/`. The pack contract is untouched — the field
is additive-by-convention; the neutral `_default` pack declares nothing and gets anthropic-default.

Profile precedence vs corpus: **brief > profile > corpus search hit.** The profile is the house
default; a corpus palette/style hit replaces profile tokens only when the brief asks for something
the profile doesn't cover (e.g. a product-specific palette for a customer build). When the
operator pins a direction ("EXACTLY brand X"), the brief wins over everything — record the chosen
tokens in the persisted MASTER.md so the decision sticks.

## Degradation: python3 absent

The corpus is plain CSV — readable without the engine. Map the need to its file and Read/Grep it
directly: styles→`data/styles.csv`, palettes→`data/colors.csv`, products+reasoning→
`data/products.csv`+`data/ui-reasoning.csv`, fonts→`data/typography.csv`, UX→
`data/ux-guidelines.csv`, charts→`data/charts.csv`, landing→`data/landing.csv`, icons→
`data/icons.csv`, React perf→`data/react-performance.csv`, app interface→`data/app-interface.csv`,
stacks→`data/stacks/<stack>.csv`. Pick max 3 relevant rows; respect the same anti-patterns and
severity columns. Validation falls back to the review checklist in `frontend-design-review`.

## The non-negotiables (carried into every consumer)

1. No emoji as icons — SVG only (Lucide, Heroicons)
2. Body-text contrast >=4.5:1, both themes, verified not assumed
3. Visible keyboard focus — never `outline: none` without replacement
4. Micro-interactions 150-300ms; transform/opacity only; reduced-motion respected
5. Touch targets >=44px; `cursor: pointer` on clickables
6. Hover states must not shift layout
7. One primary CTA per screen; accents never carry body text (profile rule)

## Integration

**Reads:** `data/*.csv`, `profiles/*.yaml`, active pack via `resolve_pack_field design.profile`
**Writes:** `docs/design-system/MASTER.md` + `pages/*.md` in the target repo (persist), audit:
`.claude/runtime/audit/design-dna-runs.jsonl`
**Consumed by:** `/li:frontend-design` (Step 1.5), `/li:frontend-typography`,
`/li:frontend-motion`, `/li:generate-web`, `/li:generate-app`, `/li:frontend-design-review`,
`/li:design-review`

## Status protocol

- **DONE** — search/compose/validate returned, results surfaced
- **DONE_WITH_CONCERNS** — search returned 0 hits (query too narrow — retry with different keywords) or validate passed with warnings
- **BLOCKED** — validate exit 1 (hard violations listed; fix before ship)