Create project
/Style screencreative mode
…

Style screen

Paste your UI, hit Style my screen, and watch it come alive.

Code your screen

Markup drives Skin Layout parsing. CSS is scoped to this preview; JS is disabled until a sandbox is wired.

Quick start

Core

Gameplay

RPG

Shop / Economy

Social / Meta

System

Describe a screen

Choose an active project to generate styles.

Preview size

Canvas, DOM frame, generated layouts, and Compose handoff use 390×844.

Live preview

Your screen appears here while you work.

Preview using:Generated CSSYour CSSKit CSSSandboxed JS

Adventure awaits

Nightfall Arena

Choose your loadout, rally the party, and jump into the next run.

▸ Advanced / Debug

Saved sessions (local)

Legacy workspace snapshots: tagged layout, skeleton, code-screen CSS/JS, UI split and preview tab, kit run id, genre, and strict mode. Prefer Your screens in the main editor for styled results.

Select an active project in the app shell to save or load sessions.

Session name
  • Tagged element with id "eyebrow" has neither data-sf-slot nor a valid data-sf-role.
  • Tagged element with id "actions" has neither data-sf-slot nor a valid data-sf-role.
  • Role 'primary-button' normalized to 'button_primary'.
  • Inferred semanticRole 'header' for id "title" (h1, text hint).
  • Inferred semanticRole 'field' for id "subtitle" (p, text hint).
▸ Active skeleton JSON
{
  "version": 1,
  "nodes": [
    {
      "id": "screen",
      "bounds": {
        "x": 24,
        "y": 24,
        "w": 360,
        "h": 72
      },
      "slotId": "main-window-panel",
      "semanticRole": "panel"
    },
    {
      "id": "eyebrow",
      "bounds": {
        "x": 24,
        "y": 120,
        "w": 360,
        "h": 72
      }
    },
    {
      "id": "title",
      "bounds": {
        "x": 24,
        "y": 216,
        "w": 360,
        "h": 72
      },
      "semanticRole": "header"
    },
    {
      "id": "subtitle",
      "bounds": {
        "x": 24,
        "y": 312,
        "w": 360,
        "h": 72
      },
      "semanticRole": "field"
    },
    {
      "id": "actions",
      "bounds": {
        "x": 24,
        "y": 408,
        "w": 360,
        "h": 72
      }
    },
    {
      "id": "play",
      "bounds": {
        "x": 24,
        "y": 504,
        "w": 360,
        "h": 72
      },
      "slotId": "primary-button",
      "semanticRole": "button_primary"
    },
    {
      "id": "settings",
      "bounds": {
        "x": 24,
        "y": 600,
        "w": 360,
        "h": 72
      },
      "semanticRole": "tab"
    }
  ]
}

Kit compatibility

Before Apply kit: build skeleton first. Genre rpg, run -.

7
Tagged nodes
2
With data-sf-slot
3
Semantic only
0
Unknown slots
0
Invalid states
2
Known recipe slots

Enter a kit run id to estimate how many tagged slots already have images in that run.

Map kit to layout

Kit run id
Pick a row below or paste an id: must match kit-tagged images in this project.
Genre
Recipe used for slot validation and generation.
Strict mode
Fallback handoff: flattened image

Debug-only path for quick references. It captures the Skin canvas as one PNG layer; use editable layers for production polish.

Choose an active project in the top bar to see kits from your library here.

Project: (none)Kit assets in run: 0Skeleton nodes: 7

Index probe: -