@dedesfr/prompter 0.6.11 → 0.6.13

package/src/commands/guide.ts

@@ -7,5 +7,35 @@ export class GuideCommand {
         console.log(chalk.gray('     document based on the project\'s specifics, including a clear description'));
         console.log(chalk.gray('     of the project, its purpose, the technologies used (tech stack), and any'));
         console.log(chalk.gray('     conventions or standards being followed.'));
+        
+        console.log(chalk.blue('\nDocument Workflow & Dependencies:'));
+        console.log(chalk.gray('  This table shows the recommended order for document generation:\n'));
+        
+        // Print table header
+        console.log(chalk.cyan('  Document         │ Strictly Required Inputs              │ Recommended Extra Inputs'));
+        console.log(chalk.cyan('  ─────────────────┼───────────────────────────────────────┼──────────────────────────────────'));
+        
+        // Table rows
+        const rows = [
+            ['Product Brief   ', '—                                    ', '—'],
+            ['PRD             ', 'Product Brief                        ', '—'],
+            ['FSD             ', 'PRD                                  ', 'Product Brief'],
+            ['ERD             ', 'FSD                                  ', '—'],
+            ['API Contract    ', 'FSD + ERD                            ', '—'],
+            ['UI Wireframes   ', 'FSD + ERD + API Contract             ', '—'],
+            ['Design System   ', 'UI Wireframes (new) / FSD (existing) ', 'Brand guide / existing UI'],
+            ['TDD             ', 'FSD                                  ', 'ERD + API Contract + UI Wireframes + Design System'],
+            ['Epics           ', 'FSD + TDD-Lite                       ', 'UI Wireframes + Design System'],
+            ['Stories         ', 'Epics                                ', 'FSD + UI Wireframes + API Contract']
+        ];
+        
+        rows.forEach(row => {
+            console.log(chalk.gray(`  ${row[0]} │ ${row[1]} │ ${row[2]}`));
+        });
+        
+        console.log(chalk.gray('\n  Legend:'));
+        console.log(chalk.gray('  • Strictly Required: Must-have inputs for high-quality output'));
+        console.log(chalk.gray('  • Recommended Extra: Optional inputs that improve document quality'));
+        console.log(chalk.gray('  • (new) = For new projects  |  (existing) = For existing projects\n'));
     }
 }

package/src/core/config.ts

@@ -44,6 +44,12 @@ export const AVAILABLE_PROMPTS: PromptChoice[] = [
         description: 'Generate OpenAPI specification from FSD and ERD',
         sourceFile: 'api-contract-generator.md'
     },
