Claude Development Toolkit Intermediate Audience: Founders, UI/UX Designers, Product Architects

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.

#design-md#design-system#branding#style-guide#green-field

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.

Build Your Brand

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.

You are a Principal Software Architect and Lead Developer specialized in configuring AI-assisted coding environments for Claude and Claude Code. Your task is to inspect the existing codebase in this ...
#claude-md#claude-code#repository-audit
View Page →

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.

You are a Principal Design Systems Architect and Lead Frontend Engineer. Your task is to inspect the current website/application styles and DOM implementation to document a single source of truth: a ...
#design-md#design-system#ui-ux
View Page →

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.

You are an expert in Claude Code Extensibility and agentic tool engineering. Your objective is to generate a modular, reusable Claude Skill named `react-frontend-architect` formatted strictly as a va...
#skills#skill-md#react
View Page →