glassify-ui

Name: glassify-ui
Author: MagicCube

489stars57forks

How to install glassify-ui?

magiccube/agentara/glassify-ui

$npx -y skills add MagicCube/agentara --skill glassify-ui

Installs into the current project.

Summary

Transform a UI screenshot into a structured Cinema4D/Octane JSON render prompt for photorealistic 3D poster art. Use this skill whenever the user uploads a UI screenshot (app, website, tool, dashboard) and wants a Cinema4D render prompt, 3D poster, AIGC image prompt, or any photo

Files · 1

View on GitHub

SKILL.md

1	# Cinema4D UI Render Skill
2
3	Transform a UI screenshot into a structured JSON render prompt for Cinema4D/Octane.
4	Output purpose: promotional poster art, not documentation. Abstraction beats fidelity.
5
6	---
7
8	## Core Philosophy: "舍得" (Less is More)
9
10	A poster is not a screenshot. The JSON you produce must:
11
12	- Simplify layers — 4–8 layers max. Merge minor UI regions. Omit decorative chrome.
13	- Abstract content — No literal button labels unless they define the product identity.
14	Use semantic descriptions: `"primary action buttons row"` not `"Bold / Italic / Underline"`.
15	- Elevate the hero — One layer is the visual anchor (the "hero slab"). Give it the
16	prominent glow, active color, and bloom effect. Everything else supports it.
17	- No clutter — Status bars, scrollbars, tooltips, and minor icons: omit entirely
18	unless they are distinctive brand elements.
19	- Extract interactive controls as micro_elements — Every visible button, toggle switch,
20	pill chip, or CTA must be listed in the `micro_elements` array as an independent glass
21	brick with its own z_offset, shape, and tint. Do NOT bury them inside a parent layer's
22	`content` description. This is mandatory — missing micro_elements is a critical error.
23
24	---
25
26	## Step 1 — Analyze the Screenshot
27
28	Look at the screenshot and extract:
29
30	1. UI category: productivity / developer / creative / mobile / web / dashboard
31	2. Brand identity signals: dominant color, logo, product name, characteristic icon
32	3. Natural focal region: which area draws the eye first — that becomes the hero layer
33	4. Aspect ratio decision (if user has not specified):
34	- Desktop/web UI with wide layout → `"16:9"`
35	- Mobile app or portrait-first UI → `"9:16"`
36	- Square or ambiguous → `"1:1"` or `"16:9"` as default
37
38	---
39
40	## Step 2 — Design the Layer Stack
41
42	Collapse the real UI into 4–8 abstract depth layers, Z-offset spaced 5–6mm apart.
43	Use this table as a starting template — adapt to the actual UI:
44
45	\| Layer ID \| Typical Role \| Z offset \| Thickness \| Roughness \| Transmission \|
46	\|----------\|------------------------\|----------\|-----------\|-----------\|--------------\|
47	\| 0 \| App shell / chrome \| 0mm \| 8mm \| 0.20 \| 0.50 \|
48	\| 1 \| Background / canvas \| 5mm \| 6mm \| 0.15 \| 0.65 \|
49	\| 2 \| Main content area \| 10mm \| 5mm \| 0.06 \| 0.85 \|
50	\| 3 \| Primary toolbar/nav \| 15mm \| 5mm \| 0.12 \| 0.70 \|
51	\| 4 \| Hero element \| 20mm \| 4mm \| 0.08 \| 0.75 \|
52	\| 5 \| Floating accent (opt.) \| 25mm \| 3mm \| 0.18 \| 0.60 \|
53
54	Rules:
55	- The hero layer gets `glow` and `active_element` with `effect: "backlit_halo_bloom"`
56	- Content descriptions use semantic phrases, never exhaustive lists of UI elements
57	- Omit Layer 5 if the UI has no natural floating element
58
59	### micro_elements (mandatory if interactive controls exist)
60
61	After the main layer stack, scan the screenshot for every interactive widget:
62	buttons, toggle switches, pill chips, dropdown triggers, submit CTAs, radio buttons, sliders.
63	Each one becomes an entry in `micro_elements` — a separate floating glass brick:
64
65	```json
66	"micro_elements": [
67	{
68	"id": "me_01",
69	"type": "toggle_switch",
70	"label_semantic": "Computer mode toggle — active state",
71	"parent_layer_id": 1,
72	"z_offset_mm": 28,
73	"shape": "pill",
74	"size": "small",
75	"material": {
76	"thickness_mm": 2.5,
77	"roughness": 0.05,
78	"transmission": 0.80,
79	"tint": "accent_blue"
80	},
81	"glow": {
82	"color": "#4AA8FF",
83	"intensity": 0.5,
84	"radius_mm": 6,
85	"effect": "edge_rim_glow"
86	}
87	}
88	]
89	```
90
91	`type` values: `button_primary`, `button_secondary`, `toggle_switch`, `pill_chip`,
92	`dropdown_trigger`, `icon_button`, `cta_submit`.
93	`shape` values: `rectangle`, `pill`, `circle`, `square`.
94	`tint` values: `accent_blue`, `accent_teal`, `neutral_white`, `clear`, `warm_white`, `cool_white`.
95
96	---
97
98	## Step 3 — Choose Environment & Tone
99
100	Default white balance is neutral-to-slightly-cool (5200–5600K). Avoid warm golden tones
101	unless explicitly requested. Match environment to UI category:
102
103	\| UI Category \| Environment \| Tone \| Palette \|
104	\|------------------\|-----------------------------------\|--------------\|-----------------------\|
105	\| Productivity \| bright_minimal_desk_daylight \| neutral_cool \| clean_daylight \|
106	\| Developer / Code \| dar

