prompt
CTA Button Hierarchy & Prominence Guide
Define primary, secondary, tertiary button treatments ensuring users grasp action priority and can't miss critical CTAs.
Updated June 2026
The prompt
Create a CTA button hierarchy system for {{product_name}}. Define levels (primary, secondary, tertiary, danger): 1. Visual treatment: Color, border, shadow, size per level 2. Semantic use: When is each level appropriate? (Main action → primary, supporting actions → secondary) 3. Button size: Standard sizes (small, medium, large) and when to use each 4. Icon usage: Does button include icon? Icon placement (left, right, icon-only)? 5. States: default, hover, focus, active, disabled for each level 6. Grouping rules: How many primary buttons per screen/container? Secondary button max count? 7. Label guidelines: Action-oriented verbs, word count, punctuation Provide a visual matrix showing all button combos (level + size + state).
Did it work? Rate this prompt
Variables
Product NameDetails
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