generateblocks-layouts

Name: generateblocks-layouts
Author: wpgaurav

github.com/wpgaurav设计与 UI14139 次安装今天更新

代码仓库

关于 generateblocks-layouts

一款使用插件原生区块序列化创建和修复 GenerateBlocks V2 布局的技能，适合需要本地样式、动态内容或 Pro 区块交互的作者，并将设计限定在原生区块内。

主要功能

01原生 GenerateBlocks 序列化
02本地样式与 CSS 一致性
03动态内容与 Pro 区块
04布局预检验证
05实时写入往返校验

适用场景

01构建静态 GenerateBlocks 布局
02创建包含动态数据的布局
03检查生成的区块标记
04验证实时布局更新

安装

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

$npx skills add https://github.com/wpgaurav/generateblocks-skills --skill generateblocks-layouts

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

包含的文件

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

examples/basic/

buttons.html

CLAUDE.md

containers.html

text-icons.html

examples/beta-design-system/

build-kit.js

ink-page.html

ink.design-system.json

local-mail-sink.php

paper-form.html

paper-page.html

paper.design-system.json

README.md

setup-local.php

examples/beta-design-system/patterns/

comparison.html

faq.html

footer.html

hero.html

query.html

signup.html

examples/beta-design-system/theme/

functions.php

index.php

style.css

examples/compound/

cards.html

examples/layouts/

hero-section.html

query-blog-grid.html

examples/svg/

CLAUDE.md

icons.html

references/

_index.md

acf-and-custom-fields.md

animations.md

详细介绍

GenerateBlocks 布局构建器

使用已安装插件的原生序列化功能，构建或修复 GenerateBlocks V2 布局。此技能支持本地样式、动态内容、Pro 区块，以及用户明确要求的共享系统。

仅使用 GenerateBlocks 和核心区块。 将样式保存在原生区块的 styles/css 中，并使用原生 Pro 区块实现交互。请勿引入 Scripts Manager、Page Block、Custom HTML/CSS/JS、其他构建器或主题/插件代码来完成 GenerateBlocks 设计。外部实现需要用户明确提出要求。对于原生区块不支持的效果，请简化处理。

仅阅读任务所需内容

生成标记之前，请阅读 authoring-contract.md。该文档涵盖范围提示词、ID、区块、序列化、CSS 一致性、响应式基础知识和验证规则。使用 _index.md 选择其他参考资料。对于常规静态布局，无需加载整个资料库或恢复目录；对于熟悉的 Element/Text 布局，且只使用常规状态和原生断点，精简契约已足够。

默认使用本地样式。 除非用户已经做出选择，否则只询问一次是否使用共享 Global Styles 和 Design Tokens。仅在用户明确选择加入后，才添加共享记录或新的共享依赖；保留现有引用。契约中包含准确的提问内容；边缘情况请参阅 styling-scope.md。

工作流程

检查源内容/目标、版本和设计指导。若有真实文章 ID，则使用该 ID；否则使用随机的四位数字区块 ID 作用域。
选择语义化区块，并保留内容/行为。对于新设计，请阅读 design-quality.md；对于动态数据，请阅读 dynamic-tags.md 及其任务指南。
使用原生序列化器或 scripts/gb_serialize.py 生成文件输出。确保可编辑的 styles 与编译后的 css 保持一致。
运行 scripts/preflight.py FILE --id-scope SCOPE，然后在真实编辑器中验证不熟悉的输出。检查可见内容及相关的响应式/交互行为。仅通过静态预检并不能证明编辑器验证通过。
对于实时写入，请先阅读 mcp-publishing.md；创建快照、拼接、读回，并使用 scripts/verify_roundtrip.py 验证。

摘要应简短：说明更改内容、输出路径、所需的 Pro 功能、测试以及任何未经验证的行为。源内容转换不代表已获准发布。

示例和故障处理

将示例用作结构起点；替换其中的 ID、URL 和内容。仅在需要时，从 examples/basic、compound、layouts 或 svg 中选择相关文件。examples/beta-design-system 是选择加入的共享系统示例，不是默认起始模板。

对于恢复/预检失败，请打开 recovery-rules.md 或 troubleshooting.md 中相应的主题。对于不熟悉的属性/标签，请查阅 block-types.md 或已安装的 block.json。请复用脚本，不要重复编写转义表，也不要在此处嵌入另一份区块手册。

支持 Markdown

登录后评论