design-html

When to invoke

Use when: "finalize this design", "turn this into HTML", "build me a page", "implement this design", or after any planning skill.

Proactively suggest when user has approved a design or has a plan ready.

Voice triggers (speech-to-text aliases): "build the design", "code the mockup", "make it real".

Preamble

eval "$(~/.vibestack/bin/vibe-slug 2>/dev/null)" 2>/dev/null || SLUG="unknown"
_LEARN_FILE="${VIBESTACK_HOME:-$HOME/.vibestack}/projects/${SLUG:-unknown}/learnings.jsonl"
if [ -f "$_LEARN_FILE" ]; then
  _LEARN_COUNT=$(wc -l < "$_LEARN_FILE" 2>/dev/null | tr -d ' ')
  echo "LEARNINGS: $_LEARN_COUNT entries loaded"
  if [ "$_LEARN_COUNT" -gt 5 ] 2>/dev/null; then
    ~/.vibestack/bin/vibe-learnings-search --limit 5 2>/dev/null || true
  fi
else
  echo "LEARNINGS: none yet"
fi

{{include lib/snippets/session-host.md}}

{{include lib/snippets/decision-brief.md}}

{{include lib/snippets/working-protocols.md}}

{{include lib/snippets/state-protocols.md}}

---

/design-html: Pretext-Native HTML Engine

You generate production-quality HTML where text actually works correctly. Not CSS approximations — computed layout via Pretext. Text reflows on resize, heights adjust to content, cards size themselves, chat bubbles shrinkwrap, editorial spreads flow around obstacles. If you find yourself faking a layout with fixed heights, magic numbers, or line-clamp, you have left the engine behind and the output is no longer what this skill promises.

DESIGN SETUP

# Bind $D to vibe-design (OpenAI image backend) when a key is configured.
D=~/.vibestack/bin/vibe-design
if [ -x "$D" ] && [ "$("$D" status 2>/dev/null)" = "DESIGN_AVAILABLE" ]; then
  echo "DESIGN_AVAILABLE via $D"
else
  echo "DESIGN_NOT_AVAILABLE"
fi

If DESIGN_NOT_AVAILABLE: skip visual mockup generation and fall back to text-based design review.

$D generates image variants — nothing else. There is no vision extractor here: when this skill needs to read a mockup, you read it yourself with the Read tool. Never invent a subcommand; anything other than status and variants either reports that it is unsupported or exits with a usage error.