From solo
This skill should be used when the user asks to 'design brief', 'create design brief', or 'brief for designer'.
npx claudepluginhub jamon8888/cc-suite --plugin SoloThis skill uses the workspace's default tool permissions.
Translates product requirements and user stories into actionable design briefs. Creates structured specifications that designers and prototyping tools can use to build interfaces.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Analyzes multiple pages for keyword overlap, SEO cannibalization risks, and content duplication. Suggests differentiation, consolidation, and resolution strategies when reviewing similar content.
Share bugs, ideas, or general feedback.
Translates product requirements and user stories into actionable design briefs. Creates structured specifications that designers and prototyping tools can use to build interfaces.
# Design Brief: [Project Name]
**Created:** [Date]
**Based on:** [PRD link, User stories link]
**Designer:** [Name or "TBD"]
**Target Completion:** [Date]
---
## Project Overview
**Problem:** [One-sentence problem statement]
**Solution:** [One-sentence solution description]
**Target User:** [Persona name and key characteristics]
---
## User Flows
### Primary Flow: [Flow Name]
1. [Step 1] → [Screen/State]
2. [Step 2] → [Screen/State]
3. [Step 3] → [Screen/State]
**Success Criteria:** [What defines a successful flow completion]
### Secondary Flow: [Flow Name]
[Repeat for each major user flow]
---
## Screen Inventory
| Screen | Purpose | Key Elements | Priority |
| ---------- | -------------- | ------------------- | -------- |
| [Screen 1] | [What it does] | [Components needed] | P0 |
| [Screen 2] | [What it does] | [Components needed] | P1 |
---
## Interaction Patterns
### [Pattern Name]
**When:** [Trigger]
**What:** [Interaction description]
**Example:** [Reference or mockup]
---
## Visual Requirements
**Brand Guidelines:**
- Colors: [Primary, secondary, accent]
- Typography: [Fonts and sizes]
- Spacing: [Grid system]
**Accessibility:**
- WCAG Level: [A, AA, AAA]
- Color contrast: [Minimum ratio]
- Keyboard navigation: [Required/Not required]
**Responsive:**
- Breakpoints: [Mobile, tablet, desktop sizes]
- Priority: [Mobile-first / Desktop-first]
---
## Content Requirements
**Copy Tone:** [Professional, casual, friendly, etc.]
**Microcopy:** [Button labels, error messages, success states]
**Placeholder Content:** [What to use for demos]
---
## Technical Constraints
**Platform:** [Web, iOS, Android, etc.]
**Framework:** [React, Vue, native, etc.]
**Component Library:** [Material UI, Chakra, custom, etc.]
**Performance:** [Load time, animation frame rate]
---
## Success Metrics
**Usability:**
- [Metric 1]: [Target]
- [Metric 2]: [Target]
**Business:**
- [Metric 1]: [Target]
- [Metric 2]: [Target]
---
## Deliverables
- [ ] User flow diagrams
- [ ] Wireframes (low-fidelity)
- [ ] Mockups (high-fidelity)
- [ ] Prototype (interactive)
- [ ] Design system documentation
- [ ] Handoff specs for developers
---
## Timeline
| Phase | Deliverable | Due Date |
| ---------- | --------------------- | -------- |
| Discovery | User flows | [Date] |
| Wireframes | Lo-fi screens | [Date] |
| Design | Hi-fi mockups | [Date] |
| Prototype | Interactive prototype | [Date] |
| Handoff | Dev specs | [Date] |
---
## References
**PRD:** [Link to PRD]
**User Stories:** [Link to user stories]
**Research:** [Link to discovery insights, journey maps]
**Inspiration:** [Link to competitor analysis, design references]
# Design Brief: Invoice Creation Flow
**Created:** 2026-02-13
**Based on:** PRD: Invoice Management System, User Stories: INV-001 to INV-008
**Designer:** TBD (will use Stitch for prototyping)
**Target Completion:** 2026-02-20
---
## Project Overview
**Problem:** Solopreneurs spend 30-45 minutes creating invoices manually in Excel.
**Solution:** One-click invoice creation with client data pre-filled and auto-numbering.
**Target User:** Solopreneur Sarah (Freelance Designer, 32-38, manages 5-7 clients)
---
## User Flows
### Primary Flow: Create and Send Invoice
1. User clicks "New Invoice" from dashboard → Invoice creation screen
2. User selects client from dropdown (pre-fills contact info) → Invoice form
3. User adds line items (service description, hours, rate) → Line items populate
4. User reviews invoice preview → Preview modal
5. User clicks "Send Invoice" → Confirmation + email sent
**Success Criteria:** User can create and send invoice in <5 minutes (currently 30-45 minutes)
### Secondary Flow: Save Draft
1. User starts creating invoice → Invoice form
2. User clicks "Save Draft" → Draft saved
3. User returns later, clicks "Drafts" → Draft list
4. User selects draft → Resume editing
**Success Criteria:** No data loss if user navigates away
---
## Screen Inventory
| Screen | Purpose | Key Elements | Priority |
| --------------- | --------------------- | ------------------------------------------------------------ | -------- |
| Dashboard | Entry point, overview | "New Invoice" button, recent invoices list, revenue summary | P0 |
| Invoice Form | Create/edit invoice | Client dropdown, line items table, totals, payment terms | P0 |
| Invoice Preview | Review before sending | Read-only invoice view, "Edit" and "Send" buttons | P0 |
| Confirmation | Success feedback | "Invoice sent!" message, next actions (view, create another) | P0 |
| Draft List | Manage drafts | List of draft invoices, "Resume" and "Delete" actions | P1 |
---
## Interaction Patterns
### Client Dropdown with Search
**When:** User clicks "Client" field
**What:** Dropdown opens with search, shows recent clients first, allows adding new client inline
**Example:** Similar to Stripe's customer selector
### Line Item Table
**When:** User adds services to invoice
**What:** Editable table with add/remove rows, auto-calculates subtotal
**Example:** Google Sheets-style inline editing
### Auto-Save
**When:** User pauses typing for 2 seconds
**What:** Draft auto-saves, shows "Saved" indicator
**Example:** Notion-style auto-save with timestamp
---
## Visual Requirements
**Brand Guidelines:**
- Colors: Primary (#2563EB blue), Secondary (#64748B gray), Success (#10B981 green)
- Typography: Inter (headings), System UI (body)
- Spacing: 8px grid system
**Accessibility:**
- WCAG Level: AA
- Color contrast: 4.5:1 minimum
- Keyboard navigation: Full support (tab through form fields)
**Responsive:**
- Breakpoints: Mobile (320px), Tablet (768px), Desktop (1024px+)
- Priority: Desktop-first (solopreneurs work on laptops)
---
## Content Requirements
**Copy Tone:** Professional but friendly (not corporate)
**Microcopy:**
- Button labels: "Send Invoice" (not "Submit"), "Save Draft" (not "Save")
- Error messages: "Oops! Client name is required." (friendly, specific)
- Success states: "Invoice sent! Sarah will receive it in 2 minutes." (reassuring)
**Placeholder Content:**
- Client: "Acme Corp"
- Line item: "Website Redesign — 40 hours × $100/hr"
- Invoice number: "INV-2026-001"
---
## Technical Constraints
**Platform:** Web (responsive)
**Framework:** React + Tailwind CSS
**Component Library:** Headless UI (for dropdowns, modals)
**Performance:** Page load <1s, form interactions <100ms
---
## Success Metrics
**Usability:**
- Invoice creation time: <5 minutes (currently 30-45 minutes)
- Error rate: <5% (users complete without errors)
- Draft save rate: >80% (users save drafts before sending)
**Business:**
- Invoices sent within 24 hours of work completion: 90% (currently 60%)
- User satisfaction (NPS): 50+ (currently no baseline)
---
## Deliverables
- [x] User flow diagrams (completed)
- [ ] Wireframes (low-fidelity) — Due Feb 15
- [ ] Mockups (high-fidelity) — Due Feb 17
- [ ] Prototype (interactive via Stitch) — Due Feb 19
- [ ] Design system documentation — Due Feb 20
- [ ] Handoff specs for developers — Due Feb 20
---
## Timeline
| Phase | Deliverable | Due Date |
| ---------- | --------------------- | --------- |
| Discovery | User flows | Feb 14 ✅ |
| Wireframes | Lo-fi screens | Feb 15 |
| Design | Hi-fi mockups | Feb 17 |
| Prototype | Interactive prototype | Feb 19 |
| Handoff | Dev specs | Feb 20 |
---
## References
**PRD:** `data/1-Projets/invoice-system/PRD.md`
**User Stories:** `data/1-Projets/invoice-system/user-stories.md`
**Research:** `data/1-Projets/invoice-system/discovery-insights.md`
**Inspiration:** Stripe Invoicing, FreshBooks, Wave
prd-development: PRD is the input for the design briefuser-story: User stories inform screen inventory and flowspipeline-orchestrator: Triggers design brief generation after Design phasefigma-prototype: Uses design brief as input for prototypingstitch-loop: Uses design brief for AI-powered prototypingreferences/design-brief-template.md: Complete template (copy-paste ready)references/examples.md: 3 example design briefs (web app, mobile app, landing page)