Boxel supports the generation of unique visual designs that go beyond the standard cookie‑cutter user interface many other vibe‑coding platforms generate. We accomplish this through web‑standard CSS as our layout and styling language. LLMs are trained on a wide variety of web pages for brands and companies—some designed by high‑end agencies using CSS. We have developed a master prompt called Boxel Design Skill that can steer an LLM to extract those high‑end designs and apply them to a Boxel‑generated application. If you are ready to generate a design from scratch or improve the look and feel of a generic UI, turn on the Boxel Design Skill. Access it via the Skill menu below the message box in the AI‑assistant panel.
Choose a new skill. In the search box, type Boxel Design and add it by selecting and clicking OK. Once the skill is added, ask the AI assistant to run a design exploration or design sprint. Describe what you want to design by opening an existing card you wish to redesign or by specifying a new concept you want to vibe‑code. You can provide guideline suggestions to the assistant at this point.
With the Boxel Design Skill enabled, the AI system—armed with design knowledge from agencies like Pentagram or IDEO—will consider various design ideas, layout structures, and color‑and‑branding implications to craft an intentional creative brief before generating code. After you send the message, you will see the design decisions the skill makes.
Once the brief is written, it proceeds to generate or revise code that follows that design direction.
The Boxel Design Skill includes 200 style references (numbered 1–200) that provide a solid starting point for distinctive designs the LLM can generate well.
You are not limited to those 200: if you have a particular brand to emulate, simply describe the brand, inspiration, and some keywords to get a custom style using the same creative‑brief process. We plan to let the community submit their own style references so users can browse looks they like and use our Remix feature or Apply Style button (planned) without writing prompts. Our team has built many websites with these style references to break out of the current, ShadCN‑centric UI era, and we can’t wait to see what you create. View current style references by opening the Boxel Design Guide via the search menu. Feel free to suggest new styles for future revisions.
Generating Sample Content
Boxel AI can generate code and sample data. You can access sample‑data creation in several ways:
- In the Preview panel, click the bar with Isolated, Embedded, and Edit formats.
- Click Choose an Instance (top) and select Fill in Sample Data with AI. The assistant inspects the schema and fills the appropriate fields.
You can also create sample data in bulk by typing into the AI‑assistant panel:
- Use the + function (adds Card Definition to the context) in Code Mode to attach template .gts files.
- Instruct the assistant to generate examples via search‑and‑replace; it produces linked instances without your accepting each one. Click Accept All when finished.
Revise any data by opening the instance in a Preview panel, which auto‑attaches it to the session, and give targeted feedback.
The AI can synthesize fictional characters or populate a card with pre‑existing data. Paste text from Excel, Word, or a website and say “Convert this text into the card.” (PDF and image input is coming soon.) Use search‑and‑replace to update existing cards. Review changes via the diff‑style editor and reject anything that looks off.
By default, when code generation finishes for a multi‑file app, the AI generates sample data to illustrate how the app works. You can delete sample data later or copy template code to another realm where real users will create real data once the template is stable. Additional one‑click tools for these tasks will arrive based on user feedback.
