A comprehensive prompt template for creating cohesive, scalable, and production-ready icon sets with complete design specifications. Perfect for UI designers, design system architects, and product teams building consistent visual languages for digital products.
Use this prompt to generate a complete, production-ready icon set with comprehensive design specifications and implementation guidelines. Replace bracketed placeholders with your specific project requirements including platform, visual style preferences, icon count, and categories needed. The output will provide a cohesive icon system with technical specifications ready for design execution and developer handoff. For best results, provide reference examples or mood boards that demonstrate your preferred visual style and complexity level.
Before creating icons, conduct an audit of your interface to identify all icon needs across different contexts—navigation, toolbars, inline with text, empty states, and status indicators. Catalog existing icons if consolidating from multiple sources, noting inconsistencies to address. Define your icon categories based on functional grouping rather than visual similarity—actions, navigation, objects, and statuses work better than grouping by shape. Research platform conventions for your target environment: iOS favors 28x28pt outlined icons with SF Symbols as reference, Android uses 24dp Material Icons, and web applications typically use 16px, 20px, or 24px icons. Determine whether you need a single style or multiple styles for different contexts, such as outlined for default states and filled for selected states. Establish your technical constraints early—will icons be single-color SVGs styled with CSS, multi-color illustrations, or icon fonts—as this affects design approach significantly.
A robust grid system ensures visual consistency and simplifies icon creation. Start with a 24x24px canvas with a 2px padding buffer, leaving a 20x20px live area for actual icon content. Use a 2px baseline grid with keyline shapes as guides: a centered circle at 20px diameter, a centered square at 18x18px, vertical rectangle at 16x20px, and horizontal rectangle at 20x16px. These keylines help maintain consistent visual weight—circular icons align to the circle keyline, square icons to the square keyline, and so on. When designing, prioritize optical balance over mathematical precision: a triangle may need to extend slightly beyond its keyline to appear the same visual weight as a square. Test icons at actual size frequently—what looks good at 200% zoom may fail at 24px. For multi-size exports, design at your base size first, then optically adjust at smaller sizes rather than mechanically scaling, as some details may need simplification at 16px.
Visual consistency distinguishes professional icon sets from amateur collections. Apply uniform stroke weight throughout—if one icon uses 2px strokes, all icons must use 2px strokes. Maintain consistent corner radii by defining rounded, slightly rounded, or sharp corners and applying the rule uniformly. Use consistent angles preferring 45° and 90° angles, avoiding arbitrary rotations that make icons feel unrelated. Ensure similar icons have similar proportions—if a document icon fills 80% of the live area, other object icons should target similar coverage. Create a master icon first as your template, then design variations maintaining its fundamental properties. Build icons from a shared geometric vocabulary using consistent circles, rectangles, and triangles rather than freestyle shapes. Test consistency by viewing all icons together at actual size in grayscale—visual weight differences become immediately apparent when color is removed. When exceptions are necessary for recognition or clarity, document them explicitly as intentional deviations with rationale.
Successful icon implementation requires planning beyond visual design. Choose the right format: inline SVG offers maximum flexibility with CSS styling and animation but increases HTML size; external SVG files can be cached and sprite sheets reduce HTTP requests; icon fonts provide easy styling but have accessibility challenges and rendering inconsistencies; PNG remains necessary for legacy support or performance-critical scenarios. For web applications, implement icons as React/Vue components with built-in accessibility props, size variants, and color customization. Export SVGs with cleaned paths—remove unnecessary groups, flatten transforms, use viewBox instead of width/height attributes, and outline strokes to prevent rendering inconsistencies. Establish a naming convention that includes category and descriptive name like ic-action-delete or icon-nav-home for clarity in large icon sets. Create comprehensive documentation with visual examples, code snippets, accessibility guidelines, and contribution processes for team members adding new icons. Set up automated testing to verify icon file size limits, valid SVG syntax, and consistent viewBox dimensions across the set.
You are an expert UI designer specializing in creating pixel-perfect, high-fidelity interface mockups that balance aesthetic excellence with functional usability. Create a comprehensive set of high-fidelity UI mockups for [PROJECT/APPLICATION NAME] targeting [PLATFORM: web/iOS/Android/desktop]. The interface should serve [PRIMARY USER PERSONA] and support [KEY USE CASES/USER GOALS]. ## Project Context: **Product Overview:** - Application type: [e.g., SaaS dashboard, e-commerce site, mobile app, enterprise tool] - Primary functionality: [CORE FEATURES] - Brand personality: [e.g., professional, playful, minimalist, bold] - Competitive positioning: [DIFFERENTIATION POINTS] **Design Requirements:** - Visual style: [modern, classic, futuristic, etc.] - Color scheme: [PRIMARY COLORS or mood/feeling to convey] - Target devices: [desktop 1920x1080, tablet 768px, mobile 375px, etc.] - Accessibility standards: [WCAG 2.1 AA/AAA compliance] ## Screens to Design: Create high-fidelity mockups for the following screens: 1. [SCREEN NAME 1: e.g., Homepage/Dashboard] 2. [SCREEN NAME 2: e.g., Product listing page] 3. [SCREEN NAME 3: e.g., User profile] 4. [SCREEN NAME 4: e.g., Settings/Configuration] 5. [Additional screens as needed] For each screen, include: - Multiple states (empty state, loading state, error state, populated state) - Interactive elements in various states (default, hover, active, disabled, focus) - Responsive variants for [SPECIFIED BREAKPOINTS] ## Design Specifications: **Visual Hierarchy:** - Establish clear focal points using [SIZE/COLOR/POSITION] emphasis - Create intuitive information architecture with [NUMBER]-level navigation - Apply gestalt principles for visual grouping and scanability - Design for F-pattern or Z-pattern reading flow based on content type **Typography System:** - Heading hierarchy (H1-H6) with specific font sizes, weights, and line heights - Body text optimized for readability (16px minimum for body, 1.5-1.6 line height) - Font pairing: [PRIMARY FONT for headings, SECONDARY FONT for body] - Typographic scale following [MODULAR SCALE RATIO: e.g., 1.25, 1.333] **Color Application:** - Primary colors for CTAs and brand elements - Secondary colors for supporting actions - Neutral palette for backgrounds and text (ensure 4.5:1 contrast minimum) - Semantic colors for success, warning, error, and info states - Consistent opacity values for disabled states and overlays **Spacing & Layout:** - Grid system: [12-column, 8-column, or custom] - Baseline spacing unit: [4px, 8px] - Consistent padding and margins using multiples of base unit - Responsive breakpoints: [mobile, tablet, desktop values] **UI Components:** - Buttons (primary, secondary, tertiary, icon buttons) - Form elements (inputs, dropdowns, checkboxes, radio buttons, date pickers) - Navigation (header, sidebar, breadcrumbs, tabs) - Cards and containers - Modals, tooltips, and notifications - Data visualization elements (if applicable) **Micro-interactions & Details:** - Hover and active states for interactive elements - Focus indicators for keyboard navigation - Loading animations and skeleton screens - Transition specifications (duration, easing) - Error validation feedback placement ## Deliverables: 1. **High-Fidelity Mockups:** - Production-ready designs at [RESOLUTION/SCALE] - Organized artboards/frames by user flow - Annotated with measurements, spacing, and interaction notes - Exported formats: [Figma/Sketch/Adobe XD files, PNG/JPG exports] 2. **Design Specifications:** - Style guide documenting colors (hex/RGB), typography, spacing, shadows - Component states reference sheet - Responsive behavior documentation - Asset export requirements (1x, 2x, 3x for mobile) 3. **Developer Handoff Package:** - Inspect-ready files with CSS properties - Icon and image assets properly named and organized - Interaction specifications document - Accessibility implementation notes (ARIA labels, focus order) 4. **Interactive Prototype:** - Clickable prototype demonstrating key user flows - Transitions between screens - Interactive component states - Shareable link for stakeholder review Ensure the mockups demonstrate: - Visual consistency across all screens - Intuitive user flows requiring minimal cognitive load - Mobile-first responsive design approach - Brand alignment while following current UI trends for 2025 - Accessibility compliance with proper color contrast, touch targets (44x44px minimum), and clear visual affordances
Create comprehensive voice and tone guidelines for [BRAND NAME] in the [INDUSTRY/SECTOR] industry. The brand offers [PRODUCTS/SERVICES] targeting [TARGET AUDIENCE]. Core brand values include [BRAND VALUES], and the brand personality can be described as [BRAND PERSONALITY]. Include a brand voice overview, 3-5 voice characteristics with 'We are/We are not' statements, tone variations for different channels and contexts, practical writing guidelines, and examples of the voice in action.
You are a world-class Design Thinking facilitator. Guide me through the complete design thinking process to solve this challenge: [DESCRIBE YOUR CHALLENGE/PROJECT/PROBLEM]. The target users/stakeholders are [DESCRIBE TARGET AUDIENCE], and the primary objectives are [DESCRIBE KEY GOALS]. I am [BEGINNER/INTERMEDIATE/EXPERT] with design thinking. Please adjust your guidance accordingly.