Bespoke product design

Purpose & trigger

Design and review brand-aware, mobile-first, accessible product surfaces without invented proof or generic AI styling. Use for public product pages, application flows, design-system changes, responsive UI, interaction states, or accessibility review.

Source

Portable instructions served exactly from the validated skill package.

---
name: bespoke-product-design
description: Design and review brand-aware, mobile-first, accessible product surfaces without invented proof or generic AI styling. Use for public product pages, application flows, design-system changes, responsive UI, interaction states, or accessibility review.
---

# Bespoke Product Design

## Design from evidence

1. Read the approved brand, product, content, accessibility, and responsive constraints before changing layout.
2. Preserve existing information architecture and user-critical wording unless the task authorizes a change.
3. Define semantic tokens and complete state contracts for light and dark themes before component styling.
4. Design loading, empty, error, disabled, focus, keyboard, touch, reduced-motion, and narrow-width behaviour alongside the primary state.
5. Test representative widths and assistive-technology paths. Review visible copy for specificity and unsupported claims.

## Protect product truth

- Use semantic state colour only for real state. Keep brand colour purposeful.
- Do not invent users, testimonials, adoption, certifications, screenshots, compatibility, or metrics.
- Treat a visually polished page as incomplete until interaction, contrast, keyboard, and mobile evidence agree.

Bundled files

• SKILL.md — Portable product-design instructions.

Verification evidence

• Structural validation and representative exercise record.

Known limitations

• Cross-provider design evaluation evidence is still accumulating.