AI Electron 2.0 · Home Energy Scene · Illustration system

Home Scene Styles

One home, three rendering styles, two energy states. The scene is the hero of the EV / home-energy app: it shows what the house is producing, consuming and exporting at a glance. I explored how slick or illustrative it should feel. Every device is its own named layer, so one asset can show any customer's mix of solar, battery, EV charger, heat pump and thermostat.

Exploration · originally Aug 31 2026 3 styles × 2 states · isometric 2:1 SVG · Figma-importable layers Energy-flow markers · importing / exporting / producing / consuming Board recompiled Nov 2026 from the original SVG / PNG assets: original artifact no longer accessible

Style × energy state

The Grid state shows the house importing from the pole (blue flow). The Solar state adds the rooftop array, which produces 2.3 kW and exports 1.3 kW back to the grid (green flow). Marker values are illustrative.

Grid: importing
Solar: producing + exporting
A

Studio

Slick soft-3D render: a modern flat-roof cube with a carport, muted palette, studio backdrop (mountains, sun, clouds), a tilted rooftop array and dark minimalist glazing.

1200 × 760 · desaturated palette · all device layers
Studio style, grid state
Studio · Gridhome-scene-sew-studio-grid.svg
Studio style, solar state
Studio · Solarhome-scene-sew-studio-solar.svg
B

Rendered

Isometric gabled house at high fidelity: gradients, ambient occlusion and gloss, plus every device layer (EV and charger, battery, heat pump, HVAC, thermostat).

1000 × 780 · SEW palette · all device layers
Rendered style, grid state
Rendered · Gridhome-scene-sew-hi-grid.svg
Rendered style, solar state
Rendered · Solarhome-scene-sew-hi-solar.svg
C

Flat

Flat vector with the base scene only (house, pole, trees, markers). It's the lightest asset, for small cards and low-power contexts.

1000 × 780 · flat fills · base scene only
Flat style, grid state
Flat · Gridhome-scene-sew-grid.svg
Flat style, solar state
Flat · Solarhome-scene-sew-solar.svg

One asset, many homes: the layer system

Each <g id="layer-…"> imports into Figma as its own layer, and code can hide or show it from account data. The same Rendered · Solar file is shown below with layers switched off.

layer-backdroplayer-groundlayer-shadowslayer-house layer-polelayer-trees-backlayer-trees-front layer-solarlayer-batterylayer-evlayer-heatpumplayer-thermostatlayer-hvac layer-markers
All layers + markerslive view
Markers offclean illustration
Devices offbase house
On dark UI#0D0F13

Earlier direction: front-elevation device variations

Before the isometric set, a front-on illustrated house was rendered once per device configuration (Jul 31 2026). It worked as a storytelling image, but every combination needed its own raster. That pushed the work toward the layered SVG system above.

All devices01
Base house02
No solar03
No EV charger04
No battery05
No water pump06
No thermostat07
No trees08
Solar + battery only10

Why it moved on

9 rasters for 9 configurations, and a new device means re-rendering all of them. The SVG layer set covers every combination from one file.

Photoreal probe

I also tested a photographic version with an editing-capable image model: generate the full scene once, then remove one element per edit so the house, light and camera stay identical.

Photoreal · no solarAI-generated
Photoreal · base houseAI-generated

Prompt kit (excerpt, photoreal-prompts.md)

Master prompt: a modern two-story home with rooftop solar, white EV plugged into a home charger, graphite battery, water pump and smart thermostat, at golden hour. Then one edit at a time: Remove the solar panels from the roof; show a clean empty flat roof with the same parapet and lighting. Verdict: it looks great as a marketing image, but it's hard to keep consistent and can't be driven by layers. The illustrated SVG system won for the product.

About this board

The original "Home Scene Styles" artifact (Aug 31 2026) can no longer be opened. This board was recompiled from the original assets: the six SVGs and the asset-gallery README in Ai Electron/Home Energy Scene/, plus variations/ and photoreal/.
  • The scene images are the original files, unmodified. The three "layer" tiles are copies with a one-line CSS rule that hides named layers.
  • The layout, captions and "why it moved on" narrative are new. The style descriptions are paraphrased from the README.
  • Variation 09 was a byte-identical duplicate of 08 and is omitted. The photoreal images are cropped to remove capture UI.

Palette (from the asset README)

Scene colors reference SEW tokens: primary #0B6EB8, success #16B364, warning #F5A623, neutrals #39465A / #2B3442 / #9AA4B0. Studio uses a desaturated palette for the "slick" look. The energy-flow values (1.0 kW importing, 2.3 kW producing, 1.3 kW exporting) are placeholder data.