Browse by topic

Css prompts

Browse curated AI prompt templates related to css. Each prompt includes reusable variables, examples, and practical workflow ideas.

DesignerChatGPT

Design System Token Generator

Generate design tokens (colors, spacing, typography) for a design system.

Act as a design systems engineer. Generate design tokens for {{product}}. Brand personality: {{personality}} Primary color: {{primary_color}} Platform: {{platform}} Generate tokens for: 1. Colors (primary, secondary, neutral scale, semantic: success/warning/error/info) 2. Typography scale (font family, sizes, weights, line heights) 3. Spacing scale (4px base unit) 4. Border radius scale 5. Shadow scale (3 levels) 6. Breakpoints Output as CSS custom properties AND a JSON token file. Include usage...

DesignerChatGPT

CSS Layout Generator

Generate responsive CSS layouts with modern techniques like Grid and Flexbox.

Create a {{layout_type}} layout in {{framework}} for {{purpose}}. Requirements: {{requirements}} Provide: 1. HTML/JSX structure 2. CSS with {{approach}} (Grid or Flexbox) 3. Responsive breakpoints (mobile, tablet, desktop) 4. Dark mode support 5. Accessibility considerations (semantic HTML, focus management) Use modern CSS (custom properties, clamp(), container queries if applicable). No CSS-in-JS — use standard CSS or Tailwind.