Most developer tools require a commitment before they deliver value: install this, configure that, create an account, enter a credit card. Developer Labs takes the opposite approach. Three browser-based tools, completely free, no signup required to use them. If you want to save your work, create an account. Otherwise, just open the tool and start working.
This article covers what each tool does, why we built it, and where it fits into a real development workflow.
Brand Token Studio
Design tokens are the atomic building blocks of any design system: colors, typography scales, spacing values, border radii, shadows. Defining them well takes time and attention. Implementing them consistently across a codebase takes discipline. Brand Token Studio handles both.
The tool lets you define your design tokens visually—pick colors, set typography scales, configure spacing and shadow values—and then export them in the format your project needs: CSS custom properties, JSON, or Tailwind configuration. Everything updates in real time as you adjust values, so you see exactly what your system looks like before committing to it.
Handoff to UI Kit Generator
Brand Token Studio integrates directly with the Wigley Studios UI Kit Generator. Define your tokens, export them, and feed them into a full kit generation—ensuring that every component in your kit uses your exact design language from the start. No manual token alignment after the fact.
What You Can Define
- Color palettes: Primary, secondary, accent, neutral, and semantic colors (success, warning, error, info). Each with configurable shades and contrast-checked accessibility ratings.
- Typography: Font families, size scales, weight mappings, and line height configurations. Preview text at every size to verify readability before export.
- Spacing: Base unit and scale multiplier for consistent spacing throughout your interface. Supports 4px, 8px, or custom base units.
- Shadows and borders: Elevation levels, border radius tokens, and shadow definitions that maintain visual consistency across components.
Who Benefits Most
Teams starting a new project who need a design system foundation. Freelancers who want consistent tokens across client projects without rebuilding from scratch each time. Designers handing off to developers who need tokens in code-ready format rather than Figma annotations.
API Contract Lab
API documentation is only useful if you can interact with it. API Contract Lab takes OpenAPI specs, JSON schemas, or raw JSON payloads and turns them into something you can actually work with: parsed endpoints, generated mock responses, code snippets in multiple languages, and exportable Postman Collections.
Core Capabilities
- Spec parsing: Paste an OpenAPI/Swagger spec or JSON structure and get an interactive breakdown of every endpoint, parameter, and response shape.
- Mock response generation: Generate realistic mock responses from any schema. Useful for frontend development when the backend isn't ready, or for testing edge cases without hitting a live API.
- Code snippets: Get ready-to-use code for every endpoint in fetch, curl, Python requests, and React Query. Copy, paste, adjust. No hand-writing boilerplate.
- Postman export: Export the entire parsed API as a Postman Collection with pre-configured requests, headers, and example bodies. Saves the tedious manual setup that API testing usually requires.
Time Saved
Setting up a Postman Collection manually for a 20-endpoint API takes 30–60 minutes of copy-paste work. API Contract Lab generates it in seconds from an existing spec. The code snippets alone save 5–10 minutes per endpoint versus writing them from scratch.
Practical Use Cases
Frontend developers who need to build against an API that's still in development. QA engineers who want realistic mock data for test scenarios. Backend developers who want to validate that their spec accurately describes their implementation. Technical writers who need to verify that documentation matches reality.
Mock Data Lab
Realistic test data is one of those things every developer needs and no one wants to create by hand. Mock Data Lab generates structured, realistic data from JSON Schema definitions, TypeScript interfaces, or sample JSON objects. You describe the shape; the tool fills in the content.
How It Works
Paste a schema, interface, or sample JSON. The tool analyzes the structure and generates any number of records that match it. The generated data isn't random noise—it uses contextual generation that produces realistic names, addresses, dates, emails, and other common data types based on field names and types.
| Input Format | Output Formats | Best For |
|---|---|---|
| JSON Schema | JSON, CSV, SQL INSERT | Backend developers with existing schemas |
| TypeScript interface | JSON, CSV, SQL INSERT | Frontend developers working with typed APIs |
| Sample JSON | JSON, CSV, SQL INSERT | Quick generation from an example response |
Export Flexibility
Generated data exports in three formats. JSON for frontend development and API mocking. CSV for spreadsheet analysis, database imports, or sharing with non-technical stakeholders. SQL INSERT statements for directly seeding a development database. Each format is generated from the same data set, so switching between them is instant.
Why Realistic Data Matters
Testing with "test1", "test2", "asdf" values catches syntax errors but misses real-world problems: text overflow on long names, date formatting edge cases, special characters in addresses, and UI layout breaks when data doesn't match the assumed length. Realistic mock data surfaces these issues before your users do.
The Free Model
All three tools are free to use without an account. Creating a Wigley Studios account (also free) unlocks the ability to save projects to the cloud so you can return to them later. There are no usage limits, no feature gates, and no trial periods.
The reasoning is straightforward: Developer Labs exists to bring developers into the Wigley Studios ecosystem. If the tools are genuinely useful, some percentage of users will explore the paid products—PromptUI, UI Kit Generator, UI Kit Packs—on their own. The tools sell themselves by being good, not by being restricted.
Technical Implementation
All three tools run entirely in the browser. Your data never leaves your machine unless you explicitly save a project to the cloud. This is a deliberate architectural choice: developer tooling that processes code, schemas, and design tokens should not require sending that data to a third-party server. Client-side processing means faster response times, offline capability, and zero data privacy concerns.
Saved projects are stored on the Wigley Studios API and associated with your account. Projects support versioning, so you can iterate without losing previous states.
Try Developer Labs
Three tools. Zero friction. Open your browser and start building.
Open Developer Labs