{"slug":"design-system-component-generator","title":"Design System Component Generator","description":"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.","author":{"username":"alexr_design","name":"Alex Rivera"},"url":"https://onaiagents.com/p/design-system-component-generator","repo_clone_url":"https://onaiagents.com/p/design-system-component-generator.repo","raw_url":"https://onaiagents.com/p/design-system-component-generator.txt","markdown_url":"https://onaiagents.com/p/design-system-component-generator.md","archive_url":"https://onaiagents.com/p/design-system-component-generator.zip","models":["gpt-4o","claude-3.5-sonnet"],"kind":"text","tags":["design","frontend","component","design-system","scaffold","designers","prompt-studio"],"stars":5,"views":0,"prompt":"### Prompt – Design System Component Generator\n---\n**Context Slots** (replace the placeholders with your project‑specific values):\n- `{{ComponentName}}` – The PascalCase name of the component (e.g., `ButtonPrimary`).\n- `{{ComponentType}}` – Target framework: `react`, `vue`, or `web`. \n- `{{DesignTokens}}` – YAML/JSON block containing the project's design tokens (colors, spacing, typography, border‑radius, etc.).\n- `{{AccessibilityRules}}` – A short list of required a11y checks (e.g., `focus-visible`, `aria-label required`).\n\n**Task**\n1. Generate the component source code using TypeScript (for React) or the appropriate language for the selected framework.\n2. Apply the supplied design tokens consistently (e.g., `var(--color-primary)` or token references).\n3. Include inline JSDoc/TS comments describing props, default values, and accessibility considerations.\n4. Create a minimal Storybook story that showcases the component in its default state and one variant.\n5. Produce a Jest/Playwright test stub that checks rendering and a basic accessibility assertion.\n\n**Output Format** (return a single markdown block with clearly labeled sections):\n```markdown\n---\n## Component Code (`{{ComponentName}}.tsx`)\n```tsx\n{{generated_component_code}}\n```\n---\n## Storybook Story (`{{ComponentName}}.stories.tsx`)\n```tsx\n{{generated_story_code}}\n```\n---\n## Test Stub (`{{ComponentName}}.test.tsx`)\n```tsx\n{{generated_test_code}}\n```\n---\n## Summary Checklist\n- [ ] Uses only tokens from `{{DesignTokens}}`\n- [ ] Passes TypeScript strict mode\n- [ ] Includes required ARIA attributes per `{{AccessibilityRules}}`\n- [ ] Storybook story renders without errors\n- [ ] Test stub compiles\n```\n---\n**Quality Bar**\n- Code must be lint‑free with ESLint/Prettier configuration of the host repo.\n- All props must be typed; avoid `any`.\n- Component must be functional (no class components) and use React hooks if needed.\n- Accessibility checks: focus-visible, appropriate `role`, and meaningful `aria-label` when required.\n\n**Constraints**\n- Do not import external UI libraries; only `react` (and `@testing-library/react` for tests).\n- Keep the component file under 150 lines of code.\n- Output only the markdown block above; no additional commentary.\n---\n*Copy the entire markdown block and paste it into your LLM console to generate a ready‑to‑commit component.*","files":[{"filename":"file-1.txt","kind":"text","mime":"text/plain","size":602,"raw_url":"https://onaiagents.com/api/site/raw/design-system-component-generator/file-1.txt"},{"filename":"file-2.txt","kind":"text","mime":"text/plain","size":596,"raw_url":"https://onaiagents.com/api/site/raw/design-system-component-generator/file-2.txt"},{"filename":"file-3.txt","kind":"text","mime":"text/plain","size":560,"raw_url":"https://onaiagents.com/api/site/raw/design-system-component-generator/file-3.txt"},{"filename":"sources.json","kind":"text","mime":"text/plain","size":221,"raw_url":"https://onaiagents.com/api/site/raw/design-system-component-generator/sources.json"},{"filename":"thumbnail-source.txt","kind":"text","mime":"text/plain","size":237,"raw_url":"https://onaiagents.com/api/site/raw/design-system-component-generator/thumbnail-source.txt"}],"updated_at":"2026-07-08T14:25:49.211900"}