aibdd-uiux-draw
OfficialTurn discovery briefs into auto-drawn UI scenes.
Design & Creative#design tokens#self-correction#export#uiux#frame composition#pencil mcp#scene generation
AuthorWaterball-Software-Academy
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill converts a UI/UX discovery brief into boundary-consistent Pencil design scenes, ensuring every component state and frame composition is drawn from the same acceptance-driven spec.
Core Features & Use Cases
- Automated Pencil drawing from brief SSOT: Builds component-first scenes from design tokens plus the discovery outputs.
- Canonical state combos per frame: Creates frame scenes using only the canonical state combinations defined in the frame composition table.
- Self-check with snapshot + screenshot: Runs up to a 3-round self-correction loop to catch missing states, wrong labels, layout mistakes, and hardcoded colors.
- Exports a single design.pen artifact: Writes the final Pencil nodes to the package root at ${SPECS_DIR}/${current_package_slug}/design.pen for downstream story binding.
Quick Start
Run /aibdd-uiux-draw after completing /aibdd-uiux-discovery so it can draw and export design.pen automatically.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: aibdd-uiux-draw Download link: https://github.com/Waterball-Software-Academy/aixbdd/archive/main.zip#aibdd-uiux-draw Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.