██████╗ ███████╗███████╗██╗ ██████╗ ███╗   ██╗        ██╗         █████╗ ██╗
██╔══██╗██╔════╝██╔════╝██║██╔════╝ ████╗  ██║        ██║        ██╔══██╗██║
██║  ██║█████╗  ███████╗██║██║  ███╗██╔██╗ ██║    ██████████╗    ███████║██║
██║  ██║██╔══╝  ╚════██║██║██║   ██║██║╚██╗██║    ╚═══██╔═══╝    ██╔══██║██║
██████╔╝███████╗███████║██║╚██████╔╝██║ ╚████║        ██║        ██║  ██║██║
╚═════╝ ╚══════╝╚══════╝╚═╝ ╚═════╝ ╚═╝  ╚═══╝        ╚═╝        ╚═╝  ╚═╝╚═╝

Fixing the Vibe in Vibe Coding

Design+AI is a collection of helper agents designed for AI code assistants like Claude Code, Cursor, and Windsurf. These files act as templates, prompt workflows, and reference guides that you can import directly into your development workflow.

To get started, you can copy them into your project with a single command:

npx designplusai

What is inside?

When you run the setup command, you can install any of these five specialized developer agents:

1. PRD Generator (agents/PRD Generator.md)

This agent maps out the core idea of your product through an adaptive interview, creating a structured Product Requirements Document.

┌─────────────────┐   ┌─────────────────┐   ┌─────────────────┐   ┌─────────────────┐   ┌─────────────────┐
│ Phase 1: Topic  │──>│ Phase 2: User   │──>│ Phase 3: Target │──>│ Phase 4: Stack  │──>│ Phase 5: Spec   │
│ & Product Type  │   │ Research (Opt)  │   │ Questions       │   │ Recommendations │   │ Generation      │
└─────────────────┘   └─────────────────┘   └─────────────────┘   └─────────────────┘   └─────────────────┘

| Phase | Action | Key Deliverable / Outcome | | :--- | :--- | :--- | | Phase 1 | Topic & Type Selection | Identifies product category (e.g. web, mobile, API, browser extension) | | Phase 2 | User Research Analysis | Integrates raw interview notes, user feedback, or skips to default | | Phase 3 | Adaptive Q&A | Asks custom questions scoped specifically to your product type | | Phase 4 | Stack Recommendations | Proposes custom tech stack configurations with rationales | | Phase 5 | Spec Generation | Outputs a developer-ready PRD Markdown file with sequenced estimates |

2. System Architect (agents/System Architect.md)

This agent reads your PRD, brainstorms user flow and database variations, and designs page layout schemas, relational models, API endpoints, and a sequenced build plan.

┌─────────────────┐   ┌─────────────────┐   ┌─────────────────┐   ┌─────────────────┐
│ Phase 1: Load   │──>│ Phase 2: Compare│──>│ Phase 3: Spec   │──>│ Phase 4: Build  │
│ Product Context │   │ Flow Variations │   │ Brainstorming   │   │ Plan Generation │
└─────────────────┘   └─────────────────┘   └─────────────────┘   └─────────────────┘

| Phase | Action | Key Deliverable / Outcome | | :--- | :--- | :--- | | Phase 1 | Load PRD Context | Reads the functional requirements from your generated PRD | | Phase 2 | Design Variations | Brainstorms 2–3 different page architectures and data flow structures | | Phase 3 | Technical Spec QA | Details database relations (PK/FK), API routes, and architectural patterns | | Phase 4 | Specs & Build Plan | Outputs a technical design specification and a day-by-day task breakdown |

3. Design System Spec Generator (agents/design-system-generator/)

This agent creates bespoke design specs and outputs styling tokens matching your tech stack (Tailwind configurations, CSS custom properties, Sass variables, or TypeScript themes).

┌─────────────────┐   ┌─────────────────┐   ┌─────────────────┐   ┌─────────────────┐   ┌─────────────────┐
│ Phase 1: Load   │──>│ Phase 2: Analyze│──>│ Phase 3: Propose│──>│ Phase 4: Choose │──>│ Phase 5: Code   │
│ PRD Spec        │   │ Constraints     │   │ Archetypes      │   │ Detail Level    │   │ Companion File  │
└─────────────────┘   └─────────────────┘   └─────────────────┘   └─────────────────┘   └─────────────────┘

