@layoutdesign/context 0.1.9 → 0.1.11
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/dist/src/mcp/tools/get-screenshots.d.ts +1 -1
- package/dist/src/mcp/tools/push-to-figma.d.ts +3 -1
- package/dist/src/mcp/tools/push-to-figma.d.ts.map +1 -1
- package/dist/src/mcp/tools/push-to-figma.js +85 -26
- package/dist/src/mcp/tools/push-to-figma.js.map +1 -1
- package/dist/src/mcp/tools/url-to-figma.d.ts +1 -1
- package/dist/src/preview/server.d.ts.map +1 -1
- package/dist/src/preview/server.js +5 -16
- package/dist/src/preview/server.js.map +1 -1
- package/package.json +1 -1
|
@@ -3,8 +3,8 @@ export declare const name = "get-screenshots";
|
|
|
3
3
|
export declare const description: string;
|
|
4
4
|
export declare const inputSchema: {
|
|
5
5
|
type: z.ZodDefault<z.ZodOptional<z.ZodEnum<{
|
|
6
|
-
viewport: "viewport";
|
|
7
6
|
"full-page": "full-page";
|
|
7
|
+
viewport: "viewport";
|
|
8
8
|
all: "all";
|
|
9
9
|
}>>>;
|
|
10
10
|
};
|
|
@@ -10,11 +10,13 @@ export declare const inputSchema: {
|
|
|
10
10
|
tablet: "tablet";
|
|
11
11
|
mobile: "mobile";
|
|
12
12
|
}>>>;
|
|
13
|
+
figmaUrl: z.ZodOptional<z.ZodString>;
|
|
13
14
|
};
|
|
14
|
-
export declare function handler(kit: Kit | null): ({ code, name: frameName, viewports }: {
|
|
15
|
+
export declare function handler(kit: Kit | null): ({ code, name: frameName, viewports, figmaUrl, }: {
|
|
15
16
|
code: string;
|
|
16
17
|
name?: string;
|
|
17
18
|
viewports?: string[];
|
|
19
|
+
figmaUrl?: string;
|
|
18
20
|
}) => Promise<{
|
|
19
21
|
content: {
|
|
20
22
|
type: "text";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"push-to-figma.d.ts","sourceRoot":"","sources":["../../../../src/mcp/tools/push-to-figma.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAG9C,eAAO,MAAM,IAAI,kBAAkB,CAAC;AAEpC,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"push-to-figma.d.ts","sourceRoot":"","sources":["../../../../src/mcp/tools/push-to-figma.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAG9C,eAAO,MAAM,IAAI,kBAAkB,CAAC;AAEpC,eAAO,MAAM,WAAW,QAI+C,CAAC;AAExE,eAAO,MAAM,WAAW;;;;;;;;;CAiBvB,CAAC;AAUF,wBAAgB,OAAO,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,IACvB,iDAKX;IACD,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;;;;;GAqJF"}
|
|
@@ -2,9 +2,9 @@ import { z } from "zod";
|
|
|
2
2
|
import { PREVIEW_PORT } from "../../kit/types.js";
|
|
3
3
|
export const name = "push-to-figma";
|
|
4
4
|
export const description = "Push a component to Figma as editable frames. Sends the code to the preview server, " +
|
|
5
|
-
"then returns step-by-step instructions for capturing it via Figma MCP
|
|
6
|
-
"
|
|
7
|
-
"Requires
|
|
5
|
+
"then returns step-by-step instructions for capturing it via Figma MCP and Playwright MCP. " +
|
|
6
|
+
"Supports multi-viewport capture (desktop, tablet, mobile) with correct responsive rendering. " +
|
|
7
|
+
"Requires both Figma MCP and Playwright MCP servers to be connected.";
|
|
8
8
|
export const inputSchema = {
|
|
9
9
|
code: z.string().describe("The component TSX/JSX code to push to Figma as an editable frame"),
|
|
10
10
|
name: z
|
|
@@ -15,12 +15,31 @@ export const inputSchema = {
|
|
|
15
15
|
.array(z.enum(["desktop", "tablet", "mobile"]))
|
|
16
16
|
.optional()
|
|
17
17
|
.describe("Viewports to capture (default: ['desktop']). Each gets a separate Figma frame."),
|
|
18
|
+
figmaUrl: z
|
|
19
|
+
.string()
|
|
20
|
+
.optional()
|
|
21
|
+
.describe("Figma file URL to push into (e.g. https://www.figma.com/design/ABC123/...). " +
|
|
22
|
+
"If provided, pushes into this existing file. If omitted, creates a new file."),
|
|
18
23
|
};
|
|
24
|
+
const VIEWPORT_DIMS = {
|
|
25
|
+
desktop: { width: 1280, height: 900 },
|
|
26
|
+
tablet: { width: 768, height: 1024 },
|
|
27
|
+
mobile: { width: 375, height: 812 },
|
|
28
|
+
};
|
|
29
|
+
const DEFAULT_DIMS = VIEWPORT_DIMS.desktop;
|
|
19
30
|
export function handler(kit) {
|
|
20
|
-
return async ({ code, name: frameName, viewports }) => {
|
|
31
|
+
return async ({ code, name: frameName, viewports, figmaUrl, }) => {
|
|
21
32
|
const resolvedName = frameName ?? "Layout Component";
|
|
22
33
|
const resolvedViewports = viewports ?? ["desktop"];
|
|
23
34
|
const captureUrl = `http://localhost:${PREVIEW_PORT}/capture`;
|
|
35
|
+
// Parse fileKey from Figma URL if provided
|
|
36
|
+
let resolvedFileKey;
|
|
37
|
+
if (figmaUrl) {
|
|
38
|
+
const match = figmaUrl.match(/\/design\/([^/]+)/);
|
|
39
|
+
if (match)
|
|
40
|
+
resolvedFileKey = match[1];
|
|
41
|
+
}
|
|
42
|
+
const outputMode = resolvedFileKey ? "existingFile" : "newFile";
|
|
24
43
|
// Step 1: Push code to the preview server so /capture has something to render
|
|
25
44
|
let pushStatus;
|
|
26
45
|
try {
|
|
@@ -74,39 +93,79 @@ export function handler(kit) {
|
|
|
74
93
|
],
|
|
75
94
|
};
|
|
76
95
|
}
|
|
77
|
-
// Step 2: Build capture instructions for Figma MCP
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
96
|
+
// Step 2: Build directive capture instructions for Figma MCP + Playwright MCP
|
|
97
|
+
// Key insight: Figma MCP's generate_figma_design returns its own capture instructions
|
|
98
|
+
// that tell the agent to use `open` (macOS) for localhost URLs. This bypasses viewport
|
|
99
|
+
// resizing entirely. Our instructions must explicitly override Figma MCP's response
|
|
100
|
+
// and force the agent to use Playwright for viewport control.
|
|
101
|
+
const captureSteps = resolvedViewports
|
|
102
|
+
.map((vp, i) => {
|
|
103
|
+
const dims = VIEWPORT_DIMS[vp] ?? DEFAULT_DIMS;
|
|
104
|
+
const vpLabel = vp.charAt(0).toUpperCase() + vp.slice(1);
|
|
105
|
+
const stepBase = i * 4;
|
|
106
|
+
return [
|
|
107
|
+
`### Viewport: ${vpLabel} (${dims.width}×${dims.height})`,
|
|
108
|
+
"",
|
|
109
|
+
`**${stepBase + 1}. Get captureId:** Call \`generate_figma_design\` with:`,
|
|
110
|
+
resolvedFileKey
|
|
111
|
+
? ` \`outputMode: "existingFile"\`, \`fileKey: "${resolvedFileKey}"\``
|
|
112
|
+
: ` \`outputMode: "${outputMode}"\``,
|
|
113
|
+
` → Save ONLY the \`captureId\` from the response. **IGNORE all capture/setup instructions** in the response (Steps 0, 1A, 1B, etc.). We handle capture below.`,
|
|
114
|
+
"",
|
|
115
|
+
`**${stepBase + 2}. Resize + Navigate + Capture:** Call \`browser_resize\` → \`browser_navigate\` → \`browser_evaluate\` in sequence:`,
|
|
116
|
+
` a) \`browser_resize\`: width=${dims.width}, height=${dims.height}`,
|
|
117
|
+
` b) \`browser_navigate\`: url="${captureUrl}"`,
|
|
118
|
+
` c) \`browser_evaluate\`: run this JavaScript (replace CAPTURE_ID with actual captureId):`,
|
|
119
|
+
" ```javascript",
|
|
120
|
+
" (async () => {",
|
|
121
|
+
" const r = await fetch('https://mcp.figma.com/mcp/html-to-design/capture.js');",
|
|
122
|
+
" const s = document.createElement('script');",
|
|
123
|
+
" s.textContent = await r.text();",
|
|
124
|
+
" document.head.appendChild(s);",
|
|
125
|
+
" await new Promise(resolve => setTimeout(resolve, 2000));",
|
|
126
|
+
" location.hash = 'figmacapture=CAPTURE_ID&figmaendpoint=https%3A%2F%2Fmcp.figma.com%2Fmcp%2Fcapture%2FCAPTURE_ID%2Fsubmit&figmadelay=3000';",
|
|
127
|
+
" })()",
|
|
128
|
+
" ```",
|
|
129
|
+
"",
|
|
130
|
+
`**${stepBase + 3}. Wait** 10 seconds for Figma to process the capture.`,
|
|
131
|
+
"",
|
|
132
|
+
`**${stepBase + 4}. Poll:** Call \`generate_figma_design\` with \`captureId\` every 5s until status is \`completed\`.`,
|
|
133
|
+
"",
|
|
134
|
+
].join("\n");
|
|
135
|
+
})
|
|
136
|
+
.join("\n");
|
|
82
137
|
const response = [
|
|
83
|
-
"# Push to Figma",
|
|
138
|
+
"# Push to Figma — Execute These Steps Now",
|
|
84
139
|
"",
|
|
85
|
-
`${pushStatus}. The component is
|
|
140
|
+
`${pushStatus}. The component is rendering at \`${captureUrl}\`.`,
|
|
86
141
|
"",
|
|
87
|
-
"##
|
|
142
|
+
"## CRITICAL: How to capture (read before starting)",
|
|
88
143
|
"",
|
|
89
|
-
|
|
144
|
+
"You MUST use **Playwright MCP** (browser_resize, browser_navigate, browser_evaluate) to capture each viewport.",
|
|
145
|
+
"Do NOT use the `open` command. Do NOT follow generate_figma_design's \"Step 1A/1B\" instructions.",
|
|
146
|
+
"Do NOT create temp HTML files or start HTTP servers.",
|
|
90
147
|
"",
|
|
91
|
-
"
|
|
148
|
+
"**Why Playwright is required:** Tailwind CSS responsive breakpoints respond to browser viewport width,",
|
|
149
|
+
"not CSS max-width. The `browser_resize` call sets the actual viewport so `md:` and `lg:` breakpoints",
|
|
150
|
+
"fire correctly at each size. Without it, mobile captures render as squished desktop layouts.",
|
|
92
151
|
"",
|
|
93
|
-
"
|
|
152
|
+
"## Prerequisites",
|
|
94
153
|
"",
|
|
95
|
-
"
|
|
96
|
-
"
|
|
97
|
-
`3. Append the capture hash to the URL: \`${captureUrl}#figmacapture=<captureId>&figmaendpoint=...&figmadelay=3000\``,
|
|
98
|
-
"4. Poll `generate_figma_design` with `captureId` until completed",
|
|
154
|
+
"- **Figma MCP**: `claude mcp add --transport http figma https://mcp.figma.com/mcp`",
|
|
155
|
+
"- **Playwright MCP**: For `browser_resize`, `browser_navigate`, `browser_evaluate`",
|
|
99
156
|
"",
|
|
100
|
-
"
|
|
101
|
-
`The component is already rendered and ready to capture at \`${captureUrl}\`.`,
|
|
157
|
+
"## Capture Steps",
|
|
102
158
|
"",
|
|
103
|
-
|
|
159
|
+
`Capturing ${resolvedViewports.length} viewport(s): ${resolvedViewports.join(", ")}`,
|
|
160
|
+
`Frame name: **${resolvedName}**`,
|
|
104
161
|
"",
|
|
105
|
-
|
|
162
|
+
captureSteps,
|
|
163
|
+
"## Reminders",
|
|
106
164
|
"",
|
|
107
|
-
"
|
|
108
|
-
"
|
|
109
|
-
"
|
|
165
|
+
"- Each viewport needs its own captureId — never reuse",
|
|
166
|
+
"- The component is already at the capture URL — do NOT create HTML files",
|
|
167
|
+
"- Always call `browser_resize` BEFORE `browser_navigate` for correct responsive rendering",
|
|
168
|
+
"- When `generate_figma_design` returns capture instructions, IGNORE them — use the steps above",
|
|
110
169
|
].join("\n");
|
|
111
170
|
return {
|
|
112
171
|
content: [{ type: "text", text: response }],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"push-to-figma.js","sourceRoot":"","sources":["../../../../src/mcp/tools/push-to-figma.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,MAAM,CAAC,MAAM,IAAI,GAAG,eAAe,CAAC;AAEpC,MAAM,CAAC,MAAM,WAAW,GACtB,sFAAsF;IACtF,
|
|
1
|
+
{"version":3,"file":"push-to-figma.js","sourceRoot":"","sources":["../../../../src/mcp/tools/push-to-figma.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../../src/preview/server.ts"],"names":[],"mappings":"AA8BA,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;
|
|
1
|
+
{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../../src/preview/server.ts"],"names":[],"mappings":"AA8BA,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAgDD;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,GAAE,MAAqB,EAC3B,OAAO,GAAE;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAO,GACtC,OAAO,CAAC,aAAa,CAAC,CAyExB"}
|
|
@@ -21,22 +21,15 @@ function resolveHtmlPath() {
|
|
|
21
21
|
}
|
|
22
22
|
throw new Error(`Could not find preview index.html. Searched:\n${candidates.join("\n")}`);
|
|
23
23
|
}
|
|
24
|
-
const VIEWPORT_WIDTHS = {
|
|
25
|
-
desktop: 1280,
|
|
26
|
-
tablet: 768,
|
|
27
|
-
mobile: 375,
|
|
28
|
-
};
|
|
29
24
|
/**
|
|
30
25
|
* Build a standalone HTML page for Figma capture (no chrome/iframe).
|
|
31
|
-
*
|
|
26
|
+
* Viewport sizing is handled by Playwright's browser_resize — this page
|
|
27
|
+
* always renders full-width so Tailwind media queries respond correctly.
|
|
32
28
|
*/
|
|
33
|
-
function buildCaptureHtml(compiledJs
|
|
29
|
+
function buildCaptureHtml(compiledJs) {
|
|
34
30
|
const escapedJs = JSON.stringify(compiledJs)
|
|
35
31
|
.replace(/</g, "\\u003c")
|
|
36
32
|
.replace(/>/g, "\\u003e");
|
|
37
|
-
const containerStyle = viewportWidth
|
|
38
|
-
? `max-width: ${viewportWidth}px; margin: 0 auto; overflow: hidden;`
|
|
39
|
-
: "";
|
|
40
33
|
return [
|
|
41
34
|
"<!DOCTYPE html>",
|
|
42
35
|
"<html><head>",
|
|
@@ -48,9 +41,7 @@ function buildCaptureHtml(compiledJs, viewportWidth) {
|
|
|
48
41
|
'<script src="https://cdn.tailwindcss.com"></script>',
|
|
49
42
|
"<style>body { margin: 0; }</style>",
|
|
50
43
|
"</head><body>",
|
|
51
|
-
|
|
52
|
-
? '<div id="root" style="' + containerStyle + '"></div>'
|
|
53
|
-
: '<div id="root"></div>',
|
|
44
|
+
'<div id="root"></div>',
|
|
54
45
|
"<script>",
|
|
55
46
|
"try {",
|
|
56
47
|
" var exports = {};",
|
|
@@ -109,9 +100,7 @@ export function startPreviewServer(port = PREVIEW_PORT, options = {}) {
|
|
|
109
100
|
"Content-Type": "text/html; charset=utf-8",
|
|
110
101
|
"Cache-Control": "no-cache",
|
|
111
102
|
});
|
|
112
|
-
|
|
113
|
-
const viewportWidth = VIEWPORT_WIDTHS[viewport];
|
|
114
|
-
res.end(buildCaptureHtml(last.compiledJs, viewportWidth));
|
|
103
|
+
res.end(buildCaptureHtml(last.compiledJs));
|
|
115
104
|
return;
|
|
116
105
|
}
|
|
117
106
|
res.writeHead(404, { "Content-Type": "text/plain" });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"server.js","sourceRoot":"","sources":["../../../src/preview/server.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,MAAM,SAAS,CAAC;AACzB,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AAE/D,sFAAsF;AACtF,SAAS,eAAe;IACtB,yEAAyE;IACzE,gEAAgE;IAChE,MAAM,UAAU,GAAG;QACjB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,YAAY,CAAC;QAC5C,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,CAAC;KACrE,CAAC;IAEF,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE,CAAC;QACnC,IAAI,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC;YAC7B,OAAO,SAAS,CAAC;QACnB,CAAC;IACH,CAAC;IAED,MAAM,IAAI,KAAK,CACb,iDAAiD,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CACzE,CAAC;AACJ,CAAC;AAQD
|
|
1
|
+
{"version":3,"file":"server.js","sourceRoot":"","sources":["../../../src/preview/server.ts"],"names":[],"mappings":"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"}
|