Skip to content
@aestheticfunction

Aesthetic Function

Open-source tools for keeping design systems in sync across code, design, and documentation, and for making them queryable by AI agents.

Aesthetic Function Banner

Aesthetic Function

AI can generate UI. AF keeps it aligned.

Aesthetic Function is an independent design engineering lab building open tools that help AI-generated interfaces stay correct, accessible, and aligned with their design systems. Every significant claim is backed by inspectable evidence.

Design systems break silently. Tokens drift between Figma and code. Components fall out of sync across frameworks. Documentation lags behind both. And now agents generate UI against a rendering standard with no correctness standard: a catalog says what can render, but nothing says what your design system considers correct.

A2UI defines what can render. dspack defines what is correct.

One design-system contract, enforced at two moments. At generation time, the open governance tools check what an agent builds before it renders. Over time, the reconciliation engine keeps code, design, and documentation aligned with the same contract. Three layers stay distinct throughout: the schema answers "can this object exist?", the linter answers "is this object correct?", the renderer answers "can this render?"

Projects

Six ecosystem repositories plus the open-core engine. All under Apache 2.0.

dspack-studio is the flagship, and it ships two surfaces.

Composer (composer.aesthetic-function.com) is the product: describe what you want in plain language, and it builds the interface from your design system's approved components only, infers the governed context, checks every attempt against the system's own rules, repairs what it can, and renders the result — natively where a renderer exists, as a labeled wireframe stand-in where one doesn't. Projects are yours to keep: create one on a packaged reference design system (shadcn/ui or Astryx) or connect your own repository, accept what you build into the project, export it as a portable file, and reopen it later. The AI that proposes is your choice — managed Claude through the AF AI Gateway with no key in your browser, or your own local models (Ollama, or any OpenAI-compatible server such as LM Studio, llama.cpp, vLLM, LocalAI) reached through a local agent that owns the endpoint and any credential. The hosted app runs the pipeline: the deterministic gates, emission, and rendering all execute in your browser; only the model turn leaves it.

The Studio (studio.aesthetic-function.com) is the replay exhibit alongside it: recorded real runs you can scrub, fork, and X-ray, session import, interactive human-in-the-loop scenarios, and a Break-it Mode that replays labeled recorded catches. It needs no keys and no agent; live generation there is bring-your-own-machine.

dspack is an open contract for design systems: schemas, typed governance rules, intents, categories, and examples that define not just what exists but what correct means, in one portable artifact that AI agents can query. Think of it as OpenAPI for design systems.

dspack-export generates a spec-valid dspack snapshot from a component codebase, file-based and offline, with framework-aware extraction that today supports React + Tailwind/shadcn and Vue 3 + Vuetify 3: it answers what your design system looks like right now. Snapshot only: rules, intents, and examples are hand-authored downstream, not extracted. Experimental.

dspack-gen is the generation and governance pipeline for dspack contracts: it compiles the contract into generation context, generates surfaces with schema-constrained models, lints them deterministically, applies bounded repair, and produces a versioned audit report for every run. Home of the published findings.

dspack-emit is a deterministic emitter that compiles governed dspack surfaces to rendering protocols, A2UI (0.9.1 and 1.0) and json-render today, each behind its own validation gates. Formerly dspack-to-a2ui.

ds-mcp is a read-only MCP server that loads a dspack file and exposes your design system as tools AI coding agents can query at coding time, including generation context and surface validation. No network, no shell, no writes. A generate_ui tool is deliberately absent: the MCP host is already the model.

aesthetic-function is the open-core reconciliation engine beneath a commercial product. It detects drift between what your Figma file says, what your code implements, and what your documentation claims, then tells you exactly where they disagree.

How they fit together

dspack-export generates the dspack file from your code. You commit it. ds-mcp serves it to your agents. Aesthetic Function reads the committed file as a reference contract and continuously checks every surface against it. AF does not write dspack files: when code drifts from the contract, that same drift is your signal to regenerate the snapshot with dspack-export.