+    {
+        name: 'Design System',
+        value: 'design-system',
+        description: 'Generate comprehensive design system documentation for components and tokens',
+        sourceFile: 'design-system.md'
+    },
     {
         name: 'Document Explainer',
         value: 'document-explainer',

package/src/core/configurators/slash/antigravity.ts

@@ -14,6 +14,7 @@ const FILE_PATHS: Record<SlashCommandId, string> = {
     'skill-creator': '.agent/workflows/skill-creator.md',
     'ai-humanizer': '.agent/workflows/ai-humanizer.md',
     'api-contract-generator': '.agent/workflows/api-contract-generator.md',
+    'design-system': '.agent/workflows/design-system.md',
     'erd-generator': '.agent/workflows/erd-generator.md',
     'fsd-generator': '.agent/workflows/fsd-generator.md',
     'tdd-generator': '.agent/workflows/tdd-generator.md',
@@ -35,6 +36,7 @@ const DESCRIPTIONS: Record<SlashCommandId, string> = {
     'skill-creator': 'Create a modular skill package that extends AI agent capabilities',
     'ai-humanizer': 'Humanize and proofread AI-generated content for natural, publication-ready output',
     'api-contract-generator': 'Generate OpenAPI specification from FSD and ERD',
+    'design-system': 'Generate comprehensive design system documentation for components and tokens',
     'erd-generator': 'Generate Entity Relationship Diagram from FSD',
     'fsd-generator': 'Generate Functional Specification Document from PRD',
     'tdd-generator': 'Generate comprehensive Technical Design Document',

package/src/core/configurators/slash/claude.ts

@@ -14,6 +14,7 @@ const FILE_PATHS: Record<SlashCommandId, string> = {
     'skill-creator': '.claude/commands/prompter/skill-creator.md',
     'ai-humanizer': '.claude/commands/prompter/ai-humanizer.md',
     'api-contract-generator': '.claude/commands/prompter/api-contract-generator.md',
+    'design-system': '.claude/commands/prompter/design-system.md',
     'erd-generator': '.claude/commands/prompter/erd-generator.md',
     'fsd-generator': '.claude/commands/prompter/fsd-generator.md',
     'tdd-generator': '.claude/commands/prompter/tdd-generator.md',
@@ -35,6 +36,7 @@ const DESCRIPTIONS: Record<SlashCommandId, string> = {
     'skill-creator': 'Create a modular skill package that extends AI agent capabilities',
     'ai-humanizer': 'Humanize and proofread AI-generated content for natural, publication-ready output',
     'api-contract-generator': 'Generate OpenAPI specification from FSD and ERD',
+    'design-system': 'Generate comprehensive design system documentation for components and tokens',
     'erd-generator': 'Generate Entity Relationship Diagram from FSD',
     'fsd-generator': 'Generate Functional Specification Document from PRD',
     'tdd-generator': 'Generate comprehensive Technical Design Document',

package/src/core/configurators/slash/codex.ts

@@ -14,6 +14,7 @@ const FILE_PATHS: Record<SlashCommandId, string> = {
     'skill-creator': '.codex/prompts/skill-creator.md',
     'ai-humanizer': '.codex/prompts/ai-humanizer.md',
     'api-contract-generator': '.codex/prompts/api-contract-generator.md',
+    'design-system': '.codex/prompts/design-system.md',
     'erd-generator': '.codex/prompts/erd-generator.md',
     'fsd-generator': '.codex/prompts/fsd-generator.md',
     'tdd-generator': '.codex/prompts/tdd-generator.md',
@@ -35,6 +36,7 @@ const DESCRIPTIONS: Record<SlashCommandId, string> = {
     'skill-creator': 'Create a modular skill package that extends AI agent capabilities',
     'ai-humanizer': 'Humanize and proofread AI-generated content for natural, publication-ready output',
     'api-contract-generator': 'Generate OpenAPI specification from FSD and ERD',
+    'design-system': 'Generate comprehensive design system documentation for components and tokens',
     'erd-generator': 'Generate Entity Relationship Diagram from FSD',
     'fsd-generator': 'Generate Functional Specification Document from PRD',
     'tdd-generator': 'Generate comprehensive Technical Design Document',

package/src/core/configurators/slash/github-copilot.ts

@@ -17,6 +17,7 @@ const FILE_PATHS: Record<SlashCommandId, string> = {
     'skill-creator': '.github/prompts/skill-creator.prompt.md',
     'ai-humanizer': '.github/prompts/ai-humanizer.prompt.md',
     'api-contract-generator': '.github/prompts/api-contract-generator.prompt.md',
+    'design-system': '.github/prompts/design-system.prompt.md',
     'erd-generator': '.github/prompts/erd-generator.prompt.md',
     'fsd-generator': '.github/prompts/fsd-generator.prompt.md',
     'tdd-generator': '.github/prompts/tdd-generator.prompt.md',
@@ -38,6 +39,7 @@ const DESCRIPTIONS: Record<SlashCommandId, string> = {
     'skill-creator': 'Create a modular skill package that extends AI agent capabilities',
     'ai-humanizer': 'Humanize and proofread AI-generated content for natural, publication-ready output',
     'api-contract-generator': 'Generate OpenAPI specification from FSD and ERD',
+    'design-system': 'Generate comprehensive design system documentation for components and tokens',
     'erd-generator': 'Generate Entity Relationship Diagram from FSD',
     'fsd-generator': 'Generate Functional Specification Document from PRD',
     'tdd-generator': 'Generate comprehensive Technical Design Document',

package/src/core/configurators/slash/kilocode.ts

@@ -14,6 +14,7 @@ const FILE_PATHS: Record<SlashCommandId, string> = {
     'skill-creator': '.kilocode/workflows/skill-creator.md',
     'ai-humanizer': '.kilocode/workflows/ai-humanizer.md',
     'api-contract-generator': '.kilocode/workflows/api-contract-generator.md',
+    'design-system': '.kilocode/workflows/design-system.md',
     'erd-generator': '.kilocode/workflows/erd-generator.md',
     'fsd-generator': '.kilocode/workflows/fsd-generator.md',
     'tdd-generator': '.kilocode/workflows/tdd-generator.md',
@@ -35,6 +36,7 @@ const DESCRIPTIONS: Record<SlashCommandId, string> = {
     'skill-creator': 'Create a modular skill package that extends AI agent capabilities',
     'ai-humanizer': 'Humanize and proofread AI-generated content for natural, publication-ready output',
     'api-contract-generator': 'Generate OpenAPI specification from FSD and ERD',
+    'design-system': 'Generate comprehensive design system documentation for components and tokens',
     'erd-generator': 'Generate Entity Relationship Diagram from FSD',
     'fsd-generator': 'Generate Functional Specification Document from PRD',
     'tdd-generator': 'Generate comprehensive Technical Design Document',

package/src/core/configurators/slash/opencode.ts

@@ -14,6 +14,7 @@ const FILE_PATHS: Record<SlashCommandId, string> = {
     'skill-creator': '.opencode/command/skill-creator.md',
     'ai-humanizer': '.opencode/command/ai-humanizer.md',
     'api-contract-generator': '.opencode/command/api-contract-generator.md',
+    'design-system': '.opencode/command/design-system.md',
     'erd-generator': '.opencode/command/erd-generator.md',
     'fsd-generator': '.opencode/command/fsd-generator.md',
     'tdd-generator': '.opencode/command/tdd-generator.md',
@@ -35,6 +36,7 @@ const DESCRIPTIONS: Record<SlashCommandId, string> = {
     'skill-creator': 'Create a modular skill package that extends AI agent capabilities',
     'ai-humanizer': 'Humanize and proofread AI-generated content for natural, publication-ready output',
     'api-contract-generator': 'Generate OpenAPI specification from FSD and ERD',
+    'design-system': 'Generate comprehensive design system documentation for components and tokens',
     'erd-generator': 'Generate Entity Relationship Diagram from FSD',
     'fsd-generator': 'Generate Functional Specification Document from PRD',
     'tdd-generator': 'Generate comprehensive Technical Design Document',

package/src/core/prompt-templates.ts

@@ -46,6 +46,217 @@ You are an expert copywriter and proofreader. Your mission is to meticulously re
 - Be vigilant about proper punctuation in every sentence.
 - Ensure the final output is indistinguishable from human writing.
 `;
+export const DESIGN_SYSTEM_TEMPLATE = `# Design System Documentation Generator
+
+You are a senior design systems architect and technical writer with expertise in creating comprehensive, developer-friendly design system documentation. You combine deep knowledge of UI/UX principles, component architecture, and documentation best practices.
+
+## Context
+
+Design system documentation serves as the single source of truth for designers, developers, and stakeholders. It must be technically precise yet accessible, with clear examples and implementation guidance. Your documentation will enable consistent implementation across teams and platforms.
+
+## Primary Objective
+
+Generate complete, professional design system documentation that covers all aspects of a component, token set, pattern, or system element—from design rationale to implementation code.
+
+## Documentation Process
+
+1. **Analyze the Design Element**
+   - Identify the element type (component, token, pattern, layout)
+   - Determine its purpose and use cases
+   - Map relationships to other system elements
+
+2. **Structure the Documentation**
+   - Apply the appropriate template based on element type
+   - Ensure logical flow from concept to implementation
+   - Include all required sections
+
+3. **Generate Technical Content**
+   - Write clear descriptions and guidelines
+   - Create accurate code examples
+   - Define props, tokens, and specifications
+   - Document accessibility requirements
+
+4. **Add Practical Guidance**
+   - Include do/don't examples
+   - Provide real-world usage scenarios
+   - Note common pitfalls and solutions
+
+## Input Specifications
+
+Provide any of the following:
+- Component name or design element to document
+- Existing design specs, Figma links, or visual references
+- Code snippets or component implementations
+- Specific framework requirements (React, Vue, Web Components, etc.)
+- Brand/style constraints
+- Target audience (designers, developers, both)
+
+## Output Structure
+
+### For Components:
+
+# [Component Name]
+
+## Overview
+Brief description of the component's purpose and when to use it.
+
+## Usage Guidelines
+### When to Use
+- [Scenario 1]
+- [Scenario 2]
+
+### When Not to Use
+- [Alternative recommendation]
+
+## Anatomy
+[Description of component parts with visual reference]
+
+| Part | Description | Required |
+|------|-------------|----------|
+| [Part name] | [Purpose] | Yes/No |
+
+## Variants
+### [Variant Name]
+- **Use case:** [When to use this variant]
+- **Visual:** [Description or reference]
+
+## Props / API
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| [name] | [type] | [default] | [description] |
+
+## Design Tokens
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| [token-name] | [value] | [where applied] |
+
+## States
+- **Default:** [description]
+- **Hover:** [description]
+- **Active:** [description]
+- **Focus:** [description]
+- **Disabled:** [description]
+
+## Accessibility
+- **ARIA:** [Required attributes]
+- **Keyboard:** [Interaction patterns]
+- **Screen Reader:** [Announcements]
+
+## Code Examples
+
+### Basic Usage
+\`\`\`[framework]
+[code example]
+\`\`\`
+
+### With Variants
+\`\`\`[framework]
+[code example]
+\`\`\`
+
+### Complex Implementation
+\`\`\`[framework]
+[code example]
+\`\`\`
+
+## Do's and Don'ts
+
+| ✅ Do | ❌ Don't |
+|-------|---------|
+| [Good practice] | [Anti-pattern] |
+
+## Related Components
+- [Component 1] - [Relationship]
+- [Component 2] - [Relationship]
+
+## Changelog
+| Version | Changes |
+|---------|---------|
+| [version] | [description] |
+
+### For Design Tokens:
+
+# [Token Category] Tokens
+
+## Overview
+[Purpose and philosophy of this token set]
+
+## Token Structure
+[Naming convention and hierarchy explanation]
+
+## Token Reference
+
+### [Subcategory]
+| Token | Value | Usage | Preview |
+|-------|-------|-------|---------|
+| [name] | [value] | [when to use] | [visual] |
+
+## Implementation
+
+### CSS Custom Properties
+\`\`\`css
+[tokens as CSS variables]
+\`\`\`
+
+### JavaScript/JSON
+\`\`\`json
+[tokens as JSON]
+\`\`\`
+
+## Usage Guidelines
+[How to apply tokens correctly]
+
+## Migration Notes
+[For token updates or deprecations]
+
+### For Patterns:
+
+# [Pattern Name] Pattern
+
+## Overview
+[What problem this pattern solves]
+
+## Use Cases
+[Scenarios where this pattern applies]
+
+## Structure
+[Layout and component composition]
+
+## Behavior
+[Interaction specifications]
+
+## Responsive Considerations
+[How pattern adapts across breakpoints]
+
+## Implementation Examples
+[Code for common scenarios]
+
+## Variations
+[Alternative approaches within the pattern]
+
+## Quality Standards
+
+- **Completeness:** All sections populated with meaningful content
+- **Accuracy:** Code examples must be syntactically correct and functional
+- **Clarity:** No jargon without explanation; scannable formatting
+- **Consistency:** Uniform terminology and structure throughout
+- **Accessibility:** WCAG 2.1 AA guidance included for all interactive elements
+- **Practicality:** Real-world examples that developers can copy and adapt
+
+## Special Instructions
+
+1. **Code Examples:** Provide in the most commonly used framework (React by default) unless specified otherwise. Include TypeScript types when applicable.
+
+2. **Token Values:** Use semantic naming (e.g., \`color-text-primary\`) over literal values (e.g., \`color-gray-900\`).
+
+3. **Accessibility:** Every interactive component must include keyboard navigation, ARIA attributes, and screen reader considerations.
+
+4. **Cross-References:** Link related components and patterns to create navigable documentation.
+
+5. **Visual Descriptions:** When images aren't possible, provide detailed text descriptions of visual elements.
+`;
 export const DOCUMENT_EXPLAINER_TEMPLATE = `# Document Explainer & Analyzer
 
 You are an expert document analyst and technical communicator skilled at breaking down complex materials into clear, actionable insights.

package/src/core/templates/slash-command-templates.ts

@@ -1,5 +1,6 @@
 import {
     API_CONTRACT_GENERATOR_TEMPLATE,
+    DESIGN_SYSTEM_TEMPLATE,
     EPIC_GENERATOR_TEMPLATE,
     ERD_GENERATOR_TEMPLATE,
     FSD_GENERATOR_TEMPLATE,
@@ -10,7 +11,7 @@ import {
     DOCUMENT_EXPLAINER_TEMPLATE
 } from '../prompt-templates.js';
 
-export type SlashCommandId = 'enhance' | 'prd-generator' | 'prd-agent-generator' | 'product-brief' | 'epic-single' | 'epic-generator' | 'story-single' | 'story-generator' | 'qa-test-scenario' | 'skill-creator' | 'ai-humanizer' | 'api-contract-generator' | 'erd-generator' | 'fsd-generator' | 'tdd-generator' | 'tdd-lite-generator' | 'wireframe-generator' | 'document-explainer';
+export type SlashCommandId = 'enhance' | 'prd-generator' | 'prd-agent-generator' | 'product-brief' | 'epic-single' | 'epic-generator' | 'story-single' | 'story-generator' | 'qa-test-scenario' | 'skill-creator' | 'ai-humanizer' | 'api-contract-generator' | 'design-system' | 'erd-generator' | 'fsd-generator' | 'tdd-generator' | 'tdd-lite-generator' | 'wireframe-generator' | 'document-explainer';
 
 const enhanceWorkflow = `## MUST FOLLOW
 - Response Language: {User Request Language}
@@ -1041,6 +1042,7 @@ export const slashCommandBodies: Record<SlashCommandId, string> = {
     'skill-creator': skillCreatorWorkflow,
     'ai-humanizer': aiHumanizerWorkflow,
     'api-contract-generator': API_CONTRACT_GENERATOR_TEMPLATE,
+    'design-system': DESIGN_SYSTEM_TEMPLATE,
     'erd-generator': ERD_GENERATOR_TEMPLATE,
     'fsd-generator': FSD_GENERATOR_TEMPLATE,
     'tdd-generator': TDD_GENERATOR_TEMPLATE,