# dewu-wireframe-flow

**Repository Path**: Marco_makke/dewu-wireframe-flow

## Basic Information

- **Project Name**: dewu-wireframe-flow
- **Description**: a skill for dewu app wireframe design template
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2026-04-29
- **Last Updated**: 2026-05-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Overview

A skill that generates mid-fidelity wireframe flow canvases from PRDs / feature specs, strictly following the Dewu (得物) design system. Works with both **Claude Code** and **Hermes Agent** runtimes.

Produces a single HTML file with:

- Paper-style canvas + dot grid
- Outlined iOS phone mockups (iPhone 15 Pro · 393×852)
- Dashed arrow connectors across 3–6 horizontal rails
- Annotation labels (ID / name / bullet notes)
- Dashed-outline interaction hotspots
- Dewu DS tokens: aurora blue `#01C2C3` · N20–N140 neutrals · `#FF4F66` red · 5/10/20pt padding · 2/8/999 radius · H1–M2 type scale · DIN / Helvetica Neue Condensed Bold for display numbers
- **No handwritten fonts** (enforced by SKILL.md rules)

All tokens and component behaviors are verified against an internal Dewu design source via Figma MCP.

## Install · Claude Code

Clone directly into Claude Code's user skills directory:

```bash
git clone <repo-url> ~/.claude/skills/dewu-wireframe-flow
```

Restart Claude Code or run `/skill` to have the skill recognized.

## Install · Hermes Agent

Hermes uses a slightly different skill format (`~/.hermes/skills/<category>/<name>/`, extra frontmatter fields, `references/` folder name). A build script produces a Hermes-compatible copy from this source:

```bash
# clone the repo somewhere convenient (e.g. ~/src/)
git clone <repo-url> ~/src/dewu-wireframe-flow
cd ~/src/dewu-wireframe-flow

# build + install into Hermes skills dir (~/.hermes/skills/design/dewu-wireframe-flow/)
./build-hermes.sh --install
```

Verify with `hermes skills` — the skill should appear under the `design` category.

To update later: `cd ~/src/dewu-wireframe-flow && git pull && ./build-hermes.sh --install`.

## Trigger

The skill auto-invokes when you ask the agent to:

- Design a feature flow / user journey for Dewu
- 画线框稿 / 做功能流程 / 产品流程设计
- Visualize all pages of a feature in one scroll-and-scan canvas

Not intended for hi-fi single-screen UI (use `ui-ux-pro-max`) or Figma-ready specs.

## Files

- `SKILL.md` — skill definition, design rules, atom catalog, recipe
- `reference/example.html` — worked example (心愿便利贴, 12 screens × 5 rails)
- `build-hermes.sh` — build a Hermes-compatible copy from the Claude Code source
- `dist/` — build output (git-ignored)

## Keeping it in sync

Master lives in this repo (Claude Code format). Hermes copy is derived via `build-hermes.sh`. Don't hand-edit the Hermes output — regenerate it. When iterating on rules, edit `SKILL.md` here, commit, push, pull on the other machine, and re-run the build if you're on a Hermes host.

## Related

Pair with the Figma MCP server (`figma-developer-mcp`) to pull real design tokens directly from Figma when extending the rules.