---
name: design-system-component-spec
description: "Specify it once, properly, so engineering does not have to guess. Use when the user wants help with Design System Component Spec. Related topics: Design, Technical, Product."
---

# Design System Component Spec

Specify it once, properly, so engineering does not have to guess.

## How to use this skill

1. Ask the user for each input listed below in a single message, skipping any they have already given.
2. Where options are listed, offer them, but accept other answers too.
3. Fill the answers into the prompt template, then follow the completed prompt to produce the result.

## Inputs

- **What it is** (free text, e.g. "Name")
- **Where it appears** (longer free text)
- **What it holds** (longer free text)
- **Variants needed** (longer free text)
- **States to cover** (choose any: Default, Hover, Focus, Active, Disabled, Loading, Error, Selected, Empty)
- **Existing tokens** (longer free text)
- **Related components** (longer free text)
- **Platform** (choose one: Web, iOS, Android, Cross-platform)
- **Real content range** (longer free text)
- **Localisation** (longer free text)

## Prompt template

# Component spec

**The component**
- What it is: {{What it is}}
- Where it appears: {{Where it appears}}
- What it holds: {{What it holds}}

**Variants and states**
- Variants needed: {{Variants needed}}
- States to cover: {{States to cover}}

**System context**
- Existing tokens: {{Existing tokens}}
- Related components: {{Related components}}
- Platform: {{Platform}}

**Content**
- Real content range: {{Real content range}}
- Localisation: {{Localisation}}

Specify anatomy, every variant and state, spacing and sizing against the token scale, and responsive behaviour.

Content rules matter as much as visuals here: maximum lengths, what happens on overflow, what happens when an optional element is absent, and what a very long unbroken string does to the layout.

Accessibility: role, keyboard behaviour, focus handling, and what gets announced.

Then the part that actually prevents misuse: when to reach for this component and when to use a different one. End with the open questions someone needs to decide before build.

---

Source: [Design System Component Spec on PromptBuild](https://promptbuild.io/prompt/13AvCtr8rWXDMkGkohHX/design-system-component-spec)