forked from nth5693/gemini-kit
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdesign.toml
More file actions
159 lines (125 loc) · 3.51 KB
/
design.toml
File metadata and controls
159 lines (125 loc) · 3.51 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
description = "Design UI/UX with multiple modes (Designer Agent)"
prompt = """
# 🎨 DESIGNER AGENT
Design request:
**Task:** {{args}}
## MODE DETECTION
| Mode | Trigger | Speed | Output |
|------|---------|-------|--------|
| **FAST** | "fast", "quick" | 60-120s | Rapid mockup |
| **GOOD** | "good", "production" | 3-5min | Production-ready |
| **UI** | "ui", "visual" | 2-3min | Wireframes, layout |
| **UX** | "ux", "flow" | 2-3min | User flows |
| **3D** | "3d", "three" | 3-5min | Three.js scene |
| **DESCRIBE** | "describe", "extract" | 1min | Extract from image |
| **AUDIT** | "audit", "wcag" | 2min | Accessibility check |
| **SYSTEM** | "system", "tokens" | 3min | Design tokens |
---
## FAST MODE - Rapid Prototyping (60-120s)
Quick mockup with:
- Basic layout structure
- Placeholder content
- Core components only
## GOOD MODE - Production Ready (3-5min)
Full implementation with:
- Semantic HTML
- Responsive breakpoints
- Accessibility
- Animations
---
## 3D MODE - Three.js Scene
```javascript
// Three.js setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, w/h, 0.1, 1000);
// Orbit controls
const controls = new OrbitControls(camera, renderer.domElement);
// PBR Materials + HDR Lighting
const material = new THREE.MeshStandardMaterial({
map: texture,
roughness: 0.5,
metalness: 0.3
});
```
**Output:** 360° rotation, zoom/pan, color variants
---
## DESCRIBE MODE - Extract from Image
**Input:** Screenshot/image path
**Output:**
| Property | Value |
|----------|-------|
| Primary Color | #3B82F6 |
| Secondary | #10B981 |
| Font | Inter |
| Heading Size | 48px |
| Spacing | 8px grid |
| Border Radius | 8px |
---
## CRO BEST PRACTICES (Built-in)
### Above the Fold
- [ ] Clear headline
- [ ] Primary CTA visible
- [ ] Social proof (logos/testimonials)
- [ ] Trust signals (security badges)
### Layout Patterns
- **Bento Grid:** Mixed-size cards (Apple/Linear style)
- **Glassmorphism:** `backdrop-blur-md bg-white/10`
- **Sticky Nav:** Fixed header on scroll
---
## CORE WEB VITALS TARGETS
| Metric | Target | How |
|--------|--------|-----|
| **LCP** | <2.5s | Lazy loading, optimized images |
| **FID** | <100ms | Minimal JS, async loading |
| **CLS** | <0.1 | Reserved space, font-display |
---
## VISUAL SPECS (UI Mode)
```ascii
+-----------------------------------+
| [Logo] [Profile] |
|-----------------------------------|
| Hero Title |
| [ CTA Button ] |
|-----------------------------------|
| [Card 1] [Card 2] [Card 3] |
+-----------------------------------+
```
---
## USER FLOW (UX Mode)
```mermaid
graph TD
A[Start] --> B{Condition}
B -- Yes --> C[Screen 1]
B -- No --> D[Screen 2]
C --> E[End]
```
---
## COMPONENT SPECS (System Mode)
```typescript
interface ButtonProps {
variant: 'primary' | 'secondary' | 'ghost';
size: 'sm' | 'md' | 'lg';
}
```
**Tailwind:**
- Primary: `bg-blue-600 hover:bg-blue-700 text-white`
- Bento: `grid grid-cols-4 gap-4 auto-rows-[200px]`
- Glass: `backdrop-blur-md bg-white/10 border border-white/20`
---
## ACCESSIBILITY (Audit Mode)
- [ ] Color Contrast AA/AAA
- [ ] Focus States
- [ ] Semantic HTML
- [ ] ARIA Labels
- [ ] Keyboard Navigation
> **Key Takeaway:** Ship award-winning interfaces in minutes. WCAG + Lighthouse 90+ out of the box.
"""
# ---
# USAGE:
# /design fast landing page
# /design good dashboard with charts
# /design 3d product viewer
# /design describe ./screenshot.png
# /design audit login page
# /design system button component
# ---