词映 AI导航
工具库Skills 技能
我的收藏
词映 AI导航

Claude Code wireframe for text-based screen layouts

Describe one screen’s hierarchy, layout and components with an outline, ASCII diagram, or Mermaid. Include relevant empty states and responsive changes.

中文

Install in Claude Code

Use Claude Code with the target screen, key states, device scope, and known navigation destinations. The workflow produces a text artifact.

  1. Review `.claude/skills/wireframe/SKILL.md` and its requirements at the pinned GitHub commit.
  2. Create `.claude/skills/wireframe/` in your project and save the reviewed file as `.claude/skills/wireframe/SKILL.md`.
  3. Start Claude Code from that project's root, then select `/wireframe` in the slash menu.

Example task

Screen wire-12 is a library loans list. Use {desktop: 'sidebar and list', mobile: 'single list', empty: 'Browse catalog'}, with the existing route /loans for handoff.

What to check

The draft marks the /loans layout and records {desktop: 'sidebar and list', mobile: 'single list', empty: 'Browse catalog'} for breakpoints and the empty state action.

Original SKILL.md on GitHub · Updated

Frequently asked question

Should a text wireframe choose colors and typefaces?

Use the wireframe for hierarchy, layout, and interactive regions. The visual design can specify color and type later.