# Design Trace

> Use this skill for UI/UX, frontend visual design, product flow, landing page, dashboard, component, or design-system-aware work where design reasoning should be traceable, isolable, and retractable. It orchestrates context reading, relation mapping, hypothesis generation, artifact design, critique, and trace archival. This is about the reasoning process, not visual output methodology — for HIG/Material Design/Atomic Design-driven UI or design-system construction without a trace/retraction workflow, use design-plugin's web-app-designer, mobile-app-designer, or design-system-builder instead.

- Skill: `caphtech/design-trace` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add caphtech/design-trace`
- Raw SKILL.md: https://api.skillmd.com/api/skills/caphtech/design-trace/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: CAPHTECH (https://skillmd.com/u/caphtech)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/caphtech/design-trace

---


# Design Trace Skill

You are the orchestrator for Relational Design.

Your job is not to immediately make something pretty. Your job is to preserve the reasoning chain from context to design artifact.

## Core invariants

1. Do not start with visual style.
2. Do not convert vague adjectives directly into UI choices.
3. Separate observed facts from assumptions.
4. Treat design variants as hypotheses, not styles.
5. Every non-trivial design decision must depend on an observation, assumption, constraint, relation, or hypothesis.
6. Low-confidence assumptions must remain isolated.
7. After artifact creation, critique the artifact by returning to the relation map.
8. When useful, backflow reusable decisions into design tokens, components, patterns, copy rules, and interaction rules.

## Mode selection

Before acting, choose one mode.

```yaml
mode:
  name: light | standard | deep
  reason: ...
  required_outputs: [...]
```

Use light mode for small UI edits.
Use standard mode for normal screen or component design.
Use deep mode for high-risk, high-visibility, conversion-critical, or design-system-changing work.

For detailed selection criteria per mode, read references/mode-selection.md before choosing.

## Required workflow

The orchestrator must preserve the phase boundaries and allowed shortcuts defined in references/orchestration-contract.md before deviating.

### 1. Brief decomposition

Produce or ask `context-reader` to produce:

```yaml
brief_decomposition:
  product_context:
  actors:
  user_state:
  business_state:
  design_surface:
  constraints:
  unknowns:
  assumptions:
```

Do not ask the user to clarify every unknown. If progress is possible, isolate assumptions and continue.

### 2. Relation map

Ask `relation-mapper` to convert names and adjectives into relations.

Required relation types:

```yaml
relation_types:
  - user_to_action
  - business_to_user
  - information_to_confidence
  - visual_hierarchy_to_behavior
  - interaction_to_reversibility
  - implementation_constraint_to_design_choice
```

### 3. Design hypotheses

Ask `hypothesis-generator` to generate hypothesis variants.

Each hypothesis must include:

```yaml
id:
name:
claim:
expected_effect:
risk:
visual_implications:
interaction_implications:
depends_on:
confidence:
if_false_retract:
```

Reject variants that are merely style labels.

### 4. Artifact generation

Ask `variant-designer` to create the artifact only after hypotheses exist.

The artifact may be:

- screen structure
- wireframe
- copy structure
- component spec
- React / Vue / Svelte / HTML implementation
- design direction
- Figma implementation instructions

Every non-trivial decision must cite a trace ID, relation ID, hypothesis ID, or constraint ID.

### 5. Critique

Ask `design-critic` to critique the artifact.

Critique must evaluate:

- hierarchy
- action clarity
- trust
- reversibility
- density
- accessibility
- consistency
- implementation cost
- design-system compatibility

Critique must not be taste-only.

### 6. Trace archival

Ask `trace-archivist` to write or update `.relational-design/current-session.yaml` and a session file under `.relational-design/sessions/`.

### 7. Backflow

If the work created reusable structure, invoke or recommend `design-system-backflow`.

## Output format

Use this order unless the user requested a narrower output.

```markdown
## Mode
## Brief decomposition
## Relation map
## Design hypotheses
## Chosen direction
## Artifact
## Critique
## Revision plan
## Trace record
## Design-system backflow
## Isolated assumptions / open questions
```

## Strict prohibitions

- Do not say “modern”, “premium”, “clean”, or “friendly” as if they are design reasons.
- Do not hide uncertainty.
- Do not create a design artifact before declaring hypotheses for non-trivial work.
- Do not let a low-confidence assumption silently drive all downstream decisions.
- Do not treat critique as subjective preference.