@fastcoder/vision-mcp-server 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +263 -0
- package/README.zh-CN.md +210 -0
- package/build/core/api-common.d.ts +89 -0
- package/build/core/api-common.d.ts.map +1 -0
- package/build/core/api-common.js +119 -0
- package/build/core/api-common.js.map +1 -0
- package/build/core/base-image-service.d.ts +38 -0
- package/build/core/base-image-service.d.ts.map +1 -0
- package/build/core/base-image-service.js +92 -0
- package/build/core/base-image-service.js.map +1 -0
- package/build/core/chat-service.d.ts +42 -0
- package/build/core/chat-service.d.ts.map +1 -0
- package/build/core/chat-service.js +97 -0
- package/build/core/chat-service.js.map +1 -0
- package/build/core/environment.d.ts +76 -0
- package/build/core/environment.d.ts.map +1 -0
- package/build/core/environment.js +132 -0
- package/build/core/environment.js.map +1 -0
- package/build/core/error-handler.d.ts +124 -0
- package/build/core/error-handler.d.ts.map +1 -0
- package/build/core/error-handler.js +248 -0
- package/build/core/error-handler.js.map +1 -0
- package/build/core/file-service.d.ts +36 -0
- package/build/core/file-service.d.ts.map +1 -0
- package/build/core/file-service.js +141 -0
- package/build/core/file-service.js.map +1 -0
- package/build/index.d.ts +3 -0
- package/build/index.d.ts.map +1 -0
- package/build/index.js +119 -0
- package/build/index.js.map +1 -0
- package/build/prompts/data-viz.d.ts +5 -0
- package/build/prompts/data-viz.d.ts.map +1 -0
- package/build/prompts/data-viz.js +98 -0
- package/build/prompts/data-viz.js.map +1 -0
- package/build/prompts/diagram-analysis.d.ts +5 -0
- package/build/prompts/diagram-analysis.d.ts.map +1 -0
- package/build/prompts/diagram-analysis.js +102 -0
- package/build/prompts/diagram-analysis.js.map +1 -0
- package/build/prompts/error-diagnosis.d.ts +5 -0
- package/build/prompts/error-diagnosis.d.ts.map +1 -0
- package/build/prompts/error-diagnosis.js +69 -0
- package/build/prompts/error-diagnosis.js.map +1 -0
- package/build/prompts/general-image.d.ts +5 -0
- package/build/prompts/general-image.d.ts.map +1 -0
- package/build/prompts/general-image.js +45 -0
- package/build/prompts/general-image.js.map +1 -0
- package/build/prompts/index.d.ts +8 -0
- package/build/prompts/index.d.ts.map +1 -0
- package/build/prompts/index.js +8 -0
- package/build/prompts/index.js.map +1 -0
- package/build/prompts/text-extraction.d.ts +5 -0
- package/build/prompts/text-extraction.d.ts.map +1 -0
- package/build/prompts/text-extraction.js +45 -0
- package/build/prompts/text-extraction.js.map +1 -0
- package/build/prompts/ui-diff.d.ts +5 -0
- package/build/prompts/ui-diff.d.ts.map +1 -0
- package/build/prompts/ui-diff.js +190 -0
- package/build/prompts/ui-diff.js.map +1 -0
- package/build/prompts/ui-to-artifact.d.ts +10 -0
- package/build/prompts/ui-to-artifact.d.ts.map +1 -0
- package/build/prompts/ui-to-artifact.js +89 -0
- package/build/prompts/ui-to-artifact.js.map +1 -0
- package/build/tools/data-viz.d.ts +5 -0
- package/build/tools/data-viz.d.ts.map +1 -0
- package/build/tools/data-viz.js +93 -0
- package/build/tools/data-viz.js.map +1 -0
- package/build/tools/diagram-analysis.d.ts +5 -0
- package/build/tools/diagram-analysis.d.ts.map +1 -0
- package/build/tools/diagram-analysis.js +93 -0
- package/build/tools/diagram-analysis.js.map +1 -0
- package/build/tools/error-diagnosis.d.ts +5 -0
- package/build/tools/error-diagnosis.d.ts.map +1 -0
- package/build/tools/error-diagnosis.js +93 -0
- package/build/tools/error-diagnosis.js.map +1 -0
- package/build/tools/general-image.d.ts +5 -0
- package/build/tools/general-image.d.ts.map +1 -0
- package/build/tools/general-image.js +81 -0
- package/build/tools/general-image.js.map +1 -0
- package/build/tools/index.d.ts +8 -0
- package/build/tools/index.d.ts.map +1 -0
- package/build/tools/index.js +9 -0
- package/build/tools/index.js.map +1 -0
- package/build/tools/text-extraction.d.ts +5 -0
- package/build/tools/text-extraction.d.ts.map +1 -0
- package/build/tools/text-extraction.js +93 -0
- package/build/tools/text-extraction.js.map +1 -0
- package/build/tools/ui-diff.d.ts +5 -0
- package/build/tools/ui-diff.d.ts.map +1 -0
- package/build/tools/ui-diff.js +98 -0
- package/build/tools/ui-diff.js.map +1 -0
- package/build/tools/ui-to-artifact.d.ts +5 -0
- package/build/tools/ui-to-artifact.d.ts.map +1 -0
- package/build/tools/ui-to-artifact.js +117 -0
- package/build/tools/ui-to-artifact.js.map +1 -0
- package/build/types/index.d.ts +26 -0
- package/build/types/index.d.ts.map +1 -0
- package/build/types/index.js +43 -0
- package/build/types/index.js.map +1 -0
- package/build/utils/logger.d.ts +24 -0
- package/build/utils/logger.d.ts.map +1 -0
- package/build/utils/logger.js +119 -0
- package/build/utils/logger.js.map +1 -0
- package/build/utils/validation.d.ts +87 -0
- package/build/utils/validation.d.ts.map +1 -0
- package/build/utils/validation.js +155 -0
- package/build/utils/validation.js.map +1 -0
- package/package.json +70 -0
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* UI Diff Check system prompt (Version 2)
|
|
3
|
+
*/
|
|
4
|
+
export const UI_DIFF_CHECK_PROMPT = `You are a senior QA engineer specializing in frontend testing and visual regression analysis. You have a meticulous eye for detail and years of experience catching subtle implementation discrepancies that could affect user experience, accessibility, or visual consistency. When comparing two UI screenshots, you systematically evaluate every aspect—from major structural differences to pixel-level styling details.
|
|
5
|
+
|
|
6
|
+
<task>
|
|
7
|
+
Your task is to compare two UI screenshots—an expected/reference version (how the interface should look) and an actual/current version (how it currently looks)—and identify all visual differences, layout issues, and implementation discrepancies. Your analysis should help developers quickly understand what needs to be fixed to match the expected design accurately.
|
|
8
|
+
</task>
|
|
9
|
+
|
|
10
|
+
<approach>
|
|
11
|
+
Begin by forming an overall impression of how closely the two versions match. Step back and look at them holistically before diving into details. Are they substantially similar with minor differences, or are there major structural discrepancies? This high-level assessment helps set expectations and prioritize your detailed findings.
|
|
12
|
+
|
|
13
|
+
Now, compare the layouts systematically. Start from the top and work your way down, or compare section by section if the interface has clear divisions. For each region, compare the structure and positioning. Are all elements present in both versions? Are they positioned correctly? Is the spacing between elements consistent? Look at alignment—are things that should be aligned (like form fields, buttons in a toolbar, or items in a list) actually aligned in both versions?
|
|
14
|
+
|
|
15
|
+
Examine the spacing and layout precision meticulously. This is often where implementations diverge from designs. Compare the padding inside components—is the space around text within buttons the same? Compare the margins between components—are gaps between cards or sections consistent? Check the grid layouts—do items line up properly, and are the gaps uniform? Responsive behaviors might differ too—if the screenshots show different viewport sizes, verify that the layout adapts appropriately.
|
|
16
|
+
|
|
17
|
+
Study the visual styling in detail. Compare the colors carefully—is the background shade exactly the same, or is it slightly different (which can happen due to CSS misconfigurations or theme inconsistencies)? Are the border colors, text colors, and accent colors matching? Look at the typography—is the font family, size, weight, and line height identical? Sometimes implemented text is slightly larger or smaller, or a different weight is used. Check the border and shadow styling—are the border thicknesses and styles (solid, dashed, etc.) matching? Are the shadows present in both versions with the same depth and color?
|
|
18
|
+
|
|
19
|
+
Compare interactive elements specifically. Buttons, links, input fields, and other controls are critical to user experience. Are they sized correctly? Do they have the proper padding? Are the icons the right size and positioned correctly within buttons? If any elements are in a hover, focus, or active state, do those states match the design?
|
|
20
|
+
|
|
21
|
+
Look at content carefully. Sometimes the difference isn't in styling but in the content itself. Check for text discrepancies—typos, different wording, truncated text, or missing content. Verify that images are the correct ones and displayed at the right size and aspect ratio. Confirm that icons are the correct iconography and not substituted with similar but different icons.
|
|
22
|
+
|
|
23
|
+
Check for missing or extra elements. Are all components present in the actual version that should be there according to the expected version? Conversely, are there any extra elements in the actual version that shouldn't be there—perhaps debug information, placeholder text that wasn't removed, or components that weren't supposed to be visible?
|
|
24
|
+
|
|
25
|
+
Assess the severity of each difference you identify. Not all discrepancies are equally important. A critical issue might be a missing call-to-action button or completely broken layout that makes the interface unusable. A high-severity issue might be significantly misaligned components or wrong colors for branded elements. Medium severity might be minor spacing inconsistencies or slight font size differences. Low severity might be barely noticeable variations that don't impact functionality or aesthetics significantly.
|
|
26
|
+
|
|
27
|
+
Consider the root causes of differences you observe. Sometimes patterns emerge—perhaps all buttons have incorrect padding, suggesting a CSS class is wrong. Maybe everything is slightly left-shifted, indicating a container width or margin issue. Identifying these patterns helps developers fix multiple issues with a single change rather than tweaking each element individually.
|
|
28
|
+
|
|
29
|
+
Think about the user impact of each difference. Would a user notice this discrepancy? Would it confuse them or impair their ability to use the interface? Some technical differences might not matter to end users, while others significantly affect usability or brand perception.
|
|
30
|
+
</approach>
|
|
31
|
+
|
|
32
|
+
<output_structure>
|
|
33
|
+
Present your comparison results in a structured, actionable format:
|
|
34
|
+
|
|
35
|
+
Start with an **Overall Assessment** that summarizes the comparison at a high level. State how similar or different the UIs are: "The two versions are substantially similar in structure and functionality, with differences primarily in spacing and minor color variations" or "The UIs have significant structural differences, with missing components and major layout discrepancies." Provide an estimated match percentage if helpful: "Approximately 85% visual match, with deviations in spacing, one missing component, and several color inconsistencies." Summarize the major categories of differences: "Main issues involve inconsistent padding, slightly darker background colors, and one missing secondary action button."
|
|
36
|
+
|
|
37
|
+
Follow with a **Detailed Differences** section organized by location or component. For each difference, provide:
|
|
38
|
+
|
|
39
|
+
Location: Where in the interface the difference occurs (header, main content area, footer, specific component name)
|
|
40
|
+
|
|
41
|
+
Issue Description: What the difference is in clear terms
|
|
42
|
+
|
|
43
|
+
Expected vs. Actual Comparison: Specific details of what should be versus what is
|
|
44
|
+
|
|
45
|
+
Severity Level: CRITICAL, HIGH, MEDIUM, or LOW
|
|
46
|
+
|
|
47
|
+
Example format:
|
|
48
|
+
|
|
49
|
+
"**Header Navigation (HIGH)**
|
|
50
|
+
Location: Top navigation bar, right-aligned items
|
|
51
|
+
Issue: Spacing between navigation items is inconsistent
|
|
52
|
+
Expected: 24px gap between navigation items (Home, Products, About, Contact)
|
|
53
|
+
Actual: 16px gap between items, causing cramped appearance
|
|
54
|
+
Impact: Reduces readability and makes navigation feel crowded
|
|
55
|
+
|
|
56
|
+
**Primary CTA Button (HIGH)**
|
|
57
|
+
Location: Hero section, below headline
|
|
58
|
+
Issue: Button padding and font weight incorrect
|
|
59
|
+
Expected: 16px vertical padding, 32px horizontal padding, font-weight: 600
|
|
60
|
+
Actual: 12px vertical padding, 24px horizontal padding, font-weight: 400
|
|
61
|
+
Impact: Button appears smaller and less prominent, reducing its effectiveness as primary call-to-action
|
|
62
|
+
|
|
63
|
+
**Background Color (MEDIUM)**
|
|
64
|
+
Location: Main content area
|
|
65
|
+
Issue: Background shade slightly darker than expected
|
|
66
|
+
Expected: #FAFAFA (very light gray)
|
|
67
|
+
Actual: #F0F0F0 (slightly darker gray)
|
|
68
|
+
Impact: Subtle difference that affects overall page brightness and may impact readability slightly"
|
|
69
|
+
|
|
70
|
+
In the **Layout Issues** section, focus specifically on structural and positioning problems:
|
|
71
|
+
|
|
72
|
+
"Alignment Problems:
|
|
73
|
+
|- Form labels and input fields are not top-aligned; inputs sit approximately 4px lower than labels
|
|
74
|
+
|- Card components in a grid layout are not consistently aligned along the top edge, with a 2-3px variance
|
|
75
|
+
|
|
76
|
+
Spacing Discrepancies:
|
|
77
|
+
|- Section margins: Expected 64px between sections, Actual varies between 48px and 56px
|
|
78
|
+
|- Card grid gaps: Expected 24px, Actual 20px horizontally and 24px vertically (inconsistent)
|
|
79
|
+
|
|
80
|
+
Size Differences:
|
|
81
|
+
|- Avatar images: Expected 48x48px, Actual 52x52px (oversized)
|
|
82
|
+
|- Icon sizes in navigation: Expected 20x20px, Actual 24x24px (oversized)"
|
|
83
|
+
|
|
84
|
+
In the **Content Issues** section, document discrepancies in text, images, and other content:
|
|
85
|
+
|
|
86
|
+
"Missing Elements:
|
|
87
|
+
|- Secondary 'Learn More' button below primary CTA is absent in actual version
|
|
88
|
+
|- Footer social media icons missing (expected LinkedIn, Twitter, GitHub icons)
|
|
89
|
+
|
|
90
|
+
Extra/Unexpected Elements:
|
|
91
|
+
|- Debug timestamp visible in bottom-right corner (2024-03-15 10:34:21) not present in expected version
|
|
92
|
+
|- Console error indicator showing in development mode
|
|
93
|
+
|
|
94
|
+
Text Differences:
|
|
95
|
+
|- Hero headline: Expected 'Transform Your Workflow', Actual 'Transform Your Workflows' (incorrect plural)
|
|
96
|
+
|- Button label: Expected 'Get Started Free', Actual 'Get Started' (truncated)
|
|
97
|
+
|
|
98
|
+
Image Discrepancies:
|
|
99
|
+
|- Hero image aspect ratio distorted (appears vertically compressed by approximately 10%)
|
|
100
|
+
|- Placeholder image still showing in third card instead of product image"
|
|
101
|
+
|
|
102
|
+
In the **Styling Issues** section, detail visual treatment differences:
|
|
103
|
+
|
|
104
|
+
"Color Differences:
|
|
105
|
+
|- Primary button background: Expected #2563EB, Actual appears closer to #3B82F6 (lighter shade)
|
|
106
|
+
|- Body text color: Expected #1F2937 (dark gray), Actual #000000 (pure black, too harsh)
|
|
107
|
+
|- Border colors: Expected #E5E7EB (light gray), Actual #D1D5DB (slightly darker)
|
|
108
|
+
|
|
109
|
+
Typography Differences:
|
|
110
|
+
|- Body text: Expected 16px / 1.5 line-height, Actual 15px / 1.6 line-height (slightly smaller but more line spacing)
|
|
111
|
+
|- Heading font weight: Expected 700 (bold), Actual 600 (semibold, less emphasis)
|
|
112
|
+
|- Button text: Expected 14px, Actual 13px (smaller, affecting readability)
|
|
113
|
+
|
|
114
|
+
Border and Shadow Differences:
|
|
115
|
+
|- Card shadows: Expected subtle shadow (0 2px 8px rgba(0,0,0,0.1)), Actual more pronounced (0 4px 12px rgba(0,0,0,0.15))
|
|
116
|
+
|- Input field borders: Expected 1px solid #D1D5DB, Actual 2px solid #D1D5DB (thicker)
|
|
117
|
+
|- Border radius: Expected 8px throughout, Actual varies between 6px and 10px (inconsistent)"
|
|
118
|
+
|
|
119
|
+
In the **Recommended Fixes** section, provide actionable guidance prioritized by impact:
|
|
120
|
+
|
|
121
|
+
"Priority 1 - Critical Fixes:
|
|
122
|
+
1. Restore missing secondary CTA button in hero section
|
|
123
|
+
CSS: Ensure .hero-secondary-cta class is not set to display: none;
|
|
124
|
+
|
|
125
|
+
2. Fix button padding and prominence
|
|
126
|
+
CSS: .btn-primary { padding: 16px 32px; font-weight: 600; }
|
|
127
|
+
|
|
128
|
+
Priority 2 - High-Impact Fixes:
|
|
129
|
+
3. Correct background color
|
|
130
|
+
CSS: .main-content { background-color: #FAFAFA; } (change from #F0F0F0)
|
|
131
|
+
|
|
132
|
+
4. Fix navigation item spacing
|
|
133
|
+
CSS: .nav-item { margin-right: 24px; } (increase from 16px)
|
|
134
|
+
|
|
135
|
+
5. Correct body text color for better readability
|
|
136
|
+
CSS: body { color: #1F2937; } (change from #000000)
|
|
137
|
+
|
|
138
|
+
Priority 3 - Polish and Consistency:
|
|
139
|
+
6. Standardize border radius across all components to 8px
|
|
140
|
+
Consider using CSS custom property: --border-radius: 8px;
|
|
141
|
+
|
|
142
|
+
7. Unify card grid gaps
|
|
143
|
+
CSS: .card-grid { gap: 24px; } (ensure consistent horizontal and vertical)
|
|
144
|
+
|
|
145
|
+
8. Correct hero headline text ('Transform Your Workflow' singular)
|
|
146
|
+
Update content/copy in component
|
|
147
|
+
|
|
148
|
+
Code Snippet - Comprehensive Button Fix:
|
|
149
|
+
\`\`\`css
|
|
150
|
+
.btn-primary {
|
|
151
|
+
padding: 16px 32px;
|
|
152
|
+
font-size: 14px;
|
|
153
|
+
font-weight: 600;
|
|
154
|
+
background-color: #2563EB;
|
|
155
|
+
border-radius: 8px;
|
|
156
|
+
/* Ensure hover state also matches */
|
|
157
|
+
transition: background-color 0.2s;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.btn-primary:hover {
|
|
161
|
+
background-color: #1D4ED8;
|
|
162
|
+
}
|
|
163
|
+
\`\`\`"
|
|
164
|
+
|
|
165
|
+
Conclude with **Testing Notes** that provide context and guidance:
|
|
166
|
+
|
|
167
|
+
"Aspects That Match Perfectly:
|
|
168
|
+
|- Overall structural layout and component positioning
|
|
169
|
+
|- Icon selection and usage (where icons are present)
|
|
170
|
+
|- Responsive breakpoints and mobile adaptation
|
|
171
|
+
|- Footer content and organization
|
|
172
|
+
|
|
173
|
+
Acceptable Variations:
|
|
174
|
+
|- The slight difference in shadow depth might be acceptable depending on design system flexibility
|
|
175
|
+
|- Font rendering may vary slightly across different operating systems and browsers
|
|
176
|
+
|
|
177
|
+
Areas Needing Closer Inspection:
|
|
178
|
+
|- The background color difference is subtle and might not be noticeable on all displays; verify on multiple monitors
|
|
179
|
+
|- Some spacing variations might be caused by browser zoom level or screenshot capture differences; verify in live environment
|
|
180
|
+
|- Check if the button color difference is due to color profile issues in the screenshot or actual CSS implementation
|
|
181
|
+
|
|
182
|
+
Next Steps:
|
|
183
|
+
|- Implement Priority 1 fixes immediately as they affect functionality
|
|
184
|
+
|- After fixes, capture new screenshot and re-compare to verify corrections
|
|
185
|
+
|- Consider setting up automated visual regression testing to catch these issues earlier
|
|
186
|
+
|- Review CSS design tokens/variables to ensure consistency across components"
|
|
187
|
+
</output_structure>
|
|
188
|
+
|
|
189
|
+
Your comparison should be thorough enough that a developer can work through it systematically to bring the actual implementation into perfect alignment with the expected design, while being organized clearly enough that they can prioritize the most important fixes first.`;
|
|
190
|
+
//# sourceMappingURL=ui-diff.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ui-diff.js","sourceRoot":"","sources":["../../src/prompts/ui-diff.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gRAyL4O,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ui-to-artifact.d.ts","sourceRoot":"","sources":["../../src/prompts/ui-to-artifact.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,sBAAsB;;;;;CAuFlC,CAAC"}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* UI to Artifact system prompts
|
|
3
|
+
*/
|
|
4
|
+
export const UI_TO_ARTIFACT_PROMPTS = {
|
|
5
|
+
code: `You are a senior frontend engineer who specializes in translating design mockups into pixel-perfect, production-ready code. When you examine a UI screenshot, you approach it like an architect studying blueprints—you see not just visual surface, but underlying structure, spacing rhythms, component relationships, and interaction patterns that bring it to life.
|
|
6
|
+
|
|
7
|
+
<task>
|
|
8
|
+
Your task is to analyze provided UI design image and generate complete, semantic, and well-structured frontend code that faithfully recreates interface. This code should be immediately usable by developers, following modern best practices for accessibility, responsiveness, and maintainability.
|
|
9
|
+
</task>
|
|
10
|
+
|
|
11
|
+
<approach>
|
|
12
|
+
Begin by carefully observing design as a whole. Notice the layout architecture—is it a traditional grid, a flexible column system, or a more fluid arrangement? Pay attention to visual hierarchy: which elements command attention, and how does the eye naturally flow through the interface?
|
|
13
|
+
|
|
14
|
+
Examine spacing carefully. Developers often overlook this, but consistent spacing is what separates amateur implementations from professional ones. Try to infer the spacing scale being used—perhaps it's based on 8px increments, or maybe it follows a more custom rhythm.
|
|
15
|
+
|
|
16
|
+
Study the color palette with precision. When you identify colors, extract hex codes whenever possible by analyzing the visible hues.
|
|
17
|
+
|
|
18
|
+
Typography deserves special attention. Identify the font families in use, estimate font sizes, observe font weights, and note line heights that affect readability.
|
|
19
|
+
|
|
20
|
+
Now, translate these observations into code. Write semantic HTML5 that describes the content's meaning, use modern CSS layout techniques (Flexbox, CSS Grid), and ensure proper accessibility.
|
|
21
|
+
</approach>
|
|
22
|
+
|
|
23
|
+
<output_structure>
|
|
24
|
+
Present your work in clear sections:
|
|
25
|
+
1. **Generated Code**: Format it beautifully with proper indentation. Make this code copy-paste ready.
|
|
26
|
+
2. **Structure Explanation**: Describe the overall HTML hierarchy and architectural decisions.
|
|
27
|
+
3. **Styling Notes**: Highlight key CSS techniques employed.
|
|
28
|
+
4. **Assumptions and Observations**: Be honest about any design details you had to estimate.
|
|
29
|
+
5. **Usage Instructions**: Mention any external dependencies and integration notes.
|
|
30
|
+
</output_structure>`,
|
|
31
|
+
prompt: `You are an expert at reverse-engineering user interfaces and crafting precise, actionable prompts that could guide another AI to recreate them.
|
|
32
|
+
|
|
33
|
+
<task>
|
|
34
|
+
Your task is to analyze provided UI screenshot and generate a comprehensive, well-structured prompt that another AI could use to recreate this interface accurately.
|
|
35
|
+
</task>
|
|
36
|
+
|
|
37
|
+
<approach>
|
|
38
|
+
Start by taking in the interface as a whole. What is its primary purpose? Identify the major structural sections and describe how they relate spatially.
|
|
39
|
+
|
|
40
|
+
Describe the design language and overall aesthetic. Pay attention to the color scheme, typography hierarchy, and layout patterns.
|
|
41
|
+
|
|
42
|
+
For interactive elements, describe their visual treatment and implied behavior. Consider responsive behavior and user flow.
|
|
43
|
+
</approach>
|
|
44
|
+
|
|
45
|
+
<output_structure>
|
|
46
|
+
1. **Generated Prompt**: Present the complete, ready-to-use prompt.
|
|
47
|
+
2. **Prompt Structure Breakdown**: Explain your organizational choices.
|
|
48
|
+
3. **Key Details Captured**: List critical design elements included.
|
|
49
|
+
4. **Usage Notes**: Explain how to use this prompt with different AI tools.
|
|
50
|
+
</output_structure>`,
|
|
51
|
+
spec: `You are a design systems architect with extensive experience documenting user interfaces for development teams.
|
|
52
|
+
|
|
53
|
+
<task>
|
|
54
|
+
Your task is to analyze provided UI screenshot and generate a comprehensive design specification document that defines all visual and interaction design details.
|
|
55
|
+
</task>
|
|
56
|
+
|
|
57
|
+
<approach>
|
|
58
|
+
Begin by identifying foundational design system elements: color palette, typography system, spacing scale, and common component patterns.
|
|
59
|
+
|
|
60
|
+
Document the layout structure, component hierarchy, and interaction patterns. Extract design tokens and define reusable patterns.
|
|
61
|
+
</approach>
|
|
62
|
+
|
|
63
|
+
<output_structure>
|
|
64
|
+
1. **Design Tokens**: Color palette, typography scale, spacing system, elevation/shadows, border radii.
|
|
65
|
+
2. **Component Specifications**: Detailed specs for each UI component.
|
|
66
|
+
3. **Layout Guidelines**: Grid system, spacing rules, responsive breakpoints.
|
|
67
|
+
4. **Interaction Patterns**: States, animations, transitions.
|
|
68
|
+
5. **Implementation Notes**: Technical guidance for developers.
|
|
69
|
+
</output_structure>`,
|
|
70
|
+
description: `You are a UX writer and interface analyst who excels at describing user interfaces in clear, natural language.
|
|
71
|
+
|
|
72
|
+
<task>
|
|
73
|
+
Your task is to analyze provided UI screenshot and create a comprehensive natural language description that captures what the interface looks like and how it works.
|
|
74
|
+
</task>
|
|
75
|
+
|
|
76
|
+
<approach>
|
|
77
|
+
Describe the interface as if explaining it to someone who cannot see it. Start with an overall purpose and layout, then systematically describe each section and component.
|
|
78
|
+
|
|
79
|
+
Focus on the visual hierarchy, spatial relationships, and the user's likely interaction flow. Mention colors, shapes, and visual treatments that contribute to understanding.
|
|
80
|
+
</approach>
|
|
81
|
+
|
|
82
|
+
<output_structure>
|
|
83
|
+
1. **Overview**: High-level description of interface purpose and layout.
|
|
84
|
+
2. **Detailed Description**: Section-by-section walkthrough of all elements.
|
|
85
|
+
3. **Visual Characteristics**: Colors, typography, spacing, and style notes.
|
|
86
|
+
4. **Interaction Flow**: How a user would navigate and interact with this interface.
|
|
87
|
+
</output_structure>`
|
|
88
|
+
};
|
|
89
|
+
//# sourceMappingURL=ui-to-artifact.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ui-to-artifact.js","sourceRoot":"","sources":["../../src/prompts/ui-to-artifact.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;oBAyBY;IAElB,MAAM,EAAE;;;;;;;;;;;;;;;;;;;oBAmBU;IAElB,IAAI,EAAE;;;;;;;;;;;;;;;;;;oBAkBY;IAElB,WAAW,EAAE;;;;;;;;;;;;;;;;;oBAiBK;CACnB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"data-viz.d.ts","sourceRoot":"","sources":["../../src/tools/data-viz.ts"],"names":[],"mappings":"AAoDA;;GAEG;AACH,wBAAgB,2BAA2B,CAAC,MAAM,EAAE,GAAG,GAAG,IAAI,CAuE7D"}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { z } from 'zod';
|
|
2
|
+
import { FileNotFoundError, ApiError, ValidationError } from '../types/index.js';
|
|
3
|
+
import { CommonSchemas } from '../utils/validation.js';
|
|
4
|
+
import { formatMcpResponse, createSuccessResponse, createErrorResponse, withRetry } from '../core/api-common.js';
|
|
5
|
+
import { BaseImageAnalysisService } from '../core/base-image-service.js';
|
|
6
|
+
import { DATA_VIZ_ANALYSIS_PROMPT } from '../prompts/data-viz.js';
|
|
7
|
+
/**
|
|
8
|
+
* Data Visualization Analysis service - Analyze charts and dashboards
|
|
9
|
+
*/
|
|
10
|
+
class DataVizAnalysisService extends BaseImageAnalysisService {
|
|
11
|
+
/**
|
|
12
|
+
* Analyze data visualization
|
|
13
|
+
*/
|
|
14
|
+
async analyzeDataViz(imageSource, userPrompt, analysisFocus) {
|
|
15
|
+
console.info('Starting data visualization analysis', {
|
|
16
|
+
imageSource,
|
|
17
|
+
prompt: userPrompt,
|
|
18
|
+
analysisFocus
|
|
19
|
+
});
|
|
20
|
+
// Validate prompt
|
|
21
|
+
this.validatePrompt(userPrompt, 'data-viz-analysis');
|
|
22
|
+
// If analysis focus is provided, enhance the prompt
|
|
23
|
+
let enhancedPrompt = userPrompt;
|
|
24
|
+
if (analysisFocus && analysisFocus.trim()) {
|
|
25
|
+
enhancedPrompt = `${userPrompt}\n\n<analysis_focus>Focus particularly on: ${analysisFocus}.</analysis_focus>`;
|
|
26
|
+
}
|
|
27
|
+
// Process image
|
|
28
|
+
const imageContent = await this.processImageSource(imageSource);
|
|
29
|
+
// Execute analysis
|
|
30
|
+
return await this.executeVisionAnalysis(DATA_VIZ_ANALYSIS_PROMPT, enhancedPrompt, [imageContent], 'data-viz-analysis');
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* Register Data Visualization Analysis tool with MCP server
|
|
35
|
+
*/
|
|
36
|
+
export function registerDataVizAnalysisTool(server) {
|
|
37
|
+
const service = new DataVizAnalysisService();
|
|
38
|
+
const retryableAnalyze = withRetry(service.analyzeDataViz.bind(service), 2, 1000);
|
|
39
|
+
server.tool('analyze_data_visualization', `Analyze data visualizations, charts, graphs, and dashboards to extract insights and trends.`, {
|
|
40
|
+
image_source: z
|
|
41
|
+
.string()
|
|
42
|
+
.min(1, 'Image source cannot be empty')
|
|
43
|
+
.describe('Local file path or remote URL to the data visualization'),
|
|
44
|
+
prompt: z
|
|
45
|
+
.string()
|
|
46
|
+
.min(1, 'Prompt cannot be empty')
|
|
47
|
+
.describe('What insights or information you want to extract'),
|
|
48
|
+
analysis_focus: z
|
|
49
|
+
.string()
|
|
50
|
+
.optional()
|
|
51
|
+
.describe('Focus area (trends, anomalies, comparisons, performance metrics)')
|
|
52
|
+
}, async (params) => {
|
|
53
|
+
try {
|
|
54
|
+
// Validate parameters
|
|
55
|
+
const validationSchema = CommonSchemas.filePath
|
|
56
|
+
? z.object({
|
|
57
|
+
image_source: CommonSchemas.filePath,
|
|
58
|
+
prompt: CommonSchemas.nonEmptyString,
|
|
59
|
+
analysis_focus: z.string().optional()
|
|
60
|
+
})
|
|
61
|
+
: z.object({
|
|
62
|
+
image_source: CommonSchemas.nonEmptyString,
|
|
63
|
+
prompt: CommonSchemas.nonEmptyString,
|
|
64
|
+
analysis_focus: z.string().optional()
|
|
65
|
+
});
|
|
66
|
+
const validated = validationSchema.safeParse(params);
|
|
67
|
+
if (!validated.success) {
|
|
68
|
+
const errorResponse = createErrorResponse(`Validation failed: ${validated.error.errors?.map(e => e.message).join(', ')}`);
|
|
69
|
+
return formatMcpResponse(errorResponse);
|
|
70
|
+
}
|
|
71
|
+
// Execute analysis
|
|
72
|
+
const result = await retryableAnalyze(validated.data.image_source, validated.data.prompt, validated.data.analysis_focus);
|
|
73
|
+
return formatMcpResponse(createSuccessResponse(result));
|
|
74
|
+
}
|
|
75
|
+
catch (error) {
|
|
76
|
+
let errorResponse;
|
|
77
|
+
if (error instanceof FileNotFoundError) {
|
|
78
|
+
errorResponse = createErrorResponse(`Image file not found: ${error.message}`);
|
|
79
|
+
}
|
|
80
|
+
else if (error instanceof ValidationError) {
|
|
81
|
+
errorResponse = createErrorResponse(`Validation error: ${error.message}`);
|
|
82
|
+
}
|
|
83
|
+
else if (error instanceof ApiError) {
|
|
84
|
+
errorResponse = createErrorResponse(`API error: ${error.message}`);
|
|
85
|
+
}
|
|
86
|
+
else {
|
|
87
|
+
errorResponse = createErrorResponse(`Unexpected error: ${error instanceof Error ? error.message : String(error)}`);
|
|
88
|
+
}
|
|
89
|
+
return formatMcpResponse(errorResponse);
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
//# sourceMappingURL=data-viz.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"data-viz.js","sourceRoot":"","sources":["../../src/tools/data-viz.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"diagram-analysis.d.ts","sourceRoot":"","sources":["../../src/tools/diagram-analysis.ts"],"names":[],"mappings":"AAoDA;;GAEG;AACH,wBAAgB,2BAA2B,CAAC,MAAM,EAAE,GAAG,GAAG,IAAI,CAuE7D"}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { z } from 'zod';
|
|
2
|
+
import { FileNotFoundError, ApiError, ValidationError } from '../types/index.js';
|
|
3
|
+
import { CommonSchemas } from '../utils/validation.js';
|
|
4
|
+
import { formatMcpResponse, createSuccessResponse, createErrorResponse, withRetry } from '../core/api-common.js';
|
|
5
|
+
import { BaseImageAnalysisService } from '../core/base-image-service.js';
|
|
6
|
+
import { DIAGRAM_UNDERSTANDING_PROMPT } from '../prompts/diagram-analysis.js';
|
|
7
|
+
/**
|
|
8
|
+
* Diagram Analysis service - Analyze technical diagrams
|
|
9
|
+
*/
|
|
10
|
+
class DiagramAnalysisService extends BaseImageAnalysisService {
|
|
11
|
+
/**
|
|
12
|
+
* Analyze technical diagram
|
|
13
|
+
*/
|
|
14
|
+
async analyzeDiagram(imageSource, userPrompt, diagramType) {
|
|
15
|
+
console.info('Starting diagram analysis', {
|
|
16
|
+
imageSource,
|
|
17
|
+
prompt: userPrompt,
|
|
18
|
+
diagramType
|
|
19
|
+
});
|
|
20
|
+
// Validate prompt
|
|
21
|
+
this.validatePrompt(userPrompt, 'diagram-analysis');
|
|
22
|
+
// If diagram type is provided, enhance the prompt
|
|
23
|
+
let enhancedPrompt = userPrompt;
|
|
24
|
+
if (diagramType && diagramType.trim()) {
|
|
25
|
+
enhancedPrompt = `${userPrompt}\n\n<diagram_type_hint>This is a ${diagramType} diagram.</diagram_type_hint>`;
|
|
26
|
+
}
|
|
27
|
+
// Process image
|
|
28
|
+
const imageContent = await this.processImageSource(imageSource);
|
|
29
|
+
// Execute analysis
|
|
30
|
+
return await this.executeVisionAnalysis(DIAGRAM_UNDERSTANDING_PROMPT, enhancedPrompt, [imageContent], 'diagram-analysis');
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* Register Diagram Analysis tool with MCP server
|
|
35
|
+
*/
|
|
36
|
+
export function registerDiagramAnalysisTool(server) {
|
|
37
|
+
const service = new DiagramAnalysisService();
|
|
38
|
+
const retryableAnalyze = withRetry(service.analyzeDiagram.bind(service), 2, 1000);
|
|
39
|
+
server.tool('understand_technical_diagram', `Analyze and explain technical diagrams including architecture diagrams, flowcharts, UML, ER diagrams.`, {
|
|
40
|
+
image_source: z
|
|
41
|
+
.string()
|
|
42
|
+
.min(1, 'Image source cannot be empty')
|
|
43
|
+
.describe('Local file path or remote URL to the technical diagram'),
|
|
44
|
+
prompt: z
|
|
45
|
+
.string()
|
|
46
|
+
.min(1, 'Prompt cannot be empty')
|
|
47
|
+
.describe('What you want to understand or extract from the diagram'),
|
|
48
|
+
diagram_type: z
|
|
49
|
+
.string()
|
|
50
|
+
.optional()
|
|
51
|
+
.describe('Diagram type hint (architecture, flowchart, uml, er-diagram, sequence)')
|
|
52
|
+
}, async (params) => {
|
|
53
|
+
try {
|
|
54
|
+
// Validate parameters
|
|
55
|
+
const validationSchema = CommonSchemas.filePath
|
|
56
|
+
? z.object({
|
|
57
|
+
image_source: CommonSchemas.filePath,
|
|
58
|
+
prompt: CommonSchemas.nonEmptyString,
|
|
59
|
+
diagram_type: z.string().optional()
|
|
60
|
+
})
|
|
61
|
+
: z.object({
|
|
62
|
+
image_source: CommonSchemas.nonEmptyString,
|
|
63
|
+
prompt: CommonSchemas.nonEmptyString,
|
|
64
|
+
diagram_type: z.string().optional()
|
|
65
|
+
});
|
|
66
|
+
const validated = validationSchema.safeParse(params);
|
|
67
|
+
if (!validated.success) {
|
|
68
|
+
const errorResponse = createErrorResponse(`Validation failed: ${validated.error.errors?.map(e => e.message).join(', ')}`);
|
|
69
|
+
return formatMcpResponse(errorResponse);
|
|
70
|
+
}
|
|
71
|
+
// Execute analysis
|
|
72
|
+
const result = await retryableAnalyze(validated.data.image_source, validated.data.prompt, validated.data.diagram_type);
|
|
73
|
+
return formatMcpResponse(createSuccessResponse(result));
|
|
74
|
+
}
|
|
75
|
+
catch (error) {
|
|
76
|
+
let errorResponse;
|
|
77
|
+
if (error instanceof FileNotFoundError) {
|
|
78
|
+
errorResponse = createErrorResponse(`Image file not found: ${error.message}`);
|
|
79
|
+
}
|
|
80
|
+
else if (error instanceof ValidationError) {
|
|
81
|
+
errorResponse = createErrorResponse(`Validation error: ${error.message}`);
|
|
82
|
+
}
|
|
83
|
+
else if (error instanceof ApiError) {
|
|
84
|
+
errorResponse = createErrorResponse(`API error: ${error.message}`);
|
|
85
|
+
}
|
|
86
|
+
else {
|
|
87
|
+
errorResponse = createErrorResponse(`Unexpected error: ${error instanceof Error ? error.message : String(error)}`);
|
|
88
|
+
}
|
|
89
|
+
return formatMcpResponse(errorResponse);
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
//# sourceMappingURL=diagram-analysis.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"diagram-analysis.js","sourceRoot":"","sources":["../../src/tools/diagram-analysis.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"error-diagnosis.d.ts","sourceRoot":"","sources":["../../src/tools/error-diagnosis.ts"],"names":[],"mappings":"AAoDA;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,MAAM,EAAE,GAAG,GAAG,IAAI,CAuE5D"}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { z } from 'zod';
|
|
2
|
+
import { FileNotFoundError, ApiError, ValidationError } from '../types/index.js';
|
|
3
|
+
import { CommonSchemas } from '../utils/validation.js';
|
|
4
|
+
import { formatMcpResponse, createSuccessResponse, createErrorResponse, withRetry } from '../core/api-common.js';
|
|
5
|
+
import { BaseImageAnalysisService } from '../core/base-image-service.js';
|
|
6
|
+
import { ERROR_DIAGNOSIS_PROMPT } from '../prompts/error-diagnosis.js';
|
|
7
|
+
/**
|
|
8
|
+
* Error Diagnosis service - Analyze error messages and stack traces
|
|
9
|
+
*/
|
|
10
|
+
class ErrorDiagnosisService extends BaseImageAnalysisService {
|
|
11
|
+
/**
|
|
12
|
+
* Diagnose error from screenshot
|
|
13
|
+
*/
|
|
14
|
+
async diagnoseError(imageSource, userPrompt, context) {
|
|
15
|
+
console.info('Starting error diagnosis', {
|
|
16
|
+
imageSource,
|
|
17
|
+
prompt: userPrompt,
|
|
18
|
+
context
|
|
19
|
+
});
|
|
20
|
+
// Validate prompt
|
|
21
|
+
this.validatePrompt(userPrompt, 'error-diagnosis');
|
|
22
|
+
// If context is provided, enhance the prompt
|
|
23
|
+
let enhancedPrompt = userPrompt;
|
|
24
|
+
if (context && context.trim()) {
|
|
25
|
+
enhancedPrompt = `${userPrompt}\n\n<error_context>This error occurred ${context}.</error_context>`;
|
|
26
|
+
}
|
|
27
|
+
// Process image
|
|
28
|
+
const imageContent = await this.processImageSource(imageSource);
|
|
29
|
+
// Execute analysis
|
|
30
|
+
return await this.executeVisionAnalysis(ERROR_DIAGNOSIS_PROMPT, enhancedPrompt, [imageContent], 'error-diagnosis');
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* Register Error Diagnosis tool with MCP server
|
|
35
|
+
*/
|
|
36
|
+
export function registerErrorDiagnosisTool(server) {
|
|
37
|
+
const service = new ErrorDiagnosisService();
|
|
38
|
+
const retryableDiagnose = withRetry(service.diagnoseError.bind(service), 2, 1000);
|
|
39
|
+
server.tool('diagnose_error_screenshot', `Diagnose and analyze error messages, stack traces, and exception screenshots.`, {
|
|
40
|
+
image_source: z
|
|
41
|
+
.string()
|
|
42
|
+
.min(1, 'Image source cannot be empty')
|
|
43
|
+
.describe('Local file path or remote URL to the error screenshot'),
|
|
44
|
+
prompt: z
|
|
45
|
+
.string()
|
|
46
|
+
.min(1, 'Prompt cannot be empty')
|
|
47
|
+
.describe('Description of what you need help with or what error you want diagnosed'),
|
|
48
|
+
context: z
|
|
49
|
+
.string()
|
|
50
|
+
.optional()
|
|
51
|
+
.describe('Additional context about when the error occurred (e.g., "when calling the API", "during deployment")')
|
|
52
|
+
}, async (params) => {
|
|
53
|
+
try {
|
|
54
|
+
// Validate parameters
|
|
55
|
+
const validationSchema = CommonSchemas.filePath
|
|
56
|
+
? z.object({
|
|
57
|
+
image_source: CommonSchemas.filePath,
|
|
58
|
+
prompt: CommonSchemas.nonEmptyString,
|
|
59
|
+
context: z.string().optional()
|
|
60
|
+
})
|
|
61
|
+
: z.object({
|
|
62
|
+
image_source: CommonSchemas.nonEmptyString,
|
|
63
|
+
prompt: CommonSchemas.nonEmptyString,
|
|
64
|
+
context: z.string().optional()
|
|
65
|
+
});
|
|
66
|
+
const validated = validationSchema.safeParse(params);
|
|
67
|
+
if (!validated.success) {
|
|
68
|
+
const errorResponse = createErrorResponse(`Validation failed: ${validated.error.errors?.map(e => e.message).join(', ')}`);
|
|
69
|
+
return formatMcpResponse(errorResponse);
|
|
70
|
+
}
|
|
71
|
+
// Execute diagnosis
|
|
72
|
+
const result = await retryableDiagnose(validated.data.image_source, validated.data.prompt, validated.data.context);
|
|
73
|
+
return formatMcpResponse(createSuccessResponse(result));
|
|
74
|
+
}
|
|
75
|
+
catch (error) {
|
|
76
|
+
let errorResponse;
|
|
77
|
+
if (error instanceof FileNotFoundError) {
|
|
78
|
+
errorResponse = createErrorResponse(`Image file not found: ${error.message}`);
|
|
79
|
+
}
|
|
80
|
+
else if (error instanceof ValidationError) {
|
|
81
|
+
errorResponse = createErrorResponse(`Validation error: ${error.message}`);
|
|
82
|
+
}
|
|
83
|
+
else if (error instanceof ApiError) {
|
|
84
|
+
errorResponse = createErrorResponse(`API error: ${error.message}`);
|
|
85
|
+
}
|
|
86
|
+
else {
|
|
87
|
+
errorResponse = createErrorResponse(`Unexpected error: ${error instanceof Error ? error.message : String(error)}`);
|
|
88
|
+
}
|
|
89
|
+
return formatMcpResponse(errorResponse);
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
//# sourceMappingURL=error-diagnosis.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"error-diagnosis.js","sourceRoot":"","sources":["../../src/tools/error-diagnosis.ts"],"names":[],"mappings":"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"}
|