FREE DESIGN TOOLS
Use my custom design tools for your UX, motion, and 3D projects
Advanced MatCap Generator
Design System Visualizer
Token Difference Viewer
Design System Sniffer
More tools coming soon!
Book a Call
Book a Call
Design System Playground
Storybook-style component isolation and validation.
Built to test states, variants, and interaction patterns
before engineering handoff.
I designed and built these apps as working demonstrations of how UX design can support quality, governance, and adoption in technically complex environments.
MatCaps Generator
Design and export high-quality MatCap textures for 3D materials (metal, glass, paint, plastic, etc.) with live previews and preset lighting.
Quick start
• Pick a preset (e.g., Chrome, Car Paint, Glass) or adjust lights/roughness/IOR.
• Use the preview to fine-tune highlights and shadow falloff.
• Export as 1024–4096 px PNG.
• Optional: upload a backplate/environment to influence reflections.
Tips
• Keep the sphere centered; MatCaps assume a perfectly lit, front-facing normal.
• Save your settings as a preset before exporting multiple sizes.
• Pick a preset (e.g., Chrome, Car Paint, Glass) or adjust lights/roughness/IOR.
• Use the preview to fine-tune highlights and shadow falloff.
• Export as 1024–4096 px PNG.
• Optional: upload a backplate/environment to influence reflections.
Tips
• Keep the sphere centered; MatCaps assume a perfectly lit, front-facing normal.
• Save your settings as a preset before exporting multiple sizes.
Design System Analyzer
Load a tokens JSON to preview your system’s colors, typography, spacings, and component states—instantly.
Quick start
• Paste a tokens JSON URL or upload a .json file.
• Toggle dark/light preview as needed.
• Review color swatches, type scale, and sample controls for quick QA.
Tips
• Use flat or nested token structures—keys are auto-flattened (e.g., color.brand.500).
• Host tokens on the same domain to avoid CORS issues, or use a CORS-enabled endpoint.
• Paste a tokens JSON URL or upload a .json file.
• Toggle dark/light preview as needed.
• Review color swatches, type scale, and sample controls for quick QA.
Tips
• Use flat or nested token structures—keys are auto-flattened (e.g., color.brand.500).
• Host tokens on the same domain to avoid CORS issues, or use a CORS-enabled endpoint.
Token Difference Viewer
Compare two token files (A vs. B) and see adds, deletes, and changes in a sortable table.
Quick start
• Load A and B via URL or file upload (drag & drop supported).
• Click Diff to generate the comparison.
• Export results as JSON for reviews or change logs.
Tips
• Works best with consistent key structures across files.
• Load A and B via URL or file upload (drag & drop supported).
• Click Diff to generate the comparison.
• Export results as JSON for reviews or change logs.
Tips
• Works best with consistent key structures across files.
Design System Visualizer
ANALYZE AND EXTRACT COLORS, TYPOGRAPHY, AND SPACING TOKENS FROM ANY WEBSITE.
Quick start
• Enter a public website URL (e.g. https://apple.com) and click Fetch & Analyze.
• The system scans the site for common design variables such as colors, fonts, spacing, and shadows.
• View the extracted design tokens visually and export them as JSON, CSS variables, or Figma-ready tokens.
Tips
• Works best with sites that use CSS variables or consistent style definitions.
• If a site blocks direct requests, open Advanced → Paste CSS and manually analyze its stylesheet.
• Use the CORS proxy toggle if analyzing sites that restrict cross-origin access.
• For quicker insights, test it on component-level URLs instead of full homepages.
• Enter a public website URL (e.g. https://apple.com) and click Fetch & Analyze.
• The system scans the site for common design variables such as colors, fonts, spacing, and shadows.
• View the extracted design tokens visually and export them as JSON, CSS variables, or Figma-ready tokens.
Tips
• Works best with sites that use CSS variables or consistent style definitions.
• If a site blocks direct requests, open Advanced → Paste CSS and manually analyze its stylesheet.
• Use the CORS proxy toggle if analyzing sites that restrict cross-origin access.
• For quicker insights, test it on component-level URLs instead of full homepages.
MY vision
Creating a design studio with a comfortable
Creating a design studio with a comfortable
ecosystem for both designers and clients, fostering a
ecosystem for both designers and clients, fostering a
sustainable business relationship.
sustainable business relationship.
Creating a design studio with a comfortable ecosystem for both designers and clients, fostering a sustainable business framework.
My mission
Together, we'll harness the power of creativity and insight to drive growth and success for your business.
Through targeted design solutions, I'll help you inspire, engage, and deliver tangible results.
YOur team
I am your design team.
I offer a full range of services to help businesses create, execute, and maintain a successful online presence.
Trent Robertson
Founder | Creative Director | Business Strategist
.png)
Interested in knowing more?
Contact Me
+