hermes-agent/skills/creative/baoyu-infographic/references/styles/ui-wireframe.md
Teknium 65c0a30a77 feat(skills): add baoyu-infographic skill — 21 layouts × 21 styles
Port of baoyu-infographic from JimLiu/baoyu-skills (v1.56.1) adapted
for Hermes Agent's tool ecosystem.

Adaptations from upstream:
- Frontmatter: openclaw metadata → hermes metadata
- Usage: slash command syntax → natural language triggers
- Removed EXTEND.md config system (not part of Hermes infrastructure)
- AskUserQuestion → clarify tool (one question at a time)
- Image generation → image_generate tool
- Removed Windows-specific paths
- Simplified file operations to use Hermes file tools
- All 45 reference files (layouts, styles, templates) preserved intact

Attribution preserved per agreement with 宝玉 (Jim Liu):
- author, version, GitHub homepage URL in frontmatter

Co-authored-by: Jim Liu 宝玉 <junminliu@gmail.com>
2026-04-18 12:32:16 -07:00

596 B

ui-wireframe

Grayscale interface mockup style

Color Palette

  • Primary: Grays - light (#E5E5E5), medium (#9CA3AF), dark (#374151)
  • Background: White (#FFFFFF), light gray
  • Accents: Blue for interactive (#3B82F6), red for emphasis

Visual Elements

  • Wireframe boxes and placeholders
  • X marks for image placeholders
  • Simple line icons
  • Grid-based layout
  • Annotation callouts
  • Redline specifications

Typography

  • System fonts
  • Placeholder "Lorem ipsum"
  • UI label style
  • Sans-serif throughout

Best For

Product designs, UI explanations, app concepts, user flow diagrams