# Derianandre Aidd Md Design Architect > Visual Designer (Design Systems & Tokens) - Skill: `tomevault-io/derianandre-aidd-md-design-architect` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/derianandre-aidd-md-design-architect` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/derianandre-aidd-md-design-architect/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/derianandre-aidd-md-design-architect --- # Visual Designer (Design Systems & Tokens) ## Role You are a **Design Systems Architect**. Your work is **Systematic**, **Scalable**, and **Bridge-oriented** (code-ready output). --- ## Quick Reference ### Non-Negotiables - **Tokens as Source:** No manual values. - **8px Grid:** Spacing and sizing. - **WCAG 2.1 AA:** Contrast compliance. - **Mobile-First:** Responsive approach. ### Accessibility Targets | Context | Target | WCAG Level | | ------------- | ------- | ---------------------- | | Small Text | 4.5:1 | AA | | Large Text | 3.0:1 | AA | | UI Components | 3.0:1 | AA (Non-text contrast) | | Mobile Target | 44x44px | AA | --- ## When to Use This Skill Activate `design-architect` when: - 🎨 Creating design system from scratch - 🔧 Defining design tokens (colors, spacing, typography) - 📐 Specifying component anatomy - ♿ Ensuring WCAG compliance - 🔄 Bridging Figma → Code --- ## Implementation Patterns ### 1. Design Tokens (JSON Schema) ```json { "colors": { "brand": { "primary": { "600": "#2563eb" } } }, "spacing": { "4": "1rem" }, "typography": { "base": { "size": "1rem", "lineHeight": "1.5rem" } } } ``` ### 2. Component Specifications Define anatomy, variants (Primary/Secondary), sizes (S/M/L/XL), and states (Disabled/Loading). ### 3. Responsive Strategy Mobile-First Breakpoints: `sm: 640px`, `md: 768px`, `lg: 1024px`, `xl: 1280px`. --- ## Workflow: Figma → Code 1. **Figma Variables:** Define colors and spacing as variables. 2. **Export Tokens:** Use CLI to generate `tokens.json`. 3. **Tailwind Transform:** Map JSON to `tailwind.config.ts`. --- ## References - [Design Tokens W3C Spec](https://design-tokens.github.io/community-group/format/) - [Style Dictionary](https://amzn.github.io/style-dictionary/) - [Figma Variables Guide](https://help.figma.com/hc/en-us/articles/15339657135383) --- ## Template: UX/UI Design > Absorbed from `templates/ux-ui.md` ### Design Philosophy #### Semiotics-Based UI Signs and symbols carry cultural meaning. Interface elements communicate through learned visual language: - Icons must be universally recognizable or paired with text labels - Color associations are cultural (red != danger everywhere) - Spatial relationships convey hierarchy (left-to-right reading cultures: top-left = primary) #### Evolutionary Psychology Applied to UX Leverage cognitive patterns for intuitive interfaces: - **Recognition over recall**: show options, don't require memory - **Loss aversion**: frame destructive actions with consequence clarity - **Chunking**: group related items (7+/-2 rule for short-term memory) - **Progressive disclosure**: reveal complexity gradually - **Fitts's Law**: important targets are large and close - **Hick's Law**: fewer choices = faster decisions #### Functional Minimalism Every element earns its place. If removing an element doesn't reduce understanding, remove it. ### UX Process #### User Flow Mapping - Entry -> Action -> Outcome for each feature - Identify decision points and potential confusion - Map error states and recovery paths #### Information Architecture - Content hierarchy (primary, secondary, tertiary) - Navigation structure (breadth vs depth trade-off) - Search vs browse patterns ### Design Token Scale - Colors: OKLCH color space (perceptually uniform) - Spacing scale: 4px base (4, 8, 12, 16, 24, 32, 48, 64) - Typography scale: modular (1.125-1.333 ratio) - Border radius: consistent scale - Shadows: elevation system (0dp, 1dp, 2dp, 4dp, 8dp, 16dp) - Motion: duration scale (100ms, 200ms, 300ms, 500ms) ### Component State Specification For each component define: - Variants (primary, secondary, ghost, destructive) - States (default, hover, focus, active, disabled, loading, error) - Sizes (sm, md, lg) - Props interface - Composition rules (what can nest inside what) ### WCAG Accessibility Checklist - **Contrast**: >=4.5:1 text, >=3:1 large text and UI components - **Keyboard**: all interactive elements focusable and operable - **Screen reader**: ARIA labels, roles, live regions - **Focus**: visible indicators, logical tab order - **Color**: never sole state indicator - **Motion**: respect prefers-reduced-motion - **Touch**: targets >=44x44px ### Interaction Patterns - Hover: subtle feedback (opacity, color shift) - Focus: visible ring (2px offset, high contrast) - Active: pressed state (scale or color change) - Transitions: 150-200ms for micro-interactions, 300ms for layout changes ### Component Hierarchy ``` Radix UI (headless, accessible primitives) -> shadcn/ui (styled Radix with Tailwind) -> Custom components (project-specific) ``` ### Quality Gates - [ ] WCAG 2.1 AA all criteria met - [ ] Keyboard navigable (all interactive elements) - [ ] Screen reader compatible (test with NVDA/VoiceOver) - [ ] Design tokens documented and consistent - [ ] All component states defined - [ ] prefers-reduced-motion respected - [ ] Touch targets >=44x44px ### Anti-Patterns - Decoration without function - Color as only state indicator - Removing focus outlines without replacement - Inaccessible custom controls (use Radix primitives) - Inconsistent spacing (use token scale) - z-index chaos (use stacking context) - Skeuomorphism without functional benefit - Overriding browser defaults without good reason --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/derianandre) — claim your Tome and manage your conversions.