# Craft UI

> Creates lo-fi wireframes for UI structure and hi-fi mockups for visual directions. Use for landing pages, dashboards, product UI, and app screens. Not for visual identity, copywriting, single-component design, built-UI audits, or code review.

- Skill: `adeonir/craft-ui` (Agent Skill, multi-file: 20 files)
- Install (CLI): `npx skillmds@latest add adeonir/craft-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/adeonir/craft-ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: adeonir (https://skillmd.com/u/adeonir)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/adeonir/craft-ui

---


# Craft UI

Two phases over the brief and the other supplied inputs. The wireframe phase is optional: when it runs, it settles the arrangement and passes it to mockups through `structure.yaml`; without it, each mockup direction chooses its own arrangement.

## Triggers

- **Wireframes** ("plan the layout", "map the screen flow", "arrange the screens", "compare arrangements", "settle the structure first") → [wireframes.md](instructions/wireframes.md)
- **Mockups** ("generate directions", "compare looks", "preview a direction", "try an editorial direction", "adjust the chosen look") → [mockups.md](instructions/mockups.md)

## Workflow

```text
[wireframes] → structure.yaml → mockups → docs/design/mockup.html
      └──────── skipped ────────┘  (each direction picks its own arrangement)
```

Final copy comes after the mockup and is an input to neither phase.