261 lines
10 KiB
TypeScript
261 lines
10 KiB
TypeScript
import type { StarterKitDefinition } from "./types";
|
|
|
|
/**
|
|
* Visual presets + UI foundation hints for codegen.
|
|
*
|
|
* Popular stacks (shadcn/ui, MUI, HeroUI, Untitled UI) are **different
|
|
* products** — distinct installs, APIs, and licensing. Presets that share
|
|
* `uiFoundation: "agnostic"` are token themes only; the agent should map
|
|
* tokens onto whatever framework already exists unless greenfield.
|
|
*
|
|
* Mood presets at the bottom mirror legacy DESIGN_FEELS in
|
|
* `preview-assist-ui/src/App.jsx`.
|
|
*/
|
|
export const STARTER_KITS: StarterKitDefinition[] = [
|
|
{
|
|
id: "shadcn-neutral",
|
|
name: "shadcn / Neutral SaaS",
|
|
tagline: "Slate neutrals · minimal chrome · Tailwind-friendly",
|
|
defaults: {
|
|
accentHex: "#6366f1",
|
|
radiusMdPx: 8,
|
|
fontPreset: "inter",
|
|
density: "comfortable",
|
|
},
|
|
customizeFields: ["accent", "radius", "font"],
|
|
uiFoundation: "shadcn-ui",
|
|
foundationNotesForAi:
|
|
"Prefer shadcn/ui patterns when adding UI (Tailwind + Radix primitives; copy components into the repo). Map resolved accent/radius to CSS variables and Tailwind theme as shadcn expects.",
|
|
},
|
|
{
|
|
id: "mui-material",
|
|
name: "MUI (Material)",
|
|
tagline:
|
|
"Enterprise components · Material Design · dashboards & CRM shells",
|
|
defaults: {
|
|
accentHex: "#1976d2",
|
|
radiusMdPx: 4,
|
|
fontPreset: "inter",
|
|
density: "comfortable",
|
|
},
|
|
customizeFields: ["accent", "radius", "font", "density"],
|
|
uiFoundation: "mui-material",
|
|
foundationNotesForAi:
|
|
"Prefer MUI (@mui/material) when scaffolding new screens unless the repo already uses something else. Map accent and corners via createTheme (palette.primary, shape.borderRadius); avoid mixing MUI with a second heavy kit without user consent.",
|
|
},
|
|
{
|
|
id: "heroui-next",
|
|
name: "HeroUI",
|
|
tagline: "Next.js-optimized · React Aria · Tailwind primitives",
|
|
defaults: {
|
|
accentHex: "#006fee",
|
|
radiusMdPx: 12,
|
|
fontPreset: "inter",
|
|
density: "comfortable",
|
|
},
|
|
customizeFields: ["accent", "radius", "font", "density"],
|
|
uiFoundation: "heroui",
|
|
foundationNotesForAi:
|
|
"Prefer HeroUI (@heroui/react) on Next.js greenfield; Tailwind-based with React Aria. Align semantic colors with tokens below via Tailwind/HeroUI theme config.",
|
|
},
|
|
{
|
|
id: "untitled-ui",
|
|
name: "Untitled UI",
|
|
tagline: "Professional SaaS density · React Aria · Tailwind",
|
|
defaults: {
|
|
accentHex: "#444ce7",
|
|
radiusMdPx: 8,
|
|
fontPreset: "inter",
|
|
density: "comfortable",
|
|
},
|
|
customizeFields: ["accent", "radius", "font", "density"],
|
|
uiFoundation: "untitled-ui",
|
|
foundationNotesForAi:
|
|
"Untitled UI is a commercial kit — confirm the user has a license before importing paid sections from Figma handoff. When cleared, follow Untitled UI + React Aria + Tailwind patterns; map tokens to their spacing/color scales.",
|
|
},
|
|
{
|
|
id: "twenty-crm",
|
|
name: "Twenty CRM UI Kit",
|
|
tagline: "CRM density · indigo accent · Radix-aligned semantics",
|
|
defaults: {
|
|
accentHex: "#5f6bf5",
|
|
radiusMdPx: 8,
|
|
fontPreset: "inter",
|
|
density: "comfortable",
|
|
},
|
|
customizeFields: ["accent", "radius", "font", "density"],
|
|
uiFoundation: "agnostic",
|
|
foundationNotesForAi:
|
|
"Twenty-inspired tokens only — do not assume or vendor Twenty OSS unless the user asks. If greenfield with Tailwind, shadcn/ui-class primitives fit well; if repo uses MUI/HeroUI, map tokens there instead.",
|
|
},
|
|
{
|
|
id: "flyonui",
|
|
name: "FlyonUI",
|
|
tagline: "Tailwind + daisyUI semantics + Preline JS",
|
|
defaults: {
|
|
accentHex: "#4f46e5",
|
|
radiusMdPx: 8,
|
|
fontPreset: "inter",
|
|
density: "comfortable",
|
|
},
|
|
customizeFields: ["accent", "radius", "font", "density"],
|
|
uiFoundation: "agnostic",
|
|
foundationNotesForAi:
|
|
"Prefer FlyonUI semantics (daisyUI class names + Preline JS for interactivity) when scaffolding new screens. 800+ copy-paste components available. Use semantic classes like 'btn btn-primary' instead of raw utility classes where possible.",
|
|
},
|
|
{
|
|
id: "warm-minimal",
|
|
name: "Warm minimal",
|
|
tagline: "Soft stone grays · rounded surfaces · editorial spacing",
|
|
defaults: {
|
|
accentHex: "#c2410c",
|
|
radiusMdPx: 10,
|
|
fontPreset: "system",
|
|
density: "comfortable",
|
|
},
|
|
customizeFields: ["accent", "radius", "font", "density"],
|
|
uiFoundation: "agnostic",
|
|
foundationNotesForAi:
|
|
"Warm SaaS mood — tokens only. Respect whichever UI stack exists; prefer centralized CSS/Tailwind variables for neutrals and accent.",
|
|
},
|
|
{
|
|
id: "bold-confident",
|
|
name: "Bold & confident",
|
|
tagline: "High contrast · vivid accent — Stripe / Vercel energy",
|
|
defaults: {
|
|
accentHex: "#f43f5e",
|
|
radiusMdPx: 8,
|
|
fontPreset: "inter",
|
|
density: "comfortable",
|
|
},
|
|
customizeFields: ["accent", "radius", "font", "density"],
|
|
uiFoundation: "agnostic",
|
|
foundationNotesForAi:
|
|
"Bold marketing/product mood — tokens only. Map accent into existing theme; avoid bolting on a new framework if one is already present.",
|
|
},
|
|
{
|
|
id: "fresh-modern",
|
|
name: "Fresh & modern",
|
|
tagline: "Crisp green accent · friendly surfaces",
|
|
defaults: {
|
|
accentHex: "#22c55e",
|
|
radiusMdPx: 10,
|
|
fontPreset: "inter",
|
|
density: "comfortable",
|
|
},
|
|
customizeFields: ["accent", "radius", "font", "density"],
|
|
uiFoundation: "agnostic",
|
|
foundationNotesForAi:
|
|
"Fresh palette mood — tokens only. Align greens with brand accent variables without prescribing a specific component vendor.",
|
|
},
|
|
{
|
|
id: "electric-vivid",
|
|
name: "Electric & vivid",
|
|
tagline: "Purple creative tooling — Figma / Framer mood",
|
|
defaults: {
|
|
accentHex: "#8b5cf6",
|
|
radiusMdPx: 8,
|
|
fontPreset: "inter",
|
|
density: "comfortable",
|
|
},
|
|
customizeFields: ["accent", "radius", "font", "density"],
|
|
uiFoundation: "agnostic",
|
|
foundationNotesForAi:
|
|
"Creative-tool mood — tokens only. Prefer mapping into existing DS before introducing another library.",
|
|
},
|
|
{
|
|
id: "luxury-refined",
|
|
name: "Premium & refined",
|
|
tagline: "Gold accent · tight radius · editorial polish",
|
|
defaults: {
|
|
accentHex: "#d4a853",
|
|
radiusMdPx: 6,
|
|
fontPreset: "inter",
|
|
density: "comfortable",
|
|
},
|
|
customizeFields: ["accent", "radius", "font", "density"],
|
|
uiFoundation: "agnostic",
|
|
foundationNotesForAi:
|
|
"Premium editorial mood — tokens only. Dark chrome often pairs with subtle borders; respect existing stack.",
|
|
},
|
|
{
|
|
id: "anthropic-claude",
|
|
name: "Anthropic / Claude",
|
|
tagline: "Warm terracotta accent · clean editorial layout · serif headers",
|
|
defaults: {
|
|
accentHex: "#d97757",
|
|
radiusMdPx: 8,
|
|
fontPreset: "system",
|
|
density: "comfortable",
|
|
},
|
|
customizeFields: ["accent", "radius", "font"],
|
|
uiFoundation: "agnostic",
|
|
foundationNotesForAi:
|
|
"Claude Design System — Editorial, warm terracotta accent (#d97757), off-white backgrounds (#f9f8f6). Use serif fonts (like Recoleta or a strong serif fallback) for primary headers and clean sans-serif for body. Buttons are rounded, surfaces are separated by subtle hairlines instead of heavy shadows. Read github.com/VoltAgent/awesome-claude-design/blob/main/design-systems/claude/DESIGN.md for specific token semantics.",
|
|
},
|
|
{
|
|
id: "stripe-fintech",
|
|
name: "Stripe / Fintech",
|
|
tagline: "Signature purple gradients · weight-300 elegance · crisp utility",
|
|
defaults: {
|
|
accentHex: "#635bff",
|
|
radiusMdPx: 6,
|
|
fontPreset: "inter",
|
|
density: "comfortable",
|
|
},
|
|
customizeFields: ["accent", "radius", "font", "density"],
|
|
uiFoundation: "agnostic",
|
|
foundationNotesForAi:
|
|
"Stripe Design System — Crisp precision. Signature blurple accent (#635bff). Use incredibly soft, large shadows (0 50px 100px -20px rgba(50,50,93,0.25)) and crisp borders. Typography is tightly tracked, favoring font-weight 400 and 500. Gradients should be used sparingly but impactfully on active states. See github.com/VoltAgent/awesome-claude-design/blob/main/design-systems/stripe/DESIGN.md.",
|
|
},
|
|
{
|
|
id: "vercel-dev",
|
|
name: "Vercel / Developer",
|
|
tagline: "Black and white precision · Geist font · maximum contrast",
|
|
defaults: {
|
|
accentHex: "#000000",
|
|
radiusMdPx: 6,
|
|
fontPreset: "system",
|
|
density: "compact",
|
|
},
|
|
customizeFields: ["accent", "radius", "font", "density"],
|
|
uiFoundation: "agnostic",
|
|
foundationNotesForAi:
|
|
"Vercel Design System — Monochrome, high-contrast, developer-oriented. Use Geist or Geist Mono. The primary accent is solid black (#000) on white, or white on black in dark mode. Extremely sparse use of color, only for status (success, error, warning). Layouts are boxy, defined by 1px solid #eaeaea borders. See github.com/VoltAgent/awesome-claude-design/blob/main/design-systems/vercel/DESIGN.md.",
|
|
},
|
|
{
|
|
id: "linear-app",
|
|
name: "Linear / Productivity",
|
|
tagline: "Ultra-minimal · precise dark UI · purple glow",
|
|
defaults: {
|
|
accentHex: "#5e6ad2",
|
|
radiusMdPx: 8,
|
|
fontPreset: "system",
|
|
density: "compact",
|
|
},
|
|
customizeFields: ["accent", "radius", "font", "density"],
|
|
uiFoundation: "agnostic",
|
|
foundationNotesForAi:
|
|
"Linear Design System — Dark mode first. Very subtle, single-pixel inner borders (box-shadow inset) on surfaces to give them depth. Primary accent is a muted indigo/purple. Backgrounds are deep gray (#111214) rather than pure black. Typography is highly structured, slightly smaller (13px/14px base) for density. See github.com/VoltAgent/awesome-claude-design/blob/main/design-systems/linear.app/DESIGN.md.",
|
|
},
|
|
{
|
|
id: "airbnb-marketplace",
|
|
name: "Airbnb / Marketplace",
|
|
tagline: "Warm coral accent · photography-driven · large rounded UI",
|
|
defaults: {
|
|
accentHex: "#ff385c",
|
|
radiusMdPx: 12,
|
|
fontPreset: "system",
|
|
density: "comfortable",
|
|
},
|
|
customizeFields: ["accent", "radius", "font"],
|
|
uiFoundation: "agnostic",
|
|
foundationNotesForAi:
|
|
"Airbnb Design System — Friendly, consumer-focused. Large touch targets, heavy border-radius (12px+), and a stark contrast between pure white backgrounds and the vibrant 'Rausch' coral accent (#ff385c). Minimal borders, using white space and soft, dispersed shadows for elevation. See github.com/VoltAgent/awesome-claude-design/blob/main/design-systems/airbnb/DESIGN.md.",
|
|
},
|
|
];
|
|
|
|
export function getStarterKit(id: string): StarterKitDefinition | undefined {
|
|
return STARTER_KITS.find((k) => k.id === id);
|
|
}
|