prompt

Data Visualization Layout Specification

Design responsive layouts and interaction patterns for data visualization components with legends, tooltips, and drill-down navigation.

Updated June 2026
The prompt
Design a layout specification for {{chart_type}} visualization in {{product_context}}. Define:

Responsive Layout:
- Desktop layout ({{desktop_width}}px width)
- Tablet layout with {{tablet_behavior}} legend position
- Mobile stack behavior and {{mobile_height}}px height constraint

Data Elements:
- {{series_count}} data series with distinct visual encoding
- Legend placement and behavior (interactive: {{legend_interactive}})
- Axis labels, gridlines, and annotation space

Interactions:
- Hover/tooltip showing {{tooltip_fields}} (delay: {{tooltip_delay}}ms)
- {{interaction_count}} drill-down or filter actions
- Export/download options

Accessibility:
- Data table alternative for {{data_accessibility}}
- Keyboard navigation for data points
- ARIA labels for screen readers

Provide markup/component structure suggestions.
Did it work? Rate this prompt

Variables

Chart type (line, bar, pie, scatter, etc.)
Usage context (dashboard, report, analytics)
Desktop container width in pixels
Tablet legend behavior (side, bottom, hidden)
Mobile chart height constraint
Number of data series
Legend interactive (true/false)
Tooltip fields (e.g., value, label, percentage)
Tooltip appearance delay in ms
Number of interactive drill-down levels
Data type for accessible table (numeric, categorical)

Details

Author

AI Khazna

License

—

Security

—

Type

prompt

Related assets

More curated picks in Design & Creative.

skillclaude_appclaude_codeclaude_api
git clone https://github.com/anthropics/skills && cp -r skills/skills/frontend-design ~/.claude/skills/
Frontend Design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and…★ 4.8 · 2,500+
skillclaude_appclaude_codeclaude_api
git clone https://github.com/anthropics/skills && cp -r skills/skills/slack-gif-creator ~/.claude/skills/
Slack Gif Creator
Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users…★ 4.8 · 2,500+
skillclaude_appclaude_codeclaude_api
git clone https://github.com/anthropics/skills && cp -r skills/skills/web-artifacts-builder ~/.claude/skills/
Web Artifacts Builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui…★ 4.8 · 2,500+
skillclaude_appclaude_codeclaude_api
git clone https://github.com/anthropics/skills && cp -r skills/skills/canvas-design ~/.claude/skills/
Canvas Design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece…★ 4.8 · 2,500+
image stylemidjourneydall-eflux
Photorealistic architecture renders — exteriors, interiors, urban context.
Architectural Render Style Pack
Photorealistic architecture renders — exteriors, interiors, urban context.0+
prompt
Checks color pairs against WCAG contrast rules and suggests accessible fixes.
Accessibility Contrast Checker
Checks color pairs against WCAG contrast rules and suggests accessible fixes.0+

Audit before you install

Run any source through our checks - AI visibility, security, performance, and stack detection.

Automated Web Security Scan

security

PageSpeed Analyzer

performance

AI Content Quality Test

arabic content

AI Agent / MCP Server Tester

ai testing

Site Stack Detector

migration

AI SEO / AEO / GEO Audit

ai visibility

llms.txt Generator

ai visibility

Readability Score

arabic content

Schema / JSON-LD Builder

ai visibility

AI Cost Calculator

ai testing

Headline Analyzer

arabic content

More in Design & Creative