# UI Concept First

> Establishes visual direction from Figma, screenshots, generated references, evidence, or an existing design system before implementation.

- Skill: `mesteriis/ui-concept-first` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add mesteriis/ui-concept-first`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mesteriis/ui-concept-first/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: Mesteriis (https://skillmd.com/u/mesteriis)
- Updated: 2026-08-19
- Page: https://skillmd.com/skills/mesteriis/ui-concept-first

---


# UI Concept First

Establish the visual target before implementation.

## Workflow

1. Read `ui-router` and classify the UI request.
2. Gather evidence first when needed through `ui-research`.
3. Use `frontend-app-builder`, Product Design `ideate`, Figma, ImageGen, or an
   existing screenshot/design system to establish the visual reference.
4. Extract tokens, typography, layout, components, states, and responsive rules
   with `design-system-extractor`.
5. Implement only after the visual direction is clear.
6. Validate with `playwright-visual-qa`.

## Rules

- Do not start major UI implementation from text-only vibes.
- Do not add unapproved large UI sections after concept selection.
- If concept generation is blocked, state the blocker and use the strongest
  available reference.