Skip to main content
Frontend Developmentfusengine

generating-components

Phase 3: Map design-system.md to 7 Gemini XML blocks (aesthetics, style_reference, typography, color_system, spacing, states, forbidden), call create_frontend, add component variants (Glass/Outline/Flat via CVA).

Stars
13
Source
fusengine/agents
Updated
2026-05-17
Slug
fusengine--agents--3-generating-components
View on GitHubRaw SKILL.md

// install — copy + paste into any project

mkdir -p .claude/skills && curl -fsSL https://raw.githubusercontent.com/fusengine/agents/HEAD/plugins/design-expert/skills/3-generating-components/SKILL.md -o .claude/skills/3-generating-components.md

Drops the SKILL.md into .claude/skills/3-generating-components.md. Works with Claude Code, Cursor, and any agent that loads SKILL.md files from .claude/skills/.

Phase 3: GENERATING COMPONENTS — Build UI with Gemini Design

When

After Phases 0-2 are complete. design-system.md, tokens, and copy-guide.md must exist.

Input (from Phases 0-2)

  • design-system.md with OKLCH palette, typography, motion personality.
  • CSS-precise observations from Phase 1 Playwright browsing (oklch values, clamp sizes, grid ratios).
  • copy-guide.md from Phase 2 (voice, CTAs, microcopy).

Steps

  1. Pre-generation checklist — Verify: design-system.md exists, OKLCH tokens defined, typography pair set, motion profile set, visual-technique-matrix consulted.
  2. Browse inspiration — mcp__playwright__browser_navigate + mcp__playwright__browser_take_screenshot on sector-matching sites (see ../1-designing-systems/references/design-inspiration.md and ../1-designing-systems/references/design-inspiration-urls.md). New project: 4 sites. New page: 2 sites. New component: 1 site.
  3. Search 21st.dev — mcp__magic__21st_magic_component_inspiration for component patterns.
  4. Read premium patterns — Read references/premium-patterns/PATTERNS.md, pick 2-3 patterns matching your sector, then read their description.md. Copy the "Gemini Context Prompt" section from each.
  5. Prepare 7 XML blocks for Gemini: <aesthetics>, <typography>, <color_system>, <spacing>, <layout>, <states>, <forbidden>.
  6. Generate — mcp__gemini-design__create_frontend with design-system.md tokens + premium pattern context prompts combined. In the context parameter, ALWAYS include the copied Gemini Context Prompts + "Visual depth required: hero >= 75vh, 3-level shadows, alternating section backgrounds, glassmorphism nav, typography contrast 3:1 H1 vs body. NO flat design."
  7. Add variants per references/component-variants-ref.md — size, state, color variants.
  8. Compose layouts using references/layouts/ (pages, navigation, patterns) and references/component-composition-ref.md.
  9. Iterate — mcp__gemini-design__modify_frontend per references/gemini-feedback-loop.md.

Output

  • HTML/CSS components generated via Gemini, matching design-system.md identity.
  • Variants (size, state, color) defined. Page layouts composed.
  • Components ready for animation in Phase 4.

Next → Phase 4: ADDING ANIMATIONS

4-adding-animations/SKILL.md — Add motion, interactions, and visual effects.

References

File Purpose
references/gemini-design-workflow.md Gemini MCP workflow
references/gemini-tool-signatures.md Gemini tool API signatures
references/gemini-feedback-loop.md Iterative refinement process
references/premium-patterns/PATTERNS.md 10 premium design patterns with CSS specs + Gemini prompts
../1-designing-systems/references/design-inspiration.md Browsing methodology (Phase 1)
../1-designing-systems/references/design-inspiration-urls.md Sector-specific URLs (Phase 1)
references/component-variants-ref.md Variant patterns
references/component-composition-ref.md Composition patterns
references/layouts/ Page layouts, navigation, patterns
references/templates/ Component templates (hero, pricing, etc.)
references/21st-dev.md 21st.dev component library
references/shadcn.md shadcn/ui integration