# WireframeStudio

> JSON-to-UI wireframe tool with an AI design→implementation loop. Generate a wireframe as
> compact JSON, iterate cheaply with edit prompts, then export a build contract plus design
> tokens for a coding agent. Two callable API endpoints let agents validate wireframes and
> fetch design tokens.

## What it does

WireframeStudio turns a small JSON description of screens and components into a live UI
mockup, collects feedback, and compiles agent-ready prompts: an **edit prompt** (iterate the
JSON) and an **implementation prompt** (a build contract with the wireframe + a DESIGN.md of
design tokens). The goal is to converge the design in cheap JSON and implement it once.

## API

Both endpoints are stateless, need no auth, and send open CORS (`*`).

### POST /api/validate

Validate a wireframe JSON. Returns `{ valid, errors, warnings }`. `200` when valid, `422`
when invalid, `400` for non-JSON bodies. Unknown component types warn rather than fail.

### GET /api/design-tokens?theme={blueprint|slate|minimalist}&format={md|json}

Return the theme's design tokens — `format=md` (default) yields a DESIGN.md
(google-labs-code/design.md format), `format=json` yields the raw token object. Unknown
themes return `400`.

## Notes for agents

- The wireframe JSON schema (screens + component types) is documented in the `wireframe-schema` skill.
- There are no other API paths. Do not attempt auth, search, or listing endpoints — they do not exist.
- `/` is a landing page describing the service; the in-browser tool is at `/app.html`. Everything user-facing runs client-side.

## Skills

Remote Agent Skills published by this domain, per the RFC at
https://github.com/MauricioPerera/llms-txt-skills.

- [wireframe-schema](/skills/wireframe-schema/SKILL.md): author valid WireframeStudio wireframe JSON (screens + components). <!-- skill: {"version":"1.0.0","license":"MIT","sha256":"6f8a60b4c28de3dcb4b0b7bb6f38544ba42dc8259225e0e310dc61d224a39cc8"} -->
- [validate-wireframe](/skills/validate-wireframe/SKILL.md): validate a wireframe JSON via the hosted /api/validate endpoint. <!-- skill: {"version":"1.0.0","license":"MIT","sha256":"adfa65ce1fbd570b5f479c96531530952884b5f532713e53a66f1ecb498ee461"} -->
- [design-tokens](/skills/design-tokens/SKILL.md): fetch theme design tokens as DESIGN.md or JSON via /api/design-tokens. <!-- skill: {"version":"1.0.0","license":"MIT","sha256":"6503fa885aeb736b42394c4a9220e3c6cc91a3883725dc3272f68231e7b32c99"} -->