FrameLab

FrameLab is a design-first language where design systems become executable and compile into production UI.

FrameLab is an experimental design language exploring executable design systems and UI architecture.

Created by Daniel Hairston.

Design intent -> FrameLab -> Production UI

Instead of handing off static screens, designers define interface structure, layout primitives, states, motion, and interaction intent using a declarative language.

FrameLab compiles those definitions into production UI components.

Why FrameLab Exists

Today product teams work across two disconnected layers:

Design tools define visual systems.
Engineering frameworks implement UI architecture.

This creates a gap between design intent and shipped code.

Designers produce artifacts.
Engineers reinterpret them into code.

FrameLab explores a different model.

Design systems should be executable.

Instead of handing off screens, designers define interface architecture in a language that compiles into UI.

What FrameLab Enables

FrameLab introduces a new layer between design and engineering.

Design
↓
FrameLab (design architecture)
↓
Production UI

Designers define:

• layout primitives
• component structure
• interaction states
• motion rules
• design tokens
• UI constraints

FrameLab then compiles those rules into real UI components.

Example Concept

A FrameLab component might describe interface structure like this:

surface
stack
slot
state hover
motion shift
intent trigger

These declarations define UI architecture that compiles into framework components.

What This Repository Contains

This repository contains a marketing site and prototype demo for FrameLab.

Included in this project:

• A Vite + React + TypeScript demo site explaining the FrameLab concept
• A local FrameLab dogfood flow that generates demo components from .fl source
• A lightweight reactive runtime prototype
• A demonstration of design-first UI architecture

Tech Stack

• React
• TypeScript
• Vite
• ESLint

Getting Started

Install dependencies

npm install

Start the development server

npm run dev

Build for production

npm run build

Regenerate only the FrameLab-driven demo components

npm run framelab:build

Deployment note

• Local dogfooding expects a sibling ../framelab-compiler checkout and regenerates src/generated
• CI/deploy environments without that sibling repo use the committed src/generated artifacts as-is
• If generated output changes, rerun npm run framelab:build locally and commit the refreshed files

Preview the production build

npm run preview

Project Structure

src/App.tsx
Main landing page and concept explanation

src/framelab/demo.fl
FrameLab source used to generate the demo components

src/generated/
Compiler output consumed by the demo app

src/runtime/signals.ts
Minimal reactive runtime primitives

src/App.css
Page styling

docs/framelab-dogfood-notes.md
Dogfooding workflow notes and current limitations

Creator

FrameLab was created by Daniel (GitHub: FVDEDFOREVR).

FrameLab explores a new approach to design systems where interface architecture can be defined declaratively and compiled into production UI.

This repository represents the early prototype and research exploration of executable design systems.

Project Origin

FrameLab began as an exploration of how design systems could move beyond documentation and become executable.

Today designers create visual systems while engineers recreate those systems in code.

FrameLab proposes a different approach:

Design systems themselves should be executable.

Instead of handing off static screens, designers define interface structure, layout rules, and behavior as a language that compiles into production UI.

Vision

FrameLab explores a future where design systems are the source of truth for interface architecture.

In this model:

Design intent -> FrameLab -> Production UI

AI systems could generate FrameLab components, while designers maintain control of the system architecture.

License

FrameLab is open source under the Apache License 2.0.

See the LICENSE file for details.