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.
System Directive • Copy and Paste Below
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 comprehensive `design.md` file. ### APPLICATION STYLES CONTEXT: - Stylesheet Paths (CSS, SCSS, Tailwind config, tokens.json): [STYLESHEET_PATHS] - Component Library (shadcn/ui, Radix, Headless UI, Custom): [COMPONENT_LIBRARY] - Brand Name & Positioning: [BRAND_NAME] - Target Viewports & Breakpoints: [TARGET_BREAKPOINTS] - Accessibility Target (WCAG 2.1 AA / AAA): [A11Y_TARGET] ### DOCUMENTATION SPECIFICATIONS FOR `design.md`: 1. **Brand Identity & Philosophy**: Core aesthetic, visual tone (e.g. brutalist, modern glassmorphism, enterprise minimal). 2. **Color Palette & Design Tokens**: - Primary, secondary, accent, neutral, surface, background, and destructive colors. - Exact HEX, RGB, and CSS variable / token mapping (e.g., `--primary: #3C32A3`). - Contrast ratios and dark/light mode token variations. 3. **Typography System**: - Font families (Primary body, Headings, Monospace). - Type scale: Font sizes (with responsive `clamp()` formulas), line heights, font weights, and letter-spacing for Display, H1, H2, H3, H4, Body, Small, and Overline. 4. **Spacing & Layout Grid**: - Base spacing scale (4px/8px modular scale). - Container max-widths (Mobile, Tablet, Desktop, Ultrawide). - Responsive breakpoints (e.g., 640px, 768px, 1024px, 1280px, 1600px). 5. **Component Primitives**: - Buttons & Interactive Elements (Primary, Secondary, Ghost, Outline, sizes, hover/active/focus/disabled states). - Cards & Surfaces (Elevation, border radii, box-shadows, specular glass treatments). - Form Inputs & Controls (Fields, checkboxes, radios, focus rings, error validation states). - Badges, Chips & Status Pills. 6. **Navigation & Structural Layouts**: - Header, desktop navbar, mobile drawer menu, and footer layout conventions. 7. **Motion, Animation & Transitions**: - Standard transition durations (150ms, 250ms, 350ms) and easing functions (`cubic-bezier`). - Standard micro-interactions and `prefers-reduced-motion` handling. 8. **Iconography & Asset Rules**: - Standard icon library (Lucide, Heroicons, SVG standards), sizing conventions, and stroke widths. Output the complete, validated `design.md` ready to commit to the repository root or docs folder.
Customization & Placeholders
Provide your CSS paths and component library. Claude will generate a comprehensive design.md with design tokens, typography scales, and component specs.
Example Input Values
Stylesheets: css/qubenix-theme.css + tailwind.config.js, Library: shadcn/ui, Brand: Qubenix AI, Breakpoints: 640/768/1024/1280/1600, A11y: WCAG 2.1 AA.
Expected Output Structure
A complete design.md file detailing color tokens, typography scales, button states, spacing scales, and responsive guidelines.
UI/UX & Modern Web Experiences
Qubenix crafts bespoke digital experiences with cohesive design systems, fluid typography, and pixel-perfect responsiveness.
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 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.
Create a Claude Skill for Debugging Production Errors & Stack Traces
Generate a SKILL.md that equips Claude with a systematic root-cause analysis workflow to isolate, reproduce, and fix production bugs safely.