WorkCase study
Compile
Principle compiler: turns plain language into verifiable design contracts.
A tool that takes any plain-language design principle and compiles it into tokens, anti-patterns, a review checklist, and a portable verification script. A VAI tool, reviewed here as part of the Sources to Contracts to Tools chain. Live at le-vai.github.io/compile.
Summary
Outcome · ready for review
Compile is the most complete tool in the set. The thesis is focused: compile plain-language principles into verifiable design contracts. The seven-domain engine covers motion, color, typography, spacing, shape, interaction, and acoustic. A local path leak in compiled output was found and fixed 2026-07-13. At review, the only remaining work was hosting, packaging, and publication; it has since been hosted.
Verification evidence
- Tests9 / 99 compiled
- motion
- color
- typography
- spacing
- shape
- interaction
- acoustic
Nine test principles compiled across seven design domains. A security audit found a local path leak in compiled contract output (embedding internal source paths), fixed to reference public designesy.org URLs. Verified clean after fix.
9 of 9 tests compiled. All nine compiled.
Inputs used
Dimension findings
Each dimension in Kit One format: observation, judgment, action.
Purpose
Observation. Compile states a single thesis: a principle can be compiled into tokens, a test, and a checklist, the same way source code compiles into a binary. Nearby tools do other jobs: palette tools give swatches, Lighthouse checks performance, linters check syntax. Compile starts from a plain-language principle and outputs a verifiable contract.
Judgment. Purpose is sharp. The tool demonstrates the Sources to Principles to Contracts to Tools chain end to end.
Action · Keep. The thesis is the moat; do not dilute it with generic design-tool features.
Clarity
Observation. One input. Four output tabs: Contract, Verify, Review, Anti-patterns. A live preview shows compiled tokens applied to a UI skeleton. Exportable as a ZIP (contract.md, verify.js, tokens.css, README.txt).
Judgment. Clarity is strong. The tool does one thing and shows its work. The four-tab structure maps to the contract contents list.
Action · Keep the four-tab structure. Do not add tabs that do not map to contract contents.
Context
Observation. Self-contained single index.html, no framework, no CDN, no backend. Follows the Tile and Continuity deployment pattern exactly. Built and verified locally. Pending hosting on GitHub Pages.
Judgment. Context is ready. The deployment pattern is proven. The only blocker is hosting; no technical barrier remains.
Action · Host it as a static page with its share image.
Inclusion
Observation. Dark default, reduced-motion safe, mobile responsive. System font stack. No required audio or motion. Compilation engine covers seven design domains: motion, color, typography, spacing, shape, interaction, acoustic.
Judgment. Inclusion is structural. The seven-domain coverage makes acoustic and interaction first-class domains.
Action · Keep the seven-domain coverage. The acoustic domain is a Designesy differentiator.
System coherence
Observation. At review, the compilation engine derived tokens from Designesy DESIGN.md v0.2.0; it has used the VAI token system since 2026-08-01. The output contract structure followed the Designesy contract contents list, and the review checklist generated the eight Designesy review dimensions.
Judgment. Coherence is the strongest dimension. The tool is the pipeline made visible: a principle goes in, a contract comes out.
Action · Keep the DESIGN.md derivation explicit. When the contract moves to v0.4.7, update the compilation engine.
Durability
Observation. A full brief documents intent, thesis, feel, what it does, the seven-domain engine and the substitute test. A status log tracks every build item (all built) and what remained at review (share image, hosting).
Judgment. Durable as a built artifact. The documentation is the most complete of any tool in the set.
Action · Host it with its share image. The tool is built; the packaging is what remains.
Delight
Observation. The delight moment is watching a plain-language principle compile into a structured contract with tokens, a verification script, and a review checklist. The live preview showing tokens applied to a UI skeleton makes the abstraction visible.
Judgment. Delight is earned: the tool makes the abstract concrete. Watching a principle become a contract is a genuine aha moment.
Action · Keep the live preview. The preview is the demo: it shows the tool thinking.
Responsibility
Observation. The tool includes a substitute test: four things you might do instead (ChatGPT, Figma tokens, Lighthouse, eslint) and why each fails to substitute. A local path leak in compiled output was found and fixed 2026-07-13.
Judgment. The substitute test names what the tool does not cover. The path leak is documented as a fixed issue.
Action · Keep the substitute test visible. Document the security fix as a resolved issue.