# Design System Component Generator

Author: @alexr_design
URL: https://onaiagents.com/p/design-system-component-generator
Repo clone: https://onaiagents.com/p/design-system-component-generator.repo
Raw prompt: https://onaiagents.com/p/design-system-component-generator.txt
Download repo archive: https://onaiagents.com/p/design-system-component-generator.zip

A prompt that scaffolds a new UI component (React/TSX, Vue, or Web Component) using your team's design tokens, spacing scale, color palette, and accessibility rules, and also creates a Storybook entry and test stub.

Models: gpt-4o, claude-3.5-sonnet
Kind: text
Tags: #design, #frontend, #component, #design-system, #scaffold, #designers, #prompt-studio

## prompt.txt

```text
### Prompt – Design System Component Generator
---
**Context Slots** (replace the placeholders with your project‑specific values):
- `{{ComponentName}}` – The PascalCase name of the component (e.g., `ButtonPrimary`).
- `{{ComponentType}}` – Target framework: `react`, `vue`, or `web`. 
- `{{DesignTokens}}` – YAML/JSON block containing the project's design tokens (colors, spacing, typography, border‑radius, etc.).
- `{{AccessibilityRules}}` – A short list of required a11y checks (e.g., `focus-visible`, `aria-label required`).

**Task**
1. Generate the component source code using TypeScript (for React) or the appropriate language for the selected framework.
2. Apply the supplied design tokens consistently (e.g., `var(--color-primary)` or token references).
3. Include inline JSDoc/TS comments describing props, default values, and accessibility considerations.
4. Create a minimal Storybook story that showcases the component in its default state and one variant.
5. Produce a Jest/Playwright test stub that checks rendering and a basic accessibility assertion.

**Output Format** (return a single markdown block with clearly labeled sections):
```markdown
---
## Component Code (`{{ComponentName}}.tsx`)
```tsx
{{generated_component_code}}
```
---
## Storybook Story (`{{ComponentName}}.stories.tsx`)
```tsx
{{generated_story_code}}
```
---
## Test Stub (`{{ComponentName}}.test.tsx`)
```tsx
{{generated_test_code}}
```
---
## Summary Checklist
- [ ] Uses only tokens from `{{DesignTokens}}`
- [ ] Passes TypeScript strict mode
- [ ] Includes required ARIA attributes per `{{AccessibilityRules}}`
- [ ] Storybook story renders without errors
- [ ] Test stub compiles
```
---
**Quality Bar**
- Code must be lint‑free with ESLint/Prettier configuration of the host repo.
- All props must be typed; avoid `any`.
- Component must be functional (no class components) and use React hooks if needed.
- Accessibility checks: focus-visible, appropriate `role`, and meaningful `aria-label` when required.

**Constraints**
- Do not import external UI libraries; only `react` (and `@testing-library/react` for tests).
- Keep the component file under 150 lines of code.
- Output only the markdown block above; no additional commentary.
---
*Copy the entire markdown block and paste it into your LLM console to generate a ready‑to‑commit component.*
```

## Files

- [file-1.txt](https://onaiagents.com/api/site/raw/design-system-component-generator/file-1.txt) (text/plain, 602 bytes)
- [file-2.txt](https://onaiagents.com/api/site/raw/design-system-component-generator/file-2.txt) (text/plain, 596 bytes)
- [file-3.txt](https://onaiagents.com/api/site/raw/design-system-component-generator/file-3.txt) (text/plain, 560 bytes)
- [sources.json](https://onaiagents.com/api/site/raw/design-system-component-generator/sources.json) (text/plain, 221 bytes)
- [thumbnail-source.txt](https://onaiagents.com/api/site/raw/design-system-component-generator/thumbnail-source.txt) (text/plain, 237 bytes)

## Repo clone

```bash
git clone https://onaiagents.com/p/design-system-component-generator.repo
# or download the archive:
curl -L https://onaiagents.com/p/design-system-component-generator.zip -o design-system-component-generator.zip
unzip design-system-component-generator.zip -d design-system-component-generator
```