AI Context

Downloadable markdown templates for AI prompts that follow the FRAYT design system.

Use these markdown files as context when prompting AI tools (ChatGPT, Claude, Copilot, Cursor, etc.) to generate UI code, copy, or designs that follow the FRAYT design system.

These templates are plain markdown — paste them directly into your AI prompt, or download and attach them as context files.

Available Templates

Principles
Design pillars, philosophy, brand voice, naming rules, dual-context system, and accessibility standards.
Foundation
Color tokens (light + dark), typography, spacing, effects, iconography, logo, and brand guidelines.
Complete
Everything — principles and foundation combined into a single reference file.

Example Prompt

[Paste frayt-complete.md here]

Build a delivery tracking card component using shadcn/ui with:
- Order ID, status badge, driver name, and ETA
- Use the correct semantic color tokens for status states
- Follow FRAYT design principles (fast, precise, adaptive, scalable)

Keeping Templates Current

These templates must stay in sync with the design system documentation. When updating colors, typography, spacing, principles, or brand guidelines in the docs or globals.css, always verify and update the corresponding template files in public/ai-context/.

The three template files live at:

  • public/ai-context/frayt-principles.md — sourced from Principles docs
  • public/ai-context/frayt-foundation.md — sourced from Foundation docs + app/globals.css
  • public/ai-context/frayt-complete.md — combined (both of the above)

Usage

How to install, configure, and start building with the FRAYT Design System.

Principles

The design pillars, philosophy, and standards that guide every decision in the FRAYT Design System.

On this page

Available TemplatesExample PromptKeeping Templates Current