Workflows

A workflow is the starting point of a project. It tells FIVE STACK what you are bringing (a Figma file, existing code or just an idea) and what you expect back (frontend, backend, a bot or a responsive version of your code).

Figma to Frontend

Convert a Figma file to frontend code.

Drop in your Figma file, pick your stack and get clean frontend code back. For FiveM and RedM this means NUI-ready interfaces — menus, HUDs, shops and panels — that match your design.

Use it when the design is done and you need the UI built. See Figma to Code.

Figma to Frontend + Backend

Convert your Figma design to frontend & backend code.

The same design import, plus the logic behind it. Frontend and backend are generated in one shot — database, API routes and auth included.

Use it when the design should become a complete, working feature rather than a static UI.

From Scratch

Build a script entirely with prompts. Most used.

No design file, no existing code — describe what you need and FIVE STACK builds it. This is the most used workflow and the natural fit for server resources: jobs, garages, shops, admin panels or a whole roleplay feature.

Tips for a good first prompt:

• Name the framework: ESX, QBCore or QBX.
• Describe the gameplay, not just the feature name — "impound with a fee and a release timer" beats "impound".
• Say whether you need a UI (NUI) and roughly what it should show.

Discord Bot

Build a Discord bot with Python or Node.js. New.

Describe the commands and behaviour you want and pick Python or Node.js. Useful for the tooling around a game community — support, announcements, whitelisting or server status.

Make it Responsive

Upload your code and make it fully responsive. New.

Bring existing frontend code and let FIVE STACK adapt it to every screen size. A quick way to fix a UI that only works at one resolution.

Which plan do I need?

Every plan can start a project, but some features are plan-dependent:

Feature	Starter	Pro and above
Output	HTML + Tailwind	All frameworks (Next.js, Nuxt, Vue…)
Figma import	—	✓
Full-stack generation	—	✓
AI iterative edits	—	✓
Live preview & ZIP download	✓	✓

See Plans, billing & refunds or the pricing overview.