gemini-design-mcp 3.6.0 → 3.6.1
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.
|
@@ -32,16 +32,43 @@ export async function createFrontend(params) {
|
|
|
32
32
|
if (designSystem?.vibe) {
|
|
33
33
|
const { vibe } = designSystem;
|
|
34
34
|
const scale = vibe.scale || "balanced";
|
|
35
|
+
// Conceptual scale descriptions - let Gemini decide exact values
|
|
36
|
+
const scaleDescriptions = {
|
|
37
|
+
refined: `**SCALE: REFINED**
|
|
38
|
+
This is about ELEMENT SIZE, not density. Refined means:
|
|
39
|
+
- Smaller, more elegant typography — avoid oversized headlines
|
|
40
|
+
- Compact, contained buttons — not chunky or oversized
|
|
41
|
+
- Cards and containers with constrained widths — not full-width sprawling layouts
|
|
42
|
+
- Tighter, purposeful spacing between elements
|
|
43
|
+
- Smaller icons that complement rather than dominate
|
|
44
|
+
|
|
45
|
+
Reference: Linear.app, Raycast, Notion — these apps feel sophisticated because their elements are proportionally small and refined, never billboard-sized or bloated.
|
|
46
|
+
|
|
47
|
+
The interface should feel like a premium Swiss watch: precise, elegant, where every element is intentionally sized smaller than the default.`,
|
|
48
|
+
balanced: `**SCALE: BALANCED**
|
|
49
|
+
Standard, conventional sizing. Use typical defaults — nothing particularly large or small. A middle-ground that works for most general-purpose applications.`,
|
|
50
|
+
zoomed: `**SCALE: ZOOMED**
|
|
51
|
+
This is about ELEMENT SIZE, not density. Zoomed means:
|
|
52
|
+
- Large, prominent typography — bold headlines that command attention
|
|
53
|
+
- Big, chunky buttons — easy to see and click/tap
|
|
54
|
+
- Wide cards and containers — full-width or near full-width layouts
|
|
55
|
+
- Generous spacing and padding throughout
|
|
56
|
+
- Large icons that stand out
|
|
57
|
+
|
|
58
|
+
Reference: Kids apps, accessibility-focused interfaces, bold marketing sites — elements are intentionally oversized for impact and ease of use.`
|
|
59
|
+
};
|
|
35
60
|
designSystemInstructions = `
|
|
36
61
|
MANDATORY DESIGN SYSTEM (User Selected Vibe):
|
|
37
62
|
|
|
38
63
|
**Design Vibe: "${vibe.name}"**
|
|
39
64
|
${vibe.description}
|
|
40
65
|
|
|
41
|
-
|
|
66
|
+
${scaleDescriptions[scale] || scaleDescriptions.balanced}
|
|
67
|
+
|
|
42
68
|
Keywords: ${vibe.keywords.join(', ')}
|
|
43
69
|
|
|
44
70
|
Interpret this vibe creatively — choose colors, typography, and styling that embody this atmosphere.
|
|
71
|
+
The scale above is MANDATORY and defines how large or small UI elements should be.
|
|
45
72
|
`;
|
|
46
73
|
}
|
|
47
74
|
// Build context instructions (ignore empty strings and "null" strings)
|