react-design-draftGenerate React design drafts (4-piece set) from content. Invoke for 'design draft'/'设计稿'/'生成页面'/'信息图'/'知识卡片'/'多图配图'. Do NOT use for editing existing code.
Install via ClawdBot CLI:
clawdbot install edwardwason/react-design-draftGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://img.shields.io/badge/version-5.3.0-blueAudited Sep 8, 2026 · audit v1.0
Generated Sep 8, 2026
自媒体作者在完成公众号文章后，可以使用本技能自动生成信息密度高、视觉统一的封面图和配图。技能会解析文章内容，提取关键信息并匹配布局和视觉风格，确保配图与文章风格一致，提升阅读体验。
市场或内容团队在准备营销邮件、社交媒体帖子或宣传材料时，使用该技能快速将产品介绍、数据报告等内容转化为吸引人的设计稿，加快内容生产流程，保持品牌视觉一致性。
教育和培训领域的从业者，或者知识型博主，需要将课程内容、学习笔记或行业洞察转化为易于传播的信息图或知识卡片。技能能够将复杂内容拆解为清晰的可视化单元，生成多张配图。
分析师或研究员在完成数据报告后，需要将核心数据、趋势和对比结果以更直观的图表形式呈现。此技能能够识别数据内容并提供多种图表类型，生成可编辑的React组件，方便后续调整。
个人品牌顾问、创业者和KOL需要定期在社交媒体上发布视觉吸引的内容以维持关注度。该技能可根据短文内容一键生成风格化的多图组合，帮助个人品牌提升专业形象和传播效率。
将本技能集成到内容创作平台或设计工具中，作为增值功能提供给用户。用户按月或按年订阅，支付固定费用即可无限次生成和编辑设计稿。
为没有设计资源的中小企业提供基于此技能的定制化设计稿生成服务。按每套设计稿（如4张一套）收费，并根据复杂度调整价格。
核心功能开源，吸引开发者贡献和建立社区；高级模板、品牌定制工具或团队协作功能作为付费插件出售。基础版本免费，高级版提供更多功能和优先支持。
💬 Integration Tip
集成时可以先实现自动解析与匹配流程，并预留人机交互环节，以便根据用户偏好进行调整，提升满意度。
Scored Sep 8, 2026
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Tailwind reference tool. Use when working with tailwind in frontend contexts.
A product creation skill based on the "Bee Website Builder" Open API. It is used to create a new product under a specified site language and product group, w...
A product update skill based on the "Bee Website Builder" Open API. It is used to update an existing product under a specified site language and supports upd...
Build WCAG 2.1 AA compliant websites with semantic HTML, proper ARIA, focus management, and screen reader support. Includes color contrast (4.5:1 text), keyboard navigation, form labels, and live regions. Use when implementing accessible interfaces, fixing screen reader issues, keyboard navigation, or troubleshooting "focus outline missing", "aria-label required", "insufficient contrast".
Use when building Vue 3 applications with Composition API, Nuxt 3, or Quasar. Invoke for Pinia, TypeScript, PWA, Capacitor mobile apps, Vite configuration.