# Experience Studio

> Make a working hackathon product immediately understandable through focused interaction design, visual hierarchy, accessibility, and visible system states.

- Skill: `shreyp087/experience-studio` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add shreyp087/experience-studio`
- Raw SKILL.md: https://api.skillmd.com/api/skills/shreyp087/experience-studio/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Shreyp087 (https://skillmd.com/u/shreyp087)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/shreyp087/experience-studio

---


# Experience studio

Optimize the first useful action and the visible result for the actual user and judging format. Preserve an existing design system and the user's visual direction. Avoid a generic landing page when the product's main value is a working tool.

Choose a visual concept that reinforces the task: evidence desk, spatial workspace, timeline, comparison view, or simulation controls. Explain the choice in one sentence. Use a small coherent set of typography, color, spacing, and components; custom polish should reinforce the main interaction.

Design the core sequence: starting state, meaningful input, action, progress, result, and recovery. Make the user's gain visible with a grounded before/after, highlighted change, or inspectable artifact. Surface source evidence and uncertainty when those affect interpretation. Keep internal implementation details out of user-facing copy unless they help the user decide.

Handle loading, empty, error, permission-denied, and degraded states that the real journey can reach. Ensure keyboard operation, labels, readable contrast, and responsive layout. Do not hide accessibility behind a future-work bullet.

Inspect the implementation at the target viewport with browser tools when available. Exercise the main interaction, a narrow screen, and keyboard navigation. Use automated accessibility checks when available, and explain their limited coverage. Do not claim visual QA from code inspection alone.

If imagery adds real value, use the available image generation skill; for slides or documents use their artifact skills. Finish with the working screen, observed usability improvements, and any state not yet verified.