Where Do We Get Stuck?
It would certainly be convenient if we sketched our imagined web layouts directly on paper. Meanwhile, we need to understand that web design is quite similar to PPT or poster design yet differs fundamentally. They share visual consistency as a common trait, but web design extends far beyond that, making it far more inclusive. You can freely blend diverse styles and present content in unexpected ways for users - speaking of users, interaction design stands as a core element of web design. At times, we must experience things from the user’s perspective.
PowerPoint and Photoshop are common tools for slides and posters. They are easy to pick up, mostly for static content presentation and a limited set of prebuilt animations. For web pages, different frontend frameworks come into play, such as React, Vue, Next.js and Three.js. Surely we can use coding agents to convert natural language into code and visual designs, yet experience tells us this pipeline loses too much information, fundamentally lacking visual references. Therefore, designers tend to use Figma — similar to Photoshop but widely regarded as better for collaboration and file management — to produce visual prototypes, which coding agents then implement. Meanwhile, maintaining part of the design decisions in natural language is also necessary, for instance, maximum page width, font families (preferably no more than 3), color palette, exact positioning of certain components, etc.. Such information can of course also be documented in Figma.
If you don’t want to design directly in Figma, you can also find some inspiring reference websites and ask AI to draw on their templates, blending them with your own design elements. Moreover, some people may use some AI-generated content (images, 3D assets, videos) as visual elements, so choose the ways you like!
Summary of the Workflow:
- Find reference websites
- Use Figma / Figma MCP + AI to create your visual references
- (Generate some visual assets for your webpage, e.g. using GPT-Image, Tripo or Seedance)
- (Document your design decisions in detail)
- Use coding agent to build
- Feedback, refine, iterate