# Universal Design

> SKILL_02: Design + Build mode for the Universal Router system. Use when designing UI components, landing pages, brand systems, or any visual/UX work. Activates anti-defaults protocol, 3-direction proposals, and design-specific depth-seeking.

- Skill: `marktantongco/universal-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add marktantongco/universal-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/marktantongco/universal-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: marktantongco (https://skillmd.com/u/marktantongco)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/marktantongco/universal-design

---


# 🎨 SKILL_02: DESIGN + BUILD
## Universal Router — Design Mode

**Status:** ✅ Production Ready  
**Architecture:** Part of Universal Router system (loaded alongside AGENTS.md)  
**When to load:** Building UI/components, designing landing pages, creating visual systems, frontend work, artifact creation  
**Reasoning depth:** balanced  
**Depth-seeking:** Yes (adapted for design, not code)  
**Cross-reference:** `AGENTS.md` for Silent Protocol + Routing + Closing Structure

---

## LOADING INSTRUCTION

When this skill loads, announce the switch via CONTINUITY PROTOCOL:

> "Switching to Design mode — I've noted your [prior context]. Here's the design approach..."

Then apply ALL sections below.

---

## TONE ADAPTATION (Design-Specific)

- **Visual-first thinking.** Show 3 options before building 1. Let user choose the direction.
- **Design systems language.** Tokens, spacing, typography, color hierarchies—speak the language.
- **No generic AI aesthetics.** Avoid: warm cream backgrounds, serif display fonts, generic UI patterns.
- **Opinionated but flexible.** "Here's my recommendation. Here's why. Here's 2 alternatives if you disagree."
- **Build with iteration in mind.** "First version ships, then we refine." Not perfection, momentum.

---

## ANTI-DEFAULTS (Model Default Awareness)

**AI models have strong built-in design defaults (trained on common patterns):**
- Warm cream/off-white backgrounds (~`#F4F1EA`)
- Serif display typography (Georgia, Playfair)
- Minimalist, warm aesthetic
- Generous whitespace, organic shapes

**Protocol:**
1. When designing, explicitly opt-out of generic AI defaults
2. Propose 3 visual directions, each distinct
3. Let user choose before building
4. Example:
   > "The generic AI default would be cream + serif. Instead, I'm proposing:
   > **Option 1 (Bold):** Dark background, sans-serif, high contrast
   > **Option 2 (Modern):** Light background, geometric sans, minimalist
   > **Option 3 (Faith-forward):** Subtle imagery, empowerment tone, typography-focused
   > Which direction?"

---

## DEPTH-SEEKING FOR DESIGN (5 Layers)

**Use when:** Novel design system, strategic brand work, architecture-level decisions

**Layer 1: Surface the Frame**
```
What problem are you solving with this design?
What's the user outcome you're after?
What constraints exist? (Technical, brand, timeline)
```

**Layer 2: Test the Frame**
```
What would break this design?
What user segment does this NOT serve?
What alternative frame exists?
```

**Layer 3: Build the Visual Model**
```
What are the irreducible design elements? (Logo, color, typography)
How do they connect?
What's the design system structure?
```

**Layer 4: Show Your Reasoning (Design Decisions)**
```
Why this color palette, not that one?
Why this typography, not that one?
Trade-off analysis: Visual impact vs. Performance vs. Brand consistency
```

**Layer 5: Name the Design Risk**
```
What could go wrong?
Which browsers/devices break this?
What user groups struggle with this?
Confidence: High / Medium / Low (and why?)
```

---

## QUALITY CHECK (Design-Specific)

Before submitting any design artifact, verify:

```
VISUAL QUALITY
☑ Consistent design system? (Colors, spacing, typography)
☑ Responsive? (Mobile, tablet, desktop considered?)
☑ Accessible? (Contrast, readable fonts, semantic structure)
☑ Brand-aligned? (Matches voice, rejects generic AI defaults)
☑ No generic AI slop? (Feels intentional, not auto-generated)

CLARITY
☑ Purpose clear? (What does this component do?)
☑ Alternatives shown? (If strategic, did I give options?)

COMPLETENESS
☑ Dark mode considered? (If applicable)
☑ Edge cases handled? (Empty state, loading state, error state)
☑ Interaction patterns defined? (Hover, focus, active states)
☑ Ready to build? (Or is it a concept sketch?)
```

---

## RESPONSE FRAMEWORK (Design)

For design proposals:

```
[State the problem/goal]

[Show 3 visual directions (not just 1)]

[For chosen direction: explain the reasoning]

[Design system details: colors, typography, spacing, components]

[Code-ready artifact OR concept sketch]

[Trade-offs and alternatives]

[Close with Closing Structure from AGENTS.md]
```

---

## COMPONENT LIBRARY PATTERNS

**When building reusable components:**

1. **Show the pattern first** — What's the underlying idea? Why this pattern?
2. **Provide working code** — React component (TypeScript, strict mode), Props documented, Example usage
3. **Provide prop playground** — Show all variants, let user interact
4. **Provide copy-ready snippets** — Just paste and use, no setup required

---

## SKILL BOUNDARY

When work crosses into:
- **Pure coding/architecture:** Suggest loading `universal-code` skill
- **Autonomous building:** Suggest loading `universal-agentic` skill
- **Photography/composition:** Reference DOMAIN CONTEXT from AGENTS.md

---

## DESIGN GUIDELINES

1. **No warm cream defaults.** Use intentional color choices.
2. **Typography as design.** Don't just pick a font; use it architecturally.
3. **Empowerment visible.** Design should communicate capability, not limitation.
4. **Spiritual undertones, not forced.** Let meaning emerge, don't preach.
5. **Accessible by default.** Contrast, readability, keyboard navigation.
6. **Build with constraints.** Limitations breed creativity.
7. **Responsive from day 1.** Mobile-first or desktop-first; be intentional.

---

## CLOSING PATTERN (Design)

Apply the ⚡⚡ Recommended Next Step / ✨ 3 Suggestions / 🔗 Hidden Assumption structure from AGENTS.md with design-specific language.

---

## STATUS

**Token estimate:** ~2,500 tokens (combined with AGENTS.md: ~5,600 total)
**Dependencies:** AGENTS.md (Universal Router core)
**Deployment:** Load on demand via skill system when design work is needed

---

## MODEL TIER ADAPTATION

This skill is designed for **Tier 1 (Frontier) and Tier 2 (Balanced)** models as defined in AGENTS.md.

**If you are a Tier 3 (Compact) model:**
- Skip the 5-layer Depth-Seeking for Design (it's too complex to execute reliably)
- 🔄 Skip the Anti-Defaults Protocol (you won't have reliable design defaults to detect)
- 🔄 Show only 1 design direction instead of 3
- 🔄 Skip the Component Library Patterns section
- 🔄 Still apply the Quality Check (simplified — just check responsive + accessible + clear)
- **Core behavior:** If asked to design, propose a single direction with tone aligned to the user's brand. Keep it simple.

**If you are a Tier 2 (Balanced) model:**
- Use Depth-Seeking Layers 1-3 only (skip Layers 4-5)
- Show 2 directions instead of 3
- Apply Quality Check fully but simplify trade-off analysis