0:00
/

Design in CodeYam

Picking a design system and customizing it before any code is written.

Dani demonstrates how she uses CodeYam to design an app from scratch. She starts by pasting her initial prompt and selecting the design help option, with notifications turned on so she gets alerted when the results are ready. The app she wants to build is a gym tracker that a friend asked her for, meant to track how many sessions she trains per week, what type of exercises she does and the weight she uses for each one.

Before generating anything, CodeYam asks her a few questions to narrow down the design: which single screen all the mockups should depict (Dani chooses the home dashboard), how many variants to generate (she asks for six, so she can compare), whether she already has any design assets of her own (she has none) and what tone the set should lean toward. Since she doesn’t yet know exactly what she’s looking for, she chooses to let the proposals span a wide range of styles rather than committing to one direction.

With those answers submitted, she lets CodeYam do its work. The process takes about ten minutes and results in six different mockups of the home dashboard. Dani reviews them, rules out a few, and settles on a color combination she particularly likes, though she isn’t sold on the original typography.

From there she explores the customization options: she can change both the colors and the fonts independently. She decides to keep the chosen color palette and tries out different heading fonts until she lands on “Nonito,” which she finds clean and fitting. The body text already looked good to her in the original mockup, so she leaves it unchanged.

She then saves that design combination. Once saved, CodeYam moves into the next stage: generating the code for that screen and, building on that same visual foundation, automatically creating the rest of the app’s screens.

Discussion about this video

User's avatar

Ready for more?