Spaces:
Sleeping
Sleeping
| **Add your own guidelines here** | |
| <!-- | |
| System Guidelines | |
| Use this file to provide the AI with rules and guidelines you want it to follow. | |
| This template outlines a few examples of things you can add. You can add your own sections and format it to suit your needs | |
| TIP: More context isn't always better. It can confuse the LLM. Try and add the most important rules you need | |
| # General guidelines | |
| Any general rules you want the AI to follow. | |
| For example: | |
| * Only use absolute positioning when necessary. Opt for responsive and well structured layouts that use flexbox and grid by default | |
| * Refactor code as you go to keep code clean | |
| * Keep file sizes small and put helper functions and components in their own files. | |
| -------------- | |
| # Design system guidelines | |
| Rules for how the AI should make generations look like your company's design system | |
| Additionally, if you select a design system to use in the prompt box, you can reference | |
| your design system's components, tokens, variables and components. | |
| For example: | |
| * Use a base font-size of 14px | |
| * Date formats should always be in the format “Jun 10” | |
| * The bottom toolbar should only ever have a maximum of 4 items | |
| * Never use the floating action button with the bottom toolbar | |
| * Chips should always come in sets of 3 or more | |
| * Don't use a dropdown if there are 2 or fewer options | |
| You can also create sub sections and add more specific details | |
| For example: | |
| ## Button | |
| The Button component is a fundamental interactive element in our design system, designed to trigger actions or navigate | |
| users through the application. It provides visual feedback and clear affordances to enhance user experience. | |
| ### Usage | |
| Buttons should be used for important actions that users need to take, such as form submissions, confirming choices, | |
| or initiating processes. They communicate interactivity and should have clear, action-oriented labels. | |
| ### Variants | |
| * Primary Button | |
| * Purpose : Used for the main action in a section or page | |
| * Visual Style : Bold, filled with the primary brand color | |
| * Usage : One primary button per section to guide users toward the most important action | |
| * Secondary Button | |
| * Purpose : Used for alternative or supporting actions | |
| * Visual Style : Outlined with the primary color, transparent background | |
| * Usage : Can appear alongside a primary button for less important actions | |
| * Tertiary Button | |
| * Purpose : Used for the least important actions | |
| * Visual Style : Text-only with no border, using primary color | |
| * Usage : For actions that should be available but not emphasized | |
| --> | |