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.