Skip to main content
Design Studio is a gallery of designer-made designs that Sixth builds your app in. Instead of getting a generic AI look, you pick a design and Sixth builds your project with its exact colors, typography, motion, imagery and voice. There are 314 designs across two theme packs (Theme Pack 164 and Theme Pack 150), made with designers from around the world. Every design covers mobile, desktop and landing screens: landing pages, login, paywalls, dashboards, onboarding, image styling, animations and transitions.

​
Opening Design Studio

Design Studio opens in an editor tab. You can open it from:
  • The chat box: click the Design Studio button (palette icon) in the toolbar under the message box.
  • A slash command: type /design-studio in the chat.
  • The command palette: run Sixth: Open Design Studio.
  • What’s new: the Design Studio card on the welcome screen has a Try it out now button.
Sixth can also open it for you. When you ask Sixth to build a frontend (a website, landing page, app, dashboard, portfolio…) without saying how it should look, it opens Design Studio and waits for you to pick a design. A banner at the top says “Sixth is waiting for you to pick a design”. You can also skip it and describe the look you want in the chat instead. The first time you open it, a short introduction explains what Design Studio is. Click Continue to go to the gallery.
  • Search by design name, mood or industry with the search box (“Search designs, moods, industries”).
  • Filter by industry with the chips under the search box (Portfolio, E-commerce, AI tools, Fintech, Social, Fitness / Gym, Gaming and more). The chips scroll sideways, and each one shows how many designs it has.
  • Each card shows the design’s landing page and its mobile home screen, its name, and what it’s best for.
  • The order is shuffled every time you open the gallery, so you see different designs each visit.

​
Viewing a design

Click a card to open the design in the designers’ own viewer. You can browse every screen of the design there, including mobile and desktop layouts. If you move to another design inside the viewer, the button at the top follows along. Click ← All designs to go back to the gallery.

​
Picking a design

Click Use on a card, or Use this design in the viewer.
  • If you opened Design Studio yourself, Sixth adds a line like Use the “SLAB SHOCK” design from Design Studio (design id: …) to your chat box. Add what you want to build and send it.
  • If Sixth opened it while working on a task, the button reads Build with this design. Your pick goes straight back to Sixth and it continues building with it.
Once a design is picked, Sixth fetches its full build brief (stylesheet tokens, fonts, layouts, voice, imagery rules and motion) and follows it while it writes your UI.

​
Themes are a guide, not a template

A design tells Sixth how your app should look and feel. It doesn’t decide what to build. The screens shown in a design (paywalls, leaderboards, onboarding quizzes…) only demonstrate how the design styles those kinds of screens. Sixth builds what your project needs, in the design’s style. For example, if you pick a design that shows a paywall and ask for a portfolio, you get a portfolio (hero, projects, about, contact) that looks unmistakably like that design, without a paywall.

​
Mobile screens

A design’s mobile screens show how it looks on an actual phone: either your website’s mobile view (the responsive layout at phone widths) or a native mobile app (React Native, iOS, Android). Sixth never puts a phone mockup inside a desktop page. On desktop it uses the design’s desktop and landing layouts, and on phones the site itself becomes the mobile layout.
Already know the look you want? Describe it in the chat and Sixth won’t open Design Studio. If you’ve used a design before, mention its design id and Sixth will load that design’s brief directly.