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!
djshah 139 days ago [-]
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!
jillesvangurp 140 days ago [-]
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.
kojiwakayama 140 days ago [-]
Thanks so much Jilles. I really appreciate it!
140 days ago [-]
n144q 140 days ago [-]
For prototyping purpose, how does this compare to other design kits, e.g. Material Design?
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.
tomrod 140 days ago [-]
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?
tomrod 139 days ago [-]
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.
DidYaWipe 138 days ago [-]
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.
sadboi31 139 days ago [-]
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
martinbaun 139 days ago [-]
[flagged]
kojiwakayama 140 days ago [-]
Yes, all components and templates are open source. Both Figma and React components.
baxtr 140 days ago [-]
I would love to have a text box in Figma and then just type in what I want.
"Design a basic login screen. Change red for yellow. Move the layer up front."
Is anyone working on this at Figma?
airstrike 140 days ago [-]
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
kojiwakayama 139 days ago [-]
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.
We’ve since re-enabled it after addressing the underlying issue.
Source: I’m the pm who launched the feature.
tyre 139 days ago [-]
What was the underlying issue? Dylan said there was no training on existing apps which…I mean pretty obviously a lie.
(Or worded in some way that only he knows is “technically true” but functionally a lie.)
jjcm 138 days ago [-]
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.
maximilianthe1 139 days ago [-]
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.
kojiwakayama 140 days ago [-]
Interesting. Are you thinking of an agentic system here?
I like that Figma is not required. Can it dynamically model horizontal scrolling, such as album art and info?
preommr 139 days ago [-]
Any inside scoop on why they sold the company to miro?
kojiwakayama 140 days ago [-]
Great idea to allow prompt based design!
submeta 140 days ago [-]
Isn‘t vercel v0 doing this?
submeta 140 days ago [-]
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?
mattkevan 139 days ago [-]
This is a RAG search I built with NextJS, Pinecone and Langchain. It also uses AI for content tagging and summarisation.
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.
kojiwakayama 139 days ago [-]
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.
submeta 139 days ago [-]
Wow, excellent site. Very useful!
kojiwakayama 140 days ago [-]
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.
140 days ago [-]
nelsonic 140 days ago [-]
Great work as always @kojiwakayama looks superb!
kojiwakayama 140 days ago [-]
Hey Nelson, thank you very much! :)
ThinkBeat 140 days ago [-]
It seems to be a hosting company, that offers goddies
different level of goodies based on the price of the
subsciption?
kojiwakayama 140 days ago [-]
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.
pmg102 139 days ago [-]
Nice work. Tip: you're missing an 'l' from Frequenty Asked Questions
kojiwakayama 139 days ago [-]
Oups. Thanks for spotting! Fixing :)
computergert 139 days ago [-]
Any plans to support Vue as well?
kojiwakayama 139 days ago [-]
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.
stevebmark 139 days ago [-]
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.
kojiwakayama 139 days ago [-]
Thanks Steve for the feedback!
nirvdrum 139 days ago [-]
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.
139 days ago [-]
DidYaWipe 139 days ago [-]
[flagged]
p3rls 139 days ago [-]
Like he has a grudge against his keyboard, angry and dwarflike.
DidYaWipe 139 days ago [-]
[flagged]
tdb7893 139 days ago [-]
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.
DidYaWipe 138 days ago [-]
That's because a person is not operating the water in that statement. In this case, we have a person who was directly accused of typing "angrily."
If "Poseidon angrily pounded the shore with waves," you'd think yes, he's pissed about something.
jeffhuys 139 days ago [-]
Honestly, your comments are much more “Reddit-like” to me than the post/actions you’re referring to.
DidYaWipe 138 days ago [-]
Downvoting everyone and everything with no excuse is Reddit-like to a T.
replwoacause 140 days ago [-]
Looks nice but I just wish every new thing wasn’t React based
kojiwakayama 140 days ago [-]
Thanks for the valid feedback. What is/would be your preferred stack?
trevorhinesley 139 days ago [-]
FWIW I +1 that comment. Great tool, just not my stack. Rails + Hotwire here
kojiwakayama 139 days ago [-]
Rails and Hotwire is a nice stack. Thx!
140 days ago [-]
baxter001 140 days ago [-]
[flagged]
hbarka 140 days ago [-]
FrontPage 98 would like a word.
kojiwakayama 140 days ago [-]
Bringing back good old memories :)
140 days ago [-]
eichi 140 days ago [-]
Why not create crappy frontend to validate demand for MVP then hire a designer? Designer is cheap.
kojiwakayama 140 days ago [-]
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.
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.
https://www.figma.com/community/file/1035203688168086460/mat...
"Design a basic login screen. Change red for yellow. Move the layer up front."
Is anyone working on this at Figma?
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):
https://gist.github.com/airstrike/7ae444de207e679adca7be6faa...
https://gist.github.com/airstrike/e0e47eaab733277b537923c4d3...
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
Source: I’m the pm who launched the feature.
(Or worded in some way that only he knows is “technically true” but functionally a lie.)
Details are here: https://www.figma.com/blog/inside-figma-a-retrospective-on-m...
[0] v0.dev
Disclaimer: the founder is a friend of mine
https://www.uxlift.org/search/
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.
- 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.
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.
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.
If "Poseidon angrily pounded the shore with waves," you'd think yes, he's pissed about something.