packages/shared-skills/skills/frontend/references/design/_INDEX.md
All reference files live flat in this directory. Three layers:
DESIGN.md structure, creation workflow, validation rules. Always loaded by Phase 0 when no design system exists.Phase 0 runs first (check/create DESIGN.md), then most non-trivial tasks load one Layer A + one Layer B together. See the routing flow in the sibling README.md.
| File | Purpose | Load when |
|---|---|---|
design-system-architecture.md | Defines the 7-section DESIGN.md structure (atmosphere, color tokens, typography scale, spacing system, components, motion, depth). Creation workflow for new and existing projects. Validation rules and memory management. | Phase 0 fires and no DESIGN.md exists in the project. Also load when extracting a design system from existing code. |
From Leonxlnx/taste-skill.
| File | Purpose | Load when |
|---|---|---|
taste-skill.md | Default all-rounder. Premium frontend without forcing one narrow visual style. Has 3 dials: DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY. | The user wants a "good-looking" website/app and gives no specific aesthetic direction. Safe default. |
gpt-tasteskill.md | Stricter, more opinionated. High-variance layouts, stronger GSAP motion, more aggressive anti-slop. Tuned for GPT/Codex. | The user wants something genuinely Awwwards-tier — bold layouts, magnetic interactions, scroll-triggered scenes. Or taste-skill.md results felt "too safe". |
image-to-code-skill.md | Image-first workflow: generate premium reference images → analyze → implement to match. | The user says "generate the design first, then code it", or visual quality is the main challenge. Pair with imagegen-frontend-web.md. |
redesign-skill.md | Audits existing UI and surgically fixes weak layout, spacing, hierarchy, color, type. Does NOT rewrite from scratch. | Existing project + "make this better", "improve the UI", "redesign", "this looks bad". DO NOT use on greenfield. |
soft-skill.md | Polished, calm, expensive-looking. Softer contrast, generous whitespace, premium fonts (Geist, Inter Display), spring motion. | The user says "premium", "luxurious", "calm", "expensive", "spa", "wellness", "boutique", "editorial". Or shows references like Linear, Vercel, Stripe, Apple marketing. |
minimalist-skill.md | Editorial product UI inspired by Notion/Linear. Restrained monochrome palette, crisp structure, generous whitespace. | The user says "minimal", "clean", "Notion-style", "Linear-style", "editorial", "boring is good", "remove decoration". |
brutalist-skill.md | BETA. Mechanical visual language. Swiss typography, sharp contrast, raw structure, experimental composition. | The user says "brutalist", "raw", "Swiss", "experimental", "industrial", "unstyled", "anti-design". |
output-skill.md | Pushes for complete output: no placeholder comments, no // TODO, no skipped implementation, no half-done components. | Stack on top of any other skill when the agent has been lazy or the user complains "you keep leaving things undone". Do not use alone. |
stitch-skill.md | Google Stitch-compatible semantic design rules. Includes the extra DESIGN.md export format. | The user is working with Google Stitch, or explicitly wants Stitch-format output, or wants a DESIGN.md alongside the code. |
| File | Purpose | Load when |
|---|---|---|
imagegen-frontend-web.md | Generates Awwwards-level website design reference images. Strong typography, generous spacing, anti-slop visual discipline. | "Generate a mockup", "design reference image", "show me what it could look like", before any code. Pair with image-to-code-skill.md for the full image-to-code flow. |
imagegen-frontend-mobile.md | Generates premium mobile app screen concepts and flows. iOS, Android, cross-platform. Phone mockup framing, multi-screen consistency. | Mobile app screen mockups, app flow images, iOS/Android UI references — image only, no code. |
imagegen-brandkit.md | Generates premium brand-kit overview images: logo concepts, color systems, typography specimens, mockups, identity boards. | Brand identity moodboard, logo direction, full brand-kit board. Image only. |
taste-skill, gpt-tasteskill, minimalist-skill, brutalist-skill, soft-skill, redesign-skill, image-to-code-skill). They encode opposite philosophies — picking two creates contradictions.output-skill.md and stitch-skill.md stack on top of any style skill. They add discipline and output format, not visual direction.image-to-code-skill.md pairs with one imagegen skill for the full flow.From VoltAgent/awesome-design-md, based on Google Stitch DESIGN.md format. Each file captures one website's complete visual language: color palette, typography, components, layout principles, depth, do/don't, responsive behavior, and an agent prompt guide.
When the user says "make it look like [Brand]", "[Brand]-style", "like [Brand]'s site", or shows that brand's site as a reference, load the corresponding <brand>.md file and treat it as the project's design system. Combine with one Layer A taste-skill for execution discipline.
Each file ships with: visual theme, hex color palette + semantic roles, full type hierarchy, button/card/input/nav specs with hover/active states, spacing scale, shadow system, do/don't list, breakpoints, and a ready-to-use agent prompt.
| File | Aesthetic |
|---|---|
claude.md | Anthropic's AI assistant. Warm terracotta accent, parchment canvas, literary salon mood, clean editorial layout. |
cohere.md | Enterprise AI platform. Vibrant gradients, data-rich dashboard aesthetic. |
elevenlabs.md | AI voice platform. Dark cinematic UI, audio-waveform aesthetics. |
minimax.md | AI model provider. Bold dark interface with neon accents. |
mistral.ai.md | Open-weight LLM provider. French-engineered minimalism, purple-toned. |
ollama.md | Run LLMs locally. Terminal-first, monochrome simplicity. |
opencode.ai.md | AI coding platform. Developer-centric dark theme. |
replicate.md | Run ML models via API. Clean white canvas, code-forward. |
runwayml.md | AI video generation. Cinematic dark UI, media-rich layout. |
together.ai.md | Open-source AI infrastructure. Technical, blueprint-style design. |
voltagent.md | AI agent framework. Void-black canvas, emerald accent, terminal-native. |
x.ai.md | Elon Musk's AI lab. Stark monochrome, futuristic minimalism. |
| File | Aesthetic |
|---|---|
cursor.md | AI-first code editor. Sleek dark interface, gradient accents. |
expo.md | React Native platform. Dark theme, tight letter-spacing, code-centric. |
lovable.md | AI full-stack builder. Playful gradients, friendly dev aesthetic. |
raycast.md | Productivity launcher. Sleek dark chrome, vibrant gradient accents. |
superhuman.md | Fast email client. Premium dark UI, keyboard-first, purple glow. |
vercel.md | Frontend deployment platform. Black and white precision, Geist font. |
warp.md | Modern terminal. Dark IDE-like interface, block-based command UI. |
| File | Aesthetic |
|---|---|
clickhouse.md | Fast analytics database. Yellow-accented, technical documentation style. |
composio.md | Tool integration platform. Modern dark with colorful integration icons. |
hashicorp.md | Infrastructure automation. Enterprise-clean, black and white. |
mongodb.md | Document database. Green leaf branding, developer documentation focus. |
posthog.md | Product analytics. Playful hedgehog branding, developer-friendly dark UI. |
sanity.md | Headless CMS. Red accent, content-first editorial layout. |
sentry.md | Error monitoring. Dark dashboard, data-dense, pink-purple accent. |
supabase.md | Open-source Firebase alternative. Dark emerald theme, code-first. |
| File | Aesthetic |
|---|---|
cal.md | Open-source scheduling. Clean neutral UI, developer-oriented simplicity. |
intercom.md | Customer messaging. Friendly blue palette, conversational UI patterns. |
linear.app.md | Project management for engineers. Ultra-minimal, precise, purple accent. |
mintlify.md | Documentation platform. Clean, green-accented, reading-optimized. |
notion.md | All-in-one workspace. Warm minimalism, serif headings, soft surfaces. |
resend.md | Email API for developers. Minimal dark theme, monospace accents. |
zapier.md | Automation platform. Warm orange, friendly illustration-driven. |
| File | Aesthetic |
|---|---|
airtable.md | Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic. |
clay.md | Creative agency. Organic shapes, soft gradients, art-directed layout. |
figma.md | Collaborative design tool. Vibrant multi-color, playful yet professional. |
framer.md | Website builder. Bold black and blue, motion-first, design-forward. |
miro.md | Visual collaboration. Bright yellow accent, infinite canvas aesthetic. |
webflow.md | Visual web builder. Blue-accented, polished marketing site aesthetic. |
| File | Aesthetic |
|---|---|
binance.md | Crypto exchange. Bold Binance Yellow on monochrome, trading-floor urgency. |
coinbase.md | Crypto exchange. Clean blue identity, trust-focused, institutional feel. |
kraken.md | Crypto trading platform. Purple-accented dark UI, data-dense dashboards. |
mastercard.md | Global payments network. Warm cream canvas, orbital pill shapes, editorial warmth. |
revolut.md | Digital banking. Sleek dark interface, gradient cards, fintech precision. |
stripe.md | Payment infrastructure. Signature purple gradients, weight-300 elegance. |
wise.md | International money transfer. Bright green accent, friendly and clear. |
| File | Aesthetic |
|---|---|
airbnb.md | Travel marketplace. Warm coral accent, photography-driven, rounded UI. |
meta.md | Tech retail store. Photography-first, binary light/dark surfaces, Meta Blue CTAs. |
nike.md | Athletic retail. Monochrome UI, massive uppercase Futura, full-bleed photography. |
shopify.md | E-commerce platform. Dark-first cinematic, neon green accent, ultra-light display type. |
starbucks.md | Coffee retail flagship. Four-tier earth-green system, warm cream canvas, SoDoSans typography. |
| File | Aesthetic |
|---|---|
apple.md | Consumer electronics. Premium white space, SF Pro, cinematic imagery. |
ibm.md | Enterprise technology. Carbon design system, structured blue palette. |
nvidia.md | GPU computing. Green-black energy, technical power aesthetic. |
pinterest.md | Visual discovery platform. Red accent, masonry grid, image-first. |
playstation.md | Gaming console retail. Three-surface channel layout, cyan hover-scale interaction. |
spacex.md | Space technology. Stark black and white, full-bleed imagery, futuristic. |
spotify.md | Music streaming. Vibrant green on dark, bold type, album-art-driven. |
theverge.md | Tech editorial media. Acid-mint and ultraviolet accents, Manuka display type. |
uber.md | Mobility platform. Bold black and white, tight type, urban energy. |
vodafone.md | Global telecom brand. Monumental uppercase display, Vodafone Red chapter bands. |
wired.md | Tech magazine. Paper-white broadsheet density, custom serif, ink-blue links. |
| File | Aesthetic |
|---|---|
bmw.md | Luxury automotive. Dark premium surfaces, precise German engineering aesthetic. |
bugatti.md | Luxury hypercar. Cinema-black canvas, monochrome austerity, monumental display type. |
ferrari.md | Luxury automotive. Chiaroscuro black-white editorial, Ferrari Red with extreme sparseness. |
lamborghini.md | Luxury automotive. True black cathedral, gold accent, LamboType custom Neo-Grotesk. |
renault.md | French automotive. Vivid aurora gradients, NouvelR proprietary typeface, zero-radius buttons. |
tesla.md | Electric vehicles. Radical subtraction, cinematic full-viewport photography, Universal Sans. |
apple.md, stripe.md, vercel.md, linear.app.mdnotion.md, wired.md, claude.mdnike.md, bugatti.md, vodafone.mdrunwayml.md, elevenlabs.md, superhuman.md, shopify.mdvercel.md, warp.md, voltagent.md, ollama.mdairbnb.md, notion.md, intercom.md, mastercard.mdsentry.md, kraken.md, posthog.md, clickhouse.mdnike.md, uber.md, tesla.md, binance.mdfigma.md, airtable.md, zapier.md, lovable.md