skills.rest
simota
simotaCOMMUNITY
Explore all skills by this author →
GitHub

Loom

Analyze codebases to generate Figma Make Guidelines.md packages.

68|14|Updated Jan 7, 2026
Search Tags:#prompt engineering#figma#design tokens#codebase analysis#guidelines#ui generation
One-click install
npx skills add https://github.com/simota/agent-skills --skill loom-simota
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Loom
Source: https://github.com/simota/agent-skills/tree/main/loom
Command: npx skills add https://github.com/simota/agent-skills --skill loom-simota

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill bridges the gap between codebases and Figma's Make feature by generating precise guidelines, ensuring design consistency and efficient UI generation.

Core Features & Use Cases

  • Guideline Generation: Analyzes codebases to create Guidelines.md for Figma Make.
  • Prompt Strategy: Designs staged prompt sequences for complex UI generation.
  • Token Alignment: Audits code tokens against Figma Variables for consistency.
  • Use Case: When developing a new feature, Loom analyzes the component library and design tokens, then generates a Guidelines.md file that Make can use to accurately replicate the UI in Figma, ensuring developers and designers are in sync.

Quick Start

Use the Loom skill to analyze the current codebase and generate Figma Make Guidelines.md.

Frequently Asked Questions about Loom

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

FAQPage Schema
How do I generate Figma Make guidelines from an existing codebase?▼

To generate Figma Make guidelines from a codebase, analyze the component library and design tokens to produce a Guidelines.md file. This file ensures Figma Make accurately replicates the UI and keeps developers and designers in sync.

How do I audit design tokens for consistency between code and Figma Variables?▼

Auditing design tokens for consistency between code and Figma Variables involves comparing the codebase tokens against Figma Variables to identify misalignments. Loom performs this token alignment check to ensure design system rules are maintained across both environments.

Can I use staged prompt sequences for complex UI generation in Figma Make?▼

Yes, you can use staged prompt sequences for complex UI generation in Figma Make. Loom designs these staged prompts to break down intricate UI requirements, ensuring the Figma Make feature accurately processes the input and generates the desired interface components.

What is the best way to prepare codebase input for Figma Make?▼

The best way to prepare codebase input for Figma Make is to analyze the codebase and design system rules to generate a precise Guidelines.md package. This ensures design consistency and optimal UI generation by providing Figma Make with structured, accurate input.

Does Loom require specific dependencies or environment setup to analyze codebases?▼

Loom does not require specific external dependencies to analyze codebases and generate Figma Make Guidelines. It operates independently to audit token alignment and design staged prompt sequences based on your existing codebase and design system rules.

Related Skills

Explore More Design & Creative Skills→
ilandahanilandahan
9

atomic-design

Extract Figma design tokens and scaffold atomic UI components.

Community
Advanced
jubalmjubalm
1

shadcn-init

Initialize shadcn/ui in React projects with Tailwind CSS v4 configuration.

Community
Advanced
johnlindquistjohnlindquist
24

figma

Extract design tokens, components, and styles from Figma files.

Community
Intermediate
takapomtakapom

figma

Extract Figma design data and generate React Native components and design tokens.

Community
Advanced