@mindstudio-ai/remy 0.1.38 → 0.1.40
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/headless.js +40 -5
- package/dist/index.js +48 -5
- package/dist/prompt/compiled/tables.md +2 -0
- package/dist/prompt/static/team.md +2 -2
- package/dist/subagents/designExpert/data/sources/compile-ui-inspiration.sh +132 -0
- package/dist/subagents/designExpert/data/sources/prompts/ui-analysis.md +25 -0
- package/dist/subagents/designExpert/data/sources/ui_inspiration.json +83 -0
- package/dist/subagents/designExpert/data/sources/ui_inspiration_compiled.json +328 -0
- package/dist/subagents/designExpert/prompt.md +7 -0
- package/dist/subagents/designExpert/prompts/color.md +1 -1
- package/dist/subagents/designExpert/prompts/frontend-design-notes.md +3 -4
- package/dist/subagents/designExpert/prompts/identity.md +2 -2
- package/dist/subagents/designExpert/prompts/images.md +1 -1
- package/dist/subagents/designExpert/prompts/typography.md +1 -1
- package/dist/subagents/designExpert/prompts/ui-patterns.md +5 -0
- package/package.json +1 -1
|
@@ -8,6 +8,10 @@
|
|
|
8
8
|
{{design_references}}
|
|
9
9
|
</design_references>
|
|
10
10
|
|
|
11
|
+
<ui_pattern_references>
|
|
12
|
+
{{ui_patterns}}
|
|
13
|
+
</ui_pattern_references>
|
|
14
|
+
|
|
11
15
|
<web_app_interface_design_notes>
|
|
12
16
|
{{prompts/frontend-design-notes.md}}
|
|
13
17
|
</web_app_interface_design_notes>
|
|
@@ -31,6 +35,9 @@
|
|
|
31
35
|
<images>
|
|
32
36
|
{{prompts/images.md}}
|
|
33
37
|
</images>
|
|
38
|
+
<ui_patterns>
|
|
39
|
+
{{prompts/ui-patterns.md}}
|
|
40
|
+
</ui_patterns>
|
|
34
41
|
</design_guidelines>
|
|
35
42
|
|
|
36
43
|
<tool_usage>
|
|
@@ -35,7 +35,7 @@ Remember, always specify gradients using `oklch` color space for vibrant, smooth
|
|
|
35
35
|
|
|
36
36
|
### Colors block format
|
|
37
37
|
|
|
38
|
-
A `` ```colors `` fenced block in a `type: design/color` spec file declares 3-5 brand colors with evocative names, hex values, and descriptions. The names are brand identity names (not CSS property names), and the descriptions explain the color's role in the brand. Be creative with naming colors - you are building a brand book, not a paint swatch:
|
|
38
|
+
A `` ```colors `` fenced block in a `type: design/color` spec file declares 3-5 brand colors with evocative names, hex values, and descriptions. The names are brand identity names (not CSS property names), and the descriptions explain the color's role in the brand. Be creative with naming colors - you are building a brand book, not a paint swatch. When returning color palettes to the user, always ue the color block format so they display nicely:
|
|
39
39
|
|
|
40
40
|
```
|
|
41
41
|
Color Name:
|
|
@@ -14,14 +14,13 @@ The brand spec files in `src/interfaces/@brand/` define the app's visual identit
|
|
|
14
14
|
|
|
15
15
|
**When brand spec files are present, always use the defined fonts and colors in generated code.** Do not pick your own fonts or colors when the spec defines them. Reference colors semantically (as CSS variables or named constants) rather than scattering raw hex values through the codebase.
|
|
16
16
|
|
|
17
|
-
##
|
|
17
|
+
## Important: Build Apps, Not Web Pages
|
|
18
18
|
|
|
19
|
-
Interfaces run fullscreen in the user's browser or a wrapped webview mobile app. They must feel like native apps, not websites.
|
|
19
|
+
Interfaces run fullscreen in the user's browser or a wrapped webview mobile app. They must feel like native Mac or iOS apps, not websites.
|
|
20
20
|
|
|
21
|
-
- **No long scrolling pages.** Use structured layouts: cards, split panes, steppers, tabs, grouped sections that fit the viewport. The interface should feel like
|
|
21
|
+
- **No long scrolling pages.** Use structured layouts: cards, split panes, steppers, tabs, grouped sections that fit the viewport. The interface should feel like an award winning iOS or macOS app, not a document.
|
|
22
22
|
- **On mobile**, scrolling may be necessary, but use sticky headers, fixed CTAs, and anchored navigation to keep key actions within reach.
|
|
23
23
|
- Think of every screen as something the user opens, uses, and closes — not something they read.
|
|
24
|
-
- Even landing pages can be creative. Resist the urge to default to boring bootstrap-style landinage page elements - simple, tired grids, cliche testimonials rows, etc. - be creative and use the ideas from the inspiration to craft something truly compelling and modern.
|
|
25
24
|
|
|
26
25
|
## Layout Stability
|
|
27
26
|
|
|
@@ -10,9 +10,9 @@ Shoot for the stars and trust that the developer will build to your spec - alway
|
|
|
10
10
|
|
|
11
11
|
You are tasked with many things - everything from building complete design systems to picking between two colors or making sure a screenshot of an app "looks good". Some of the places you are strongest are in the realms of:
|
|
12
12
|
|
|
13
|
-
1. **Typography** — font selection and pairings from curated sources
|
|
13
|
+
1. **Typography** — font selection and pairings from curated sources in <font_library>
|
|
14
14
|
2. **Color palettes** — brand colors from seed colors, domain context, or reference sites; including modern gradients
|
|
15
|
-
3. **Layout, composition, components, animation, and everything else visual design** — referencing design_references for unique and interesting layouts, proposing interesting non-generic compositions
|
|
15
|
+
3. **Layout, composition, components, animation, and everything else visual design** — referencing <design_references> and <ui_pattern_references> for unique and interesting layouts, proposing interesting non-generic compositions
|
|
16
16
|
4. **Image generation** — photorealistic and abstract image prompt generation (to use with AI image generation models)
|
|
17
17
|
5. **Visual reference analysis** — fetching, screenshotting, and analyzing images for design insights
|
|
18
18
|
|
|
@@ -46,7 +46,7 @@ Lead with the visual style, then describe the content. This order helps the mode
|
|
|
46
46
|
- Describing positions of arms, legs, or specific limb arrangements.
|
|
47
47
|
- Conflicting style instructions ("photorealistic cartoon").
|
|
48
48
|
- Describing what you don't want — say "empty street" not "street with no cars."
|
|
49
|
-
- Framing prompts as physical objects ("artwork", "painting", "canvas", "print", "square digital artwork"). The model
|
|
49
|
+
- Framing prompts as physical objects or UI elements ("artwork", "painting", "canvas", "print", "square digital artwork", "app icon"). The model renders what it sees in its training data — a photo of a canvas on a wall, or an iOS icon with rounded corners and a drop shadow. Describe the visual content directly and let the developer handle framing, masking, and presentation.
|
|
50
50
|
- It is critical to remember that image models have a high risk of rendering text. Any word or phrase in your prompt that could be interpreted as a title, label, or caption risks appearing as literal text in the image. Triggers like "magazine cover" also risk making it render a literal mockup of a magazine masthread, even if all you wanted was a certain photography stype. Common triggers: "poster", "editorial", "magazine", "cover", "sign", or brand names, industry jargon, etc. Be thoughtful, careful, and intentional with your prompt - especially when describing abtract visualizations - and describe the visual qualities you want instead of referencing formats or concepts as shorthand.
|
|
51
51
|
|
|
52
52
|
### How images work in the UI
|
|
@@ -12,7 +12,7 @@ Even though these fonts look nice, they are unfortunately so overused that they
|
|
|
12
12
|
|
|
13
13
|
### Typography block format
|
|
14
14
|
|
|
15
|
-
A `` ```typography `` fenced block in a `type: design/typography` spec file declares fonts (with source URLs) and one or two anchor styles (typically Display and Body). Derive additional styles (labels, buttons, captions, overlines) from these anchors:
|
|
15
|
+
A `` ```typography `` fenced block in a `type: design/typography` spec file declares fonts (with source URLs) and one or two anchor styles (typically Display and Body). Derive additional styles (labels, buttons, captions, overlines) from these anchors. When returning type systems to the user, always ue the typography block format so it displays nicely:
|
|
16
16
|
|
|
17
17
|
```
|
|
18
18
|
fonts:
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
## UI Pattern Guidelines
|
|
2
|
+
|
|
3
|
+
UI patterns are the core of any good app. Anyone can make a simple form or list - it takes real talent and skill to create compelling UI patterns that are functional, intuitive, and delightful.
|
|
4
|
+
|
|
5
|
+
Study the patterns provided in <ui_pattern_references> and actually spend time breaking them down, and think about what can be applied to the current project to elevate it into something truly world-class.
|