design_section
Design page sections one at a time, ensuring visual consistency with previous sections to build full pages within token limits.
Instructions
Design a single page section that matches previous sections.
Use this tool to build large pages section-by-section, where each section maintains visual consistency with previous ones. This solves the token limit problem by designing one section at a time.
Content language is configurable (default: Turkish).
Chain Workflow:
Design first section (e.g., hero) - no previous_html needed
Design second section with previous_html from step 1
Continue chain, each section matches the previous style
Combine all sections into a complete page
Args: section_type: Type of section to design. Options: - hero: Hero/banner section with headline and CTA - features: Feature showcase grid or list - pricing: Pricing tiers/cards - testimonials: Customer testimonials/reviews - cta: Call-to-action section - footer: Page footer with links - stats: Statistics/metrics display - faq: FAQ accordion section - team: Team members grid - contact: Contact form section - gallery: Image/portfolio gallery - newsletter: Newsletter signup section context: Usage context explaining where/how the section will be used. Example: "Hero section for a Turkish SaaS landing page" previous_html: HTML from previous section for style matching. When provided, Gemini will analyze and match: - Color palette (primary, secondary, background) - Typography (fonts, weights, sizes) - Spacing patterns (padding, margins) - Border radius - Shadow styles - Animation patterns design_tokens: JSON string with explicit design tokens to use. If not provided but previous_html is given, tokens will be extracted automatically. Format: '{"colors": {...}, "typography": {...}, "spacing": {...}}' content_structure: JSON string with section content. Example: '{"headline": "Başlık", "subheadline": "Alt başlık", "cta": "Başla"}' theme: Visual style preset (modern-minimal, brutalist, etc.) vibe: Optional design spirit / persona. Options: - elite_corporate: Precise, luxury corporate - playful_funny: High energy, bouncy, witty - cyberpunk_edge: High contrast, neon, industrial - luxury_editorial: Elegant, spacious, serif-heavy project_context: Project-specific context for design consistency. content_language: Language code for content generation (default: "tr"). Supported: "tr" (Turkish), "en" (English), "de" (German).
Returns: Dict containing: - section_type: Type of section designed - html: Self-contained HTML with TailwindCSS classes - design_tokens: Extracted design tokens for next section in chain - tailwind_classes_used: List of Tailwind classes used - accessibility_features: A11y features implemented - responsive_breakpoints: Breakpoints used - dark_mode_support: Whether dark mode is supported - design_notes: Gemini's design decisions explanation - model_used: Always gemini-3-pro-preview
Example Chain: # 1. Start with hero hero = design_section( section_type="hero", context="Landing page for B2B SaaS" )
# 2. Features section matching hero style
features = design_section(
section_type="features",
previous_html=hero["html"],
design_tokens=json.dumps(hero["design_tokens"])
)
# 3. Pricing section continuing the chain
pricing = design_section(
section_type="pricing",
previous_html=features["html"],
design_tokens=json.dumps(features["design_tokens"])
)
# 4. Combine all sections
full_page = hero["html"] + features["html"] + pricing["html"]
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| vibe | No | ||
| theme | No | modern-minimal | |
| context | No | ||
| auto_fix | No | ||
| section_type | Yes | ||
| use_trifecta | No | ||
| design_tokens | No | {} | |
| previous_html | No | ||
| project_context | No | ||
| content_language | No | tr | |
| content_structure | No | {} | |
| inject_js_fallbacks | No |