mcpField
G
generating-components

generating-components

github.com/fusengine设计与 UI3445 次安装2 周前更新
代码仓库

关于 generating-components

这是一套在设计系统与文案准备完成后，使用 Gemini Design 生成 HTML/CSS 组件的工作流技能。它面向设计师和开发者，涵盖灵感调研、模式选择、变体与布局组合，以及迭代调整。

主要功能

  1. 01生成前检查设计系统
  2. 02通过浏览器调研设计灵感
  3. 03搜索 21st.dev 组件模式
  4. 04为 Gemini 准备高级模式提示词
  5. 05定义变体并组合布局
  6. 06迭代调整 Gemini 前端输出

适用场景

  1. 01在设计令牌和文案就绪后生成组件
  2. 02探索符合行业特点的视觉参考
  3. 03创建尺寸、状态和颜色变体
  4. 04通过多轮调整完善生成布局

MCP 相关

使用 MCP 工具进行浏览器调研、搜索 21st.dev 组件灵感，以及生成和修改 Gemini 前端内容。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/fusengine/agents --skill generating-components

安装后在 Claude Code 中输入/generating-components确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
21st-dev.md
buttons-guide.md
cards-guide.md
component-composition-ref.md
component-examples.md
component-variants-ref.md
design-patterns.md
forms-guide.md
gemini-design-workflow.md
gemini-feedback-loop.md
gemini-tool-signatures.md
grids-layout.md
icons-guide.md
references/layouts/
page-architecture.md
references/layouts/navigation/
footer.md
mobile-nav.md
navbar.md
sidebar.md
references/layouts/pages/
auth-login.md
auth-register.md
dashboard.md
error-pages.md
onboarding.md
profile.md
settings.md
references/layouts/patterns/
command-palette.md
data-table.md
empty-state.md
modal-dialog.md
toast-notifications.md

详细介绍

第 3 阶段：生成组件 — 使用 Gemini Design 构建 UI

时间

第 0–2 阶段完成后。必须已创建 design-system.md、tokens 和 copy-guide.md。

输入（来自第 0–2 阶段）
  • 包含 OKLCH 调色板、排版和动效风格的 design-system.md。
  • 第 1 阶段通过 fuse-browser 浏览获得的 CSS 精确观察结果（oklch 值、clamp 尺寸、网格比例）。
  • 第 2 阶段提供的 copy-guide.md（语气、CTA、微文案）。
步骤
  1. 生成前检查清单 — 确认：design-system.md 存在、已定义 OKLCH tokens、已设置字体搭配、已设置动效配置、已参考 visual-technique-matrix。
  2. 浏览灵感 — 在符合行业特点的网站上使用 mcp__fuse-browser__browser_open，然后使用 mcp__fuse-browser__browser_navigate + mcp__fuse-browser__browser_screenshot（参见 ../1-designing-systems/references/design-inspiration.md 和 ../1-designing-systems/references/design-inspiration-urls.md）。新项目：4 个网站。新页面：2 个网站。新组件：1 个网站。
  3. 搜索 21st.dev — 使用 mcp__magic__21st_magic_component_inspiration 搜索组件模式。
  4. 阅读高级模式 — 阅读 references/premium-patterns/PATTERNS.md，选择 2–3 个符合行业特点的模式，然后阅读对应的 description.md。复制每个模式中的 “Gemini Context Prompt” 部分。
  5. 为 Gemini 准备 7 个 XML 块：<aesthetics>、<typography>、<color_system>、<spacing>、<layout>、<states>、<forbidden>。
  6. 生成 — 将 design-system.md tokens 与高级模式上下文提示词结合，使用 mcp__gemini-design__create_frontend。在 context 参数中，始终包含复制的 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. 添加变体 — 按照 references/component-variants-ref.md 添加尺寸、状态和颜色变体。
  8. 组合布局 — 使用 references/layouts/（页面、导航、模式）和 references/component-composition-ref.md。
  9. 迭代 — 按照 references/gemini-feedback-loop.md 使用 mcp__gemini-design__modify_frontend 进行修改。
输出
  • 通过 Gemini 生成的 HTML/CSS 组件，与 design-system.md 中的视觉标识相匹配。
  • 已定义变体（尺寸、状态、颜色）。已组合页面布局。
  • 组件已准备好在第 4 阶段添加动画。
下一步 → 第 4 阶段：添加动画

4-adding-animations/SKILL.md — 添加动效、交互和视觉效果。

参考资料
文件用途
references/gemini-design-workflow.mdGemini MCP 工作流
references/gemini-tool-signatures.mdGemini 工具 API 签名
references/gemini-feedback-loop.md迭代优化流程
references/premium-patterns/PATTERNS.md10 种高级设计模式，附 CSS 规范和 Gemini 提示词
../1-designing-systems/references/design-inspiration.md浏览方法（第 1 阶段）
../1-designing-systems/references/design-inspiration-urls.md行业专用 URL（第 1 阶段）
references/component-variants-ref.md变体模式
references/component-composition-ref.md组合模式
references/layouts/页面布局、导航、模式
references/templates/组件模板（主视觉区、定价等）
references/21st-dev.md21st.dev 组件库
references/shadcn.mdshadcn/ui 集成

评论

支持 Markdown