Component Generation Prompts

Why Structured Prompts?

“Make me a pricing section” gives you generic output. Structured prompts with constraints produce production-ready code on the first try. These prompts work with Claude Code, Codex, Cursor, and ChatGPT.

What Usually Breaks

Weak component prompts tend to fail in predictable ways:

• hardcoded Tailwind colors that bypass your token system
• visually polished cards with weak semantic HTML
• missing responsive behavior
• inaccessible controls and vague focus states
• components that look good alone but do not fit the rest of the page

Single Component Prompt

For generating one isolated component:

Create a [COMPONENT TYPE] using only HTML and Tailwind CSS v4 utilities.

Requirements:
- Semantic HTML (use appropriate tags: section, article, figure, nav, etc.)
- Mobile-first responsive (stack on mobile, side-by-side on desktop)
- Accessible: proper headings hierarchy, alt text, aria-labels where needed
- Colors via CSS custom properties, not hardcoded Tailwind colors:
  - Background: var(--color-surface)
  - Text: var(--color-text), var(--color-text-soft), var(--color-text-muted)
  - Primary action: var(--color-primary) / var(--color-primary-text)
  - Border: var(--color-border)
- 8px spacing grid (only use: gap-2, p-4, p-6, p-8, py-12, py-16, py-24)
- Rounded corners: rounded-xl for the card, rounded-lg for inner elements
- No JavaScript, no external dependencies, no images (use placeholder gradients)

Component: [DESCRIBE WHAT YOU WANT]
Content: [PROVIDE REAL OR SAMPLE CONTENT]

Before You Prompt

Define these inputs first:

1. Role: section, card, nav, pricing, testimonial, form
2. Context: where it sits in the page
3. Constraint: token system, spacing rules, accessibility, no-JS rules
4. Real content: offer, CTA, labels, feature names, proof points

If you skip context and content, the model fills them with generic SaaS filler.

Example — Pricing Card

Create a pricing card using only HTML and Tailwind CSS v4 utilities.

Requirements:
[... same as above ...]

Component: A pricing tier card with plan name, price, feature list, and CTA button.
The "Pro" plan should be visually emphasized (primary border, badge).

Content:
- Starter: $0/mo, 5 projects, community support, no custom domain
- Pro: $29/mo, unlimited projects, priority support, custom domain, API access
- Enterprise: $99/mo, everything in Pro + SLA, SSO, audit log

Page Section Prompt

For generating a full page section:

Create a [SECTION TYPE] page section using HTML and Tailwind CSS v4.

Layout: [DESCRIBE THE LAYOUT — e.g., "centered heading, 3-column card grid below"]
Container: max-w-7xl mx-auto px-4 sm:px-6 lg:px-8
Section padding: py-16 lg:py-24
Background: var(--color-surface) [or var(--color-surface-alt) for alternating sections]

Design direction: [STYLE — e.g., "Apple-minimal, generous whitespace"]

Content:
[PROVIDE ACTUAL CONTENT OR DETAILED PLACEHOLDERS]

Constraints:
- Pure Tailwind utilities, no custom CSS
- Colors via CSS custom properties (--color-surface, --color-text, --color-primary, etc.)
- No dark: classes — theming is handled by swapping CSS variable values
- No JavaScript
- Mobile-first: stack everything on mobile, use grid on md/lg
- Heading hierarchy: one h2 for section title, h3 for cards/items

Iterative Refinement Prompts

After initial generation, use these to refine:

Improve Spacing

The section feels cramped. Increase all spacing by one step:
- Section padding: py-16 → py-20, lg:py-24 → lg:py-32
- Card padding: p-4 → p-6
- Grid gap: gap-4 → gap-6
- Heading margin-bottom: mb-4 → mb-8
Keep everything else unchanged.

Add Visual Polish

Add subtle visual refinement to this component:
- Soft border: border border-[var(--color-border)]
- Light shadow: shadow-sm
- Hover state: hover:shadow-md hover:-translate-y-0.5 transition-all duration-200
- Top highlight: first inner element gets a subtle accent-colored top border or dot
Do NOT change the structure or content.

Make Accessible

Review this component for WCAG AA accessibility:
- Add missing aria-labels, roles, and aria-current attributes
- Ensure heading hierarchy is correct (no skipped levels)
- Add sr-only text where visual context is missing for screen readers
- Verify focus states are visible (focus-visible:ring-2 focus-visible:ring-offset-2)
- Add alt="" to decorative images/icons
List what you changed and why.

Full Page Assembly Prompt

Assemble a complete landing page from these sections, in this order:

1. Navbar — sticky, logo left, 4 nav links center, CTA button right
2. Hero — headline, subtitle, two buttons (primary + outline), trust text
3. Logo Cloud — 5-6 company logos (use text placeholders)
4. Features — section title + 3-column card grid, each with icon + title + text
5. How it Works — 3 numbered steps, horizontal on desktop
6. Testimonials — 3 quote cards with name + role + avatar initial
7. Pricing — 3 tiers (Starter/Pro/Enterprise), Pro highlighted
8. FAQ — 5 questions with details/summary accordion
9. CTA — centered headline + single primary button
10. Footer — logo, 3 link columns, copyright

Rules:
- Pure HTML + Tailwind CSS v4, no JS
- Colors via CSS custom properties (--color-surface, --color-text, --color-primary, etc.)
- Alternate section backgrounds: white → surface-alt → white → surface-alt
- 8px spacing grid throughout
- Mobile-first responsive
- One consistent visual style across all sections

Tool-Specific Tips

| Tool | Tip | |------|-----| | Claude Code | Put design rules in CLAUDE.md — they persist across conversations. Use / skills for recurring tasks. | | Codex (OpenAI) | Put rules in AGENTS.md. Codex works well with explicit file paths: “Write to src/components/Hero.html”. | | Cursor | Use .cursorrules for project conventions. Cursor’s inline edit (Cmd+K) is great for refinement prompts. | | ChatGPT | Paste the CLAUDE.md content as “System Instructions” in a Custom GPT for consistent results. | | Windsurf | Use .windsurfrules. Cascade mode handles multi-file generation well. |

Good Refinement Pattern

Use short follow-ups that change one variable at a time.

Bad:

Make it cleaner, more premium, more exciting, and also simpler.

Better:

Keep the structure unchanged.
Increase spacing by one step, reduce accent usage to buttons and badges only,
and simplify each card to one icon, one heading, and one paragraph.

Checklist

• [ ] Prompt specifies semantic HTML requirement
• [ ] Colors use CSS custom properties, not hardcoded values
• [ ] Spacing follows 8px grid
• [ ] Responsive behavior described (mobile-first)
• [ ] Accessibility requirements included
• [ ] “No JavaScript” constraint explicit
• [ ] Real or detailed sample content provided
• [ ] Style direction given (Apple-minimal, bold, etc.)
• [ ] Component role in the page is stated explicitly