skills.rest
hungv47
hungv47COMMUNITY
Explore all skills by this author →
Website𝕏@hungv47GitHub

brief-product-ui

Convert a validated map-user-flow into a portable UI specification with design tokens.

14|Updated Apr 1, 2026
Search Tags:#architecture#handoff#design-token#ui-spec#map-user-flow#brief-product-ui
One-click install
npx skills add https://github.com/hungv47/meta-skills --skill brief-product-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: brief-product-ui
Source: https://github.com/hungv47/meta-skills/tree/main/forsvn-dev/skills/product/brief-product-ui
Command: npx skills add https://github.com/hungv47/meta-skills --skill brief-product-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Converts a validated map-user-flow into a portable, brand-token-enabled interface spec that captures screen inventory, a reusable component system, per-state visuals, and a buildable handoff. It emits a SPEC, never rendered UI, and is intended to run after a flow exists and before architect-system work.

Core Features & Use Cases

  • Translates a validated flow into a bounded component taxonomy and screen inventory for downstream agents.
  • Applies DESIGN tokens to colors, spaces, type, and radii across all surfaces and states, ensuring token fidelity and accessibility baselines.
  • Emits a portable handoff artifact that can be consumed by design tools (Figma / Stitch) or coding agents, without rendering pixels.
  • Provides a deterministic handoff surface that supports token application maps, per-screen layout specs, and interaction/state definitions.

Quick Start

Provide a map-user-flow slug and the DESIGN token map to generate the portable UI spec.

Frequently Asked Questions about brief-product-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a validated user flow into a buildable UI specification?▼

You generate a buildable UI specification by bridging a validated map-user-flow artifact with a design token map to produce a portable spec covering screen inventories, component systems, and per-state visuals for downstream handoff.

What is a design token-driven UI spec and when do I need it?▼

A design token-driven UI spec applies colors, spacing, typography, and radii rules across all component states and screens. You need it to enable deterministic handoffs to design tools or coding agents without rendering pixels.

Can I generate a UI spec for Figma or coding agents without rendering pixels?▼

Yes, you can generate a portable handoff artifact for design tools like Figma or coding agents without rendering pixels. The process emits a deterministic SPEC document defining token application maps and per-screen layouts.

Do I need design tokens to generate a component taxonomy and screen inventory?▼

You need design tokens to ensure token fidelity and accessibility baselines across the component taxonomy, but the system can accept placeholders when tokens are absent to still generate the bounded screen inventory.

What are the limitations of generating a UI specification from a user flow?▼

A key limitation is that this process emits a SPEC document and never renders actual UI pixels. It also strictly requires a pre-existing validated map-user-flow artifact to function correctly and generate the buildable handoff.

Related Skills

Explore More Design & Creative Skills→
rashideerashidee
3

specgen-laravel-eloquent-bladehtmx

Generate Laravel specification blueprints from CLAUDE.md, PRD.md, and MOCKUP inputs.

Community
Advanced
AradotsoAradotso
3

design-os-product-planning

Automate product planning, data modeling, UI design, and implementation handoff generation with Design OS.

Official
Intermediate
akornmeierakornmeier
4

prd-to-ux

Convert PRDs into UX specifications with information architecture and wireframe guidance.

Community
Advanced
hasnaxyzhasnaxyz

codegen

Generate framework-ready files and serialized props from json-render UI specifications.

Official
Intermediate