draft-wireframe

v1.9.1

Wireframe a screen — ASCII/text by default, or hand-drawn HTML when the user says sketch/whiteboard/graph-paper. Text mode: buildable spec for Form and Prism. HTML mode: self-contained file with graph-paper background, marker headlines, sticky notes, hatched chart placeholders.

Claude Code1 skill

by tonone-aiMIT2.6kupdated 10 hours ago

Source

$ git clone https://github.com/jeremylongshore/claude-code-plugins-plus-skills

Clone the source, then follow the repository's marketplace instructions for your runtime. The plugin root is plugins/ai-agency/tonone/skills/draft-wireframe/ inside the repository.

Layout

plugins/ai-agency/tonone/skills/draft-wireframe/

├── .claude-plugin/plugin.json
└── SKILL.md

Skills1

draft-wireframeSKILL.md

Wireframe a screen — text/ASCII by default, or hand-drawn HTML when the user says "sketch", "hand-drawn", "lo-fi HTML", "whiteboard", "graph paper", or "visual wireframe". Text mode produces a buildable ASCII spec Form and Prism can act on. HTML mode produces a single self-contained file with graph-paper background, marker headlines, sticky-note annotations, and hatched chart placeholders — looks like a designer's whiteboard, commits to nothing.

Manifests1

plugins/ai-agency/tonone/skills/draft-wireframe/.claude-plugin/plugin.json

{
  "name": "draft-wireframe",
  "version": "1.9.1",
  "description": "Wireframe a screen — ASCII/text by default, or hand-drawn HTML when the user says sketch/whiteboard/graph-paper. Text mode: buildable spec for Form and Prism. HTML mode: self-contained file with graph-paper background, marker headlines, sticky notes, hatched chart placeholders.",
  "author": {
    "name": "tonone-ai",
    "url": "https://tonone.ai"
  },
  "repository": "https://github.com/tonone-ai/tonone",
  "license": "MIT",
  "type": "skill",
  "keywords": [
    "draft",
    "skill"
  ]
}