The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
I built Runrate's design guide in HTML by describing it to Codex in natural language instead of starting in Figma.
It still covers what I would normally organize in a Figma library:
- semantic color tokens and themes
- typography, spacing, shape, elevation, icons, and motion
- accessibility and responsive behavior
- reusable components with states, usage guidance, anti-patterns, and live examples
- product patterns for the ledger, accounts, forms, navigation, and risk or recovery states
- guidance for translating the same intent between Web and iOS
The difference is that these are not static frames.
The tokens are implementation contracts. The components can be used in the browser. The patterns include real constraints, interaction behavior, and accessibility. Production Web remains the source of truth.
Then I point the project's AGENTS.md file at the guide.
The instruction is essentially this:
Before creating or changing a customer-facing Runrate surface, consult the design guide. Use Foundations for tokens, hierarchy, and voice. Use Components for behavior and states. Use Patterns for composition. Reuse the existing system before extending it.
That applies to new product features, email templates, marketing creative, and anything else that should match the guide.
So the design system is not only a library.... it becomes part of the context used to generate the work.
What do you think about this? And are you making your design system readable by agents? Curious what other people are doing.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Trending
Claude
Claude has entered the design space. How are you using it?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
Brand Design
The best brand designers are on Contra. Scroll to see what's trending in brand design. What are you building?
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?
Related posts
Most businesses don't need more employees. They need better AI systems.
Every week, I see businesses spending hours on repetitive tasks that could be automated.
Imagine if your business could
Save 20+ hours every week
Automate repetitive workflows
Launch AI-powered web applications
Build custom AI agents
Scale without increasing operational costs
That's exactly what I build.
I help startups and businesses transform ideas into scalable AI products using modern technologies like Claude Code, Cursor, Bolt.new, Lovable, Supabase, Next.js, and intelligent automation.
Whether you're building an MVP or replacing manual processes with AI, the goal is simple:
Save time. Increase efficiency. Scale faster.
If you're building something ambitious, I'd love to help.
Well said. AI delivers the most value when it removes repetitive work and frees people to focus on higher-impact tasks, not just by automating processes, but by improving how the business operates overall.
A great app isn't just beautiful. It solves a real business problem.
Many mobile apps fail because they focus on features instead of user experience.
I build mobile applications that are designed to
Increase customer engagement
Improve business operations
Deliver fast performance
Scale as your business grows
From AI powered apps to business management platforms and customer portals, every project is built with performance, usability, and long term growth in mind.
My development process focuses on
Clean architecture
Modern UI/UX
Cross-platform compatibility
AI integration
Scalable backend systems
Technology should make your business easier not more complicated.
Let's build products people actually enjoy using.
🔥 🔥
I'm excited to share my submission for the Contra × Squarespace – Make It Real Challenge.
For this project, I created The Void, a concept website for an AI-powered game art studio focused on remastering characters, environments, and worlds for modern hardware.
My goal wasn't just to create something visually impressive. It was to prove what's possible when every design decision has a purpose.
The entire website was built 100% inside Squarespace using its native tools and the new Finish Layer features, without a single line of custom CSS or JavaScript.
Throughout the site, I leaned heavily into:
•Responsive Stacks for complex layouts
•Block Transforms to create layered, asymmetrical compositions
•Scroll, hover, cursor-follow, and appear animations to guide the user through the experience
•Purposeful motion that enhances storytelling instead of distracting from it
One philosophy drove every decision:
Wow with intent.
Every animation, transition, and interaction exists to support the content, strengthen the brand, and improve the user experience, not simply because it looks cool.
I'm incredibly proud of what can be accomplished using Squarespace's native design tools alone, and I hope this project inspires other designers to explore just how powerful the platform has become.
A huge thank you to Squarespace, Contra, and everyone who helped make this challenge possible.
🌐 Live Website:
https://thevoidstudioai.com
📹 Full Video Breaking Down How I build the site.
https://www.loom.com/share/11d0a6456ea8430680d43d33bc84bfe2
Low-Code/No-Code DevelopmentSquarespace DevelopmentWebstudio DevelopmentChatGPTMidjourneySquarespacesquarespacechallenge