At generation time the same contract governs what agents build: dspack-gen compiles it into generation context, lints what a model produces against its typed rules, applies bounded repair, and audits every run; dspack-emit projects the governed surface to a rendering protocol; ds-mcp serves the context and validation to any agent that wants to run the loop itself. dspack-studio runs that whole chain end to end, live against a local model or replayed from recordings, and makes every gate and repair inspectable.

You can use each independently. dspack files are just JSON, so they stand alone. The open tools work without us, forever, under Apache 2.0. AF is what happens when you want the loop run continuously and safely.

Milestones

  • M1, complete. The governed-generation vertical slice: one intent, typed rules, bounded repair, deterministic A2UI emission, an audit report for every run.
  • M2, complete. A second emitter target (json-render), the evaluation harness, the ds-mcp generation tools, and the rename to dspack-emit. The original two-local-family M2 run ended with zero end-to-end passes and one dominant failure signature: the projection gap.
  • M3, complete. dspack v0.4 (the required-props rule type, with component categories in the same revision) and its measured amendment made that failure signature extinct; end-to-end passes rose from 28/216 to 67/216 across three local model families. A second contract, a nine-component slice of Meta's Astryx run through json-render only, proved the rule system generalizes: zero emitter-gate failures in 216 runs.
  • Studio launch, July 12, 2026. dspack-studio shipped: the full generation-time chain running end to end behind a scrubbable recorder, six recorded real runs, Break-it Mode with seven curated failure conditions, hosted replay at studio.aesthetic-function.com.
  • Composer, August 2026. The generation-time chain became a product: goal-first authoring with inferred governed context, hosted and local AI providers behind one governed pipeline, first-class projects with portable export/import, and honest partial-renderer coverage. Live at composer.aesthetic-function.com.
  • Next. Trigger-gated on A2UI v1.0 leaving Candidate status. Deferred and not implemented today: A2UI v1.0 adoption, an MCP Apps emitter, a heuristic governance tier, a generic structural selector language, and rule scaffolding in dspack-export.

Every number above traces to a retained audit report: the M3 report, the findings, and the studio audit. Pass rates are quoted k/n.

Status

In active development. Contributions and feedback welcome: open an issue in the relevant repository, or propose a specification change in dspack.

The reference implementation

aesthetic-function.com is built from its own dspack contract and checks itself with the same tools listed above. Its reference section publishes the contract, the governed surfaces, the validation receipts, three recorded generation runs, and the evidence graph connecting them:

License

Apache 2.0

Pinned Loading

  1. dspack dspack Public

    An open contract for design systems: schemas, typed governance rules, intents, categories, and examples that define what correct UI means. v0.4 draft. Think of it as OpenAPI for design systems.

    JavaScript 3

  2. ds-mcp ds-mcp Public

    Read-only MCP server for dspack: design-system queries, generation context, and surface validation for AI coding agents. No network, no shell, no writes.

    TypeScript 1 1

  3. dspack-export dspack-export Public

    Extracts an observable dspack snapshot from a component codebase (v0.2 snapshot shape). React + Tailwind/shadcn and Vue 3 + Vuetify 3, plus DTCG token import. Snapshot only: no rule authoring, no d…

    TypeScript

  4. dspack-emit dspack-emit Public

    Deterministic emitter for dspack surfaces. Targets: A2UI (0.9.1 and 1.0) and json-render, each behind its own validation gates. Formerly dspack-to-a2ui.

    TypeScript

  5. dspack-gen dspack-gen Public

    Generation and governance pipeline for dspack contracts: prompt compiler, model adapters, S1/S2/S3 governance gates, bounded repair loop, audit reports, and the evaluation harness behind the publis…

    TypeScript

  6. dspack-studio dspack-studio Public

    The flagship experience for the open AI-native frontend ecosystem: an AI agent builds interfaces under a design-system contract, streamed over AG-UI as A2UI surfaces, rendered with Astryx. Every ga…

    TypeScript

Repositories

Showing 8 of 8 repositories

People

This organization has no public members. You must be a member to see who’s a part of this organization.

Top languages

Loading…

Most used topics

Loading…