design-inspire

name	design-inspire
description	Gather, organize, and tag design references from real apps, web search, and designer-provided screenshots. Connects references to the atomic decomposition from Analyze. Triggers on 'find inspiration', 'gather references', 'build mood board', 'check this app'.
allowed-tools	["Read","Write","Bash","Glob","Grep","Edit","Agent","WebFetch","WebSearch","AskUserQuestion"]

Design Inspire

Gather and organize design references for every pattern and component in the decomposition. Work through three channels: knowledge base, web research, and designer input.

1. Pre-flight

Read state.json from the project directory. Verify the analyze phase has status complete.

If analyze is not complete, warn the designer:

"The Analyze phase isn't done yet. I'll need you to describe your pages and key patterns manually so I can gather references."

Then ask for a list of pages and their key patterns. Use that as the working decomposition.

If analyze is complete, read decomposition.json to get the full list of flows, pages, patterns, and components.

Read manifest.json from the designSystemPath recorded in state.json to understand available design system components.

Create the output directories:

inspire/
inspire/screenshots/

2. Knowledge Base Scan

Read the pattern knowledge base files from the plugin's references/patterns/ directory:

• saas-workflow-patterns.md
• component-patterns.md
• atomic-design.md
• visual-design-principles.md

For each pattern listed in the decomposition, check if there is a matching entry in the knowledge base files. Build a lookup of pattern-to-best-practices that you will reference throughout the gathering phase.

Do not present all findings at once. Hold them and surface them page-by-page during systematic gathering.

3. Systematic Reference Gathering

Work through the decomposition page by page. For each page:

1. Identify the 2-3 most important patterns that need visual references.
2. For each pattern, present the knowledge base insight first:

"For search bars, there are 3 common approaches: persistent, expandable, modal. I recommend persistent for your use case because users will search frequently and need immediate access."

3. Search the web for real-world examples of that pattern. Use specific queries combining the pattern name with the project domain.

4. When you find a strong reference, use Playwright to navigate to it:

   • mcp__plugin_playwright_playwright__browser_navigate to open the URL
   • mcp__plugin_playwright_playwright__browser_take_screenshot to capture the screen
   • mcp__plugin_playwright_playwright__browser_snapshot to analyze DOM structure if needed
   • mcp__plugin_playwright_playwright__browser_click to navigate through flows

5. Save screenshots to inspire/screenshots/ with descriptive names like linear-inbox-list-layout.png.

6. Present 2-3 references for each pattern. Mark one as the starred recommendation. Explain why it works well for this project.

7. Ask the designer after each page:

"Does this direction feel right? Want me to check any specific app or explore a different approach?"

Wait for confirmation before moving to the next page. If the designer suggests an app or URL, switch to Channel 3 handling.

4. Designer-Provided References

At any point the designer can provide references. Handle each type:

URLs: Navigate with Playwright, screenshot key screens, analyze the patterns and layout visible on screen. Tag against the decomposition.

App names ("check Urban Company", "look at Notion"): Search the web to find the app's website or web version. Navigate with Playwright, screenshot the relevant screens. If the app is mobile-only, search for app screenshots or review sites that show the UI.

Screenshot files: Read the image file directly. Analyze what patterns, layout choices, and style decisions are visible. Tag against the decomposition.

Specific pattern requests ("I like how Stripe does their dashboard metrics"): Search for that specific pattern in the named app. Navigate to the relevant screen, screenshot it, and tag it to the matching decomposition element.

Tag all designer-provided references with addedBy: "designer" in the output. Ask the designer to confirm the tagging if the mapping to the decomposition is ambiguous.

5. Build Inspiration Board

After gathering references for all pages and patterns, generate the final outputs.

Write inspire/references.json following the schema documented in references/reference-schema.md. Include every reference gathered across all three channels. Assign sequential IDs (ref-001, ref-002, etc.). Compute the category counts.

Write inspire/board.html as a visual summary page:

• Link the design system CSS from the designSystemPath:

  <link rel="stylesheet" href="{designSystemPath}/design-system.css">
  

• Include the Geist font from Google Fonts.
• Show a summary header: total references, breakdown by category (pattern, style, layout, content, interaction), count of starred references.
• Group references by page from the decomposition. Each page gets its own section.
• Render each reference as a card showing:
  • Screenshot thumbnail (if available)
  • Source name or URL
  • Pattern/component tag
  • Type badge (pattern, style, layout, content, interaction)
  • Notes text
  • Starred references get a highlighted border using the design system's accent color
• At the bottom of each page section, list any patterns from the decomposition that still lack references.
• Use the design system's typography tokens, spacing tokens, and component styles where applicable.

6. State Update

Update state.json:

• Set the inspire phase status to complete.
• Record the totalReferences count as a decision.
• Record the category breakdown.

Announce completion to the designer:

"Inspiration board complete! {N} references across {M} pages. {X} are starred recommendations. Open inspire/board.html to browse the visual board. Ready to move to wireframing?"

Reference Files

• references/reference-schema.md — full JSON schema for references.json with field definitions
• references/inspiration-sources.md — detailed documentation of the three input channels and Playwright tool usage