SuperAPI AI 工具集

wordpress-mockups

前端与建站

查看项目

更新于 10-15 17:22

技能介绍

用途:在制作 WordPress 管理后台、站点编辑器或任何基于 Gutenberg 的界面 HTML/CSS 原型时,使用该技能获得与官方一致的视觉还原。

主要能力:技能目录包含 SKILL.md、base.css(重置与基础排版)、tokens/(TOKENS.md 与 wordpress-tokens.css 自定义属性)、icons/(ICONS.md 与 321 个 SVG 图标)、components/(COMPONENTS.md 与 12 个组件 HTML)、patterns/(PATTERNS.md 与布局模式,如站点编辑器头部)。令牌覆盖颜色、间距、排版、尺寸、阴影与圆角,间距基于 8px 网格,强调色使用 --wp-admin-theme-color。

使用方式:先查 patterns/ 是否有现成布局,再考虑组件,最后才写自定义 CSS,优先级为 Patterns > Components > Custom CSS。新建 HTML 文件后,将 tokens/wordpress-tokens.css 与 base.css 内容粘贴进 style 块;按需从组件文件复制 CSS 与标记;图标从 icons/svg/{name}.svg 读取并内联,使用 viewBox="0 0 24 24" 并加 fill="currentColor"。组件类名遵循 .components-{name} 与 .components-{name}__{element},修饰符如 .is-primary、.is-compact、.is-pressed。

适用场景:WordPress 后台界面、Site Editor、Gutenberg 相关界面的原型与视觉验证。

限制:资料未提供安装命令、收费方式、平台支持与效果保证;每个原型应自包含,复制而非引用外部文件,避免硬编码颜色与间距。