About experience-system-blueprint
A skill for planning brand-led experience systems across products, websites, and events. It organizes principles, components, sensory guidance, channel adaptations, and quality checks into reusable blueprints.
Key features
- 01Brand and accessibility principles
- 02Reusable component library
- 03Visual and sensory specifications
- 04Channel adaptation matrix
- 05QA and measurement checklist
- 06Blueprint and review templates
Use cases
- 01Building a scalable design system
- 02Handing brand concepts to product or event teams
- 03Reviewing touchpoints for accessibility and consistency
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/experience-system-blueprintin Claude Code to confirm it loaded.
Details
From the project READMEExperience 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
- System Principles – design tenets, accessibility standards, inclusivity commitments.
- Component Library – modules for hero sections, CTAs, motion behaviors, environmental elements.
- Sensory Spec – visual, motion, audio, haptics guidelines with do/don't examples.
- Channel Adaptations – matrices showing how components flex by channel/device.
- 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-experiencecommand for turnkey toolkits.
Comments
Markdown supported