62 lines
2.5 KiB
Markdown
62 lines
2.5 KiB
Markdown
**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
|
|
-->
|