Skip to content
R-That Wiki

Design Studio

Source: atrium/frontend/src/components/DesignStudio.jsx Category: Composite component

Design Studio — admin-only panel for theming the app by typing what you want. User describes the change, AI proposes CSS variable updates, a live preview shows the result, user accepts or rejects.

What it is

Section titled “What it is”

A split panel: chat input on the left, live preview on the right. The chat posts to the backend’s design/chat route (see the AI-assisted theming pattern). The response includes CSS variable changes which the frontend applies to the preview via document.documentElement.style.setProperty('--accent', newValue). On accept, the changes are written to the persistent theme.

Why it exists

Section titled “Why it exists”

Users know what they want to feel. They don’t know color theory or CSS token naming. Design Studio bridges the two — they speak intent, the AI speaks CSS.

Live

Section titled “Live”

The demo below is frontend-only — “Propose changes” is mocked to a fixed proposal. In the real Atrium, Claude generates proposals based on the current variable state and the user’s request.

Design Studio
Current variables:
--accent#60a5fa
--bg#0f172a
--surface#1e293b
--border#334155
--text#e2e8f0
--text-muted#94a3b8
Live preview
Sample task
Implement JWT Login
Assigned to Agent-FE · Priority: high

How it’s used

Section titled “How it’s used”
  • Atrium — admin panel → Design Studio tab
  • Pattern generalizes — any app with CSS custom properties and an admin

Gotchas

Section titled “Gotchas”
  • Scoped preview. Don’t apply the proposed CSS to document.documentElement directly — the entire admin UI would restyle mid-preview. Scope to a container with its own custom properties.
  • Accept ≠ ship. “Apply” saves to the persistent theme, which reloads the page for all users. Add an explicit “publish” step if multi-user.
  • Undo is non-optional. The history of theme changes should be stored and reversible; one bad prompt shouldn’t trash the look.
  • Token budget. Don’t send the entire CSS variable dump on every message; send only what’s likely relevant (e.g. color variables when the prompt mentions color).
  • Color-blind preview. The AI will propose combos that look great to it. Automatically check WCAG contrast and surface failures.

See also

Section titled “See also”