Agent skill

experience-system-blueprint

Documentation pattern for translating brand platforms into modular experience systems.

Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/experience-system-blueprint

SKILL.md

Experience System Blueprint Skill

When to Use

  • Creating scalable design systems anchored in brand strategy.
  • Handing off brand concepts to product, web, or event teams.
  • Auditing touchpoints for coherence and accessibility.

Framework

  1. System Principles – design tenets, accessibility standards, inclusivity commitments.
  2. Component Library – modules for hero sections, CTAs, motion behaviors, environmental elements.
  3. Sensory Spec – visual, motion, audio, haptics guidelines with do/don't examples.
  4. Channel Adaptations – matrices showing how components flex by channel/device.
  5. QA & Measurement – checklist + instrumentation hooks to track fidelity and impact.

Templates

  • Blueprint deck with principle → component → channel mapping.
  • Figma/Notion doc outlining specs, tokens, and usage rules.
  • QA worksheet for reviewing executions before launch.

Tips

  • Version-control blueprints so teams know which system is authoritative.
  • Embed accessibility best practices early to avoid retrofits.
  • Pair with design-multi-channel-brand-experience command for turnkey toolkits.

Expand your agent's capabilities with these related and highly-rated skills.

Didn't find tool you were looking for?

Be as detailed as possible for better results