| Phase | Action | Key Deliverable / Outcome | | :--- | :--- | :--- | | Phase 1 | Load PRD Context | Locates and loads your product specification | | Phase 2 | Analyze Brand/Tech | Evaluates tech stack, target audience, performance constraints | | Phase 3 | Archetype Proposals | Pitch 2–3 style directions (e.g., Stripe-like Polished Trust vs Brutalist) | | Phase 4 | Detail Level Choice | Choose output size: Tokens Only, Standard Spec, or Deep Details | | Phase 5 | Generation | Creates a Markdown styling manual + companion code files (Tailwind configs/CSS variables) |

4. Usability Heuristics Auditor (agents/usability-heuristics-audit/)

This agent evaluations your running application, checking layout, error states, and actions against Jakob Nielsen's 10 usability heuristics and outputting a scored findings list (severity 0–4) with recommended fixes.

┌─────────────────┐   ┌─────────────────┐   ┌─────────────────┐   ┌─────────────────┐
│ Phase 1: Gather │──>│ Phase 2: Pre-   │──>│ Phase 3: Crawl  │──>│ Phase 4: Output │
│ Settings        │   │ flight Checks   │   │ & Evaluate      │   │ UX Report       │
└─────────────────┘   └─────────────────┘   └─────────────────┘   └─────────────────┘

| Phase | Action | Key Deliverable / Outcome | | :--- | :--- | :--- | | Phase 1 | Configuration | Gathers target URL, crawl scope, interaction depth, and authentication | | Phase 2 | Pre-flight check | Verifies local URL reachability and scaffolds directories | | Phase 3 | Crawl & Score | Interacts with form elements, checks logs, and rates issues (severity 0–4) | | Phase 4 | Report Writing | Writes a heuristic evaluation summary, priorities checklist, and screen captures |

5. Accessibility Auditor (agents/accessibility/)

This agent audits and improves your application's user interface to comply with WCAG 2.2 accessibility guidelines, ensuring perceivable, operable, understandable, and robust design.

┌─────────────────┐   ┌─────────────────┐   ┌─────────────────┐   ┌─────────────────┐
│ Perceivable     │──>│ Operable        │──>│ Understandable  │──>│ Robust          │
│ Alt text, color │   │ Keyboard, focus │   │ Labels, errors  │   │ ARIA, live      │
└─────────────────┘   └─────────────────┘   └─────────────────┘   └─────────────────┘

| Area | Focus | Key Requirements / Outcomes | | :--- | :--- | :--- | | Perceivable | Alt Text & Contrast | Validates image alt attributes, accessible icon names, and text/UI contrast levels | | Operable | Keyboard & Focus | Ensures complete keyboard navigability, clear focus outlines, and minimum target sizes | | Understandable | Form Helpers & Labels | Requires programmatic labels, input helper instructions, and clear error notifications | | Robust | ARIA & Live Regions | Verifies correct ARIA roles/states usage and proper announcements for dynamic updates |

Getting Started

Run this command in the root folder of your project:

npx designplusai

This starts a simple interactive installer in your terminal where you can select the files you want to copy over.

Integrating with AI Editors

Once the agent files are copied to your project folder (typically in a folder named agents), you can load them into your preferred AI editor:

Claude Code

You can pass the agent file directly into your Claude session as a system instruction using the skill flag:

# To load the PRD Generator
claude --read-skill agents/PRD\ Generator.md

# To load the System Architect
claude --read-skill agents/System\ Architect.md

Cursor

To use these guidelines in Cursor:

• Copy the contents of the relevant agent file and paste it into your project's .cursorrules file.
• Or, reference the file in Cursor Chat by typing @agents to load the prompt guidelines directly into your current chat context.

Windsurf

You can copy the guidelines into a .windsurfrules file in your project root, or mention the agent path in the chat bar to guide the agent cascade.

License

This project is licensed under the MIT License. Feel free to modify the prompt guidelines, templates, and rules to match your own preferences and stack.