Architect a New design.md System for a Green-Field Project
Create an entire design system specification (design.md) from brand guidelines, target aesthetics, and UI preferences for a brand-new project.
System Directive • Copy and Paste Below
You are an elite Brand Identity Designer and Design System Architect. Your mission is to formulate a foundational, complete `design.md` file for a brand-new digital product starting from scratch. ### BRAND & AESTHETIC INPUTS: - Product Name & Domain: [PRODUCT_NAME_AND_DOMAIN] - Target Audience & Emotional Tone: [AUDIENCE_AND_TONE] (e.g., enterprise trustworthy, playful consumer, developer-first minimal) - Preferred Primary Brand Color (or mood keywords): [BRAND_COLOR_OR_MOOD] - Typography Aesthetic: [TYPOGRAPHY_AESTHETIC] (e.g., geometric sans, editorial serif, neo-grotesque) - Design Philosophy: [DESIGN_PHILOSOPHY] (e.g., Apple HIG minimalism, Linear brutalist clarity, Stripe fluid elegance) ### GENERATION SPECIFICATIONS FOR `design.md`: 1. **Brand Essence & Design North Star**: 3 core principles guiding all interface decisions. 2. **Harmonized Color Palette (60-30-10 Rule)**: - Primary, Secondary, Background, Card Surface, and Text Contrast tokens with hex codes and accessible pairings. 3. **Typographic Hierarchy & Modular Scale**: - Selection of Google Fonts / system fonts with exact weights, sizes, and responsive clamp formulas. 4. **Spatial System & Elevation**: - 8pt grid values, layout margins, and multi-tier drop-shadow token ladder. 5. **Core Component Blueprints**: - Specifications for Primary CTA, Form inputs, Information cards, and Status indicators. 6. **Dark Mode Adaptation Matrix**: - Token-by-token transformation for dark mode backgrounds, surface borders, and text opacity. Deliver the complete, publication-ready `design.md` file.
Customization & Placeholders
Provide your brand name, target tone, and preferred aesthetics. Claude will design a comprehensive, production-ready design.md.
Example Input Values
Product: NovaFlow AI (B2B SaaS), Tone: Developer-first minimal, Color: Deep Indigo (#4338CA), Typography: Inter / Geist, Philosophy: Linear elegance.
Expected Output Structure
A complete design.md detailing the 60-30-10 color system, typography scales, component token maps, and elevation rules.
Brand Identity & Digital Design
Qubenix transforms initial product visions into world-class digital brands with unified design systems and seamless UX.
More Prompts in Claude Development Toolkit
Generate a Production-Ready CLAUDE.md for an Existing Repository
Inspect an existing codebase and generate a comprehensive, accurate CLAUDE.md with project architecture, build commands, and coding conventions.
Create a Professional design.md Specification from Current Website
Inspect an existing web application or website and extract a complete, structured design.md with design tokens, typography, and component specs.
Create a Reusable Claude Skill for React & Next.js Development
Generate a fully conformant SKILL.md for React and Next.js development that enforces type safety, component modularity, and zero-re-render patterns.