i enjoy thinking, writing, visualizing, and coding. i am a designer, but i don't mind what people call me. i just focus on doing what i love - creating unique brands and products. as part of my work, i have also built some tools. tools tools tools.
these tools don't just help us make things. they also push the whole tech world to try new things and improve how humans make things, in a never-ending cycle of getting better.
tools are fascinating. we shape them, and then they shape us. there’s something meta in them that i’ve been drawn to since childhood: things that create, musical instruments, modular things, legos. design tools are a crucial element in our everyday lives.
these thoughts and experiences led me down the rabbit hole to the history of software development and design tools.
from xerox's desktop publishing to adobe's pdf and photoshop, and figma's pioneering user interface design, design tools have shaped how we create and collaborate. these tools have guided us through an evolution, leading us to this collaborative design era.
even though we have advanced design tools, many are still built for old print media tasks, not for today's digital screens. this mismatch slows down work because it requires extra steps to turn designs into working digital products.
this problem opens a big chance for us to think differently about how we make and use design tools. by solving this, we can make design and development faster and more connected, which helps everyone create better products quickly.
tim berners-lee, who created the world wide web, mentioned that the first web browser was also an editor. however, it was too early, and it couldn't turn it into a design tool. instead, we needed to write code to make it work. now, things have changed. the limitation is gone. today, browsers can easily be used as design tools—if we want to!
here lies a golden opportunity. we can reinvent how we approach design and software development, allowing us to harness the full potential of both disciplines.
ai's capabilities are set to revolutionize the creation process by essentially automating coding tasks. this shift brings design to the forefront while the development role evolves. this freedom from grunt work lets us focus on the bigger picture. we can focus more on design, driving creation that is faster, smarter, and more efficient than ever.
rnbw is a tool designed to make web design and development easier and more effective by integrating design directly with live coding. It is simple enough for anyone, flexible enough for anything, and open enough for anyone to use it anyhow. built with the latest web technologies and ai, rnbw works directly on your local files and doesn’t require complex setups.
being open source, rnbw invites users to contribute to its evolution, making it a community-driven tool. this approach not only enhances the tool's capabilities but also fosters a strong sense of community among its users.
at rnbw, no detail is too small. to truly excel, we need to be significantly better, not just a little bit better. we value every minute detail because they all contribute to creating something exceptional. we dedicate extra time to perfecting things that may only be noticed by a few, but we know that it's the sum of all these tiny details that ultimately make a big difference.
brand story - people think rainbow is just half circle, but the truth is a rainbow is a full circle. surprising, right? when we usually see a rainbow, it's from the ground and our horizon limits our view to just a half-circle or arc. but if you ever get a chance to see a rainbow from an airplane, or from a high mountain, you'll see it's a complete circle. this is due to the raindrops scattering light in every direction, and it's only our perspective on the ground that limits our view.
like a rainbow, the whole world of design and development often goes unseen. we get tangled up in tiny details, forgetting the big picture.
design and development are two sides of the same coin, not separate worlds. but for so long, we've treated them as if they were. here's the big secret - design is the practice of creation, and development is the process of realization, bringing those creations to life.
with rnbw, we're highlighting this hidden truth. we're showing the whole rainbow, not just half. by bringing together design and development, we're making creating for the web easier, more natural, and more effective.
welcome to the age of full-circle creation.
welcome to rnbw.imagine you're launching a company with a groundbreaking app idea that solves a real-world issue. traditionally, the design and development stages are distinct—designers map out the interface, then developers interpret these designs into code. this separation often leads to miscommunication and inefficiencies, impacting user experience and squandering resources.
rnbw doesn't just bridge the gap - it eliminates it by merging design and code into a unified workflow. in rnbw, design is code and code is design. this seamless integration accelerates the development process by allowing changes to be visualized and implemented in real time. the result is a dynamic, collaborative environment where modifications on the design front instantly reflect in the code and vice versa.
this approach not only streamlines production but also enhances collaboration among team members, ensuring that the final product faithfully represents the initial vision without the typical losses in translation.
today's design tools claim to offer a "single source of truth" for a product's design system. however, it raises the question of where the actual truth lies. is it in the designs created using these tools? or does it lie in the code used by developers to build the application? or, perhaps, do the tools that bridge design and code represent a third, separate truth?
most of today's design tools are built on a wrong idea: that design and development live in separate, imaginary worlds. but if design lives in too many different worlds, none of which are the actual code running on people's devices, it can never reach a 'single source of truth.
some people believe that website builders can help solve the problem of building a website, but in reality, they are just tools for building websites and not for designing them. these builders are suitable for creating simple websites, but not for web applications that require a more flexible and advanced user interface to handle their complexity. unfortunately, website builders are not capable of providing such advanced user interfaces.
here we are still struggling with the same old issue, searching for a single source of truth. since no tools effectively support this, it ultimately depends on personal communication.
with rnbw, we no longer need a 'single source of truth.' sounds meh? let me explain. in this world, design doesn't just exist - it thrives right in the heart of production.
no more juggling multiple mediums trying to match design with code. in this world, designers feel right at home in a straightforward design environment. but there's a twist. they're not just sketching pictures – they're shaping the actual thing!
and while they do that, code is being cooked up in the background and blended into the development. magic, isn't it?
what’s the secret sauce? a refreshingly simple design experience that is also a development environment. designers own their designs and have the power to shape the live product.
updates happen in the blink of an eye. no more waiting for developers. design is instant.
product teams no longer need to trade off product quality. they can deliver an exceptional user experience. everyone involved in the product cycle can see, touch, and interact with the product in real-time, visually, and in context.
designers today are changing. they're becoming swiss army knives, masters of many trades, and the market loves it—the demand for these designer-developer hybrids has spiked.
there's a massive low and no code category expected to grow, changing the entire software development space as the barrier to becoming a developer is very low thanks to ai and automation.
industry giants like facebook, google, and airbnb recognize the power of design and design systems. they're hiring top talent and developing internal tools to keep these systems strong and effective.
but what about the others? big enterprise companies are pouring time and money into trying to keep up. picture teams spread across the globe, facing talent shortages, isolated offices, and tricky time zones. enforcing consistent design systems is a challenge.
then there are the small fries - freelancers, code-savvy designers, design-savvy coders, lean startups, and fast-growing young companies. they don't have the resources to focus on design systems. these systems, if they exist at all, are often half-baked, leading to problems down the line.
Here's an expanded and more engaging version of the "The Web is Now Amazing" section, providing more details about each advancement, especially focusing on the widespread adoption of web components:
the web continues to evolve rapidly, driven by significant advancements in web standards and technologies. here’s a closer look at some of the most impactful updates, enabling something like rnbw.
"what's the secret sauce?" - it’s design-as-code. it's a unique design approach that's built into a design tool, powered by code from the ground up, which uses a two-way design-code engine. this approach eliminates the need for handoff and traditional design platforms. with a perfect blend of simplicity, flexibility, and openness, it’s a game-changing solution for design professionals.
fast, zero latency, two-way design<>code synchronization. this means that you can make changes on one side and see the result immediately on the other side without any delay or interruption. speed is crucial in this process, whether you are loading a page, adding or modifying elements, or making an api call. our goal is to boost performance and reduce response times, always striving to enhance speed and prioritize user convenience over our ease of development.
our goal is to make it easy and fun for designers and anyone to use our product, so we keep the barrier to entry low.
create whatever is possible with code. the ceiling is endless.
here is a comparison list of various tools, each of which is given specific focus.
Who
For
Simple
●
Flexible
● ●
Open
● ● ●
rnbw 🌈
Developers
Designers
People
Code
AI
Design
Text
●
● ●
● ● ●
VSCode
Developers
Code
Git
Extensions
○
● ●
● ● ●
Figma
Designers
People
Text
Vector
Design
●
○ ○
○ ○ ○
Webflow
Designers
People
Design
○
○ ○
○ ○ ○
Notion
People
Text
Extensions
AI
●
○ ○
● ● ●
a company needs to keep the same design across many web apps. with rnbw, designers make web components in the tool, setting styles, behaviors, and interactions. these components turn into live code right away, which developers can use without having to change or rewrite them. a big company has a complex design system that often needs updates. rnbw helps by letting designers edit and design directly in the system, where changes turn into code and get documented right away.
think about a fast startup where designers and developers need to work together. by embracing files as the source of truth, rnbw enables both designers and developers to see and change the same things.
a design team needs to make a complex user interface that changes based on how users behave. using rnbw's ai features, designers can put in user scenarios, and the system will suggest and make design changes on its own.
integrating rnbw into your workflow is straightforward, and here's how you can begin:
to ensure a smooth integration and optimal performance of rnbw, please make sure you meet the following technical requirements:
if you have any technical issues or need support, our dedicated team and community are always ready to assist you.
being part of the rnbw community opens up a wealth of knowledge and collaborative opportunities. you can get involved by:
your input is invaluable to us as we continuously improve rnbw. participate in ongoing discussions about the future of web design and development by:
we encourage you to download rnbw, connect with our vibrant community, and start shaping the future of the web today! your journey with rnbw is just beginning, and we can't wait to see what you'll create.