@gemini-designer/mcp-server 0.1.0 → 0.1.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.
- package/dist/config/index.js +1 -1
- package/dist/config/index.js.map +1 -1
- package/dist/design/principles.d.ts +30 -0
- package/dist/design/principles.d.ts.map +1 -0
- package/dist/design/principles.js +111 -0
- package/dist/design/principles.js.map +1 -0
- package/dist/index.js +0 -0
- package/dist/tools/create-ui.d.ts.map +1 -1
- package/dist/tools/create-ui.js +16 -13
- package/dist/tools/create-ui.js.map +1 -1
- package/dist/tools/generate-component-variants.d.ts.map +1 -1
- package/dist/tools/generate-component-variants.js +7 -3
- package/dist/tools/generate-component-variants.js.map +1 -1
- package/dist/tools/generate-vibes.d.ts.map +1 -1
- package/dist/tools/generate-vibes.js +41 -16
- package/dist/tools/generate-vibes.js.map +1 -1
- package/dist/tools/modify-ui.d.ts.map +1 -1
- package/dist/tools/modify-ui.js +6 -2
- package/dist/tools/modify-ui.js.map +1 -1
- package/dist/tools/snippet-ui.d.ts.map +1 -1
- package/dist/tools/snippet-ui.js +8 -2
- package/dist/tools/snippet-ui.js.map +1 -1
- package/package.json +2 -2
- package/src/config/index.ts +1 -1
- package/src/design/principles.ts +114 -0
- package/src/tools/create-ui.ts +18 -14
- package/src/tools/generate-component-variants.ts +7 -3
- package/src/tools/generate-vibes.ts +46 -20
- package/src/tools/modify-ui.ts +6 -2
- package/src/tools/snippet-ui.ts +8 -2
package/dist/config/index.js
CHANGED
|
@@ -27,7 +27,7 @@ const ConfigSchema = z.object({
|
|
|
27
27
|
.enum(['vanilla', 'react', 'vue', 'svelte', 'nextjs'])
|
|
28
28
|
.default('react'),
|
|
29
29
|
// Gemini model to use (for local mode)
|
|
30
|
-
model: z.string().default('gemini-2.5-flash
|
|
30
|
+
model: z.string().default('gemini-2.5-flash'),
|
|
31
31
|
// LiteLLM (or other OpenAI-compatible proxy) configuration for local mode
|
|
32
32
|
litellmEndpoint: z.string().url().optional(),
|
|
33
33
|
litellmApiKey: z.string().optional(),
|
package/dist/config/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/config/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AAC9B,OAAO,KAAK,IAAI,MAAM,WAAW,CAAC;AAElC,MAAM,YAAY,GAAG,CAAC,CAAC,MAAM,CAAC;IAC1B,8DAA8D;IAC9D,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC;IAElD,+EAA+E;IAC/E,uFAAuF;IACvF,kFAAkF;IAClF,aAAa,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC;IAE/D,uDAAuD;IACvD,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAE7B,yDAAyD;IACzD,cAAc,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE;IAE3C,4CAA4C;IAC5C,YAAY,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAEnC,uCAAuC;IACvC,YAAY,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;IAE1D,uCAAuC;IACvC,gBAAgB,EAAE,CAAC;SACd,IAAI,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;SACrD,OAAO,CAAC,OAAO,CAAC;IAErB,uCAAuC;IACvC,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/config/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Design Principles Module
|
|
3
|
+
*
|
|
4
|
+
* Centralized design guidelines injected into all generation prompts
|
|
5
|
+
* to avoid generic "AI slop" aesthetics.
|
|
6
|
+
*/
|
|
7
|
+
/**
|
|
8
|
+
* Core design principles for generating distinctive, memorable UI.
|
|
9
|
+
* Injected into generation prompts to steer away from generic output.
|
|
10
|
+
*/
|
|
11
|
+
export declare const DESIGN_PRINCIPLES = "\n## Design Philosophy\n\nCreate DISTINCTIVE, production-grade UI that avoids generic AI aesthetics.\nEvery design should feel intentionally crafted, not algorithmically generated.\n\n### Typography\n- NEVER use: Inter, Roboto, Arial, Open Sans, Lato, default system fonts\n- DO use distinctive choices:\n - Code/Tech: JetBrains Mono, Fira Code, Space Grotesk\n - Editorial: Playfair Display, Crimson Pro, Newsreader\n - Modern: Bricolage Grotesque, Plus Jakarta Sans, Outfit\n - Technical: IBM Plex family, Source Sans 3\n- Pair a distinctive display font with a refined body font\n- Use extreme weight contrasts (100/200 vs 800/900, not 400 vs 600)\n- Size jumps of 3x+, not 1.5x differences\n\n### Color & Theme\n- Commit to a cohesive, BOLD aesthetic direction\n- Dominant colors with sharp accents outperform timid, evenly-distributed palettes\n- NEVER: purple gradients on white backgrounds (clich\u00E9 AI slop)\n- NEVER: generic blue CTA buttons\n- Draw inspiration from: IDE themes, cultural aesthetics, editorial design\n- Consider: brutalist monochromes, rich jewel tones, warm earthy palettes\n\n### Motion & Animation\n- Focus on HIGH-IMPACT moments over scattered micro-interactions\n- Use orchestrated page loads with staggered reveals (animation-delay)\n- CSS animations with cubic-bezier easing for polish\n- Scroll-triggered animations that surprise and delight\n- Hover states that transform, not just color-shift\n- One well-designed entrance animation > ten subtle fades\n\n### Backgrounds & Depth\n- NEVER default to solid colors\n- Create atmosphere and visual depth:\n - Gradient meshes and multi-stop gradients\n - Subtle noise textures and grain overlays\n - Geometric patterns (dots, lines, grids)\n - Layered transparencies and glassmorphism\n - Dramatic shadows and elevation\n - Decorative borders and frames\n\n### Spatial Composition\n- Unexpected layouts create memorability\n- Use: asymmetry, overlap, diagonal flow\n- Grid-breaking elements for visual interest\n- Choose: generous negative space OR controlled density (both valid, commit fully)\n- Avoid cookie-cutter card grids\n\n### Aesthetic Directions (pick ONE, commit fully)\nWhen generating vibes, draw from these inspirations:\n- Brutally minimal (stark, high-contrast, essential)\n- Maximalist chaos (layered, textured, vibrant)\n- Retro-futuristic (CRT glow, scan lines, neon)\n- Organic/natural (earth tones, flowing shapes)\n- Luxury/refined (gold/black, serif elegance)\n- Playful/toy-like (rounded corners, bouncy, colorful)\n- Editorial/magazine (bold typography, asymmetry)\n- Brutalist/raw (exposed structure, monospace, blocks)\n- Art deco/geometric (symmetry, gold, repetition)\n- Soft/pastel (muted, gentle, rounded)\n- Industrial/utilitarian (functional, exposed, dark)\n";
|
|
12
|
+
/**
|
|
13
|
+
* Compact version for token-constrained contexts.
|
|
14
|
+
* Use this when combining with large user prompts.
|
|
15
|
+
*/
|
|
16
|
+
export declare const DESIGN_PRINCIPLES_COMPACT = "\n## Design Rules\n- Typography: NEVER Inter/Roboto/Arial. Use distinctive fonts.\n- Colors: Bold palettes, dominant + accent. NO purple-on-white.\n- Motion: Staggered reveals, scroll-triggered, impactful hover states.\n- Backgrounds: Depth via gradients, textures, shadows. Never flat.\n- Layout: Asymmetry, overlap, grid-breaking. Commit to a direction.\n";
|
|
17
|
+
/**
|
|
18
|
+
* Font blacklist for explicit filtering
|
|
19
|
+
*/
|
|
20
|
+
export declare const BANNED_FONTS: string[];
|
|
21
|
+
/**
|
|
22
|
+
* Suggested distinctive fonts by category
|
|
23
|
+
*/
|
|
24
|
+
export declare const SUGGESTED_FONTS: {
|
|
25
|
+
display: string[];
|
|
26
|
+
body: string[];
|
|
27
|
+
code: string[];
|
|
28
|
+
editorial: string[];
|
|
29
|
+
};
|
|
30
|
+
//# sourceMappingURL=principles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"principles.d.ts","sourceRoot":"","sources":["../../src/design/principles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;GAGG;AACH,eAAO,MAAM,iBAAiB,yuFA+D7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,yBAAyB,0WAOrC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,UAWxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe;;;;;CAK3B,CAAC"}
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Design Principles Module
|
|
3
|
+
*
|
|
4
|
+
* Centralized design guidelines injected into all generation prompts
|
|
5
|
+
* to avoid generic "AI slop" aesthetics.
|
|
6
|
+
*/
|
|
7
|
+
/**
|
|
8
|
+
* Core design principles for generating distinctive, memorable UI.
|
|
9
|
+
* Injected into generation prompts to steer away from generic output.
|
|
10
|
+
*/
|
|
11
|
+
export const DESIGN_PRINCIPLES = `
|
|
12
|
+
## Design Philosophy
|
|
13
|
+
|
|
14
|
+
Create DISTINCTIVE, production-grade UI that avoids generic AI aesthetics.
|
|
15
|
+
Every design should feel intentionally crafted, not algorithmically generated.
|
|
16
|
+
|
|
17
|
+
### Typography
|
|
18
|
+
- NEVER use: Inter, Roboto, Arial, Open Sans, Lato, default system fonts
|
|
19
|
+
- DO use distinctive choices:
|
|
20
|
+
- Code/Tech: JetBrains Mono, Fira Code, Space Grotesk
|
|
21
|
+
- Editorial: Playfair Display, Crimson Pro, Newsreader
|
|
22
|
+
- Modern: Bricolage Grotesque, Plus Jakarta Sans, Outfit
|
|
23
|
+
- Technical: IBM Plex family, Source Sans 3
|
|
24
|
+
- Pair a distinctive display font with a refined body font
|
|
25
|
+
- Use extreme weight contrasts (100/200 vs 800/900, not 400 vs 600)
|
|
26
|
+
- Size jumps of 3x+, not 1.5x differences
|
|
27
|
+
|
|
28
|
+
### Color & Theme
|
|
29
|
+
- Commit to a cohesive, BOLD aesthetic direction
|
|
30
|
+
- Dominant colors with sharp accents outperform timid, evenly-distributed palettes
|
|
31
|
+
- NEVER: purple gradients on white backgrounds (cliché AI slop)
|
|
32
|
+
- NEVER: generic blue CTA buttons
|
|
33
|
+
- Draw inspiration from: IDE themes, cultural aesthetics, editorial design
|
|
34
|
+
- Consider: brutalist monochromes, rich jewel tones, warm earthy palettes
|
|
35
|
+
|
|
36
|
+
### Motion & Animation
|
|
37
|
+
- Focus on HIGH-IMPACT moments over scattered micro-interactions
|
|
38
|
+
- Use orchestrated page loads with staggered reveals (animation-delay)
|
|
39
|
+
- CSS animations with cubic-bezier easing for polish
|
|
40
|
+
- Scroll-triggered animations that surprise and delight
|
|
41
|
+
- Hover states that transform, not just color-shift
|
|
42
|
+
- One well-designed entrance animation > ten subtle fades
|
|
43
|
+
|
|
44
|
+
### Backgrounds & Depth
|
|
45
|
+
- NEVER default to solid colors
|
|
46
|
+
- Create atmosphere and visual depth:
|
|
47
|
+
- Gradient meshes and multi-stop gradients
|
|
48
|
+
- Subtle noise textures and grain overlays
|
|
49
|
+
- Geometric patterns (dots, lines, grids)
|
|
50
|
+
- Layered transparencies and glassmorphism
|
|
51
|
+
- Dramatic shadows and elevation
|
|
52
|
+
- Decorative borders and frames
|
|
53
|
+
|
|
54
|
+
### Spatial Composition
|
|
55
|
+
- Unexpected layouts create memorability
|
|
56
|
+
- Use: asymmetry, overlap, diagonal flow
|
|
57
|
+
- Grid-breaking elements for visual interest
|
|
58
|
+
- Choose: generous negative space OR controlled density (both valid, commit fully)
|
|
59
|
+
- Avoid cookie-cutter card grids
|
|
60
|
+
|
|
61
|
+
### Aesthetic Directions (pick ONE, commit fully)
|
|
62
|
+
When generating vibes, draw from these inspirations:
|
|
63
|
+
- Brutally minimal (stark, high-contrast, essential)
|
|
64
|
+
- Maximalist chaos (layered, textured, vibrant)
|
|
65
|
+
- Retro-futuristic (CRT glow, scan lines, neon)
|
|
66
|
+
- Organic/natural (earth tones, flowing shapes)
|
|
67
|
+
- Luxury/refined (gold/black, serif elegance)
|
|
68
|
+
- Playful/toy-like (rounded corners, bouncy, colorful)
|
|
69
|
+
- Editorial/magazine (bold typography, asymmetry)
|
|
70
|
+
- Brutalist/raw (exposed structure, monospace, blocks)
|
|
71
|
+
- Art deco/geometric (symmetry, gold, repetition)
|
|
72
|
+
- Soft/pastel (muted, gentle, rounded)
|
|
73
|
+
- Industrial/utilitarian (functional, exposed, dark)
|
|
74
|
+
`;
|
|
75
|
+
/**
|
|
76
|
+
* Compact version for token-constrained contexts.
|
|
77
|
+
* Use this when combining with large user prompts.
|
|
78
|
+
*/
|
|
79
|
+
export const DESIGN_PRINCIPLES_COMPACT = `
|
|
80
|
+
## Design Rules
|
|
81
|
+
- Typography: NEVER Inter/Roboto/Arial. Use distinctive fonts.
|
|
82
|
+
- Colors: Bold palettes, dominant + accent. NO purple-on-white.
|
|
83
|
+
- Motion: Staggered reveals, scroll-triggered, impactful hover states.
|
|
84
|
+
- Backgrounds: Depth via gradients, textures, shadows. Never flat.
|
|
85
|
+
- Layout: Asymmetry, overlap, grid-breaking. Commit to a direction.
|
|
86
|
+
`;
|
|
87
|
+
/**
|
|
88
|
+
* Font blacklist for explicit filtering
|
|
89
|
+
*/
|
|
90
|
+
export const BANNED_FONTS = [
|
|
91
|
+
'Inter',
|
|
92
|
+
'Roboto',
|
|
93
|
+
'Arial',
|
|
94
|
+
'Open Sans',
|
|
95
|
+
'Lato',
|
|
96
|
+
'Helvetica',
|
|
97
|
+
'system-ui',
|
|
98
|
+
'sans-serif',
|
|
99
|
+
'-apple-system',
|
|
100
|
+
'BlinkMacSystemFont',
|
|
101
|
+
];
|
|
102
|
+
/**
|
|
103
|
+
* Suggested distinctive fonts by category
|
|
104
|
+
*/
|
|
105
|
+
export const SUGGESTED_FONTS = {
|
|
106
|
+
display: ['Bricolage Grotesque', 'Playfair Display', 'Outfit', 'Space Grotesk'],
|
|
107
|
+
body: ['Plus Jakarta Sans', 'Source Sans 3', 'IBM Plex Sans', 'Crimson Pro'],
|
|
108
|
+
code: ['JetBrains Mono', 'Fira Code', 'IBM Plex Mono', 'Cascadia Code'],
|
|
109
|
+
editorial: ['Newsreader', 'Playfair Display', 'Cormorant Garamond', 'Libre Baskerville'],
|
|
110
|
+
};
|
|
111
|
+
//# sourceMappingURL=principles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"principles.js","sourceRoot":"","sources":["../../src/design/principles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+DhC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG;;;;;;;CAOxC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IACxB,OAAO;IACP,QAAQ;IACR,OAAO;IACP,WAAW;IACX,MAAM;IACN,WAAW;IACX,WAAW;IACX,YAAY;IACZ,eAAe;IACf,oBAAoB;CACvB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC3B,OAAO,EAAE,CAAC,qBAAqB,EAAE,kBAAkB,EAAE,QAAQ,EAAE,eAAe,CAAC;IAC/E,IAAI,EAAE,CAAC,mBAAmB,EAAE,eAAe,EAAE,eAAe,EAAE,aAAa,CAAC;IAC5E,IAAI,EAAE,CAAC,gBAAgB,EAAE,WAAW,EAAE,eAAe,EAAE,eAAe,CAAC;IACvE,SAAS,EAAE,CAAC,YAAY,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,mBAAmB,CAAC;CAC3F,CAAC"}
|
package/dist/index.js
CHANGED
|
File without changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create-ui.d.ts","sourceRoot":"","sources":["../../src/tools/create-ui.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEpE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"create-ui.d.ts","sourceRoot":"","sources":["../../src/tools/create-ui.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEpE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AA0F5C,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,QAkGjE"}
|
package/dist/tools/create-ui.js
CHANGED
|
@@ -11,6 +11,7 @@ import { generateWithGemini } from '../generation/gemini-client.js';
|
|
|
11
11
|
import { writeFile } from '../output/file-writer.js';
|
|
12
12
|
import { formatCode } from '../output/formatter.js';
|
|
13
13
|
import { buildRepoHints } from '../context/repo-hints.js';
|
|
14
|
+
import { DESIGN_PRINCIPLES } from '../design/principles.js';
|
|
14
15
|
const inputSchema = {
|
|
15
16
|
description: z.string().describe('Description of the UI to create (component or view)'),
|
|
16
17
|
framework: z.enum(['react', 'vue', 'svelte', 'html']).default('react'),
|
|
@@ -22,26 +23,28 @@ const inputSchema = {
|
|
|
22
23
|
backup: z.boolean().default(true).describe('Create .bak backup if overwriting an existing file'),
|
|
23
24
|
format: z.boolean().default(true).describe('Format the code with Prettier before returning/writing'),
|
|
24
25
|
};
|
|
25
|
-
const SYSTEM_PROMPT = `You are a senior frontend engineer and UI
|
|
26
|
+
const SYSTEM_PROMPT = `You are a senior frontend engineer and designer who creates DISTINCTIVE, memorable UI.
|
|
26
27
|
|
|
27
|
-
Your task: generate
|
|
28
|
+
Your task: generate production-ready UI code that avoids generic AI aesthetics.
|
|
29
|
+
|
|
30
|
+
${DESIGN_PRINCIPLES}
|
|
31
|
+
|
|
32
|
+
## Code Requirements
|
|
28
33
|
|
|
29
34
|
Hard rules (must follow):
|
|
30
35
|
- Output ONLY the final code. No explanations. No markdown. No code fences.
|
|
31
|
-
- Use the specified framework
|
|
32
|
-
-
|
|
33
|
-
- Accessibility:
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
- Visible focus states (use :focus-visible patterns if relevant)
|
|
37
|
-
- Responsive by default (mobile-first).
|
|
38
|
-
- If design tokens / vibe are provided, use them (prefer CSS variables) and do not hard-code random colors.
|
|
39
|
-
- Keep logic minimal and UI-focused; avoid fake backend calls.
|
|
36
|
+
- Use the specified framework idiomatically.
|
|
37
|
+
- NO new dependencies unless explicitly requested.
|
|
38
|
+
- Accessibility: WCAG AA default (semantic HTML, labels, aria-*, keyboard nav, :focus-visible)
|
|
39
|
+
- Responsive by default (mobile-first)
|
|
40
|
+
- If vibe/tokens provided, use them (prefer CSS variables). Don't hard-code random colors.
|
|
40
41
|
|
|
41
|
-
Quality
|
|
42
|
+
## Quality Bar
|
|
42
43
|
- TypeScript types where applicable
|
|
43
44
|
- No unused imports/vars
|
|
44
|
-
- Clean component structure and clear naming
|
|
45
|
+
- Clean component structure and clear naming
|
|
46
|
+
- Animations should use CSS or framework-native solutions
|
|
47
|
+
- Background treatments should create depth (not flat solid colors)`;
|
|
45
48
|
function buildUserPrompt(args) {
|
|
46
49
|
return `Create UI code.
|
|
47
50
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create-ui.js","sourceRoot":"","sources":["../../src/tools/create-ui.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,MAAM,WAAW,GAAG;IAChB,WAAW,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,qDAAqD,CAAC;IACvF,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC;IACtE,IAAI,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,wCAAwC,CAAC;IAC9E,YAAY,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,wCAAwC,CAAC;IAC/F,UAAU,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,+DAA+D,CAAC;IAChG,aAAa,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,uCAAuC,CAAC;IAC1F,WAAW,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,wCAAwC,CAAC;IAC1F,MAAM,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,oDAAoD,CAAC;IAChG,MAAM,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,wDAAwD,CAAC;CACvG,CAAC;AAEF,MAAM,aAAa,GAAG
|
|
1
|
+
{"version":3,"file":"create-ui.js","sourceRoot":"","sources":["../../src/tools/create-ui.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generate-component-variants.d.ts","sourceRoot":"","sources":["../../src/tools/generate-component-variants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAIpE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"generate-component-variants.d.ts","sourceRoot":"","sources":["../../src/tools/generate-component-variants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAIpE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAkE5C,wBAAgB,iCAAiC,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CA2IzF"}
|
|
@@ -17,6 +17,7 @@ import { assertReadablePath, assertWritablePath } from '../context/guards.js';
|
|
|
17
17
|
import { buildRepoGrounding } from '../context/grounding.js';
|
|
18
18
|
import { generateWithGemini } from '../generation/gemini-client.js';
|
|
19
19
|
import { writeFile } from '../output/file-writer.js';
|
|
20
|
+
import { DESIGN_PRINCIPLES_COMPACT } from '../design/principles.js';
|
|
20
21
|
const inputSchema = {
|
|
21
22
|
componentFile: z.string().describe('Path to an existing component file (e.g., src/components/Button.tsx).'),
|
|
22
23
|
variants: z
|
|
@@ -36,12 +37,14 @@ const inputSchema = {
|
|
|
36
37
|
applyChanges: z.boolean().default(false).describe('If true, write files to disk.'),
|
|
37
38
|
backup: z.boolean().default(true).describe('Create .bak backups before overwriting existing files.'),
|
|
38
39
|
};
|
|
39
|
-
const SYSTEM_PROMPT = `You are a senior frontend engineer
|
|
40
|
+
const SYSTEM_PROMPT = `You are a senior frontend engineer creating DISTINCTIVE component variants.
|
|
41
|
+
|
|
42
|
+
${DESIGN_PRINCIPLES_COMPACT}
|
|
40
43
|
|
|
41
44
|
Your task:
|
|
42
45
|
- Update an existing component to support the requested variants.
|
|
46
|
+
- Make variants visually distinctive (avoid generic styles).
|
|
43
47
|
- Preserve existing behavior and imports unless required.
|
|
44
|
-
- Keep code style consistent with the file.
|
|
45
48
|
- Ensure accessibility: keyboard/focus, aria-labels, disabled states.
|
|
46
49
|
|
|
47
50
|
Repo alignment (CRITICAL):
|
|
@@ -56,7 +59,8 @@ Output contract (CRITICAL):
|
|
|
56
59
|
API guidance:
|
|
57
60
|
- Prefer adding/expanding a typed prop such as "size" | "variant" | "intent" and mapping to classes.
|
|
58
61
|
- Avoid breaking changes: keep default props aligned to existing visuals.
|
|
59
|
-
- Do not introduce new dependencies unless explicitly requested
|
|
62
|
+
- Do not introduce new dependencies unless explicitly requested.
|
|
63
|
+
- Apply distinctive typography and color for each variant.`;
|
|
60
64
|
function cleanJson(response) {
|
|
61
65
|
let out = response.trim();
|
|
62
66
|
const fenced = out.match(/```(?:json)?\n([\s\S]*?)```/);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generate-component-variants.js","sourceRoot":"","sources":["../../src/tools/generate-component-variants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AAC9B,OAAO,KAAK,IAAI,MAAM,WAAW,CAAC;AAElC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC9E,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"generate-component-variants.js","sourceRoot":"","sources":["../../src/tools/generate-component-variants.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generate-vibes.d.ts","sourceRoot":"","sources":["../../src/tools/generate-vibes.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEpE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"generate-vibes.d.ts","sourceRoot":"","sources":["../../src/tools/generate-vibes.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEpE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAkG5C,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CA+D7E"}
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
import { z } from 'zod';
|
|
8
8
|
import { buildContext } from '../context/builder.js';
|
|
9
9
|
import { generateWithGemini } from '../generation/gemini-client.js';
|
|
10
|
+
import { DESIGN_PRINCIPLES_COMPACT, BANNED_FONTS, SUGGESTED_FONTS } from '../design/principles.js';
|
|
10
11
|
const inputSchema = {
|
|
11
12
|
projectContext: z
|
|
12
13
|
.string()
|
|
@@ -26,28 +27,50 @@ const inputSchema = {
|
|
|
26
27
|
.object({
|
|
27
28
|
colorTemp: z.enum(['warm', 'cool', 'neutral']).optional(),
|
|
28
29
|
density: z.enum(['compact', 'comfortable', 'spacious']).optional(),
|
|
29
|
-
style: z.enum([
|
|
30
|
+
style: z.enum([
|
|
31
|
+
'minimal',
|
|
32
|
+
'playful',
|
|
33
|
+
'corporate',
|
|
34
|
+
'brutalist',
|
|
35
|
+
'glassmorphism',
|
|
36
|
+
'editorial',
|
|
37
|
+
'retro-futuristic',
|
|
38
|
+
'luxury',
|
|
39
|
+
'organic',
|
|
40
|
+
'art-deco',
|
|
41
|
+
]).optional(),
|
|
30
42
|
})
|
|
31
43
|
.optional()
|
|
32
44
|
.describe('Optional style preferences to guide generation'),
|
|
33
45
|
};
|
|
34
|
-
const SYSTEM_PROMPT = `You are an expert UI/UX designer
|
|
46
|
+
const SYSTEM_PROMPT = `You are an expert UI/UX designer who creates DISTINCTIVE, memorable design systems.
|
|
35
47
|
|
|
36
|
-
Your task
|
|
48
|
+
Your task: generate design "vibes" that are visually striking and avoid generic AI aesthetics.
|
|
37
49
|
|
|
38
|
-
|
|
39
|
-
- Return ONE valid JSON object with a "vibes" array (no markdown, no code fences, no extra commentary).
|
|
40
|
-
- Use semantic color roles (primary, secondary, accent, background, surface, text, textMuted, border, danger, success).
|
|
41
|
-
- Prefer accessible color combinations (aim for WCAG AA contrast for text on background/surface).
|
|
42
|
-
- Provide a sensible type scale and spacing scale (consistent multiplier).
|
|
43
|
-
- Provide a ready-to-paste CSS variable block (light theme). If you can, include a dark theme block too.
|
|
50
|
+
${DESIGN_PRINCIPLES_COMPACT}
|
|
44
51
|
|
|
45
|
-
|
|
52
|
+
## Typography Rules
|
|
53
|
+
BANNED FONTS (never use): ${BANNED_FONTS.join(', ')}
|
|
54
|
+
SUGGESTED FONTS:
|
|
55
|
+
- Display: ${SUGGESTED_FONTS.display.join(', ')}
|
|
56
|
+
- Body: ${SUGGESTED_FONTS.body.join(', ')}
|
|
57
|
+
- Code: ${SUGGESTED_FONTS.code.join(', ')}
|
|
58
|
+
- Editorial: ${SUGGESTED_FONTS.editorial.join(', ')}
|
|
59
|
+
|
|
60
|
+
## Output Requirements
|
|
61
|
+
- Return ONE valid JSON object with a "vibes" array (no markdown, no code fences)
|
|
62
|
+
- Use semantic color roles (primary, secondary, accent, background, surface, text, textMuted, border, danger, success)
|
|
63
|
+
- Ensure WCAG AA contrast for text on background/surface
|
|
64
|
+
- Each vibe should feel intentionally designed with a clear aesthetic direction
|
|
65
|
+
- Provide ready-to-paste CSS variables (light + dark themes when appropriate)
|
|
66
|
+
|
|
67
|
+
## Output Structure
|
|
46
68
|
{
|
|
47
69
|
"vibes": [
|
|
48
70
|
{
|
|
49
|
-
"name": "Vibe Name",
|
|
50
|
-
"description": "
|
|
71
|
+
"name": "Distinctive Vibe Name",
|
|
72
|
+
"description": "Bold aesthetic description - what makes this memorable?",
|
|
73
|
+
"aestheticDirection": "e.g., 'brutalist', 'luxury', 'editorial'",
|
|
51
74
|
"colors": {
|
|
52
75
|
"primary": "#hex",
|
|
53
76
|
"secondary": "#hex",
|
|
@@ -61,15 +84,17 @@ Output structure:
|
|
|
61
84
|
"success": "#hex"
|
|
62
85
|
},
|
|
63
86
|
"typography": {
|
|
64
|
-
"fontFamily": "font stack",
|
|
65
|
-
"headingFamily": "font stack
|
|
66
|
-
"scale": [12, 14, 16,
|
|
87
|
+
"fontFamily": "distinctive body font stack (from Google Fonts)",
|
|
88
|
+
"headingFamily": "distinctive display font stack",
|
|
89
|
+
"scale": [12, 14, 16, 20, 24, 32, 40, 48, 64, 80]
|
|
67
90
|
},
|
|
68
91
|
"spacing": {
|
|
69
92
|
"unit": 4,
|
|
70
93
|
"scale": [0, 4, 8, 12, 16, 24, 32, 48, 64, 96]
|
|
71
94
|
},
|
|
72
|
-
"
|
|
95
|
+
"motionGuidelines": "Description of animation approach for this vibe",
|
|
96
|
+
"backgroundTreatment": "How to create depth/atmosphere (gradients, textures, etc.)",
|
|
97
|
+
"cssVariables": "/* theme */\\n:root { ... }"
|
|
73
98
|
}
|
|
74
99
|
]
|
|
75
100
|
}`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generate-vibes.js","sourceRoot":"","sources":["../../src/tools/generate-vibes.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAEpE,MAAM,WAAW,GAAG;IAChB,cAAc,EAAE,CAAC;SACZ,MAAM,EAAE;SACR,QAAQ,EAAE;SACV,QAAQ,CAAC,gFAAgF,CAAC;IAC/F,cAAc,EAAE,CAAC;SACZ,MAAM,EAAE;SACR,QAAQ,EAAE;SACV,QAAQ,CAAC,kEAAkE,CAAC;IACjF,SAAS,EAAE,CAAC;SACP,MAAM,EAAE;SACR,GAAG,CAAC,CAAC,CAAC;SACN,GAAG,CAAC,CAAC,CAAC;SACN,OAAO,CAAC,CAAC,CAAC;SACV,QAAQ,CAAC,0CAA0C,CAAC;IACzD,WAAW,EAAE,CAAC;SACT,MAAM,CAAC;QACJ,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE;QACzD,OAAO,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,EAAE;QAClE,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"generate-vibes.js","sourceRoot":"","sources":["../../src/tools/generate-vibes.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modify-ui.d.ts","sourceRoot":"","sources":["../../src/tools/modify-ui.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAGpE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"modify-ui.d.ts","sourceRoot":"","sources":["../../src/tools/modify-ui.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAGpE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAoE5C,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CA0JxE"}
|
package/dist/tools/modify-ui.js
CHANGED
|
@@ -12,6 +12,7 @@ import { assertReadablePath, assertWritablePath } from '../context/guards.js';
|
|
|
12
12
|
import { buildRepoGrounding } from '../context/grounding.js';
|
|
13
13
|
import { generateWithGemini } from '../generation/gemini-client.js';
|
|
14
14
|
import { writeFile } from '../output/file-writer.js';
|
|
15
|
+
import { DESIGN_PRINCIPLES_COMPACT } from '../design/principles.js';
|
|
15
16
|
const inputSchema = {
|
|
16
17
|
targetFile: z.string().describe('Path to the file to modify'),
|
|
17
18
|
instruction: z
|
|
@@ -33,7 +34,9 @@ const inputSchema = {
|
|
|
33
34
|
backup: z.boolean().default(true).describe('If true (default), create a .bak backup before modifying'),
|
|
34
35
|
};
|
|
35
36
|
function getSystemPrompt(returnDiff) {
|
|
36
|
-
const base = `You are a senior frontend engineer performing surgical code modifications.
|
|
37
|
+
const base = `You are a senior frontend engineer performing surgical code modifications that are VISUALLY DISTINCTIVE.
|
|
38
|
+
|
|
39
|
+
${DESIGN_PRINCIPLES_COMPACT}
|
|
37
40
|
|
|
38
41
|
CRITICAL RULES (must follow):
|
|
39
42
|
1. ONLY modify what is explicitly requested.
|
|
@@ -47,7 +50,8 @@ CRITICAL RULES (must follow):
|
|
|
47
50
|
5. Keep existing comments unless they conflict with the requested change.
|
|
48
51
|
6. Accessibility: do not regress accessibility; keep/repair aria, labels, focus handling.
|
|
49
52
|
7. Prefer reusing existing components/utilities from the repo (you will receive an auto component catalog).
|
|
50
|
-
8. Output MUST NOT contain explanations, markdown, or code fences
|
|
53
|
+
8. Output MUST NOT contain explanations, markdown, or code fences.
|
|
54
|
+
9. When modifying styles, apply design principles (depth, motion, typography).`;
|
|
51
55
|
if (returnDiff) {
|
|
52
56
|
return `${base}\n\nOutput a UNIFIED DIFF only.`;
|
|
53
57
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modify-ui.js","sourceRoot":"","sources":["../../src/tools/modify-ui.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AAE9B,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC9E,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"modify-ui.js","sourceRoot":"","sources":["../../src/tools/modify-ui.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snippet-ui.d.ts","sourceRoot":"","sources":["../../src/tools/snippet-ui.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEpE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"snippet-ui.d.ts","sourceRoot":"","sources":["../../src/tools/snippet-ui.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEpE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAyG5C,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAgHzE"}
|
package/dist/tools/snippet-ui.js
CHANGED
|
@@ -11,6 +11,7 @@ import { buildContext } from '../context/builder.js';
|
|
|
11
11
|
import { buildRepoHints } from '../context/repo-hints.js';
|
|
12
12
|
import { assertWritablePath } from '../context/guards.js';
|
|
13
13
|
import { writeFile } from '../output/file-writer.js';
|
|
14
|
+
import { DESIGN_PRINCIPLES_COMPACT } from '../design/principles.js';
|
|
14
15
|
const inputSchema = {
|
|
15
16
|
type: z
|
|
16
17
|
.enum(['modal', 'table', 'chart', 'form', 'card', 'nav', 'hero', 'footer', 'sidebar', 'custom'])
|
|
@@ -35,9 +36,11 @@ const inputSchema = {
|
|
|
35
36
|
writeToFile: z.boolean().default(false).describe('If true, write the generated code to targetPath'),
|
|
36
37
|
};
|
|
37
38
|
function getSystemPrompt(type, framework) {
|
|
38
|
-
return `You are a senior frontend engineer and UI
|
|
39
|
+
return `You are a senior frontend engineer and designer creating DISTINCTIVE, memorable UI.
|
|
39
40
|
|
|
40
|
-
Generate a standalone ${type} component in ${framework}.
|
|
41
|
+
Generate a standalone ${type} component in ${framework} that avoids generic AI aesthetics.
|
|
42
|
+
|
|
43
|
+
${DESIGN_PRINCIPLES_COMPACT}
|
|
41
44
|
|
|
42
45
|
Hard rules:
|
|
43
46
|
- Output ONLY the code. No explanations. No markdown. No code fences.
|
|
@@ -45,6 +48,9 @@ Hard rules:
|
|
|
45
48
|
- Responsive by default (mobile-first).
|
|
46
49
|
- Do not add new dependencies unless explicitly requested.
|
|
47
50
|
- Avoid placeholder TODOs. Provide complete, production-ready implementation.
|
|
51
|
+
- Use distinctive typography (avoid Inter, Roboto, Arial).
|
|
52
|
+
- Create visual depth with backgrounds (gradients, textures, shadows).
|
|
53
|
+
- Include purposeful animations for polish.
|
|
48
54
|
|
|
49
55
|
Type-specific requirements:
|
|
50
56
|
${getComponentGuidelines(type)}`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snippet-ui.js","sourceRoot":"","sources":["../../src/tools/snippet-ui.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"snippet-ui.js","sourceRoot":"","sources":["../../src/tools/snippet-ui.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gemini-designer/mcp-server",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "MCP server for AI-powered UI design and code generation with Gemini",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -53,4 +53,4 @@
|
|
|
53
53
|
"tsx": "^4.19.0",
|
|
54
54
|
"vitest": "^2.1.0"
|
|
55
55
|
}
|
|
56
|
-
}
|
|
56
|
+
}
|
package/src/config/index.ts
CHANGED
|
@@ -36,7 +36,7 @@ const ConfigSchema = z.object({
|
|
|
36
36
|
.default('react'),
|
|
37
37
|
|
|
38
38
|
// Gemini model to use (for local mode)
|
|
39
|
-
model: z.string().default('gemini-2.5-flash
|
|
39
|
+
model: z.string().default('gemini-2.5-flash'),
|
|
40
40
|
|
|
41
41
|
// LiteLLM (or other OpenAI-compatible proxy) configuration for local mode
|
|
42
42
|
litellmEndpoint: z.string().url().optional(),
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Design Principles Module
|
|
3
|
+
*
|
|
4
|
+
* Centralized design guidelines injected into all generation prompts
|
|
5
|
+
* to avoid generic "AI slop" aesthetics.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Core design principles for generating distinctive, memorable UI.
|
|
10
|
+
* Injected into generation prompts to steer away from generic output.
|
|
11
|
+
*/
|
|
12
|
+
export const DESIGN_PRINCIPLES = `
|
|
13
|
+
## Design Philosophy
|
|
14
|
+
|
|
15
|
+
Create DISTINCTIVE, production-grade UI that avoids generic AI aesthetics.
|
|
16
|
+
Every design should feel intentionally crafted, not algorithmically generated.
|
|
17
|
+
|
|
18
|
+
### Typography
|
|
19
|
+
- NEVER use: Inter, Roboto, Arial, Open Sans, Lato, default system fonts
|
|
20
|
+
- DO use distinctive choices:
|
|
21
|
+
- Code/Tech: JetBrains Mono, Fira Code, Space Grotesk
|
|
22
|
+
- Editorial: Playfair Display, Crimson Pro, Newsreader
|
|
23
|
+
- Modern: Bricolage Grotesque, Plus Jakarta Sans, Outfit
|
|
24
|
+
- Technical: IBM Plex family, Source Sans 3
|
|
25
|
+
- Pair a distinctive display font with a refined body font
|
|
26
|
+
- Use extreme weight contrasts (100/200 vs 800/900, not 400 vs 600)
|
|
27
|
+
- Size jumps of 3x+, not 1.5x differences
|
|
28
|
+
|
|
29
|
+
### Color & Theme
|
|
30
|
+
- Commit to a cohesive, BOLD aesthetic direction
|
|
31
|
+
- Dominant colors with sharp accents outperform timid, evenly-distributed palettes
|
|
32
|
+
- NEVER: purple gradients on white backgrounds (cliché AI slop)
|
|
33
|
+
- NEVER: generic blue CTA buttons
|
|
34
|
+
- Draw inspiration from: IDE themes, cultural aesthetics, editorial design
|
|
35
|
+
- Consider: brutalist monochromes, rich jewel tones, warm earthy palettes
|
|
36
|
+
|
|
37
|
+
### Motion & Animation
|
|
38
|
+
- Focus on HIGH-IMPACT moments over scattered micro-interactions
|
|
39
|
+
- Use orchestrated page loads with staggered reveals (animation-delay)
|
|
40
|
+
- CSS animations with cubic-bezier easing for polish
|
|
41
|
+
- Scroll-triggered animations that surprise and delight
|
|
42
|
+
- Hover states that transform, not just color-shift
|
|
43
|
+
- One well-designed entrance animation > ten subtle fades
|
|
44
|
+
|
|
45
|
+
### Backgrounds & Depth
|
|
46
|
+
- NEVER default to solid colors
|
|
47
|
+
- Create atmosphere and visual depth:
|
|
48
|
+
- Gradient meshes and multi-stop gradients
|
|
49
|
+
- Subtle noise textures and grain overlays
|
|
50
|
+
- Geometric patterns (dots, lines, grids)
|
|
51
|
+
- Layered transparencies and glassmorphism
|
|
52
|
+
- Dramatic shadows and elevation
|
|
53
|
+
- Decorative borders and frames
|
|
54
|
+
|
|
55
|
+
### Spatial Composition
|
|
56
|
+
- Unexpected layouts create memorability
|
|
57
|
+
- Use: asymmetry, overlap, diagonal flow
|
|
58
|
+
- Grid-breaking elements for visual interest
|
|
59
|
+
- Choose: generous negative space OR controlled density (both valid, commit fully)
|
|
60
|
+
- Avoid cookie-cutter card grids
|
|
61
|
+
|
|
62
|
+
### Aesthetic Directions (pick ONE, commit fully)
|
|
63
|
+
When generating vibes, draw from these inspirations:
|
|
64
|
+
- Brutally minimal (stark, high-contrast, essential)
|
|
65
|
+
- Maximalist chaos (layered, textured, vibrant)
|
|
66
|
+
- Retro-futuristic (CRT glow, scan lines, neon)
|
|
67
|
+
- Organic/natural (earth tones, flowing shapes)
|
|
68
|
+
- Luxury/refined (gold/black, serif elegance)
|
|
69
|
+
- Playful/toy-like (rounded corners, bouncy, colorful)
|
|
70
|
+
- Editorial/magazine (bold typography, asymmetry)
|
|
71
|
+
- Brutalist/raw (exposed structure, monospace, blocks)
|
|
72
|
+
- Art deco/geometric (symmetry, gold, repetition)
|
|
73
|
+
- Soft/pastel (muted, gentle, rounded)
|
|
74
|
+
- Industrial/utilitarian (functional, exposed, dark)
|
|
75
|
+
`;
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* Compact version for token-constrained contexts.
|
|
79
|
+
* Use this when combining with large user prompts.
|
|
80
|
+
*/
|
|
81
|
+
export const DESIGN_PRINCIPLES_COMPACT = `
|
|
82
|
+
## Design Rules
|
|
83
|
+
- Typography: NEVER Inter/Roboto/Arial. Use distinctive fonts.
|
|
84
|
+
- Colors: Bold palettes, dominant + accent. NO purple-on-white.
|
|
85
|
+
- Motion: Staggered reveals, scroll-triggered, impactful hover states.
|
|
86
|
+
- Backgrounds: Depth via gradients, textures, shadows. Never flat.
|
|
87
|
+
- Layout: Asymmetry, overlap, grid-breaking. Commit to a direction.
|
|
88
|
+
`;
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
* Font blacklist for explicit filtering
|
|
92
|
+
*/
|
|
93
|
+
export const BANNED_FONTS = [
|
|
94
|
+
'Inter',
|
|
95
|
+
'Roboto',
|
|
96
|
+
'Arial',
|
|
97
|
+
'Open Sans',
|
|
98
|
+
'Lato',
|
|
99
|
+
'Helvetica',
|
|
100
|
+
'system-ui',
|
|
101
|
+
'sans-serif',
|
|
102
|
+
'-apple-system',
|
|
103
|
+
'BlinkMacSystemFont',
|
|
104
|
+
];
|
|
105
|
+
|
|
106
|
+
/**
|
|
107
|
+
* Suggested distinctive fonts by category
|
|
108
|
+
*/
|
|
109
|
+
export const SUGGESTED_FONTS = {
|
|
110
|
+
display: ['Bricolage Grotesque', 'Playfair Display', 'Outfit', 'Space Grotesk'],
|
|
111
|
+
body: ['Plus Jakarta Sans', 'Source Sans 3', 'IBM Plex Sans', 'Crimson Pro'],
|
|
112
|
+
code: ['JetBrains Mono', 'Fira Code', 'IBM Plex Mono', 'Cascadia Code'],
|
|
113
|
+
editorial: ['Newsreader', 'Playfair Display', 'Cormorant Garamond', 'Libre Baskerville'],
|
|
114
|
+
};
|
package/src/tools/create-ui.ts
CHANGED
|
@@ -15,6 +15,8 @@ import { writeFile } from '../output/file-writer.js';
|
|
|
15
15
|
import { formatCode } from '../output/formatter.js';
|
|
16
16
|
import { buildRepoHints } from '../context/repo-hints.js';
|
|
17
17
|
|
|
18
|
+
import { DESIGN_PRINCIPLES } from '../design/principles.js';
|
|
19
|
+
|
|
18
20
|
const inputSchema = {
|
|
19
21
|
description: z.string().describe('Description of the UI to create (component or view)'),
|
|
20
22
|
framework: z.enum(['react', 'vue', 'svelte', 'html']).default('react'),
|
|
@@ -27,26 +29,28 @@ const inputSchema = {
|
|
|
27
29
|
format: z.boolean().default(true).describe('Format the code with Prettier before returning/writing'),
|
|
28
30
|
};
|
|
29
31
|
|
|
30
|
-
const SYSTEM_PROMPT = `You are a senior frontend engineer and UI
|
|
32
|
+
const SYSTEM_PROMPT = `You are a senior frontend engineer and designer who creates DISTINCTIVE, memorable UI.
|
|
33
|
+
|
|
34
|
+
Your task: generate production-ready UI code that avoids generic AI aesthetics.
|
|
31
35
|
|
|
32
|
-
|
|
36
|
+
${DESIGN_PRINCIPLES}
|
|
37
|
+
|
|
38
|
+
## Code Requirements
|
|
33
39
|
|
|
34
40
|
Hard rules (must follow):
|
|
35
41
|
- Output ONLY the final code. No explanations. No markdown. No code fences.
|
|
36
|
-
- Use the specified framework
|
|
37
|
-
-
|
|
38
|
-
- Accessibility:
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
- If design tokens / vibe are provided, use them (prefer CSS variables) and do not hard-code random colors.
|
|
44
|
-
- Keep logic minimal and UI-focused; avoid fake backend calls.
|
|
45
|
-
|
|
46
|
-
Quality bar:
|
|
42
|
+
- Use the specified framework idiomatically.
|
|
43
|
+
- NO new dependencies unless explicitly requested.
|
|
44
|
+
- Accessibility: WCAG AA default (semantic HTML, labels, aria-*, keyboard nav, :focus-visible)
|
|
45
|
+
- Responsive by default (mobile-first)
|
|
46
|
+
- If vibe/tokens provided, use them (prefer CSS variables). Don't hard-code random colors.
|
|
47
|
+
|
|
48
|
+
## Quality Bar
|
|
47
49
|
- TypeScript types where applicable
|
|
48
50
|
- No unused imports/vars
|
|
49
|
-
- Clean component structure and clear naming
|
|
51
|
+
- Clean component structure and clear naming
|
|
52
|
+
- Animations should use CSS or framework-native solutions
|
|
53
|
+
- Background treatments should create depth (not flat solid colors)`;
|
|
50
54
|
|
|
51
55
|
function buildUserPrompt(args: {
|
|
52
56
|
description: string;
|
|
@@ -20,6 +20,7 @@ import { assertReadablePath, assertWritablePath } from '../context/guards.js';
|
|
|
20
20
|
import { buildRepoGrounding } from '../context/grounding.js';
|
|
21
21
|
import { generateWithGemini } from '../generation/gemini-client.js';
|
|
22
22
|
import { writeFile } from '../output/file-writer.js';
|
|
23
|
+
import { DESIGN_PRINCIPLES_COMPACT } from '../design/principles.js';
|
|
23
24
|
|
|
24
25
|
const inputSchema = {
|
|
25
26
|
componentFile: z.string().describe('Path to an existing component file (e.g., src/components/Button.tsx).'),
|
|
@@ -41,12 +42,14 @@ const inputSchema = {
|
|
|
41
42
|
backup: z.boolean().default(true).describe('Create .bak backups before overwriting existing files.'),
|
|
42
43
|
};
|
|
43
44
|
|
|
44
|
-
const SYSTEM_PROMPT = `You are a senior frontend engineer
|
|
45
|
+
const SYSTEM_PROMPT = `You are a senior frontend engineer creating DISTINCTIVE component variants.
|
|
46
|
+
|
|
47
|
+
${DESIGN_PRINCIPLES_COMPACT}
|
|
45
48
|
|
|
46
49
|
Your task:
|
|
47
50
|
- Update an existing component to support the requested variants.
|
|
51
|
+
- Make variants visually distinctive (avoid generic styles).
|
|
48
52
|
- Preserve existing behavior and imports unless required.
|
|
49
|
-
- Keep code style consistent with the file.
|
|
50
53
|
- Ensure accessibility: keyboard/focus, aria-labels, disabled states.
|
|
51
54
|
|
|
52
55
|
Repo alignment (CRITICAL):
|
|
@@ -61,7 +64,8 @@ Output contract (CRITICAL):
|
|
|
61
64
|
API guidance:
|
|
62
65
|
- Prefer adding/expanding a typed prop such as "size" | "variant" | "intent" and mapping to classes.
|
|
63
66
|
- Avoid breaking changes: keep default props aligned to existing visuals.
|
|
64
|
-
- Do not introduce new dependencies unless explicitly requested
|
|
67
|
+
- Do not introduce new dependencies unless explicitly requested.
|
|
68
|
+
- Apply distinctive typography and color for each variant.`;
|
|
65
69
|
|
|
66
70
|
function cleanJson(response: string): string {
|
|
67
71
|
let out = response.trim();
|
|
@@ -11,6 +11,8 @@ import { Config } from '../config/index.js';
|
|
|
11
11
|
import { buildContext } from '../context/builder.js';
|
|
12
12
|
import { generateWithGemini } from '../generation/gemini-client.js';
|
|
13
13
|
|
|
14
|
+
import { DESIGN_PRINCIPLES_COMPACT, BANNED_FONTS, SUGGESTED_FONTS } from '../design/principles.js';
|
|
15
|
+
|
|
14
16
|
const inputSchema = {
|
|
15
17
|
projectContext: z
|
|
16
18
|
.string()
|
|
@@ -30,29 +32,51 @@ const inputSchema = {
|
|
|
30
32
|
.object({
|
|
31
33
|
colorTemp: z.enum(['warm', 'cool', 'neutral']).optional(),
|
|
32
34
|
density: z.enum(['compact', 'comfortable', 'spacious']).optional(),
|
|
33
|
-
style: z.enum([
|
|
35
|
+
style: z.enum([
|
|
36
|
+
'minimal',
|
|
37
|
+
'playful',
|
|
38
|
+
'corporate',
|
|
39
|
+
'brutalist',
|
|
40
|
+
'glassmorphism',
|
|
41
|
+
'editorial',
|
|
42
|
+
'retro-futuristic',
|
|
43
|
+
'luxury',
|
|
44
|
+
'organic',
|
|
45
|
+
'art-deco',
|
|
46
|
+
]).optional(),
|
|
34
47
|
})
|
|
35
48
|
.optional()
|
|
36
49
|
.describe('Optional style preferences to guide generation'),
|
|
37
50
|
};
|
|
38
51
|
|
|
39
|
-
const SYSTEM_PROMPT = `You are an expert UI/UX designer
|
|
52
|
+
const SYSTEM_PROMPT = `You are an expert UI/UX designer who creates DISTINCTIVE, memorable design systems.
|
|
53
|
+
|
|
54
|
+
Your task: generate design "vibes" that are visually striking and avoid generic AI aesthetics.
|
|
55
|
+
|
|
56
|
+
${DESIGN_PRINCIPLES_COMPACT}
|
|
40
57
|
|
|
41
|
-
|
|
58
|
+
## Typography Rules
|
|
59
|
+
BANNED FONTS (never use): ${BANNED_FONTS.join(', ')}
|
|
60
|
+
SUGGESTED FONTS:
|
|
61
|
+
- Display: ${SUGGESTED_FONTS.display.join(', ')}
|
|
62
|
+
- Body: ${SUGGESTED_FONTS.body.join(', ')}
|
|
63
|
+
- Code: ${SUGGESTED_FONTS.code.join(', ')}
|
|
64
|
+
- Editorial: ${SUGGESTED_FONTS.editorial.join(', ')}
|
|
42
65
|
|
|
43
|
-
Requirements
|
|
44
|
-
- Return ONE valid JSON object with a "vibes" array (no markdown, no code fences
|
|
45
|
-
- Use semantic color roles (primary, secondary, accent, background, surface, text, textMuted, border, danger, success)
|
|
46
|
-
-
|
|
47
|
-
-
|
|
48
|
-
- Provide
|
|
66
|
+
## Output Requirements
|
|
67
|
+
- Return ONE valid JSON object with a "vibes" array (no markdown, no code fences)
|
|
68
|
+
- Use semantic color roles (primary, secondary, accent, background, surface, text, textMuted, border, danger, success)
|
|
69
|
+
- Ensure WCAG AA contrast for text on background/surface
|
|
70
|
+
- Each vibe should feel intentionally designed with a clear aesthetic direction
|
|
71
|
+
- Provide ready-to-paste CSS variables (light + dark themes when appropriate)
|
|
49
72
|
|
|
50
|
-
Output
|
|
73
|
+
## Output Structure
|
|
51
74
|
{
|
|
52
75
|
"vibes": [
|
|
53
76
|
{
|
|
54
|
-
"name": "Vibe Name",
|
|
55
|
-
"description": "
|
|
77
|
+
"name": "Distinctive Vibe Name",
|
|
78
|
+
"description": "Bold aesthetic description - what makes this memorable?",
|
|
79
|
+
"aestheticDirection": "e.g., 'brutalist', 'luxury', 'editorial'",
|
|
56
80
|
"colors": {
|
|
57
81
|
"primary": "#hex",
|
|
58
82
|
"secondary": "#hex",
|
|
@@ -66,15 +90,17 @@ Output structure:
|
|
|
66
90
|
"success": "#hex"
|
|
67
91
|
},
|
|
68
92
|
"typography": {
|
|
69
|
-
"fontFamily": "font stack",
|
|
70
|
-
"headingFamily": "font stack
|
|
71
|
-
"scale": [12, 14, 16,
|
|
93
|
+
"fontFamily": "distinctive body font stack (from Google Fonts)",
|
|
94
|
+
"headingFamily": "distinctive display font stack",
|
|
95
|
+
"scale": [12, 14, 16, 20, 24, 32, 40, 48, 64, 80]
|
|
72
96
|
},
|
|
73
97
|
"spacing": {
|
|
74
98
|
"unit": 4,
|
|
75
99
|
"scale": [0, 4, 8, 12, 16, 24, 32, 48, 64, 96]
|
|
76
100
|
},
|
|
77
|
-
"
|
|
101
|
+
"motionGuidelines": "Description of animation approach for this vibe",
|
|
102
|
+
"backgroundTreatment": "How to create depth/atmosphere (gradients, textures, etc.)",
|
|
103
|
+
"cssVariables": "/* theme */\\n:root { ... }"
|
|
78
104
|
}
|
|
79
105
|
]
|
|
80
106
|
}`;
|
|
@@ -93,10 +119,10 @@ export function registerGenerateVibes(server: McpServer, config: Config): void {
|
|
|
93
119
|
const vibeCount = args.vibeCount as number | undefined;
|
|
94
120
|
const preferences = args.preferences as
|
|
95
121
|
| {
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
122
|
+
colorTemp?: 'warm' | 'cool' | 'neutral';
|
|
123
|
+
density?: 'compact' | 'comfortable' | 'spacious';
|
|
124
|
+
style?: 'minimal' | 'playful' | 'corporate' | 'brutalist' | 'glassmorphism';
|
|
125
|
+
}
|
|
100
126
|
| undefined;
|
|
101
127
|
|
|
102
128
|
const existingTokensPath = args.existingTokens as string | undefined;
|
package/src/tools/modify-ui.ts
CHANGED
|
@@ -15,6 +15,7 @@ import { assertReadablePath, assertWritablePath } from '../context/guards.js';
|
|
|
15
15
|
import { buildRepoGrounding } from '../context/grounding.js';
|
|
16
16
|
import { generateWithGemini } from '../generation/gemini-client.js';
|
|
17
17
|
import { writeFile } from '../output/file-writer.js';
|
|
18
|
+
import { DESIGN_PRINCIPLES_COMPACT } from '../design/principles.js';
|
|
18
19
|
|
|
19
20
|
const inputSchema = {
|
|
20
21
|
targetFile: z.string().describe('Path to the file to modify'),
|
|
@@ -38,7 +39,9 @@ const inputSchema = {
|
|
|
38
39
|
};
|
|
39
40
|
|
|
40
41
|
function getSystemPrompt(returnDiff: boolean): string {
|
|
41
|
-
const base = `You are a senior frontend engineer performing surgical code modifications.
|
|
42
|
+
const base = `You are a senior frontend engineer performing surgical code modifications that are VISUALLY DISTINCTIVE.
|
|
43
|
+
|
|
44
|
+
${DESIGN_PRINCIPLES_COMPACT}
|
|
42
45
|
|
|
43
46
|
CRITICAL RULES (must follow):
|
|
44
47
|
1. ONLY modify what is explicitly requested.
|
|
@@ -52,7 +55,8 @@ CRITICAL RULES (must follow):
|
|
|
52
55
|
5. Keep existing comments unless they conflict with the requested change.
|
|
53
56
|
6. Accessibility: do not regress accessibility; keep/repair aria, labels, focus handling.
|
|
54
57
|
7. Prefer reusing existing components/utilities from the repo (you will receive an auto component catalog).
|
|
55
|
-
8. Output MUST NOT contain explanations, markdown, or code fences
|
|
58
|
+
8. Output MUST NOT contain explanations, markdown, or code fences.
|
|
59
|
+
9. When modifying styles, apply design principles (depth, motion, typography).`;
|
|
56
60
|
|
|
57
61
|
if (returnDiff) {
|
|
58
62
|
return `${base}\n\nOutput a UNIFIED DIFF only.`;
|
package/src/tools/snippet-ui.ts
CHANGED
|
@@ -14,6 +14,7 @@ import { buildContext } from '../context/builder.js';
|
|
|
14
14
|
import { buildRepoHints } from '../context/repo-hints.js';
|
|
15
15
|
import { assertWritablePath } from '../context/guards.js';
|
|
16
16
|
import { writeFile } from '../output/file-writer.js';
|
|
17
|
+
import { DESIGN_PRINCIPLES_COMPACT } from '../design/principles.js';
|
|
17
18
|
|
|
18
19
|
const inputSchema = {
|
|
19
20
|
type: z
|
|
@@ -42,9 +43,11 @@ const inputSchema = {
|
|
|
42
43
|
};
|
|
43
44
|
|
|
44
45
|
function getSystemPrompt(type: string, framework: string): string {
|
|
45
|
-
return `You are a senior frontend engineer and UI
|
|
46
|
+
return `You are a senior frontend engineer and designer creating DISTINCTIVE, memorable UI.
|
|
46
47
|
|
|
47
|
-
Generate a standalone ${type} component in ${framework}.
|
|
48
|
+
Generate a standalone ${type} component in ${framework} that avoids generic AI aesthetics.
|
|
49
|
+
|
|
50
|
+
${DESIGN_PRINCIPLES_COMPACT}
|
|
48
51
|
|
|
49
52
|
Hard rules:
|
|
50
53
|
- Output ONLY the code. No explanations. No markdown. No code fences.
|
|
@@ -52,6 +55,9 @@ Hard rules:
|
|
|
52
55
|
- Responsive by default (mobile-first).
|
|
53
56
|
- Do not add new dependencies unless explicitly requested.
|
|
54
57
|
- Avoid placeholder TODOs. Provide complete, production-ready implementation.
|
|
58
|
+
- Use distinctive typography (avoid Inter, Roboto, Arial).
|
|
59
|
+
- Create visual depth with backgrounds (gradients, textures, shadows).
|
|
60
|
+
- Include purposeful animations for polish.
|
|
55
61
|
|
|
56
62
|
Type-specific requirements:
|
|
57
63
|
${getComponentGuidelines(type)}`;
|