People who liked this also viewed

6 picks

Type

glassify-ui

489stars57forks

View on GitHub

How to install glassify-ui?

magiccube/agentara/glassify-ui

$npx -y skills add MagicCube/agentara --skill glassify-ui

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Cinema4D UI Render Skill
2
3	Transform a UI screenshot into a structured JSON render prompt for Cinema4D/Octane.
4	Output purpose: promotional poster art, not documentation. Abstraction beats fidelity.
5
6	---
7
8	## Core Philosophy: "舍得" (Less is More)
9
10	A poster is not a screenshot. The JSON you produce must:
11
12	- Simplify layers — 4–8 layers max. Merge minor UI regions. Omit decorative chrome.
13	- Abstract content — No literal button labels unless they define the product identity.
14	Use semantic descriptions: `"primary action buttons row"` not `"Bold / Italic / Underline"`.
15	- Elevate the hero — One layer is the visual anchor (the "hero slab"). Give it the
16	prominent glow, active color, and bloom effect. Everything else supports it.
17	- No clutter — Status bars, scrollbars, tooltips, and minor icons: omit entirely
18	unless they are distinctive brand elements.
19	- Extract interactive controls as micro_elements — Every visible button, toggle switch,
20	pill chip, or CTA must be listed in the `micro_elements` array as an independent glass
21	brick with its own z_offset, shape, and tint. Do NOT bury them inside a parent layer's
22	`content` description. This is mandatory — missing micro_elements is a critical error.
23
24	---
25
26	## Step 1 — Analyze the Screenshot
27
28	Look at the screenshot and extract:
29
30	1. UI category: productivity / developer / creative / mobile / web / dashboard
31	2. Brand identity signals: dominant color, logo, product name, characteristic icon
32	3. Natural focal region: which area draws the eye first — that becomes the hero layer
33	4. Aspect ratio decision (if user has not specified):
34	- Desktop/web UI with wide layout → `"16:9"`
35	- Mobile app or portrait-first UI → `"9:16"`
36	- Square or ambiguous → `"1:1"` or `"16:9"` as default
37
38	---
39
40	## Step 2 — Design the Layer Stack
41
42	Collapse the real UI into 4–8 abstract depth layers, Z-offset spaced 5–6mm apart.
43	Use this table as a starting template — adapt to the actual UI:
44
45	\| Layer ID \| Typical Role \| Z offset \| Thickness \| Roughness \| Transmission \|
46	\|----------\|------------------------\|----------\|-----------\|-----------\|--------------\|
47	\| 0 \| App shell / chrome \| 0mm \| 8mm \| 0.20 \| 0.50 \|
48	\| 1 \| Background / canvas \| 5mm \| 6mm \| 0.15 \| 0.65 \|
49	\| 2 \| Main content area \| 10mm \| 5mm \| 0.06 \| 0.85 \|
50	\| 3 \| Primary toolbar/nav \| 15mm \| 5mm \| 0.12 \| 0.70 \|
51	\| 4 \| Hero element \| 20mm \| 4mm \| 0.08 \| 0.75 \|
52	\| 5 \| Floating accent (opt.) \| 25mm \| 3mm \| 0.18 \| 0.60 \|
53
54	Rules:
55	- The hero layer gets `glow` and `active_element` with `effect: "backlit_halo_bloom"`
56	- Content descriptions use semantic phrases, never exhaustive lists of UI elements
57	- Omit Layer 5 if the UI has no natural floating element
58
59	### micro_elements (mandatory if interactive controls exist)
60
61	After the main layer stack, scan the screenshot for every interactive widget:
62	buttons, toggle switches, pill chips, dropdown triggers, submit CTAs, radio buttons, sliders.
63	Each one becomes an entry in `micro_elements` — a separate floating glass brick:
64
65	```json
66	"micro_elements": [
67	{
68	"id": "me_01",
69	"type": "toggle_switch",
70	"label_semantic": "Computer mode toggle — active state",
71	"parent_layer_id": 1,
72	"z_offset_mm": 28,
73	"shape": "pill",
74	"size": "small",
75	"material": {
76	"thickness_mm": 2.5,
77	"roughness": 0.05,
78	"transmission": 0.80,
79	"tint": "accent_blue"
80	},
81	"glow": {
82	"color": "#4AA8FF",
83	"intensity": 0.5,
84	"radius_mm": 6,
85	"effect": "edge_rim_glow"
86	}
87	}
88	]
89	```
90
91	`type` values: `button_primary`, `button_secondary`, `toggle_switch`, `pill_chip`,
92	`dropdown_trigger`, `icon_button`, `cta_submit`.
93	`shape` values: `rectangle`, `pill`, `circle`, `square`.
94	`tint` values: `accent_blue`, `accent_teal`, `neutral_white`, `clear`, `warm_white`, `cool_white`.
95
96	---
97
98	## Step 3 — Choose Environment & Tone
99
100	Default white balance is neutral-to-slightly-cool (5200–5600K). Avoid warm golden tones
101	unless explicitly requested. Match environment to UI category:
102
103	\| UI Category \| Environment \| Tone \| Palette \|
104	\|------------------\|-----------------------------------\|--------------\|-----------------------\|
105	\| Productivity \| bright_minimal_desk_daylight \| neutral_cool \| clean_daylight \|
106	\| Developer / Code \| dar

People who liked this also viewed

6 picks

Type