figma-less-ui-design

Create a UI Planning Packet in UX_SPEC.md without a Figma file.

Updated Jan 31, 2026
One-click install
npx skills add https://github.com/gihwan-dev/claude-setup --skill figma-less-ui-design
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: figma-less-ui-design
Source: https://github.com/gihwan-dev/claude-setup/tree/main/skills/figma-less-ui-design
Command: npx skills add https://github.com/gihwan-dev/claude-setup --skill figma-less-ui-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps plan UI for MVPs and prototypes when a Figma file is unavailable, ensuring a concrete UI Planning Packet is created even without traditional design tools.

Core Features & Use Cases

  • Figma-less UI Planning: Generates a structured UI Planning Packet for products without existing Figma designs.
  • Reuse & Delta Strategy: Prioritizes leveraging existing design systems or shipped UIs, minimizing new style invention.
  • Use Case: A startup needs to quickly prototype a new feature but lacks a dedicated designer. This Skill guides the team to define the core UI elements, layout, and interaction patterns necessary for development.

Quick Start

Use the figma-less-ui-design skill to create a UI Planning Packet for a new mobile app feature.

Frequently Asked Questions about figma-less-ui-design

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

FAQPage Schema
How do I plan UI for an MVP without a Figma file?

To plan UI for an MVP without a Figma file, you can generate a structured UI Planning Packet within UX_SPEC.md that defines layout, tokens, states, and handoff requirements for development.

What is the best way to design prototype UI when lacking a dedicated designer?

Designing prototype UI without a dedicated designer involves creating a concrete UI Planning Packet that establishes core elements, layout, and interaction patterns, prioritizing the reuse of existing design systems over inventing new styles.

Can I use existing design systems for UI planning when no Figma file exists?

Yes, when no Figma file exists, UI planning utilizes a reuse and delta strategy that leverages existing design systems or shipped UIs, minimizing new style invention while defining necessary layout and state changes.

How does a UI Planning Packet handle UI handoff for developers?

A UI Planning Packet handles UI handoff by enforcing specific content contracts and section orders within UX_SPEC.md, ensuring developers receive concrete definitions for layout, tokens, and interaction states.

Do I need Figma to create a UI specification for a ui-first delivery strategy?

No, you do not need Figma to create a UI specification for a ui-first delivery strategy, because this advisory approach builds a concrete UI Planning Packet directly within your documentation to guide development.

What are the limitations of planning product UI without traditional design tools?

Planning product UI without traditional design tools requires strict adherence to content contracts and section orders within UX_SPEC.md to ensure layout and token definitions remain concrete enough for accurate development handoff.