how to create a spec sheet_
Fill in what you know, skip what you don't. The prompt adapts and asks Claude to show you options for anything you leave blank.
Go to coolors.co, find a palette you like, copy it as an array, and paste it here. Or leave blank and Claude will show you options.
Pick one below, paste from Google Fonts, or leave blank for suggestions.
OR PICK ONE YOU LIKE_Dump all your ideas, vibes, features, styles, anything goes.
Build me a design system spec sheet for [project name]. I need TWO outputs. First, render a live visual reference inline in the chat showing: the full color palette as swatches, the typography scale in the actual fonts at actual sizes, every button variant, input states (default/placeholder/focused), card types, badges, tags, avatars at each size, nav bar, links, dividers, border radius scale, and any special vibes components that fit the theme (progress bars, status indicators, toasts, stat counters, CTA blocks, etc.) — all rendered at real sizes with real colors so I can see exactly what I'm building and make decisions visually. Then give me a downloadable .md file with every token and component spec documented with exact values (hex codes, px sizes, font weights, spacing, radius) for developer reference. I don't have a direction yet for colors or fonts. Ask me what type of font I'm looking for (playful, minimal, bold, elegant, retro, elevated, luxury, etc.) and what type of colors I want (bold, neutral, warm, cool, pastel, etc.). Then show me different palette and font options with examples so I can pick before we build the full spec sheet. Ask me any questions if necessary before starting.