Profile My skills Saved My plugins Edit profile Submit a skill

UI Concept First

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

Mesteriis Updated 0 repo stars
Design & Media

File contents

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.

Mesteriis/Engineering-Bible-AI/tree/main/skills/ui-concept-first commit 5215c04ad2

Browse category

Frequently asked questions

npx skillmds@latest add mesteriis/ui-concept-first