DesignIntermediateDesign & UX Pack

Design System Documentation Template

Generate complete design system documentation including design tokens, naming conventions, and handoff notes. Works with ChatGPT, Claude, Gemini. Best for: Design system leads, senior designers, design-engineering teams.

ChatGPTClaudeGemini
Prompt Template
Create a design system documentation template for a SaaS product. Include:

## 1. Design Tokens
- Color tokens (semantic naming: --color-primary, --color-surface, --color-text-muted, etc.)
- Spacing scale (4px base grid, values from 0 to 96)
- Typography scale (xs through 5xl with line-height and letter-spacing)
- Border radius scale
- Shadow scale

## 2. Component Naming Conventions
- File naming pattern
- Component variant naming
- State naming (default, hover, active, disabled, loading, error)
- Prop naming conventions

## 3. Core Components to Document
List with props, variants, and usage guidelines for: Button, Input, Select, Card, Badge, Modal, Toast, Table

## 4. Icon System Guidelines

## 5. Developer Handoff Notes
- What to include in Figma annotations
- Handoff checklist before dev handoff
- How to handle responsive behavior

Product: [product name and type]
Design tool: [Figma / Sketch / Adobe XD]

Customise Variables

2 fields

Fill in the fields below. The prompt preview above updates in real time.

How to Use This Prompt

  1. 1Copy the prompt template using the Copy button above.
  2. 2Open your preferred AI tool — ChatGPT or Claude work well for this.
  3. 3Fill in the variable fields to personalise the prompt for your specific situation.
  4. 4Review the AI output carefully. Edit, fact-check, and adapt before using professionally.
  5. 5For better results, provide follow-up instructions in the same conversation thread.

Replace all bracketed placeholders like [product type] or [audience] with your specific details before sending to the AI. The more specific your inputs, the more tailored and actionable the output will be. Review and refine the AI output — use it as a professional starting point, not a finished deliverable.

Expected Output

Detailed structured documents including layout descriptions, design rationale, typography recommendations, color psychology explanations, and actionable design direction. Outputs are typically 400–1200 words depending on scope.

Open Directly in Your AI Tool

Clicking opens the AI tool in a new tab and copies the prompt to your clipboard automatically.

Frequently Asked Questions

Disclaimer: AI Suggests is independent from the AI tool providers listed. All trademarks belong to their respective owners. Prompt effectiveness may vary across models and versions. Legal, financial, healthcare, and compliance prompts do not replace qualified professional advice. Always review AI-generated output before professional use.

Related Prompts

View all
Design

Landing Page Wireframe Description

Generate a detailed wireframe description for any product landing page with CTA placements and accessibility notes.

Design

Brand Identity Brief Generator

Create a complete brand identity brief including colors, typography, and logo directions for any industry.

Design

Social Media Visual Campaign Brief

Write a complete visual design brief for a social media campaign with format specs and 10 caption variations.

Design

UI Critique Using Nielsen Heuristics

Get expert UI critique with 5 specific improvements based on established usability principles.

← Back to Prompt LibraryBuild a Custom Prompt