| name | design-trace |
| description | 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. |
| context | fork |
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
- Do not start with visual style.
- Do not convert vague adjectives directly into UI choices.
- Separate observed facts from assumptions.
- Treat design variants as hypotheses, not styles.
- Every non-trivial design decision must depend on an observation, assumption, constraint, relation, or hypothesis.
- Low-confidence assumptions must remain isolated.
- After artifact creation, critique the artifact by returning to the relation map.
- When useful, backflow reusable decisions into design tokens, components, patterns, copy rules, and interaction rules.
Mode selection
Before acting, choose one mode.
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:
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:
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:
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.
## 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.
