> ## Documentation Index
> Fetch the complete documentation index at: https://docs.codejet.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Start building awesome websites in under 5 minutes

<Steps>
  <Step title="Start with the Jet UI Design System in Figma">
    Kick off your design in Figma using the Jet UI Design System. This toolkit features over 100 components, sections, and templates, allowing you to quickly assemble the layout for your website. Explore the design system [here](https://www.figma.com/community/file/1364964277652829877/jet-ui-design-system-by-codejet-ai).
  </Step>

  <Step title="Use the Assistant Figma Plugin">
    Install the Assistant Figma Plugin from the Figma store to convert your designs into code right within Figma. Just select your design and let the plugin transform it into HTML, CSS, or JavaScript. Get the plugin [here](https://www.figma.com/community/plugin/1276157706852546687/codejet-ai-ai-figma-to-code-generation).
  </Step>

  <Step title="Edit in the Visual Editor">
    View and tweak your generated code using the Visual Editor. This tool lets you make changes visually and see them update in real time, simplifying the editing process.
  </Step>

  <Step title="Deploy Your Website">
    Ready to go live? Publish your site either on your own domain or via Codejet's hosting. Check the "Launch" options in your dashboard to get started.
  </Step>
</Steps>

## Video overview

Here is a short vide overview on how Codejet works:

<Frame type="glass">
  <iframe width="560" height="415" src="https://www.youtube.com/embed/b82QGj0BWH8?si=7OrkIFLGLpdAqA-1" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen style={{ width: '100%' }} />
</Frame>