Design Tools
Interactive tools that put design-agent findings to work. Each tool is built from real design research — run your own site through our audit, generate accessible systems, and more.
Design Audit Tool
Enter any URL and get an automated design audit — content width, fonts, accent colors, mobile nav, SVG icons, hero density, and more. Each check links back to the research that produced it.
In Development
Tools we're building, based on design patterns discovered through agent-driven research. Each will run entirely in the browser with no backend required.
Color Blindness Simulator
Upload an image, apply deuteranopia/protanopia/tritanopia CSS filters side-by-side, see WCAG AA/AAA impact.
Accessibility Audit Dashboard
Enter a URL for a WCAG 2.1 audit: contrast ratios, ARIA usage, alt text detection, heading hierarchy.
Brand Color Directory
Search 600+ brand color codes (HEX/RGB/HSL). Filter by brand, export to CSS variables or Tailwind config.
Accessible Palette Builder
Generate WCAG-compliant color palettes from a base color. Test against AA/AAA on real UI previews.
Color Gradient Studio
Multi-stop gradient builder with angle controls and live UI preview. Export as CSS gradient code.
Font Pairing Explorer
Preview Google Font pairings on real UI components. Export CSS @import with type scale and line-height.
Typography Scale Generator
Generate modular typography scales from a base size and ratio. Preview as HTML headings. Export as CSS clamp().
Font Feature Analyzer
Upload a .woff/.ttf font, extract OpenType features, character map, and language support. Gets CSS font-feature-settings.
SVG Blob Generator
Drag control points to generate organic SVG shapes. Adjust complexity, contrast, and fill. Copy or download.
SVG Squircle Generator
Generate smooth rounded rectangles between square and circle. Per-corner radius control. Copy SVG code.
Device Mockup Generator
Upload a screenshot, place in device frames (MacBook, iPhone, iPad). Customize background and shadow. Download PNG.
SVG Icon Customizer
Browse 2000+ open-source SVG icons. Customize stroke, color, size, corner radius. Export as SVG or JSX.
Logo Tester Lab
Upload a logo SVG/PNG. Test color blindness simulation, minimum size, contrast, and favicon scalability.
Design Token Converter
Convert CSS custom properties → SCSS variables → JSON (Style Dictionary) → Tailwind config. Works both directions.
Design Token Style Guide Builder
Paste tokens JSON → auto-generate visual cards with WCAG contrast checks and typography scale view.
v0.dev
Design-to-Code / AI Generator
Problem SolvedCollapses design-to-development handoff into one step — describe a component in natural language and get production React/Tailwind code.
What We LearnAI design tools need hard constraints (framework, library, styling system) to produce useful output. Open-ended generation is too broad.
PriceFree tier (limited generations), Pro $20/mo, Team custom.
Buildable?The hardest ML problem in this class — requires vision model + structured code output. Viable at small scope with LLM + constrained output types.
Target AudienceDesigners shipping without developers, developers prototyping UI, solo founders.
MessageDesign is becoming conversational and code-native — the shortest path from intent to UI may bypass visual tools entirely.
Penpot
Design & Prototyping / Open Source
Problem SolvedOpen-source Figma alternative — full design tool functionality without vendor lock-in or per-seat costs. SVG-native files are machine-readable by default.
What We LearnDesign tools should produce standard formats (SVG), not proprietary abstractions. Open formats make design data accessible to AI agents without vendor-specific APIs.
PriceFree and open source. Self-host or cloud. No paid tiers — enterprise support contracts fund development.
Buildable?Already open source (MPL 2.0). Core is ClojureScript SVG rendering engine. The SVG-native data model is the architecture pattern to replicate for agent-readable design files.
Target AudienceDesign teams who care about data ownership, open-source advocates, educational institutions, anyone building design tooling.
MessageDesign infrastructure is becoming a public good. Open means agent-ready — SVG-native designs are parseable by any tool, any platform, any agent.
Tools are built from findings in the design research blog. See the roadmap → for upcoming tools and the comparison charts → for design tool benchmarks.