Hi HN, I’m Koji, software engineer and co-founder of Veryfront, where we offer tools to streamline web app development. Happy to share insights or answer questions about design, development, or anything related to building apps. AMA!
Hi Koji, this looks like a fantastic tool! I think it will pair nicely with Locofy (https://locofy.ai) for handoff from design to AI-generated code to really simplify the frontend process!
I’ll be sharing this with my design team!
Veryfront is amazing. I've known Koji for several years and he and his team have built a lot of great tech that now covers everything from rapid design iteration, to developing with their web IDE, with a live preview (it actually continually builds your website). and deploying using their cloud hosting solution.
The technology stack is very flexible. You can add your own components, libraries, styling solutions, backends, etc. And there is also an export option if you want to leave their platform that gives you everything in code form.
The big benefit of veryfront is that you can get started and have a webapp live in no time at all. You don't need anyone working on devops because they do it for you. You don't need to setup a lot of tools because it all runs in the browser. You don't need to figure out how to set up these tools either because they do it for you. You just code your webapp.
Material Design is awesome. What I like about Veryfront components is that it includes also section components which are larger building blocks and integrates nicely with Veryfront Studio for seamless dev handoff, which then allows to go from build to deployment quick and easily.
I'm going to be very naive here as this isn't my space at all. Are these open sourced? If not these, are there react components I can grab for basic front end projects that won't run afoul of licensing?
Wasn't me, but… you didn't actually answer the question. @tomrod asked if *these components* were open-sourced, and your response was that *Figma* is not. It didn't answer the question that was posed. The information provided isn't actually all that useful. Can Penpot even use the components in question?
While it wasn't specifically what I asked, I did appreciate the additional information. As an old man, I often ramble and find myself listening to rambling in return. Sometimes useful, and sometimes just the sweet symphony of shared space.
I counted Figma as one of the components. And I find that people talking about Figma-like tools are interested in Penpot, and thought the authors of the product featured here should be aware of it as well.
Yeah absolutely. There is a plugin for importing. Some small things like fonts and such might break sometimes but it has otherwise worked for 80%+ of everything i've downloaded off ui8
Somewhat tangential but I've found Claude 3.5 to be ridiculously good at doing this kind of prototyping with React, and you get the preview immediately in the artifact pane to the right of the chat. Mind you I don't ever use React (I'm writing a desktop app in Rust), so I'm probably as unbiased an audience as it gets.
Here are a couple of examples of things people asked for help with and I just iterated with Claude for 5-10 minutes on (code upfront and gif demo at the bottom):
I think given the sheer amount of training data on React, these models tend to really hit it out of the park when they are allowed to use it. Part of me thinks the best approach is to have it model in React first and then translate it to whatever other language/framework you need it in
Definitely, AI for coding makes sense. In the Veryfront Studio, you get a similar experience with live previews and AI coding capabilities, with the added benefit of being able to instantly deploy or export your code.
There was no training on existing apps. We launched the feature in May and we didn't start training on data until a couple months ago. We used off-the-shelf GPT4o for the feature with no fine tuning. How it works is we feed in a design system with premade components, and the LLM decides how those premade components are arranged, then populates them with data and chooses how to theme them. The issue was the underlying design system we contracted to have made had components that too closely matched other screens.
Ah, so that’s the technicality. Contractors built components based on existing apps and Figma used that for training. It’s one step removed, but, like, it didn’t not happen.
Recently needed to develop a React Web solution for hackathon. I had 0 previous experience with web, but was able to create a good looking (but with 0 logic) website, using Vercels V0[0]. It did great both working from text suggestions and from figma screenshots.
It also was great at implementing changes after initial generation.
Not an add btw, haha
No need to do it in Figma. Soon your OS will be able to do it, and it will be able to use all apps on your system to create a design, not just one app.
I am about to draft a UI and user flow for an internal tool (an LLM based RAG). I was thinking about using Vercel/V0. Is this an option? What else can I use? Is Figma a must have in my tool belt?
I made a quick wireframe in Figma, but didn’t bother to pixel-perfect it. I mostly design in the browser, but taking a few minutes in figma up-front to get the shape of it saves time in the long run.
If I’m designing for stakeholders or dev teams I’ll still absolutely produce full prototypes and designs otherwise bad things happen. Figma is the current market leader, but you could use anything that you can communicate your intent well enough with, from the back of an envelope to a competitor like Penpot or Sketch. Just don’t use Photoshop.
V0 is interesting, but the results can be inconsistent. For my site I just copied and pasted the shadcn components I wanted and tweaked the styling to fit. Not sure V0 would be faster, though it might be useful for generating ideas. Depends on how much control you want over the final layout.
Great work on the website! Figma is definitely the way to go. Having everything spec’d out beforehand makes implementation and iteration so much easier and faster.
Start prototyping the user journey in Figma to map out the flow. For frontend, use Next.js or Vite/Vike, which we use at Veryfront for its lightweight and performance. Simple API calls (e.g., OpenAI) can use a server function, but for RAG, I’d recommend a Python backend service.
hi, yes we offer different tools to streamline the web development process, such as:
- Veryfront Studio, an online coding platform with live previews, instant deployment, and code exports.
- Veryfront Components: Ready-made UI components for fast app building.
- Veryfront Templates: Starter templates to kick off your projects.
- Veryfront Figma Kit: A Figma library packed with components for quick prototyping
You can try everything for free for an unlimited time and upgrade to a paid plan when your app is ready to go live.
Thanks, good question. Eventually yes but atm the focus is on React and enabling one seamless development process. We aim to eventually enable all types of javascript stacks.
I'm really into audio production, and I would re-record the video without using a mechanical keyboard, and ideally not in an echo-y room. It's not very watchable right now. In addition to using a noisy keyboard not appropriate for video recording, you type very hard / angrily. Switching to a quieter keyboard with low key travel might help you prevent RSI in the future.
Low key travel will probably make it worse if you don’t have an effective way to learn modify your behavior. The substantially lower key travel when Apple rolled out chiclet-style keyboards on MacBook Pros trashed my fingers and wrists.
I don’t think I was a particularly aggressive typer, but I was accustomed to one key travel distance and then it changed significantly. Nowadays I need a keyboard with pretty good key travel. That basically limited laptop options to certain Lenovo models until Apple started increasing the distance with the M1 redesign.
I think assuming why people are down voting and telling people to go to Reddit isn't a particularly high quality comment.
More to the point: in English "angrily" doesn't necessarily mean the subject is emotionally angry, you'll often see phrases like "the waves crashed angrily into the shore" and no one thinks the water is emotional.
You can directly start coding in Veryfront Studio using the same components from the Figma Library as ready-made React components. Having tools for both designers and developers which integrate is key imo.
