How I Built a Design Token Documentation Tool Without Knowing How to Code
Project
When my design system documentation workflow broke due to Figma API changes, I took ownership of the problem and now I am aiming to built a better solution. Instead of waiting for engineering resources or finding another tool that might break, I used AI-assisted development to create a GitHub-integrated design token documentation generator.
Loading tokens from Repo concept
The problem, opportunities, and constraints
A lot of design system teams relied on an Automator script made by Samantha Gordashko that generated living documentation from Figma. When Figma changed their API limits, for most the entire documentation workflow broke overnight, leaving all of us manually updating token values across multiple platforms.
I saw an opportunity to create a solution that could serve other teams facing similar challenges outside of the Figma ecosystem. I have no traditional coding experience, but I recognized that AI-assisted development tools could enable me to build proof-of-concept solutions if approached strategically.
The impact
Product Results:
Built a working web application that automatically generates design token documentation from GitHub repositories
Integrated accessibility checking with WCAG AA/AAA compliance indicators
Created visual token mapping showing semantic-to-primitive relationships
Developed a sustainable community-funded development model
Community Validation:
2,000+ designers engaged with the project announcement
Generated 4x above-average LinkedIn engagement (32 reactions, 9 detailed comments)
Successfully crowdfunded ongoing development through community support
Built a user base providing continuous feedback and feature requests
Business Value:
Eliminated dependency on external APIs that could break workflows
Created a reusable solution for any team using GitHub-based design tokens
Demonstrated a new model for design-led technical product development
Community-Driven Development
Rather than building in isolation and making a lot of assumptions, I used LinkedIn and Bluesky to validate the problem and engage potential users throughout development. This wasn't for marketing—it was product research and validation.
The initial post generated immediate validation: people weren't just saying "cool idea," they were describing specific pain points and requesting features. I had accidentally created a focus group with the same systemic issues. This community became my user validation team, providing:
Feature prioritization based on real workflow needs
Continuous user testing and feedback
Distribution network through organic sharing and recommendations
Technical Execution: AI-Assisted Development
I understand code, to a certain degree, and I can make a website like it is a MySpace profile. So with the power of AI, I utilized Cursor AI and GitHub's Pilot. The way I started out was with smaller, manageable requests and trying maintaining overall architecture.
Key Technical Decisions:
Prioritized GitHub repository integration over single-file uploads based on user feedback
Focused on color token visualization first, as it provided immediate visual validation
Built accessibility checking directly into the core feature set
Maintained platform independence to avoid the API dependency issues that caused the original problem
Resource Management: When I hit usage limits on the free AI tier, I turned it into a community engagement opportunity. By transparently asking for support to upgrade to unlimited usage, I was hoping future users would make contributions, so that it could immediately translate to development progress.
Learning with AI and constantly breaking things!
One of the learning curves, I experienced, with AI is that sometimes when you ask it to add or change a small feature, it decides to rewrite your entire codebase and then struggles to undo all the previous work. Examples where this happened:
Asked it convert from a horizontal to vertical, it removed the entire codebase prior to this request, undoing all the work before.
Asked it to add the text "A quick brown fox" to all the typography tokens, and it would remove all the logic that involved colors and aliases of colors.
Asked it to add repository importing on top of the existing . The feature worked great, but it completely broke the single-file upload that was already working perfectly.
Now I am using free platforms so I get limited attempts. Now if I had unlimited usage makes – these setbacks become minor annoyances instead of project killers. When you're not worried about running out of AI assistance, you can afford to let it mess up and fix it.
Once I realized that this issue caused me to run out of free attempts, I devised a PRD that:
Tells it to preserve the existing code to avoid AI from forgetting the goal when it is making the changes
Attached status to maintain implementation overview
Work in small steps to ensure that one step at a time gets handled via new prompts and constantly having it reference the PRD.
First iteration with GitHub Raw file only.
Problem-Solving Under Constraints
The challenge I ran into with AI tools is that they often "over-help" by rewriting working code when adding new features. With unlimited usage, you can afford to let the AI make mistakes and iterate quickly, but for this proof of concept I was working with free models. I quickly decided to experiment with incremental changes and maintain working versions, treating each AI interaction as a collaborative coding session rather than expecting perfect output.
The next challenge was that I had to start balancing multiple user requests while maintaining product focus. I used community feedback to identify patterns in requested features, focusing on capabilities that solved problems for multiple users rather than individual edge cases. Some examples are:
Implementing WCAG contrast checker
Tracking where a token is applied across the board so that if a change takes place you can clearly see where it will affect this.
Systems overview to under the token flow and the affects across multiple systems (systems thinking)
Implement a table format of the entire product.